/* ============================================================================ HUMANX — hx-fx.css · Living Gold cinematic system (landing page only) Additive. Purely presentational. Degrades to zero-motion gracefully. Works over BOTH the dark cinematic sections and the light editorial sections. ========================================================================== */ :root{ --hxfx-gold:#B8965A; --hxfx-goldl:#D4AF72; --hxfx-goldx:#E6C98A; --hxfx-ease:cubic-bezier(.22,.61,.36,1); --hxfx-ease-out:cubic-bezier(.16,1,.3,1); } /* ---- 0. capability gates ------------------------------------------------ */ /* everything animated is opt-in via .hxfx-on on ; JS adds it only when the device can handle it and the user hasn't asked for reduced motion. */ html:not(.hxfx-on) .hxfx-canvas, html:not(.hxfx-on) #hxfx-progress{ display:none !important; } @media (prefers-reduced-motion: reduce){ .hxfx-reveal{ opacity:1 !important; transform:none !important; filter:none !important; } .hxfx-canvas, #hxfx-progress{ display:none !important; } .hxfx-shimmer::after{ display:none !important; } } /* ---- 1. hero cinematic canvas ------------------------------------------- */ /* a living gold "intelligence field" behind the hero copy. */ .hxfx-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; display:block; opacity:0; transition:opacity 1.2s ease; } .hxfx-canvas.hxfx-lit{ opacity:1; } /* keep the hero copy above the field */ .hero2-in{ position:relative; z-index:3; } /* a soft vignette + depth wash that sits between canvas and copy for legibility */ .hxfx-herowash{ position:absolute; inset:0; z-index:2; pointer-events:none; background: radial-gradient(120% 90% at 50% 34%, transparent 40%, rgba(10,10,11,.35) 100%), radial-gradient(60% 50% at 50% 30%, rgba(184,150,90,.10), transparent 70%); } /* ---- 2. scroll reveal --------------------------------------------------- */ .hxfx-reveal{ opacity:0; transform:translateY(26px); filter:blur(6px); transition:opacity .9s var(--hxfx-ease-out), transform 1s var(--hxfx-ease-out), filter .9s var(--hxfx-ease-out); transition-delay:var(--hxfx-d,0ms); will-change:opacity,transform,filter; } /* a gentler variant for large below-fold type */ .hxfx-reveal.hxfx-soft{ transform:translateY(16px); filter:blur(3px); } /* hero (above the fold) — fast, crisp, NO blur: the headline never loads soft */ .hxfx-reveal.hxfx-hero{ transform:translateY(14px); filter:none; transition:opacity .7s var(--hxfx-ease-out), transform .8s var(--hxfx-ease-out); } /* revealed state — must beat every hidden variant above (defined last, high specificity) */ .hxfx-reveal.hxfx-in, .hxfx-reveal.hxfx-soft.hxfx-in, .hxfx-reveal.hxfx-hero.hxfx-in{ opacity:1; transform:none; filter:none; } /* ---- 3. parallax layers (transform only, GPU) --------------------------- */ .hxfx-par{ will-change:transform; } /* ---- 4. wordmark shimmer + gold sweep ----------------------------------- */ /* light sweep that travels across gold text once on reveal, then rarely loops */ .hxfx-shimmer{ position:relative; } .hxfx-shimmer::after{ content:''; position:absolute; inset:-2px 0; pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,246,224,.55) 50%, transparent 62%); background-size:250% 100%; background-position:220% 0; mix-blend-mode:screen; opacity:0; } .hxfx-shimmer.hxfx-sweep::after{ animation:hxfxSweep 1.5s var(--hxfx-ease) forwards; } @keyframes hxfxSweep{ 0%{ background-position:220% 0; opacity:0; } 18%{ opacity:1; } 100%{ background-position:-40% 0; opacity:0; } } /* the nav logo gets a permanent, very slow, very subtle gold breathing sheen */ .logo.hxfx-logo span{ position:relative; } .logo.hxfx-logo{ background:linear-gradient(92deg, currentColor 0%, currentColor 40%, var(--hxfx-goldl) 50%, currentColor 60%, currentColor 100%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; animation:hxfxLogo 9s linear infinite; } @keyframes hxfxLogo{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } } /* ---- 5. section ambient fields ------------------------------------------ */ /* faint, DISTINCT gold atmospheres behind key dark sections — each different, so the page reads as chapters, never one repeated background. */ .hxfx-amb{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .hxfx-amb > *{ position:absolute; } .hxfx-amb canvas{ position:absolute; inset:0; width:100%; height:100%; } /* make sure section content stays above its ambient */ .hxfx-hasamb{ position:relative; } .hxfx-hasamb > .wrap, .hxfx-hasamb > *:not(.hxfx-amb){ position:relative; z-index:1; } /* slow drifting orb used by a couple of sections (CSS-only, cheap) */ .hxfx-orb{ border-radius:50%; filter:blur(40px); opacity:.5; will-change:transform; } .hxfx-orb.a{ width:520px; height:520px; background:radial-gradient(circle,rgba(184,150,90,.16),transparent 68%); animation:hxfxDriftA 26s ease-in-out infinite; } .hxfx-orb.b{ width:420px; height:420px; background:radial-gradient(circle,rgba(212,175,114,.12),transparent 66%); animation:hxfxDriftB 32s ease-in-out infinite; } @keyframes hxfxDriftA{ 0%,100%{ transform:translate(-6%,-4%) scale(1);} 50%{ transform:translate(8%,6%) scale(1.08);} } @keyframes hxfxDriftB{ 0%,100%{ transform:translate(6%,4%) scale(1.05);} 50%{ transform:translate(-8%,-6%) scale(1);} } /* fine gold scan-line sweep, used behind diagnostics/index chapters */ .hxfx-scan{ inset:0; background:linear-gradient(transparent, rgba(212,175,114,.05) 50%, transparent); background-size:100% 6px; opacity:.35; animation:hxfxScan 8s linear infinite; } @keyframes hxfxScan{ 0%{ background-position:0 0;} 100%{ background-position:0 -240px;} } /* ---- 6. microinteractions ----------------------------------------------- */ /* scroll progress hairline (top of viewport) */ #hxfx-progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:linear-gradient(90deg,var(--hxfx-gold),var(--hxfx-goldx)); z-index:200; pointer-events:none; box-shadow:0 0 12px rgba(212,175,114,.6); transition:width .12s linear; } /* gilded sheen sweep across primary gold CTAs on hover */ .hxfx-btn{ position:relative; overflow:hidden; isolation:isolate; } .hxfx-btn::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size:220% 100%; background-position:200% 0; opacity:0; transition:opacity .2s ease; } .hxfx-btn:hover::before{ opacity:1; animation:hxfxBtnSweep .9s var(--hxfx-ease) forwards; } @keyframes hxfxBtnSweep{ from{ background-position:200% 0;} to{ background-position:-60% 0;} } /* magnetic lift on interactive cards is already partly present; add a gold focal glow that tracks the cursor via CSS custom props set in JS */ .hxfx-glow{ position:relative; } .hxfx-glow::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0; border-radius:inherit; opacity:0; transition:opacity .3s ease; background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%), rgba(212,175,114,.16), transparent 60%); } .hxfx-glow:hover::after{ opacity:1; } /* nav link precision underline */ .nav-links a{ position:relative; } .nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:linear-gradient(90deg,var(--hxfx-gold),var(--hxfx-goldx)); transition:right .32s var(--hxfx-ease-out); } .nav-links a:hover::after{ right:0; } /* ---- 7. mobile restraint ------------------------------------------------ */ @media (max-width:760px){ /* lighter reveals, no blur (cheaper on mobile GPUs) */ .hxfx-reveal{ transform:translateY(18px); filter:none; transition:opacity .7s var(--hxfx-ease-out), transform .8s var(--hxfx-ease-out); } .hxfx-orb.a{ width:340px; height:340px; } .hxfx-orb.b{ width:280px; height:280px; } #hxfx-progress{ height:2px; } .hxfx-herowash{ background:radial-gradient(130% 80% at 50% 30%, transparent 42%, rgba(10,10,11,.45) 100%); } } /* ========================================================================== 8. MOBILE UX ELEVATION · (≤760px only — desktop stays pixel-identical) Hamburger nav takeover · floating CTA · tier carousel + swipe dots. All new components are display:none by default and only activated inside the ≤760 media query, so nothing renders at desktop widths. Tier/nav overrides are namespaced (#system…, nav>…) so they out-rank the base inline rules by specificity regardless of stylesheet source order. ========================================================================== */ /* --- shared: default-off so desktop never paints these ------------------- */ .hxnav-burger{ display:none; } .hxnav-sheet{ display:none; } .hxfab{ display:none; } .hxdots{ display:none; } @media (max-width:760px){ /* ---- 8.1 hamburger trigger (replaces the cramped mobile pill pair) ----- */ nav > .nav-cta-group{ display:none; } nav > .hxnav-burger{ display:inline-flex; align-items:center; justify-content:center; position:relative; width:44px; height:44px; margin:-6px -10px -6px 0; padding:0; background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } .hxnav-burger span{ position:absolute; left:11px; right:11px; height:1.7px; border-radius:2px; background:#1A1A1A; transition:background .2s ease, transform .35s var(--hxfx-ease-out); } .hxnav-burger span:nth-child(1){ top:16px; } .hxnav-burger span:nth-child(2){ bottom:16px; width:70%; right:auto; left:11px; } .hxnav-burger:hover span, .hxnav-burger:focus-visible span{ background:var(--hxfx-gold); } .hxnav-burger:active span:nth-child(1){ transform:translateY(1px); } /* ---- 8.2 full-screen menu takeover ------------------------------------ */ .hxnav-sheet{ display:flex; flex-direction:column; position:fixed; inset:0; z-index:2500; background: radial-gradient(120% 70% at 50% -8%, rgba(184,150,90,.12), transparent 58%), linear-gradient(180deg,#0B0B0C 0%, #090909 100%); opacity:0; visibility:hidden; transition:opacity .46s var(--hxfx-ease-out), visibility 0s linear .46s; } .hxnav-sheet.open{ opacity:1; visibility:visible; transition:opacity .5s var(--hxfx-ease-out); } .hxnav-sheet-top{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px 17px; padding-top:calc(18px + env(safe-area-inset-top,0px)); border-bottom:1px solid rgba(184,150,90,.16); } .hxnav-sheet-logo{ font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; letter-spacing:.18em; color:#FAFAFA; text-decoration:none; line-height:1; } .hxnav-sheet-logo span{ color:var(--hxfx-goldl); } .hxnav-close{ position:relative; width:44px; height:44px; margin:-6px -8px -6px 0; background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } .hxnav-close::before, .hxnav-close::after{ content:''; position:absolute; left:12px; right:12px; top:50%; height:1.7px; background:#EDE7DA; border-radius:2px; transition:background .2s ease; } .hxnav-close::before{ transform:rotate(45deg); } .hxnav-close::after{ transform:rotate(-45deg); } .hxnav-close:hover::before, .hxnav-close:hover::after, .hxnav-close:focus-visible::before, .hxnav-close:focus-visible::after{ background:var(--hxfx-goldl); } .hxnav-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; padding:14px 24px calc(20px + env(safe-area-inset-bottom,0px)); } .hxnav-list{ list-style:none; margin:0; padding:6px 0 0; } .hxnav-link{ display:flex; align-items:baseline; gap:16px; text-decoration:none; padding:16px 2px; border-bottom:1px solid rgba(255,255,255,.065); -webkit-tap-highlight-color:transparent; } .hxnav-num{ font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--hxfx-gold); min-width:22px; opacity:.85; } .hxnav-txt{ font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:400; letter-spacing:.004em; color:#F1ECE3; line-height:1.05; transition:color .25s ease; } .hxnav-arrow{ margin-left:auto; align-self:center; color:var(--hxfx-gold); font-size:16px; line-height:1; opacity:0; transform:translateX(-7px); transition:opacity .25s ease, transform .3s var(--hxfx-ease-out); } .hxnav-link:hover .hxnav-txt, .hxnav-link:focus-visible .hxnav-txt{ color:#fff; } .hxnav-link:hover .hxnav-arrow, .hxnav-link:focus-visible .hxnav-arrow{ opacity:1; transform:none; } .hxnav-sub{ display:flex; flex-wrap:wrap; gap:11px 20px; padding:18px 2px 4px; } .hxnav-sub a{ font-family:'Space Grotesk',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#8C877D; text-decoration:none; transition:color .2s ease; } .hxnav-sub a:hover, .hxnav-sub a:focus-visible{ color:var(--hxfx-goldl); } .hxnav-cta{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:11px; } .hxnav-get{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#161208; background:linear-gradient(180deg,var(--hxfx-goldl),var(--hxfx-gold)); border:1px solid rgba(230,201,138,.4); border-radius:100px; padding:16px; text-decoration:none; box-shadow:0 10px 30px -8px rgba(184,150,90,.5); } .hxnav-login{ display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#CFC9BC; background:transparent; border:1px solid rgba(255,255,255,.14); border-radius:100px; padding:15px; text-decoration:none; transition:border-color .22s ease, color .22s ease; } .hxnav-login:hover, .hxnav-login:focus-visible{ border-color:rgba(184,150,90,.6); color:#fff; } /* staggered reveal of menu rows */ .hxnav-stagger{ opacity:0; transform:translateY(16px); } .hxnav-sheet.open .hxnav-stagger{ opacity:1; transform:none; transition:opacity .5s var(--hxfx-ease-out), transform .58s var(--hxfx-ease-out); transition-delay:var(--d,0ms); } /* ---- 8.3 floating CTA — ALWAYS pinned low ------------------------------ */ /* Anchored to the very bottom of the viewport at all times. It NEVER moves vertically with scroll direction: show/hide is a pure fade + micro-scale in place, so it can never drift toward the middle of the page. */ .hxfab{ display:inline-flex; align-items:center; gap:9px; position:fixed; left:50%; top:auto; z-index:90; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,0) scale(.9); transform-origin:50% 100%; opacity:0; pointer-events:none; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; letter-spacing:.05em; color:#161208; cursor:pointer; white-space:nowrap; background:linear-gradient(180deg,var(--hxfx-goldl),var(--hxfx-gold)); border:1px solid rgba(230,201,138,.5); border-radius:100px; padding:13px 24px; box-shadow:0 12px 34px -8px rgba(184,150,90,.6), 0 5px 16px rgba(0,0,0,.32); -webkit-tap-highlight-color:transparent; transition:transform .42s var(--hxfx-ease-out), opacity .34s ease; } .hxfab.show{ transform:translate(-50%,0) scale(1); opacity:1; pointer-events:auto; } .hxfab-arrow{ line-height:1; transition:transform .3s var(--hxfx-ease-out); } .hxfab:hover .hxfab-arrow{ transform:translateX(3px); } .hxfab.show:active{ transform:translate(-50%,0) scale(.965); } /* ---- 8.4 tier carousel (rail with peek) + swipe dots ------------------ */ #system .offers{ display:flex; flex-wrap:nowrap; gap:14px; overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -24px; padding:20px 24px 40px; scroll-padding-left:24px; scroll-padding-right:24px; perspective:1500px; perspective-origin:50% 44%; } #system .offers::-webkit-scrollbar{ display:none; } #system .offers > .off{ scroll-snap-align:center; flex:0 0 84%; width:84%; min-width:84%; max-width:84%; margin:0; } /* the Labs full-bleed card behaves like every other card inside the rail */ #system .offers > .off.off-ent{ flex-basis:84%; width:84%; min-width:84%; max-width:84%; } #system .offers > .off.off-ent .off-ent-grid{ display:block; } /* keep swipes buttery: no lift/scale jump on touch inside the rail */ #system .offers > .off:hover, #system .offers > .off:active{ transform:none; border-color:rgba(255,255,255,0.08); box-shadow:0 18px 44px rgba(0,0,0,0.30); } #system .offers > .off.off-base:hover, #system .offers > .off.off-base:active{ border-color:rgba(184,150,90,0.55); box-shadow:0 26px 64px rgba(184,150,90,0.12), 0 18px 44px rgba(0,0,0,0.38); } .hxdots{ display:flex; justify-content:center; align-items:center; gap:7px; margin:18px auto 2px; padding:0; list-style:none; } .hxdots button{ width:6px; height:6px; padding:0; border:0; border-radius:100px; background:rgba(26,26,26,.22); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:width .35s var(--hxfx-ease-out), background .35s ease; } .hxdots button.on{ width:22px; background:linear-gradient(90deg,var(--hxfx-gold),var(--hxfx-goldx)); } } /* reduced motion: never hide menu/CTA content behind an entrance transform */ @media (prefers-reduced-motion: reduce){ .hxnav-stagger{ opacity:1 !important; transform:none !important; transition:none !important; } .hxfab{ transition:opacity .001ms !important; } } /* ========================================================================== 9. MOBILE FIX PASS · (≤760px ONLY — desktop stays pixel-identical) [2] The four pillars → an elite 2×2 card grid (one in each corner) [3] The HUMANX System tier cards → rounded + tactile 3D "coverflow" flip (perspective set on #system .offers above; per-card transforms in hx-fx.js) [4] Tier "Everything inside" accordion removed — features shown by default (the collapse clipped inside the horizontal rail → "opens but shows nothing") ========================================================================== */ @media (max-width:760px){ /* ---- [2] PILLARS → 2×2 elite cards ----------------------------------- */ section.pillars{ padding:26px 0 30px; } section.pillars .pillars-grid{ grid-template-columns:1fr 1fr; gap:12px; padding:0 20px; max-width:540px; margin:0 auto; } section.pillars .pillars-grid .pl{ padding:16px 15px 15px; border:1px solid rgba(184,150,90,.30); border-radius:16px; background:linear-gradient(180deg,#FFFFFF,#F5F3EF); box-shadow:0 10px 24px -14px rgba(26,22,14,.32), inset 0 1px 0 rgba(255,255,255,.75); transition:border-color .3s var(--hxfx-ease-out), box-shadow .3s var(--hxfx-ease-out), transform .3s var(--hxfx-ease-out); } section.pillars .pillars-grid .pl:hover, section.pillars .pillars-grid .pl:active{ border-color:rgba(184,150,90,.55); box-shadow:0 16px 30px -14px rgba(26,22,14,.4), inset 0 1px 0 rgba(255,255,255,.8); } section.pillars .pl-num{ display:block; margin:0 0 8px; font-size:11px; letter-spacing:.22em; } section.pillars .pl-t{ display:block; white-space:normal; font-size:13px; line-height:1.28; } section.pillars .pl-d{ display:block; margin-top:7px; min-height:0; -webkit-line-clamp:4; -webkit-box-orient:vertical; } /* ---- [3] tier cards — rounded corners + coverflow depth --------------- */ #system .offers > .off{ border-radius:20px; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-origin:50% 50%; will-change:transform, opacity; } #system .offers > .off.off-ent{ border-radius:20px; } /* centered card — premium gold edge-light + elevated depth */ #system .offers > .off.hx-cf-active{ box-shadow:0 34px 74px -14px rgba(0,0,0,.62), 0 0 0 1px rgba(212,175,114,.55), 0 26px 62px -20px rgba(212,175,114,.55); } #system .offers > .off.off-base.hx-cf-active{ box-shadow:0 34px 74px -14px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,114,.85), 0 26px 66px -18px rgba(184,150,90,.42); } /* ---- [4] features shown by default — broken accordion removed --------- */ #system .off-featsbtn{ display:none !important; } #system .offers .off .off-feats{ max-height:none !important; overflow:visible !important; opacity:1 !important; margin:2px 0 20px !important; } } /* ============================================================ hx-fx PREMIUM+ — deeper luxury depth pass (safe, additive) ============================================================ */ #system .offers > .off{ box-shadow:0 22px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035) !important; } #system .offers > .off.off-base{ box-shadow:0 26px 64px rgba(184,150,90,.12), 0 20px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(216,185,120,.16) !important; } section.pillars .pillars-grid .pl{ transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s !important; } section.pillars .pillars-grid .pl:hover{ transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,.36); } /* richer, more cinematic hero orbs */ .hxfx-orb.a{ opacity:.6; } .hxfx-orb.b{ opacity:.52; }