/* ============================================================ HACKTECH — "elevate tastefully" enhancement layer Purely ADDITIVE. Loaded after styles.css / tech.css so the base site is untouched and every effect degrades gracefully. All motion is gated on (pointer:fine) + (no reduced-motion), applied via the `fx-on` flag that enhance.js sets on . Palette reused from styles.css: --c5 teal, --c6 gold. ============================================================ */ /* custom cursor removed — the site uses the normal system cursor */ /* ---------- 2. holographic sheen on glass surfaces ---------- */ /* enhance.js tags existing cards/panels with .fx-sheen and feeds --mx/--my (0-100%) as the pointer moves across each element. */ .fx-sheen{ position:relative } .fx-sheen::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none; opacity:0; transition:opacity .35s ease; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(47,168,239,.16), transparent 42%); mix-blend-mode:screen; } .fx-sheen.is-live::after{ opacity:1 } /* a hairline that lights up where the cursor is — the "glass edge catching light" */ .fx-sheen::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none; opacity:0; transition:opacity .35s ease; padding:1px; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(47,168,239,.55), rgba(47,168,239,.30) 40%, transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .fx-sheen.is-live::before{ opacity:.9 } /* keep real content above the overlays */ .fx-sheen>*{ position:relative; z-index:2 } .section--light .fx-sheen::after{ background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(47,168,239,.12), transparent 42%); } /* ---------- 3. themed photo frame (blends bright photos into the dark theme) ---------- */ .media-photo{ position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line-2); box-shadow:var(--shadow); background:#051622; min-height:320px; } .media-photo img{ width:100%; height:100%; min-height:inherit; object-fit:cover; display:block; /* nudge bright stock toward the brand palette without a heavy filter */ filter:saturate(.92) contrast(1.02); transform:scale(1.04); transition:transform 1.1s var(--ease-out-expo); will-change:transform; } .split:hover .media-photo img, .media-photo:hover img{ transform:scale(1.10) } /* teal/ink wash + top vignette so any photo sits in the aurora world */ .media-photo::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(4,20,31,.10), rgba(4,20,31,.55)), linear-gradient(120deg, rgba(47,168,239,.20), transparent 55%); mix-blend-mode:multiply; } /* subtle scanline texture for the "engineered" feel — very low contrast */ .media-photo::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); } /* floating caption tag, optional via data-tag */ .media-photo[data-tag]::after{ } /* keep wash; tag rendered separately below */ .media-photo .media-tag{ position:absolute; left:14px; bottom:14px; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; font-family:var(--font-display); font-size:12px; letter-spacing:.4px; color:var(--ink); background:rgba(10,10,10,.6); border:1px solid var(--line-2); backdrop-filter:blur(8px); } .media-photo .media-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c5); box-shadow:0 0 10px var(--c5); } /* gentle parallax: enhance.js sets --py (px) from scroll position */ html.fx-on .media-photo img{ transform:translateY(var(--py,0)) scale(1.08) } html.fx-on .split:hover .media-photo img{ transform:translateY(var(--py,0)) scale(1.12) } /* when a photo replaces a gradient split__media, drop the old padding/centering */ .split__media.media-photo{ padding:0; display:block } /* ---------- 4. reveal: let stock photos fade+rise in like the rest of the site ---------- */ .media-photo.reveal-img{ opacity:0; transform:translateY(28px); transition:opacity var(--dur-3) var(--ease-out-expo), transform var(--dur-3) var(--ease-out-expo) } .media-photo.reveal-img.show{ opacity:1; transform:none } /* ---------- 4b. photographic service slides (solutions.html) ---------- Each .ws-right gets a real backdrop via an inline --shot url. A dark teal wash keeps the white copy readable; the slider's existing saturate/brightness filter already mutes inactive slides and snaps the active one vivid — so the photos breathe in and out with the scroll. */ .ws-right.ws-shot{ background-image: linear-gradient(150deg, rgba(10,10,10,.74), rgba(10,16,19,.84)), linear-gradient(120deg, rgba(15,111,176,.28), transparent 60%), var(--shot); background-size:cover; background-position:center; background-repeat:no-repeat; } .ws-right.ws-shot .ws-text{ color:#f4f9f8; text-shadow:0 2px 18px rgba(0,0,0,.5) } /* ---------- 4c. slide choreography: active slide's content rises in ---------- Swiper stamps .swiper-slide-active; everything below is CSS-only. Inactive slides hold content faded+shifted, the active one staggers title → caption → text → chips → link on the signature easing. */ .why-slider.swiper-initialized .swiper-slide .ws-title, .why-slider.swiper-initialized .swiper-slide .ws-cap, .why-slider.swiper-initialized .swiper-slide .ws-text, .why-slider.swiper-initialized .swiper-slide .chip-row .chip, .why-slider.swiper-initialized .swiper-slide .ws-body .card__link{ opacity:0; translate:0 22px; transition:opacity .65s var(--ease-out-expo), translate .65s var(--ease-out-expo); } .why-slider .swiper-slide-active .ws-title, .why-slider .swiper-slide-active .ws-cap, .why-slider .swiper-slide-active .ws-text, .why-slider .swiper-slide-active .chip-row .chip, .why-slider .swiper-slide-active .ws-body .card__link{ opacity:1; translate:0 } .why-slider .swiper-slide-active .ws-title{ transition-delay:.08s } .why-slider .swiper-slide-active .ws-cap{ transition-delay:.18s } .why-slider .swiper-slide-active .ws-text{ transition-delay:.22s } .why-slider .swiper-slide-active .chip-row .chip:nth-child(1){ transition-delay:.30s } .why-slider .swiper-slide-active .chip-row .chip:nth-child(2){ transition-delay:.36s } .why-slider .swiper-slide-active .chip-row .chip:nth-child(3){ transition-delay:.42s } .why-slider .swiper-slide-active .chip-row .chip:nth-child(4){ transition-delay:.48s } .why-slider .swiper-slide-active .chip-row .chip:nth-child(5){ transition-delay:.54s } .why-slider .swiper-slide-active .chip-row .chip:nth-child(6){ transition-delay:.60s } .why-slider .swiper-slide-active .ws-body .card__link{ transition-delay:.66s } /* title underline draws itself under the active slide's heading */ .why-slider .ws-title{ position:relative; padding-bottom:10px } .why-slider .ws-title::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:0; border-radius:999px; background:var(--grad-line); box-shadow:0 0 14px rgba(47,168,239,.5); transition:width .7s var(--ease-out-expo) .35s; } .why-slider .swiper-slide-active .ws-title::after{ width:64px } /* slow Ken Burns drift on the active slide's photo */ @keyframes ws-drift{ from{ background-position:center 46% } to{ background-position:center 54% } } .why-slider .swiper-slide-active .ws-right.ws-shot{ animation:ws-drift 9s ease-in-out infinite alternate; } @media (prefers-reduced-motion:reduce){ .why-slider .swiper-slide .ws-title, .why-slider .swiper-slide .ws-cap, .why-slider .swiper-slide .ws-text, .why-slider .swiper-slide .chip-row .chip, .why-slider .swiper-slide .ws-body .card__link{ opacity:1; translate:0; transition:none } .why-slider .ws-title::after{ transition:none } .why-slider .swiper-slide-active .ws-right.ws-shot{ animation:none } } /* ============================================================ ⌘K command palette (.cp-*) — glass panel, staggered results ============================================================ */ .cp{position:fixed;inset:0;z-index:200;display:none} .cp.is-open{display:block} .cp__scrim{position:absolute;inset:0;background:rgba(8,10,8,.6);backdrop-filter:blur(6px); animation:cp-fade var(--dur-1) var(--ease-out)} .cp__panel{position:absolute;left:50%;top:14vh;transform:translateX(-50%); width:min(620px,92vw);border-radius:18px;overflow:hidden; background:rgba(24,29,23,.92);border:1px solid var(--line-2); box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 40px -18px rgba(47,168,239,.45); backdrop-filter:blur(20px) saturate(130%); animation:cp-pop var(--dur-2) var(--ease-out-expo)} html[data-theme="light"] .cp__panel{background:rgba(255,255,255,.95)} html[data-theme="light"] .cp__scrim{background:rgba(20,30,20,.35)} @keyframes cp-fade{from{opacity:0}} @keyframes cp-pop{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.97)}} .cp__head{display:flex;align-items:center;gap:11px;padding:15px 17px; border-bottom:1px solid var(--line);color:var(--muted)} .cp__input{flex:1;background:none;border:0;outline:none;font:inherit;font-size:1.02rem; color:var(--ink)} .cp__input::placeholder{color:var(--faint)} .cp__esc{font-size:.68rem;padding:3px 7px;border-radius:6px;border:1px solid var(--line-2); color:var(--faint);font-family:var(--font-display)} .cp__list{list-style:none;margin:0;padding:8px;max-height:min(46vh,380px);overflow-y:auto} .cp__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px; cursor:pointer;animation:cp-item .3s var(--ease-out) backwards; animation-delay:calc(var(--d)*.025s)} @keyframes cp-item{from{opacity:0;transform:translateY(6px)}} .cp__item b{display:block;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink)} .cp__item small{display:block;color:var(--faint);font-size:.8rem} .cp__item.is-sel{background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line-2)} .cp__ico{width:34px;height:34px;display:grid;place-items:center;border-radius:9px; background:var(--glass);border:1px solid var(--line);font-size:15px;flex:none} .cp__go{margin-left:auto;color:var(--faint);font-size:.8rem;opacity:0;transition:opacity var(--dur-1)} .cp__item.is-sel .cp__go{opacity:1;color:var(--c5)} .cp__empty{padding:26px 14px;text-align:center;color:var(--faint);font-size:.92rem} .cp__foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line); color:var(--faint);font-size:.75rem} .cp__brand{margin-left:auto;color:var(--c6);font-family:var(--font-display);letter-spacing:1px} /* nav hint chip */ .cp-hint{display:inline-flex;gap:3px;margin-left:8px;padding:6px 8px;border-radius:9px; background:none;border:1px solid var(--line);cursor:pointer; transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)} .cp-hint kbd{font-size:.62rem;color:var(--muted);font-family:var(--font-display); padding:1px 4px;border-radius:4px;border:1px solid var(--line)} .cp-hint:hover{border-color:var(--c5);box-shadow:0 0 14px -4px var(--c5)} @media (prefers-reduced-motion:reduce){ .cp__panel,.cp__scrim,.cp__item{animation:none} } /* hero copy: pure-CSS entrance — no JS wait, so LCP paints immediately */ .hero-enter{animation:hero-enter var(--dur-3) var(--ease-out-expo) backwards} @keyframes hero-enter{from{opacity:0;transform:translateY(26px)}} @media (prefers-reduced-motion:reduce){.hero-enter{animation:none}} /* ---------- 4c. kinetic hero headline ---------- */ .kinetic .kchar{display:inline-block;opacity:0;transform:translateY(.55em) rotate(3deg); filter:blur(6px);animation:kchar-in .75s var(--ease-out-expo) forwards; animation-delay:calc(.15s + var(--i)*.026s)} /* inline-block chars fall outside the parent's background-clip:text — give plain chars the ramp-start ink; .accent keeps its own gradient */ .kinetic .kword{display:inline-block;white-space:nowrap} .display.kinetic .kchar{color:var(--c6)} .display.kinetic .accent.kchar{color:transparent} @keyframes kchar-in{to{opacity:1;transform:none;filter:none}} @media (prefers-reduced-motion:reduce){.kinetic .kchar{animation:none;opacity:1;transform:none;filter:none}} /* ---------- 5. respect user preferences ---------- */ @media (prefers-reduced-motion:reduce){ .media-photo img{ transform:none !important; transition:none } .fx-sheen::after,.fx-sheen::before{ display:none } } /* ---------- 6. cinematic FULL-SCREEN video hero (index.html) ---------- Portrait AI-humanoid footage as a full-bleed hero background. The copy sits over a left-weighted scrim so it stays crisp; the robot's face shows on the lighter right side. The video's containing block is the .hero section (position:relative), so it fills the whole viewport even though it's nested inside the centred .container. */ .hero--video .hero__grid{ position:static; display:block; max-width:660px; width:100%; align-items:initial } .hero--video .hero__copy{ position:relative; z-index:2; min-width:0 } /* lift copy above the video */ .hero--video .hero__visual{ position:static; display:block } .hero-portal{ position:absolute; inset:0; z-index:0; width:100%; height:100%; border:0; border-radius:0; box-shadow:none; background:#05080b; overflow:hidden; animation:none } .hero-portal__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:saturate(.97) contrast(1.04) } /* readability scrim: heavy left → clear right, brand tint, fade into the page at the bottom */ .hero-portal::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(7,11,15,.94) 0%, rgba(7,11,15,.74) 36%, rgba(7,11,15,.34) 66%, rgba(7,11,15,.10) 100%), linear-gradient(0deg, rgba(10,10,10,1) 1%, rgba(7,11,15,.22) 26%, transparent 50%), linear-gradient(155deg, rgba(47,168,239,.16), transparent 42%) } .hero-portal__grid{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35; background:repeating-linear-gradient(0deg, rgba(198,225,247,.04) 0 1px, transparent 1px 5px) } .hero-portal__scan{ position:absolute; left:0; right:0; height:20%; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent, rgba(198,225,247,.10), transparent); animation:hp-scan 6.5s linear infinite } .hero-portal__corner, .hero-portal__tag{ display:none } /* drop framed-portal chrome in full-bleed */ #heroCanvas{ display:none } /* the video is the background now */ @keyframes hp-scan{ 0%{ transform:translateY(-120%) } 100%{ transform:translateY(560%) } } @media (max-width:760px){ /* phones: the portrait video is a perfect full-screen background */ .hero--video .hero__grid{ max-width:none } .hero-portal__vid{ object-position:center 22% } .hero-portal::after{ background: linear-gradient(0deg, rgba(10,10,10,1) 2%, rgba(7,11,15,.55) 34%, rgba(7,11,15,.5) 100%), linear-gradient(155deg, rgba(47,168,239,.16), transparent 42%) } } /* reduced motion / no autoplay: show the still poster, no video, no scan */ @media (prefers-reduced-motion:reduce){ .hero-portal{ animation:none; background:#05080b url('images/hero-poster.webp') center/cover no-repeat } .hero-portal__vid{ display:none } .hero-portal__scan{ display:none } } /* ---------- 7. smart-home demo: