/* ══════════════════════════════════════════════════════════════ SIXPRO PRECISION LASERS — premium industrial design system ══════════════════════════════════════════════════════════════ */ :root{ /* surfaces */ --bg: #0B0E11; --bg-alt: #10151B; --surface: #151B22; --surface-2: #1B222B; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); /* type */ --text: #E8EDF3; --text-soft: #B9C4D0; --muted: #8A96A5; /* brand */ --amber: #FF7A18; --amber-2: #FFB020; --amber-d: #E85F05; --grad: linear-gradient(100deg,#FFB020 0%,#FF7A18 55%,#FF5A0F 100%); /* india accent (used sparingly, flagship only) */ --saffron: #FF9933; --green: #138808; /* rhythm */ --wrap: 1240px; --pad: clamp(1.25rem, 4vw, 2.5rem); --sec-y: clamp(4.5rem, 9vw, 8rem); --r: 14px; --r-lg: 20px; --ease: cubic-bezier(.22,.61,.36,1); --shadow: 0 24px 60px -24px rgba(0,0,0,.75); --font-d: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --font-b: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; /* Stops the off-canvas menu inflating the mobile layout viewport. `clip` — not `hidden` — because hidden would force overflow-y to `auto` and turn into a nested scroll container, which breaks the sticky nav and every viewport-rooted IntersectionObserver on the page. */ overflow-x:hidden; overflow-x:clip; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-b); font-size:clamp(.95rem,.9rem + .2vw,1.0625rem); line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; } img,picture,svg,iframe{ max-width:100%; display:block; } img{ height:auto; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; } h1,h2,h3,h4{ font-family:var(--font-d); font-weight:700; line-height:1.03; letter-spacing:-.01em; margin:0 0 .5em; text-transform:uppercase; } h1{ font-size:clamp(2.6rem,7.2vw,5.6rem); } h2{ font-size:clamp(2rem,4.6vw,3.5rem); } h3{ font-size:clamp(1.25rem,1.9vw,1.6rem); } h4{ font-size:1.05rem; letter-spacing:.04em; } p{ margin:0 0 1.1em; } p:last-child{ margin-bottom:0; } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--amber); color:#0B0E11; padding:.75rem 1.25rem; font-weight:600; } .skip-link:focus{ left:0; } :focus-visible{ outline:2px solid var(--amber-2); outline-offset:3px; border-radius:4px; } .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .ico{ width:1em; height:1em; fill:currentColor; flex:none; } /* ─────────────── scroll reveal ─────────────── */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:calc(var(--d,0) * 90ms); } .reveal.in{ opacity:1; transform:none; } /* ─────────────── buttons ─────────────── */ .btn{ --btn-bg:transparent; display:inline-flex; align-items:center; justify-content:center; gap:.55em; padding:.85rem 1.6rem; border:1px solid transparent; border-radius:999px; font-weight:600; font-size:.9rem; letter-spacing:.03em; cursor:pointer; position:relative; overflow:hidden; transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease); will-change:transform; } .btn .ico{ width:1.1em; height:1.1em; transition:transform .28s var(--ease); } .btn:hover .ico{ transform:translateX(3px); } .btn--primary{ background:var(--grad); color:#120A02; box-shadow:0 10px 30px -12px rgba(255,122,24,.75); } .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(255,122,24,.85); } .btn--ghost{ border-color:var(--line-2); color:var(--text); backdrop-filter:blur(6px); background:rgba(255,255,255,.04); } .btn--ghost:hover{ border-color:var(--amber); color:var(--amber-2); transform:translateY(-2px); } .btn--lg{ padding:1.05rem 2rem; font-size:.98rem; } .btn--block{ width:100%; } /* ─────────────── topbar ─────────────── */ .topbar{ background:#070A0D; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--muted); position:relative; z-index:60; } .topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:42px; } .topbar__tag{ display:inline-flex; align-items:center; gap:.5rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500; color:var(--text-soft); } .pulse{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(255,122,24,.7); animation:pulse 2.4s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,122,24,.65); } 70%{ box-shadow:0 0 0 9px rgba(255,122,24,0); } 100%{ box-shadow:0 0 0 0 rgba(255,122,24,0); } } .topbar__links{ display:flex; gap:1.5rem; } .topbar__links a{ display:inline-flex; align-items:center; gap:.45rem; transition:color .2s; } .topbar__links a:hover{ color:var(--amber-2); } /* ─────────────── nav ─────────────── */ .nav{ position:sticky; top:0; z-index:70; background:rgba(11,14,17,.72); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent; transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .nav.stuck{ background:rgba(9,12,15,.94); border-bottom-color:var(--line); box-shadow:0 12px 34px -22px rgba(0,0,0,.9); } .nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px; } .brand{ display:inline-flex; align-items:center; gap:.65rem; flex:none; } .brand__mark{ width:40px; height:42px; flex:none; } .brand__text{ display:flex; flex-direction:column; line-height:1; } /* chrome wordmark — the light/shadow/light banding is what reads as metal */ .brand__text strong{ font-family:var(--font-d); font-size:1.6rem; font-weight:700; font-style:italic; letter-spacing:.055em; text-transform:uppercase; background:linear-gradient(180deg,#FFFFFF 0%,#DFE7EF 24%,#8B97A6 48%,#5F6A78 53%,#F4F8FC 62%,#B3BECB 84%,#78838F 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .brand__text em{ font-style:normal; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:3px; } .nav__links{ display:flex; align-items:center; gap:1.85rem; } .nav__links > a:not(.btn){ font-size:.85rem; font-weight:500; letter-spacing:.04em; color:var(--text-soft); position:relative; padding:.35rem 0; transition:color .22s; } .nav__links > a:not(.btn)::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--grad); transition:width .3s var(--ease); } .nav__links > a:not(.btn):hover, .nav__links > a.active{ color:var(--text); } .nav__links > a:not(.btn):hover::after, .nav__links > a.active::after{ width:100%; } .nav__cta{ padding:.7rem 1.35rem; font-size:.84rem; } .burger{ display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:10px; background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; } .burger span{ width:19px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ─────────────── hero ─────────────── */ .hero{ position:relative; min-height:clamp(620px,92vh,980px); display:flex; align-items:center; overflow:hidden; padding-block:clamp(4rem,10vh,7rem); } .hero__bg{ position:absolute; inset:0; } .hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; filter:brightness(1.14) contrast(1.06) saturate(1.08); transform:scale(1.06); animation:heroZoom 22s ease-out forwards; } @keyframes heroZoom{ to{ transform:scale(1); } } /* Text sits left, so the scrim is heavy on the left and opens up on the right to keep the cutting head and sparks clearly visible. */ .hero__scrim{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,14,17,.95) 0%, rgba(11,14,17,.88) 32%, rgba(11,14,17,.55) 62%, rgba(11,14,17,.34) 82%, rgba(11,14,17,.5) 100%), linear-gradient(180deg, rgba(11,14,17,.8) 0%, rgba(11,14,17,.12) 42%, rgba(11,14,17,.4) 72%, rgba(11,14,17,.9) 100%); } .hero__grid{ position:absolute; inset:0; opacity:.35; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:76px 76px; mask-image:radial-gradient(90% 70% at 50% 45%, #000 20%, transparent 78%); } .hero__inner{ position:relative; z-index:2; max-width:860px; } .flag-badge{ display:inline-flex; align-items:center; gap:.7rem; padding:.5rem 1.1rem .5rem .6rem; margin-bottom:1.6rem; border:1px solid rgba(255,176,32,.32); border-radius:999px; background:rgba(255,122,24,.08); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#FFD9A8; } .flag-badge b{ color:var(--amber-2); } .flag-badge__flag{ display:inline-flex; flex-direction:column; width:22px; height:15px; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.22); } .flag-badge__flag span{ flex:1; } .flag-badge__flag span:nth-child(1){ background:var(--saffron); } .flag-badge__flag span:nth-child(2){ background:#fff; } .flag-badge__flag span:nth-child(3){ background:var(--green); } .hero__title{ margin-bottom:1.15rem; text-shadow:0 2px 30px rgba(0,0,0,.6); } .hero__lead{ font-size:clamp(1rem,1.25vw,1.2rem); color:var(--text-soft); max-width:64ch; margin-bottom:2.1rem; } .hero__lead strong{ color:var(--text); font-weight:600; } .hero__specs{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2.3rem; } .spec-chip{ display:flex; flex-direction:column; gap:.15rem; padding:.7rem 1.15rem; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.035); backdrop-filter:blur(8px); } .spec-chip__k{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .spec-chip__v{ font-family:var(--font-d); font-size:1.35rem; font-weight:600; letter-spacing:.02em; } .spec-chip__v i{ font-style:normal; font-size:.8rem; color:var(--amber-2); margin-left:2px; } .hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; } .hero__scroll{ position:absolute; left:50%; bottom:1.75rem; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); } .hero__mouse{ width:22px; height:34px; border:1.5px solid var(--line-2); border-radius:12px; position:relative; } .hero__mouse::after{ content:''; position:absolute; top:6px; left:50%; margin-left:-1.5px; width:3px; height:6px; border-radius:2px; background:var(--amber); animation:scrolldot 1.9s var(--ease) infinite; } @keyframes scrolldot{ 0%{opacity:0;transform:translateY(0)} 35%{opacity:1} 100%{opacity:0;transform:translateY(12px)} } /* ─────────────── stats ─────────────── */ .stats{ background:linear-gradient(180deg,#0E1319,#0B0E11); border-block:1px solid var(--line); } .stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); padding-block:clamp(2.2rem,4vw,3.2rem); } .stat{ text-align:center; padding-inline:1rem; position:relative; } .stat + .stat::before{ content:''; position:absolute; left:0; top:12%; height:76%; width:1px; background:var(--line); } .stat__n{ display:block; font-family:var(--font-d); font-weight:700; font-size:clamp(2.4rem,4.6vw,3.6rem); line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .stat__l{ display:block; margin-top:.55rem; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } /* ─────────────── generic section ─────────────── */ .section{ padding-block:var(--sec-y); position:relative; } .section--alt{ background:var(--bg-alt); border-block:1px solid var(--line); } .section__head{ max-width:760px; margin-bottom:clamp(2.5rem,5vw,4rem); } .section__head .lead{ margin-bottom:0; } .eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--amber-2); margin:0 0 .9rem; } .eyebrow::before{ content:''; width:28px; height:2px; background:var(--grad); } .lead{ font-size:clamp(1.02rem,1.2vw,1.18rem); color:var(--text-soft); } .ticks{ list-style:none; padding:0; margin:1.6rem 0 2rem; display:grid; gap:.7rem; } .ticks li{ position:relative; padding-left:2rem; color:var(--text-soft); } .ticks li::before{ content:''; position:absolute; left:0; top:.55em; width:14px; height:8px; border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(-45deg); } /* ─────────────── about ─────────────── */ .about{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; } .about__media{ position:relative; } .about__media picture{ display:block; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); } .about__media img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; } .about__media::after{ content:''; position:absolute; inset:0; border-radius:var(--r-lg); pointer-events:none; box-shadow:inset 0 0 0 1px var(--line-2); } .about__badge{ position:absolute; right:-14px; bottom:-22px; background:var(--grad); color:#120A02; padding:1.1rem 1.5rem; border-radius:var(--r); box-shadow:0 20px 44px -16px rgba(255,122,24,.6); text-align:center; } .about__badge-n{ display:block; font-family:var(--font-d); font-size:2.4rem; font-weight:700; line-height:1; } .about__badge-n i{ font-style:normal; font-size:1rem; } .about__badge-t{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-top:.2rem; } /* 60KW showcase strip under the About copy */ .astrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.75rem,1.5vw,1.25rem); margin-top:clamp(2.5rem,5vw,4rem); } .astrip__item{ position:relative; margin:0; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); aspect-ratio:4/3; background:#0E1319; } .astrip__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .astrip__item:hover img{ transform:scale(1.06); } .astrip__item figcaption{ position:absolute; inset:auto 0 0; padding:2.2rem 1.1rem .95rem; background:linear-gradient(180deg,transparent,rgba(7,10,13,.94)); display:flex; flex-direction:column; gap:.1rem; } .astrip__item figcaption strong{ font-family:var(--font-d); font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em; } .astrip__item figcaption span{ font-size:.76rem; color:var(--muted); } @media (max-width:760px){ .astrip{ grid-template-columns:1fr; } .astrip__item{ aspect-ratio:16/9; } } /* ─────────────── flagship ─────────────── */ .flagship{ position:relative; overflow:hidden; padding-block:var(--sec-y); background:radial-gradient(90% 120% at 50% 0%, #141B24 0%, #0B0E11 62%); border-block:1px solid var(--line); } .flagship__glow{ position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); width:min(900px,90vw); aspect-ratio:1; pointer-events:none; background:radial-gradient(circle, rgba(255,122,24,.16) 0%, transparent 62%); filter:blur(20px); } .flagship__head{ position:relative; text-align:center; max-width:820px; margin:0 auto clamp(2.5rem,5vw,4rem); } .flagship__head .eyebrow{ justify-content:center; } .lead--light{ color:var(--text-soft); } .flagship__body{ position:relative; } /* flagship photo band + 13-metre dimension callout */ .fvisual{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--shadow); aspect-ratio:21/9; } .fvisual picture{ display:block; width:100%; height:100%; } .fvisual img{ width:100%; height:100%; object-fit:cover; } .fvisual::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,14,17,.35) 0%, rgba(11,14,17,.05) 35%, rgba(11,14,17,.85) 100%); } .fvisual__badge{ position:absolute; top:clamp(.9rem,2vw,1.5rem); left:clamp(.9rem,2vw,1.5rem); z-index:2; display:flex; align-items:baseline; gap:.15rem; background:var(--grad); color:#120A02; padding:.5rem .95rem; border-radius:10px; font-family:var(--font-d); font-weight:700; line-height:1; box-shadow:0 10px 28px -10px rgba(255,122,24,.8); } .fvisual__badge span{ font-size:1.75rem; } .fvisual__badge i{ font-style:normal; font-size:.85rem; } /* dimension bar: line with end ticks, label centred on it */ .fvisual__dim{ position:absolute; z-index:2; left:clamp(1rem,4vw,3rem); right:clamp(1rem,4vw,3rem); bottom:clamp(1.1rem,3vw,2.2rem); height:2px; background:linear-gradient(90deg,var(--amber-2),var(--amber)); box-shadow:0 0 18px rgba(255,122,24,.55); } .fvisual__dim::before, .fvisual__dim::after{ content:''; position:absolute; top:-7px; width:2px; height:16px; background:var(--amber-2); box-shadow:0 0 10px rgba(255,122,24,.7); } .fvisual__dim::before{ left:0; } .fvisual__dim::after{ right:0; } .fvisual__dim-label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; background:rgba(11,14,17,.88); border:1px solid rgba(255,176,32,.4); backdrop-filter:blur(6px); padding:.4rem 1rem; border-radius:999px; font-family:var(--font-d); font-size:clamp(.85rem,1.5vw,1.1rem); font-weight:600; letter-spacing:.1em; color:var(--amber-2); } .flagship__specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:1.75rem; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .fspec{ background:var(--surface); padding:1.35rem 1.5rem; } .fspec span{ display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; } .fspec strong{ font-family:var(--font-d); font-size:1.5rem; font-weight:600; letter-spacing:.01em; } /* beam + gantry animation */ .beam{ transform-origin:center top; animation:beamPulse 1.6s ease-in-out infinite; } @keyframes beamPulse{ 0%,100%{opacity:.55} 50%{opacity:1} } .sparkle{ animation:sparkPulse 1.6s ease-in-out infinite; transform-origin:center; } @keyframes sparkPulse{ 0%,100%{opacity:.5;transform:scale(.82)} 50%{opacity:1;transform:scale(1.12)} } /* Travel ranges are tuned per illustration so the head always stays over its bed. */ .gantry{ animation:gantry 9s ease-in-out infinite; } @keyframes gantry{ 0%,100%{transform:translateX(-12%)} 50%{transform:translateX(30%)} } /* the tube head starts near the right of its viewBox, so it travels left */ .gantry--tube{ animation:gantryTube 7s ease-in-out infinite; } @keyframes gantryTube{ 0%,100%{transform:translateX(-42%)} 50%{transform:translateX(0)} } .ram{ animation:ram 3.4s ease-in-out infinite; } @keyframes ram{ 0%,100%{transform:translateY(0)} 45%{transform:translateY(16px)} 60%{transform:translateY(16px)} } /* ─────────────── machines ─────────────── */ .mgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.1rem,2vw,1.75rem); } .mcard{ position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--surface),#12171E); transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .mcard:hover{ transform:translateY(-5px); border-color:rgba(255,176,32,.4); box-shadow:0 28px 60px -30px rgba(0,0,0,.9); } .mcard--hero{ grid-column:1 / -1; } .mcard--hero .mcard__art{ background:radial-gradient(70% 120% at 50% 0%, rgba(255,122,24,.12), transparent 70%), #0E1319; } .mcard__flag{ position:absolute; top:1.1rem; left:1.1rem; z-index:2; background:var(--grad); color:#120A02; font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:.4rem .85rem; border-radius:999px; box-shadow:0 8px 22px -8px rgba(255,122,24,.8); } /* photo art — fills the card head, darkened at the base so the kicker reads */ .mcard__art{ position:relative; overflow:hidden; background:#0E1319; border-bottom:1px solid var(--line); aspect-ratio:16/10; } .mcard--hero .mcard__art{ aspect-ratio:21/8; } .mcard__art picture{ display:block; width:100%; height:100%; } .mcard__art img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s var(--ease); } .mcard:hover .mcard__art img{ transform:scale(1.06); filter:brightness(1.05); } .mcard__art::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,14,17,.15) 0%, rgba(11,14,17,0) 40%, rgba(11,14,17,.72) 100%); } .mcard__body{ padding:clamp(1.35rem,2.4vw,1.9rem); display:flex; flex-direction:column; flex:1; } .mcard__kicker{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amber-2); margin-bottom:.5rem; } .mcard__desc{ color:var(--muted); font-size:.94rem; margin-bottom:1.35rem; } .mspecs{ margin:auto 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; } .mcard--hero .mspecs{ grid-template-columns:repeat(4,1fr); } .mspecs > div{ background:#12171E; padding:.85rem 1rem; } /* an odd final spec would leave a dead cell — let it span the row instead */ .mspecs > div:last-child:nth-child(odd){ grid-column:1 / -1; } .mcard--hero .mspecs > div:last-child:nth-child(odd){ grid-column:auto; } .mspecs dt{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; } .mspecs dd{ margin:0; font-family:var(--font-d); font-size:1.2rem; font-weight:600; } /* ─────────────── bending ─────────────── */ .bgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.1rem,2vw,1.75rem); } .bcard{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(180deg,var(--surface),#12171E); transition:transform .4s var(--ease), border-color .4s var(--ease); } .bcard:hover{ transform:translateY(-5px); border-color:rgba(255,176,32,.4); } .bcard__art{ position:relative; overflow:hidden; aspect-ratio:16/9; background:#0E1319; border-bottom:1px solid var(--line); } .bcard__art picture{ display:block; width:100%; height:100%; } .bcard__art img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s var(--ease); } .bcard:hover .bcard__art img{ transform:scale(1.06); filter:brightness(1.05); } /* keep the card body legible where the photo runs bright at the bottom edge */ .bcard__art::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(11,14,17,.55)); } .bcard__body{ padding:clamp(1.35rem,2.4vw,1.9rem); } .bcard__body p{ color:var(--muted); font-size:.94rem; } .btable{ width:100%; border-collapse:collapse; margin-top:1.25rem; font-size:.92rem; } .btable th, .btable td{ padding:.75rem .25rem; border-top:1px solid var(--line); text-align:left; } .btable th{ font-weight:500; color:var(--muted); } .btable td{ text-align:right; font-family:var(--font-d); font-size:1.15rem; font-weight:600; color:var(--amber-2); } /* ─────────────── materials ─────────────── */ .matgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.9rem,1.6vw,1.35rem); } .matcard{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--surface),#12171E); padding:clamp(1.25rem,2vw,1.7rem); transition:transform .4s var(--ease), border-color .4s var(--ease); } .matcard::before{ content:''; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--m1),var(--m2)); } .matcard:hover{ transform:translateY(-5px); border-color:var(--line-2); } .matcard__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; } .matcard__sym{ font-family:var(--font-d); font-size:1.05rem; font-weight:700; letter-spacing:.14em; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:.15rem .5rem; } .matcard__swatch{ width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,var(--m1),var(--m2)); box-shadow:inset 0 2px 6px rgba(255,255,255,.35), inset 0 -3px 8px rgba(0,0,0,.5), 0 6px 18px -8px rgba(0,0,0,.8); } .matcard h3{ font-size:1.15rem; margin-bottom:.6rem; } .matcard__thick{ font-family:var(--font-d); font-size:2.9rem; font-weight:700; line-height:1; margin:0; color:var(--text); } .matcard__thick i{ font-style:normal; font-size:1rem; color:var(--amber-2); margin-left:3px; } .matcard__cap{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.4rem 0 1.1rem; } .bar{ height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; } .bar__fill{ display:block; height:100%; width:0; border-radius:3px; background:var(--grad); transition:width 1.3s var(--ease) .15s; } .in .bar__fill, .reveal.in .bar__fill{ width:var(--pct); } .matnote{ margin-top:2rem; color:var(--muted); font-size:.92rem; text-align:center; } /* ─────────────── industries ─────────────── */ .indgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.5rem); } .ind{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:clamp(1.4rem,2.4vw,2rem); transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .ind:hover{ transform:translateY(-5px); border-color:rgba(255,176,32,.4); background:var(--surface-2); } .ind__ico{ width:40px; height:40px; margin-bottom:1rem; fill:none; stroke:var(--amber); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .ind h3{ font-size:1.2rem; margin-bottom:.5rem; } .ind p{ color:var(--muted); font-size:.92rem; } /* ─────────────── why ─────────────── */ .why{ position:relative; overflow:hidden; padding-block:var(--sec-y); } .why__bg{ position:absolute; inset:0; } .why__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; } .why__scrim{ position:absolute; inset:0; background: radial-gradient(120% 100% at 78% 45%, rgba(11,14,17,.35) 0%, rgba(11,14,17,.82) 60%, rgba(11,14,17,.94) 100%), linear-gradient(180deg, rgba(11,14,17,.88) 0%, rgba(11,14,17,.55) 45%, rgba(11,14,17,.92) 100%); } .why__inner{ position:relative; z-index:2; } .section__head--light{ max-width:760px; } .eyebrow--light{ color:var(--amber-2); } .whygrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; } .wcard{ background:rgba(17,22,28,.82); backdrop-filter:blur(10px); padding:clamp(1.6rem,2.8vw,2.3rem); transition:background .35s var(--ease); } .wcard:hover{ background:rgba(26,33,42,.94); } .wcard__n{ display:block; font-family:var(--font-d); font-size:2.1rem; font-weight:700; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,176,32,.55); margin-bottom:.9rem; } .wcard h3{ font-size:1.2rem; margin-bottom:.55rem; } .wcard p{ color:var(--muted); font-size:.93rem; } /* ─────────────── gallery ─────────────── */ /* Fixed row track + every tile spanning two rows keeps all heights equal, so short tiles never leave a gap under themselves. */ .gal{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(140px,15vw,190px); gap:clamp(.7rem,1.4vw,1.1rem); } .gal__item{ position:relative; margin:0; overflow:hidden; border-radius:var(--r); cursor:zoom-in; border:1px solid var(--line); grid-row:span 2; } .gal__item--wide{ grid-column:span 2; } /* must fill the tile, or the img's height:100% resolves against auto */ .gal__item picture{ display:block; width:100%; height:100%; } .gal__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s var(--ease); } .gal__item:hover img{ transform:scale(1.07); filter:brightness(1.06); } .gal__item figcaption{ position:absolute; inset:auto 0 0; padding:1.6rem 1.1rem .95rem; background:linear-gradient(180deg,transparent,rgba(7,10,13,.92)); font-size:.82rem; font-weight:500; letter-spacing:.02em; transform:translateY(6px); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease); } .gal__item:hover figcaption, .gal__item:focus-within figcaption{ transform:none; opacity:1; } /* ─────────────── testimonials ─────────────── */ .tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.5rem); } .tcard{ margin:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:clamp(1.5rem,2.6vw,2.1rem); display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s var(--ease); } .tcard:hover{ transform:translateY(-5px); border-color:rgba(255,176,32,.35); } .tcard__q{ width:34px; height:34px; fill:var(--amber); opacity:.55; margin-bottom:1rem; } .tcard blockquote{ margin:0 0 1.4rem; } .tcard blockquote p{ color:var(--text-soft); font-size:1rem; font-style:italic; } .tcard figcaption{ margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--line); } .tcard figcaption strong{ display:block; font-size:.95rem; } .tcard figcaption span{ font-size:.82rem; color:var(--muted); } /* ─────────────── certifications ─────────────── */ .certgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.8vw,1.5rem); } .cert{ text-align:center; padding:clamp(1.5rem,2.6vw,2.1rem) 1.2rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); transition:transform .4s var(--ease), border-color .4s var(--ease); } .cert:hover{ transform:translateY(-5px); border-color:rgba(255,176,32,.35); } .cert svg{ width:40px; height:40px; margin:0 auto 1rem; fill:none; stroke:var(--amber); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .cert strong{ display:block; font-family:var(--font-d); font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em; } .cert span{ display:block; margin-top:.35rem; font-size:.8rem; color:var(--muted); } /* ─────────────── contact ─────────────── */ .cgrid{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start; } .rfq{ border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--surface),#12171E); padding:clamp(1.5rem,3vw,2.6rem); box-shadow:var(--shadow); scroll-margin-top:110px; } .rfq__title{ font-size:1.5rem; margin-bottom:1.6rem; } .form{ display:grid; gap:1.05rem; } .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; } .field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; } .field > span{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .field > span b{ color:var(--amber); } .field input, .field select, .field textarea{ width:100%; font:inherit; font-size:.94rem; color:var(--text); background:#0E1319; border:1px solid var(--line); border-radius:10px; padding:.8rem .95rem; transition:border-color .25s, box-shadow .25s, background .25s; } .field textarea{ resize:vertical; min-height:110px; } .field select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A96A5' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; background-size:16px; padding-right:2.4rem; } .field input::placeholder, .field textarea::placeholder{ color:#5C6773; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); background:#111820; box-shadow:0 0 0 3px rgba(255,122,24,.14); } .field.invalid input, .field.invalid textarea{ border-color:#E5484D; } .err{ font-style:normal; font-size:.75rem; color:#FF8085; min-height:0; } .field.invalid .err{ min-height:1.1em; } /* honeypot — off-screen rather than display:none so bots still fill it */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form__note{ font-size:.8rem; color:var(--muted); margin:0; } .form__status{ margin:0; font-size:.9rem; min-height:1.3em; } .form__status.ok{ color:#4ADE80; } .form__status.bad{ color:#FF8085; } .cinfo{ display:grid; gap:1.4rem; align-content:start; } .cblock{ display:flex; gap:1rem; align-items:flex-start; } .cblock__ico{ flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid rgba(255,176,32,.28); background:rgba(255,122,24,.08); } .cblock__ico svg{ width:20px; height:20px; fill:none; stroke:var(--amber-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .cblock h4{ margin:0 0 .35rem; font-size:.82rem; letter-spacing:.16em; color:var(--muted); } .cblock address{ font-style:normal; line-height:1.7; } .cblock p{ margin:0; color:var(--text-soft); } .cblock a{ transition:color .2s; } .cblock a:hover{ color:var(--amber-2); } /* departmental inboxes */ .cmails{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; } .cmails li{ display:flex; flex-direction:column; gap:.05rem; } .cmails span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .cmails a{ font-size:.92rem; color:var(--text-soft); word-break:break-word; transition:color .2s; } .cmails a:hover{ color:var(--amber-2); } .foot__parent{ font-size:.82rem; color:var(--muted); margin-top:.5rem; } .foot__parent a{ color:var(--text-soft); text-decoration:underline; text-underline-offset:3px; } .foot__parent a:hover{ color:var(--amber-2); } .csocial{ display:flex; gap:.6rem; padding-top:.3rem; } .csocial a{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--surface); transition:border-color .25s, background .25s, transform .25s var(--ease); } .csocial a svg{ width:18px; height:18px; fill:var(--text-soft); } .csocial a:hover{ border-color:var(--amber); background:rgba(255,122,24,.1); transform:translateY(-2px); } .csocial a:hover svg{ fill:var(--amber-2); } .map{ margin-top:clamp(2.5rem,5vw,4rem); border-block:1px solid var(--line); background:var(--bg-alt); position:relative; } .map iframe{ width:100%; height:clamp(320px,42vh,460px); border:0; filter:grayscale(.35) contrast(1.05) brightness(.92); } .map__fallback{ padding:2rem; text-align:center; color:var(--muted); } .map__cta{ position:absolute; right:1.25rem; bottom:1.25rem; z-index:2; display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.15rem; border-radius:999px; background:rgba(11,14,17,.9); border:1px solid var(--line-2); backdrop-filter:blur(8px); font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--text); transition:border-color .25s, color .25s, transform .25s var(--ease); } .map__cta svg{ width:16px; height:16px; fill:none; stroke:var(--amber-2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .map__cta:hover{ border-color:var(--amber); color:var(--amber-2); transform:translateY(-2px); } /* ─────────────── footer ─────────────── */ .foot{ background:#070A0D; border-top:1px solid var(--line); padding-top:clamp(3rem,6vw,5rem); } .foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.25fr; gap:clamp(1.75rem,3vw,3rem); padding-bottom:clamp(2.5rem,5vw,4rem); } .foot__brand p{ color:var(--muted); font-size:.92rem; margin-top:1.1rem; } .brand--foot{ margin-bottom:.25rem; } .foot__flagline{ display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--text-soft); } .foot__col h4{ font-size:.8rem; letter-spacing:.2em; color:var(--muted); margin-bottom:1.15rem; } .foot__col a{ display:block; font-size:.92rem; color:var(--text-soft); padding:.32rem 0; transition:color .2s, transform .2s var(--ease); } .foot__col a:hover{ color:var(--amber-2); transform:translateX(3px); } .foot__col--contact address{ font-style:normal; font-size:.92rem; color:var(--muted); line-height:1.7; margin-bottom:.9rem; } .foot__cta{ margin-top:1.1rem; } .foot__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-block:1.4rem; font-size:.82rem; color:var(--muted); } .foot__bar p{ margin:0; } .foot__credit a{ color:var(--text-soft); text-decoration:underline; text-underline-offset:3px; } .foot__credit a:hover{ color:var(--amber-2); } /* ─────────────── lightbox ─────────────── */ .lightbox{ position:fixed; inset:0; z-index:120; background:rgba(6,8,11,.96); backdrop-filter:blur(10px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:clamp(1rem,4vw,3rem); opacity:0; transition:opacity .3s var(--ease); } .lightbox.show{ opacity:1; } .lightbox[hidden]{ display:none; } .lightbox__fig{ margin:0; display:grid; place-items:center; gap:1rem; min-width:0; } .lightbox__fig img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--r); box-shadow:var(--shadow); } .lightbox__fig figcaption{ font-size:.9rem; color:var(--text-soft); text-align:center; } .lightbox__close{ position:absolute; top:1.25rem; right:1.5rem; z-index:2; width:46px; height:46px; font-size:1.9rem; line-height:1; background:transparent; border:1px solid var(--line-2); border-radius:50%; cursor:pointer; transition:border-color .25s, color .25s; } .lightbox__close:hover{ border-color:var(--amber); color:var(--amber-2); } .lightbox__nav{ width:52px; height:52px; font-size:2.2rem; line-height:1; background:transparent; border:1px solid var(--line-2); border-radius:50%; cursor:pointer; transition:border-color .25s, color .25s, transform .25s var(--ease); } .lightbox__nav:hover{ border-color:var(--amber); color:var(--amber-2); transform:scale(1.06); } /* ─────────────── back to top ─────────────── */ .totop{ position:fixed; right:1.5rem; bottom:1.5rem; z-index:80; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--grad); color:#120A02; box-shadow:0 14px 34px -14px rgba(255,122,24,.85); opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; } .totop.show{ opacity:1; visibility:visible; transform:none; } .totop svg{ width:20px; height:20px; } /* ══════════════════════════ RESPONSIVE ══════════════════════════ */ @media (max-width:1080px){ /* 3 machine cards in 2 columns would orphan the last one — let it span instead */ .matgrid{ grid-template-columns:repeat(3,1fr); } .indgrid, .whygrid, .tgrid{ grid-template-columns:repeat(2,1fr); } .certgrid{ grid-template-columns:repeat(2,1fr); } .cgrid{ grid-template-columns:1fr; } .foot__grid{ grid-template-columns:1fr 1fr; } .foot__brand{ grid-column:1 / -1; } } @media (max-width:900px){ html{ scroll-padding-top:80px; } /* backdrop-filter makes .nav a containing block for position:fixed children, which would trap the off-canvas drawer inside the header's box. */ .nav{ backdrop-filter:none; background:rgba(11,14,17,.96); } .nav.stuck{ backdrop-filter:none; } .topbar__links a span{ display:none; } .topbar__links a{ font-size:1rem; } .topbar__tag{ font-size:.68rem; } .nav__links{ position:fixed; inset:0 0 0 auto; width:min(340px,86vw); flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.25rem; background:#0C1116; border-left:1px solid var(--line); padding:6rem 1.75rem 2rem; transform:translateX(100%); transition:transform .42s var(--ease); overflow-y:auto; box-shadow:-20px 0 60px -30px #000; } .nav__links.open{ transform:none; } .nav__links > a:not(.btn){ padding:.9rem 0; border-bottom:1px solid var(--line); font-size:1rem; } .nav__links > a:not(.btn)::after{ display:none; } .nav__cta{ margin-top:1.25rem; } .burger{ display:flex; z-index:75; } body.menu-open{ overflow:hidden; } .about{ grid-template-columns:1fr; } .about__media{ order:-1; max-width:560px; } .about__badge{ right:12px; } .mgrid, .bgrid{ grid-template-columns:1fr; } .mcard--hero .mspecs{ grid-template-columns:repeat(2,1fr); } .flagship__specs{ grid-template-columns:repeat(2,1fr); } .gal{ grid-template-columns:repeat(2,1fr); } .gal__item--wide{ grid-column:span 2; } .stats__grid{ grid-template-columns:repeat(2,1fr); gap:2rem 0; } .stat:nth-child(3)::before, .stat:nth-child(1)::before{ display:none; } } @media (max-width:640px){ .matgrid{ grid-template-columns:repeat(2,1fr); } .indgrid, .whygrid, .tgrid, .certgrid{ grid-template-columns:1fr; } .row{ grid-template-columns:1fr; } .foot__grid{ grid-template-columns:1fr; } .hero__specs{ gap:.5rem; } .spec-chip{ padding:.6rem .9rem; flex:1 1 140px; } .hero__cta .btn{ width:100%; } .gal{ grid-template-columns:1fr; grid-auto-rows:clamp(110px,26vw,150px); } .gal__item, .gal__item--wide{ grid-column:span 1; } .lightbox{ grid-template-columns:1fr; } .lightbox__nav{ position:absolute; bottom:1.5rem; } .lightbox__nav--prev{ left:1.5rem; } .lightbox__nav--next{ right:1.5rem; } .about__badge{ padding:.85rem 1.15rem; } .about__badge-n{ font-size:1.9rem; } .totop{ right:1rem; bottom:1rem; } } @media (max-width:420px){ .matgrid{ grid-template-columns:1fr; } .topbar__tag{ display:none; } .topbar__inner{ justify-content:center; } } /* ─────────────── motion & print ─────────────── */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } .bar__fill{ width:var(--pct); } .hero__bg img{ transform:none; } } @media print{ .topbar,.nav,.hero__scroll,.totop,.map,.lightbox,.csocial{ display:none !important; } body{ background:#fff; color:#000; } .reveal{ opacity:1; transform:none; } }