/* ============================================================ ARETECH — shared site styles Rivian-inspired: minimal chrome, full-bleed media, oversized type ============================================================ */ /* Image protection — block native drag-save & long-press save of artwork. (Pairs with the contextmenu/dragstart guards in site.js.) */ img, picture, .feat-thumb, .eco-media, .sub-media, .arcade-media, .video-thumb { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } :root { --ink: #0a0a0a; --paper: #ffffff; --bone: #f5f3ee; --muted: #6b6b6b; --rule: #e5e5e5; --aretech-blue: #003B6D; --aretech-cyan: #25AAE1; --aretech-lime: #AAE125; --easing: cubic-bezier(0.22, 0.61, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* `clip` (not `hidden`) prevents horizontal overflow WITHOUT turning into a scroll container — which would break position:sticky on descendants (e.g. the Locations facility panel) by anchoring them to instead of the viewport. */ overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } /* ============================================================ GLOBAL NAV Transparent over hero, switches to solid on scroll. ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; color: #fff; transition: background 0.35s var(--easing), color 0.35s var(--easing), padding 0.35s var(--easing), border-color 0.35s var(--easing); border-bottom: 1px solid transparent; } .nav.scrolled, .nav.light { background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); color: var(--ink); border-bottom-color: rgba(0,0,0,0.06); padding: 14px 32px; } .nav-logo { display: inline-flex; align-items: center; line-height: 1; height: 44px; } .nav-logo img { height: 100%; width: auto; display: block; /* dark logo over hero — invert to white. swap when nav becomes solid. */ filter: brightness(0) invert(1); transition: filter 0.35s var(--easing); } .nav.scrolled .nav-logo img, .nav.light .nav-logo img { filter: none; } .nav-links { display: flex; gap: 4px; margin: 0 8px 0 auto; padding: 0; list-style: none; } .nav-links a { display: inline-block; padding: 10px 16px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; border-radius: 999px; transition: background 0.2s var(--easing), color 0.2s var(--easing); } .nav-links a:hover { background: rgba(255,255,255,0.14); } .nav.scrolled .nav-links a:hover, .nav.light .nav-links a:hover { background: rgba(0,0,0,0.06); } .nav-links a.active { font-weight: 600; } .nav-actions { display: flex; align-items: center; gap: 8px; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; border: 1px solid rgba(0,0,0,0.06); transition: background 0.2s var(--easing), transform 0.2s var(--easing); } .nav.scrolled .nav-cta, .nav.light .nav-cta { background: var(--ink); color: #fff; border-color: var(--ink); } .nav-cta:hover { transform: translateY(-1px); } .hamburger { background: transparent; border: 0; padding: 10px 12px; display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer; color: inherit; border-radius: 999px; transition: background 0.2s var(--easing); } .hamburger:hover { background: rgba(255,255,255,0.14); } .nav.scrolled .hamburger:hover, .nav.light .hamburger:hover { background: rgba(0,0,0,0.06); } .hamburger span { width: 22px; height: 2px; background: currentColor; border-radius: 1px; } /* ============================================================ TYPE SCALE ============================================================ */ .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .eyebrow.invert { color: rgba(255,255,255,0.78); } .h-display { font-size: clamp(40px, 6.2vw, 96px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 600; } .h-xl { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; } .h-why { font-size: 48px; /* 36pt per spec */ line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--aretech-blue); } .h-lg { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; } .h-md { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; } .lede { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.5; color: var(--muted); max-width: 60ch; } .body { font-size: 16px; line-height: 1.6; color: var(--muted); } /* ============================================================ LINK BUTTONS (Rivian-style chevron links) ============================================================ */ .link-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 28px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; border: 1px solid transparent; transition: transform 0.2s var(--easing), background 0.2s var(--easing), color 0.2s var(--easing); } .btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-primary:hover { transform: translateY(-2px); background: #1f1f1f; } .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(0,0,0,0.18); } .btn-ghost:hover { background: rgba(0,0,0,0.05); } .btn-light { background: rgba(255,255,255,0.95); color: var(--ink); border-color: transparent; } .btn-light:hover { background: #fff; transform: translateY(-2px); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } .btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); } .btn .chev { transition: transform 0.2s var(--easing); } .btn:hover .chev { transform: translateX(4px); } /* ============================================================ HERO (full-bleed, type bottom-left) ============================================================ */ .hero { position: relative; height: 100vh; min-height: 640px; width: 100%; overflow: hidden; background: #000; color: #fff; } .hero-media, .hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); pointer-events: none; } /* Hero video: dark brand backdrop + fade-in so heroes never flash black before Vimeo paints */ /* Specificity raised to .product-hero ... so it wins over zerog-3d.css's `.hero-media--video{background:#000}` regardless of stylesheet order */ .product-hero .hero-media--video { background: linear-gradient(160deg, #14304a 0%, #0c1a2b 100%); } .hero-media--video iframe { opacity: 0; transition: opacity 0.7s ease; } .hero-media--video.video-ready iframe { opacity: 1; } .hero-body { position: absolute; inset: 0; padding: 128px 48px 64px 48px; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } .hero-body .copy { max-width: 760px; } .hero-body .eyebrow.invert { margin-bottom: 18px; } .hero-body h1 { margin-bottom: 18px; } /* Hero slide variant for carousel */ .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease-in-out; } .hero-slide.active { opacity: 1; z-index: 2; } .hero-slide .hero-media img { will-change: transform; /* Animation is applied to EVERY slide (not just .active) so the outgoing image keeps moving forward through the crossfade instead of snapping back. JS restarts it each time a slide becomes active — the restart happens while the slide is still at opacity:0, so the reset is invisible and every transition is seamless. */ animation: kbZoomIn 8s ease-out forwards; } .hero-slide[data-slide="1"] .hero-media img { animation-name: kbPanRight; } .hero-slide[data-slide="2"] .hero-media img { animation-name: kbPanLeft; } .hero-slide[data-slide="3"] .hero-media img { animation-name: kbZoomOut; } @keyframes kbZoomIn { from { transform: scale(1.0); } to { transform: scale(1.12); } } @keyframes kbZoomOut { from { transform: scale(1.14); } to { transform: scale(1.02); } } @keyframes kbPanRight { from { transform: scale(1.10) translateX(-3%); } to { transform: scale(1.16) translateX(3%); } } @keyframes kbPanLeft { from { transform: scale(1.10) translateX(3%); } to { transform: scale(1.16) translateX(-3%); } } @media (prefers-reduced-motion: reduce) { .hero-slide .hero-media img { animation: none; transform: scale(1.04); } } .hero-slide .hero-body { opacity: 0; transition: opacity 0.9s ease 0.25s; } .hero-slide.active .hero-body { opacity: 1; } /* On phones the wide 16:9 hero shots get center-cropped to a narrow vertical slice — which cut the patient + overhead robot (the actual product) out of frame. Bias each crop toward its subject and drop the Ken Burns pan so the framing stays put. */ @media (max-width: 700px) { .hero-slide .hero-media img { animation: none !important; transform: none !important; } .hero-slide[data-slide="0"] .hero-media img { object-position: 70% 42%; } .hero-slide[data-slide="1"] .hero-media img { object-position: 54% 40%; } .hero-slide[data-slide="2"] .hero-media img { object-position: 68% 44%; } .hero-slide[data-slide="3"] .hero-media img { object-position: 40% 48%; } } /* Hero CTA — pinned bottom-center with glassmorphism */ .hero-slide .link-row { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); margin-top: 0; z-index: 4; justify-content: center; } .hero-slide .link-row .btn { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 28px rgba(0,0,0,0.28); letter-spacing: 0.02em; } .hero-slide .link-row .btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.55); transform: translateY(-2px); } /* Persistent glass CTA — outside the opacity-fading slides so backdrop-filter samples the live page (no blur lag during the crossfade) */ .hero-cta { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 4; display: flex; justify-content: center; } .hero-cta .btn { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 28px rgba(0,0,0,0.28); letter-spacing: 0.02em; } .hero-cta .btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.55); transform: translateY(-2px); } .hero-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 10px; } .hero-dots button { width: 28px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); border: 0; transition: background 0.25s var(--easing), width 0.25s var(--easing); padding: 0; } .hero-dots button.active { background: #fff; width: 48px; } /* ============================================================ SECTION SHELLS ============================================================ */ .section { padding: 120px 48px; } .section.tight { padding: 80px 48px; } .section.dark { background: var(--ink); color: #fff; } .section.bone { background: var(--bone); } .section .lede { max-width: 60ch; } .section.dark .lede { color: rgba(255,255,255,0.72); } .wrap { max-width: 1600px; margin: 0 auto; } .wrap-narrow { max-width: 1100px; margin: 0 auto; } .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 56px; } .section-head .right { display: flex; flex-direction: column; align-items: flex-start; padding-top: 33px; } .section-head .eyebrow { margin-bottom: 16px; } /* ============================================================ PRECISION / IPD TABS + VIDEO ROW (main page) ============================================================ */ .ipd-wrap { display: flex; justify-content: center; margin: 40px 0 64px; } .ipd-slider { position: relative; display: inline-flex; background: var(--bone); border-radius: 999px; padding: 6px; border: 1px solid rgba(0,0,0,0.05); } .ipd-slider button { position: relative; z-index: 2; background: transparent; border: 0; padding: 14px 38px; font-weight: 600; font-size: 15px; letter-spacing: -0.005em; color: var(--ink); border-radius: 999px; transition: color 0.3s var(--easing); } .ipd-slider button.active { color: #fff; } .ipd-indicator { position: absolute; top: 6px; bottom: 6px; left: 6px; background: var(--ink); border-radius: 999px; transition: transform 0.45s var(--easing), width 0.45s var(--easing); z-index: 1; } .video-row { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; /* Room so the active/hover video shadow renders fully rounded instead of being clipped flat by the scroll container. Negative margins cancel the padding so the cards stay in place. Generous horizontal room keeps the first/last cards' side shadows from being sliced into a hard vertical edge. */ padding: 40px 76px 44px; margin: -40px -76px -44px; scroll-padding: 0 76px; } .video-row::-webkit-scrollbar { display: none; } .video-card { display: flex; flex-direction: column; gap: 18px; flex: 0 0 calc(((100% - 28px * 2) / 3) * 1.32); scroll-snap-align: start; min-width: 300px; } .video-thumb { aspect-ratio: 16/10; background: #111; border-radius: 14px; position: relative; overflow: hidden; transition: transform 0.4s var(--easing), box-shadow 0.35s var(--easing); } .video-thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(37,170,225,0.16), transparent 55%), linear-gradient(135deg, #1c1c1c 0%, #353535 100%); } .video-thumb .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.55); display: grid; place-items: center; transition: background 0.25s var(--easing), border-color 0.25s var(--easing); } .video-thumb .play::after { content: ""; width: 0; height: 0; border-left: 14px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; } .video-thumb .tag { position: absolute; left: 18px; bottom: 16px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.65); } /* Embedded background video fills the 16/10 thumb (cover-crops a 16/9 source) */ .video-thumb iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 111.12%; height: 100%; border: 0; pointer-events: none; } .video-card:hover .video-thumb { transform: translateY(-4px); } .video-card:hover .video-thumb .play { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.85); } /* Highlighted by the Innovation/Performance/Design slider */ .video-card.active .video-thumb { transform: scale(1.05); box-shadow: 0 22px 50px rgba(0,0,0,0.26); } .video-card p { font-size: 16px; color: var(--ink); line-height: 1.5; text-align: center; } /* ============================================================ PRODUCT GRID ============================================================ */ .product-rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; /* Pad so lifted cards' hover shadows aren't clipped flat by the scroll container (overflow-x:auto forces overflow-y to clip too). Negative margins cancel the padding so cards stay in place. */ padding: 36px 40px 56px; margin: -36px -40px -56px; scroll-padding: 0 40px; } .product-rail::-webkit-scrollbar { display: none; } .product-rail > .product-card { /* 10% smaller than the original 3.25-up basis */ flex: 0 0 calc(((100% - 2.25 * 22px) / 3.25) * 0.9); scroll-snap-align: start; } /* Rail navigation arrows (paired pill, centered below the rail) */ .rail-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 36px auto 0; padding: 12px; background: #ececec; border-radius: 999px; width: fit-content; box-shadow: 0 12px 30px rgba(0,0,0,0.12); } .rail-arrow { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #0a0a0a; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s var(--easing); } .rail-arrow:not(:disabled):hover { transform: scale(1.05); } .rail-arrow:disabled { cursor: default; background: #d2d2d2; transform: none; } /* Product cards — matched to the ZeroG 3D feature cards */ .product-card { position: relative; background: var(--paper); border-radius: 18px; cursor: pointer; display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: 0 1px 0 rgba(0,0,0,0.04); transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing); } .product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,0.12); } .product-card .pc-thumb { aspect-ratio: 3/5; overflow: hidden; background: var(--bone); border-radius: 18px 18px 0 0; } .product-card .pc-thumb img { width: 100%; height: 100%; max-width: none; display: block; object-fit: cover; transition: transform 0.5s var(--easing); } .product-card:hover .pc-thumb img { transform: scale(1.05); } .product-card .pc-head { padding: 22px 22px 26px; margin-top: 0; border-radius: 0 0 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .product-card .pc-head .pc-name { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; } .product-card .pc-open { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #0a0a0a; } .product-card .pc-open .plus-ic { width: 24px; height: 24px; border-radius: 50%; background: #0a0a0a; color: #fff; display: inline-grid; place-items: center; font-size: 16px; line-height: 1; } /* ============================================================ WHY ARETECH ============================================================ */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .why-card { background: var(--paper); border: 3px solid transparent; border-radius: 18px; padding: 36px 32px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.3s var(--easing), box-shadow 0.3s var(--easing); } .why-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,0.08); } .why-card h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; } .why-card p { color: var(--muted); font-size: 16px; line-height: 1.6; } .why-card.expertise { border-color: var(--aretech-blue); } .why-card.expertise h3 { color: var(--aretech-blue); } .why-card.mission { border-color: var(--aretech-cyan); } .why-card.mission h3 { color: var(--aretech-cyan); } .why-card.difference { border-color: var(--aretech-lime); } .why-card.difference h3 { color: var(--aretech-lime); } /* ============================================================ CONTACT — glassmorphism over Main_Footer.jpg ============================================================ */ .contact-section { position: relative; padding: 140px 48px; overflow: hidden; color: #fff; } .contact-bg { position: absolute; inset: 0; background: radial-gradient(circle at 18% 12%, rgba(37,170,225,0.45), transparent 55%), radial-gradient(circle at 92% 92%, rgba(46,110,200,0.42), transparent 55%), linear-gradient(160deg, rgba(0,40,80,0.82) 0%, rgba(10,15,30,0.88) 100%), url('../img/footer.jpg') center/cover no-repeat; z-index: 0; } .contact-wrap { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; display: block; } .contact-intro h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(40px, 4vw, 64px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; color: #fff; } .contact-intro p { margin-top: 16px; color: rgba(255,255,255,0.88); font-size: 17px; line-height: 1.55; max-width: 60ch; } /* Headquarters block under the contact intro */ .contact-hq { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 48px; } .contact-hq .hq-item { display: flex; flex-direction: column; gap: 6px; } .contact-hq .hq-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .contact-hq .hq-val { font-size: 16px; line-height: 1.45; font-weight: 500; color: #fff; transition: color 0.2s var(--easing); } .contact-hq a.hq-val:hover { color: var(--aretech-cyan); } .contact-pane { margin-top: 36px; position: relative; border-radius: 24px; padding: 36px 36px 30px; color: #fff; /* GLASS */ background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 30px 60px rgba(0,0,0,0.35); transition: padding 0.5s var(--easing); } .contact-pane h3 { font-size: 22px; font-weight: 600; margin-bottom: 22px; letter-spacing: -0.01em; color: #fff; display: none; /* heading lives outside the pane in glass design */ } .form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; } .field label { /* labels are floated INSIDE the pill as placeholders — hide visually but keep for a11y */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .field input, .field select, .field textarea { font-family: 'Montserrat', sans-serif; font-size: 15px; padding: 18px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.10); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.2s var(--easing), background 0.2s var(--easing), box-shadow 0.2s var(--easing); width: 100%; } .field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.78); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.18); box-shadow: 0 0 0 4px rgba(255,255,255,0.08); } .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 22px center; padding-right: 48px; } .field select option { color: var(--ink); } .field textarea { border-radius: 22px; min-height: 130px; resize: vertical; padding: 18px 22px; } .expanded-field { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height 0.55s var(--easing), opacity 0.5s ease 0.05s, transform 0.5s ease, margin 0.4s ease; margin: 0; } .contact-pane.expanded .expanded-field { max-height: 260px; opacity: 1; transform: translateY(0); } /* Collapse control — returns the contact form to its compact size */ .pane-collapse { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; display: none; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.2s var(--easing), transform 0.2s var(--easing); z-index: 3; } .pane-collapse:hover { background: rgba(255,255,255,0.24); transform: scale(1.06); } .pane-collapse:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; } .contact-pane.expanded .pane-collapse { display: grid; } .contact-pane.expanded { padding-top: 70px; } /* Compact prompt — tap to reveal the embedded Wufoo form */ .pane-prompt { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; text-align: left; cursor: pointer; padding: 16px 6px; background: transparent; border: 0; color: #fff; font-family: 'Montserrat', sans-serif; } .pane-prompt-title { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; } .pane-prompt-sub { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,0.9); } .pane-prompt-icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.2s var(--easing), transform 0.2s var(--easing); } .pane-prompt:hover .pane-prompt-icon { background: rgba(255,255,255,0.24); transform: scale(1.06); } .pane-prompt:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 4px; border-radius: 16px; } .contact-pane.expanded .pane-prompt { display: none; } /* Reveal wrapper for the embedded form (the form's own styling lives in Wufoo) */ .wufoo-embed { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s var(--easing), opacity 0.45s ease 0.05s; } .contact-pane.expanded .wufoo-embed { max-height: 1400px; overflow: visible; opacity: 1; } .submit-row { margin-top: 22px; display: flex; justify-content: flex-end; } .submit-btn { background: rgba(255,255,255,0.96); color: var(--ink); padding: 16px 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.6); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; backdrop-filter: blur(8px); transition: background 0.2s var(--easing), transform 0.2s var(--easing), box-shadow 0.2s var(--easing); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .submit-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.3); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: #0a0a0a; color: #111; padding: 64px 48px 32px; } .footer-grid { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-social { display: flex; gap: 12px; margin-top: 22px; } .footer-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(0,0,0,0.16); color: #111; transition: background 0.2s var(--easing), color 0.2s var(--easing), border-color 0.2s var(--easing), transform 0.2s var(--easing); } .footer-social a svg { width: 18px; height: 18px; transition: color 0.2s var(--easing); } .footer-social a:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); } .footer-social a:hover svg { color: #fff; } .footer-grid h4 { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #111; margin-bottom: 18px; font-weight: 600; } .footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-grid a { color: #111; font-size: 14px; transition: color 0.2s var(--easing); } .footer-grid a:hover { color: #000; } .footer-brand .footer-logo { display: inline-block; height: 36px; } .footer-brand .footer-logo img { height: 100%; width: auto; } .footer-brand p { font-size: 14px; line-height: 1.6; color: #111; margin-top: 18px; max-width: 38ch; } .footer-phone { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 16px; font-weight: 700; color: #111; transition: color 0.2s var(--easing); } .footer-phone svg { width: 16px; height: 16px; flex: none; stroke: var(--aretech-blue); } .footer-phone .fp-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .footer-phone:hover { color: var(--aretech-blue); } .legal { max-width: 1600px; margin: 0 auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; color: #111; flex-wrap: wrap; } .legal a { color: #111; } /* ============================================================ PRODUCT PAGE — sub-nav, hero, features ============================================================ */ .product-subnav { position: sticky; top: 0; z-index: 150; background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; margin-top: 0; } .product-subnav .name { display: flex; align-items: baseline; gap: 14px; } .product-subnav .name strong { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; } .product-subnav .name span { font-size: 13px; color: var(--muted); } .product-subnav .anchors { display: flex; gap: 4px; list-style: none; } .product-subnav .anchors a { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--muted); border-radius: 999px; transition: background 0.2s var(--easing), color 0.2s var(--easing); } .product-subnav .anchors a:hover { background: rgba(0,0,0,0.05); color: var(--ink); } .product-subnav .cta { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; } .product-hero { position: relative; height: 100vh; min-height: 680px; background: #000; color: #fff; overflow: hidden; } .product-hero .hero-media img { object-position: center; } .product-hero .hero-body { padding: 0 48px 88px 48px; align-items: flex-end; } .product-hero .copy h1 { font-size: clamp(56px, 9vw, 140px); letter-spacing: -0.045em; line-height: 0.92; font-weight: 600; } .product-hero .copy .tagline { margin-top: 18px; font-size: clamp(18px, 1.6vw, 24px); color: rgba(255,255,255,0.82); max-width: 30ch; } .product-hero .spec-strip { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 36px; } .spec-strip .spec { display: flex; flex-direction: column; gap: 4px; } .spec-strip .spec .v { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .spec-strip .spec .l { font-size: 13px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,0.82); } /* Feature: two-column rows alternating */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .feature.reverse { direction: rtl; } .feature.reverse > * { direction: ltr; } .feature .media-frame { aspect-ratio: 4/5; background: var(--bone); border-radius: 18px; overflow: hidden; position: relative; } .feature .media-frame img { width: 100%; height: 100%; object-fit: cover; } .feature .text .eyebrow { margin-bottom: 16px; } .feature .text h2 { margin-bottom: 18px; } .feature .text p + p { margin-top: 12px; } /* Feature: full-bleed photo with overlay copy */ .feature-bleed { position: relative; width: 100%; height: 80vh; min-height: 580px; background: #000; color: #fff; overflow: hidden; } .feature-bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .feature-bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%); } .feature-bleed .overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 48px 80px 48px; z-index: 3; max-width: 1100px; } .feature-bleed h2 { font-size: clamp(40px, 5vw, 80px); line-height: 1.0; letter-spacing: -0.03em; font-weight: 600; } .feature-bleed p { margin-top: 18px; max-width: 60ch; color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1.5; } /* Specs table */ .spec-table { border-top: 1px solid var(--rule); } .spec-row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); } .spec-row .k { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .spec-row .v { font-size: 16px; color: var(--ink); line-height: 1.5; } /* Related products strip */ .related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .related .product-card .media { aspect-ratio: 1/1; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .nav { padding: 14px 20px; } .nav-links { display: none; } .hamburger { display: flex; } .section { padding: 80px 24px; } .hero-body { padding: 96px 24px 56px 24px; flex-direction: column; align-items: flex-start; } .product-hero .hero-body { padding: 0 24px 56px 24px; } .section-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; } .section-head .right { padding-top: 0; } .video-row { gap: 20px; padding-left: 24px; padding-right: 24px; margin-left: -24px; margin-right: -24px; scroll-padding: 0 24px; } .product-rail > .product-card { flex-basis: calc((100% - 22px) / 2.25); } .why-grid { grid-template-columns: 1fr; } .contact-wrap { grid-template-columns: 1fr; gap: 32px; } .contact-section { padding: 80px 24px; } .feature { grid-template-columns: 1fr; gap: 32px; } .feature-bleed .overlay { padding: 0 24px 56px 24px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .related { grid-template-columns: repeat(2, 1fr); } .product-subnav { padding: 12px 18px; flex-wrap: wrap; gap: 10px; } .product-subnav .anchors { display: none; } } @media (max-width: 600px) { .ipd-slider button { padding: 12px 18px; font-size: 14px; } .product-rail > .product-card { flex-basis: 85%; } .form-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .legal { flex-direction: column; align-items: flex-start; } } /* ============================================================ SLIDE-OUT NAV DRAWER (built by site.js, shown via .hamburger) ============================================================ */ .nav-drawer-overlay { position: fixed; inset: 0; z-index: 998; background: rgba(10, 12, 16, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--easing), visibility 0.35s var(--easing); } .nav-drawer-overlay.open { opacity: 1; visibility: visible; } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 999; width: min(400px, 88vw); background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-left: 1px solid rgba(255, 255, 255, 0.45); border-radius: 20px 0 0 20px; overflow: hidden; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s var(--easing); box-shadow: -24px 0 70px -24px rgba(0, 0, 0, 0.45); color: var(--ink); } .nav-drawer.open { transform: translateX(0); } .nav-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; flex: none; } .nav-drawer__logo { display: inline-flex; height: 30px; } .nav-drawer__logo img { height: 100%; width: auto; display: block; } .nav-drawer__close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--muted); display: grid; place-items: center; font-size: 15px; transition: background 0.2s var(--easing), color 0.2s var(--easing); } .nav-drawer__close:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); } .nav-drawer__menu { flex: 1; overflow-y: auto; padding-bottom: 8px; } .nav-drawer__grouplabel { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 14px 24px 4px; } .nav-drawer__product { display: flex; align-items: center; gap: 12px; padding: 10px 24px; font-size: 15px; font-weight: 500; color: #2a2a2a; transition: background 0.15s var(--easing); } .nav-drawer__product:hover { background: rgba(255, 255, 255, 0.55); } .nav-drawer__product .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--aretech-cyan); flex: none; } .nav-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 24px; font-size: 16px; font-weight: 600; color: var(--ink); border-top: 1px solid rgba(0, 0, 0, 0.06); transition: background 0.15s var(--easing); } .nav-drawer__row:hover { background: rgba(255, 255, 255, 0.55); } .nav-drawer__row.soon { color: #9a978f; cursor: default; } .nav-drawer__row.soon:hover { background: transparent; } .nav-drawer__row .sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; } .nav-drawer__row .chev { color: #c4c0b6; font-size: 14px; flex: none; } .nav-drawer__row .ext { color: var(--aretech-cyan); font-size: 14px; font-weight: 700; flex: none; } .nav-drawer__pill { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: #efece5; padding: 3px 7px; border-radius: 4px; flex: none; } .nav-drawer__contact { padding: 18px 24px 22px; background: rgba(245, 243, 238, 0.55); border-top: 1px solid rgba(0, 0, 0, 0.06); margin-top: 8px; } .nav-drawer__contact-ttl { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .nav-drawer__consult { display: block; text-align: center; background: var(--ink); color: #fff; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 14px; transition: background 0.2s var(--easing), transform 0.2s var(--easing); } .nav-drawer__consult:hover { background: #1f1f1f; transform: translateY(-1px); } .nav-drawer__support { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 12.5px; color: var(--muted); } .nav-drawer__support svg { width: 16px; height: 16px; flex: none; stroke: var(--aretech-blue); margin-top: 1px; } .nav-drawer__support a { color: var(--ink); font-weight: 700; } .nav-drawer__support a:hover { color: var(--aretech-blue); } html.nav-drawer-open-lock { overflow: hidden; } /* hamburger morphs to an X while the drawer is open */ .hamburger span { transition: transform 0.3s var(--easing), opacity 0.2s var(--easing); } .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }