/* * Innovant — "From Chaos to Control" cinematic homepage intro (body-level layer). * The UI (#inv-intro-layer + #inv-intro-driver) is created by journey.js as direct children of , * so it lives OUTSIDE any theme content region and cannot be wiped by a plugin/theme re-render. * Brand-locked. Reduced-motion / no-JS / already-seen show the plain homepage (+ the no-JS poster hero). */ /* Early scroll lock + navy cover (added by the wp_head script and by journey.js) prevents any flash of the homepage before the fixed layer mounts; released the moment frames + fonts are ready. */ html.inv-intro-lock, html.inv-intro-lock body{ overflow:hidden; } html.inv-intro-lock::before{ content:""; position:fixed; inset:0; background:#102540; z-index:9000; pointer-events:none; } /* scroll driver — invisible, just creates the scroll length */ #inv-intro-driver{ inline-size:1px; margin:0; padding:0; background:transparent; pointer-events:none; } /* fixed cinematic layer — above the sticky header (z 100) and the navy cover */ #inv-intro-layer{ --jteal-lit:#5AA6D6; --jmid:#5690CC; --jamber:#D4882E; --jnavy2:#102540; --jink:#0a1622; --jpaper:#F5F7F9; --jease:cubic-bezier(.2,0,.2,1); position:fixed; inset:0; z-index:9999; overflow:hidden; background:var(--jink); color:var(--jpaper); } .inv-intro__poster{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; } #inv-film{ position:absolute; inset:0; z-index:1; inline-size:100%; block-size:100%; display:block; transform-origin:center; will-change:transform; animation:inv-ken 20s var(--jease) infinite alternate; } /* very slow ken-burns zoom on each frame (GPU-composited; edges cropped by the layer's overflow) */ @keyframes inv-ken{ from{ transform:scale(1); } to{ transform:scale(1.11); } } /* chrome */ .inv-intro__logo{ position:absolute; inset-block-start:22px; inset-inline-start:30px; z-index:6; display:inline-flex; } .inv-intro__logo img{ height:30px; width:auto; display:block; } .inv-intro__rail{ position:absolute; inset-inline-end:28px; inset-block-start:50%; transform:translateY(-50%); z-index:6; display:flex; flex-direction:column; gap:12px; } .inv-intro__rail i{ inline-size:7px; block-size:7px; border-radius:50%; background:rgba(255,255,255,.28); transition:background .3s var(--jease),transform .3s var(--jease); } .inv-intro__rail i.on{ background:var(--jamber); transform:scale(1.4); } .inv-intro__cue{ position:absolute; inset-block-end:3.5vh; inset-inline-start:50%; transform:translateX(-50%); z-index:6; transition:opacity .4s var(--jease); } .inv-intro__cue s{ display:block; inline-size:1px; block-size:32px; background:linear-gradient(rgba(245,247,249,.75),transparent); animation:invcue 1.9s var(--jease) infinite; } #inv-intro-layer.is-moved .inv-intro__cue{ opacity:0; } @keyframes invcue{ 0%{opacity:.2;transform:translateY(-6px)} 50%{opacity:1} 100%{opacity:.2;transform:translateY(6px)} } .inv-skip{ position:absolute; z-index:7; inset-block-start:22px; inset-inline-end:26px; color:rgba(245,247,249,.72); font:600 12px/1 var(--font-body,'Jost',sans-serif); letter-spacing:.06em; background:transparent; border:1px solid rgba(245,247,249,.3); border-radius:999px; padding:9px 16px; cursor:pointer; transition:color .2s,border-color .2s; } .inv-skip:hover{ color:#fff; border-color:rgba(245,247,249,.65); } .inv-skip:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--jmid); } #inv-intro-layer[dir="rtl"] .inv-intro__logo{ inset-inline-start:30px; } /* overlay text stages (JS-driven opacity) */ .inv-intro__overlay{ position:absolute; inset:0; z-index:4; } .inv-stage{ position:absolute; inset:0; display:grid; place-items:center; padding-inline:7vw; opacity:0; will-change:opacity,transform; } .inv-stage__inner{ position:relative; inline-size:min(90vw,900px); text-align:start; } .inv-stage__inner::before{ content:""; position:absolute; inset:-28px -36px; z-index:-1; border-radius:16px; background:radial-gradient(130% 130% at 22% 50%, rgba(16,37,64,.62), rgba(16,37,64,0) 72%); } #inv-intro-layer[dir="rtl"] .inv-stage__inner::before{ background:radial-gradient(130% 130% at 78% 50%, rgba(16,37,64,.62), rgba(16,37,64,0) 72%); } .inv-stage__k{ margin:0 0 14px; font:600 12px/1 var(--font-body,'Jost',sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--jteal-lit); } #inv-intro-layer[dir="rtl"] .inv-stage__k{ letter-spacing:.04em; } .inv-stage__h{ margin:0; font-family:var(--font-display,'Rimouski','Jost',sans-serif); font-size:clamp(20px,3.7vw,44px); line-height:1.16; letter-spacing:-.01em; font-weight:600; color:#fff; } .inv-stage--last .inv-stage__h{ font-size:clamp(24px,4.4vw,52px); } .inv-stage__s{ margin:16px 0 0; font:400 clamp(15px,1.5vw,19px)/1.55 var(--font-body,'Jost',sans-serif); color:rgba(245,247,249,.84); max-inline-size:54ch; } .inv-stage__cta{ display:inline-flex; align-items:center; gap:10px; margin-block-start:26px; background:var(--jamber); color:#1b1207; text-decoration:none; font:600 16px/1 var(--font-body,'Jost',sans-serif); padding:15px 28px; border-radius:999px; transition:transform .25s var(--jease),box-shadow .25s var(--jease); } .inv-stage__cta:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(212,136,46,.32); color:#1b1207; } .inv-stage__cta:focus-visible{ outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--jmid); } /* loader (covers the layer until frames + fonts are ready) */ .inv-loader{ position:absolute; inset:0; z-index:10; background:var(--jnavy2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; transition:opacity .5s var(--jease); } .inv-loader__mark img{ height:30px; width:auto; display:block; opacity:.92; } .inv-loader__bar{ position:relative; inline-size:180px; block-size:2px; background:rgba(255,255,255,.15); border-radius:2px; overflow:hidden; display:block; } .inv-loader__bar > i{ position:absolute; inset-block:0; inset-inline-start:0; inline-size:0; background:var(--jamber); transition:inline-size .2s linear; } .inv-loader.is-hidden{ opacity:0; pointer-events:none; } @media (prefers-reduced-motion: reduce){ .inv-intro__cue s, #inv-film{ animation:none; } } @media (max-width:640px){ .inv-intro__rail{ inset-inline-end:14px; } .inv-intro__logo{ inset-block-start:16px; inset-inline-start:18px; } .inv-skip{ inset-block-start:16px; inset-inline-end:16px; } } /* ---------- no-JS fallback: a static poster hero with the finale headline + CTA ---------- */ .inv-nojs{ position:relative; min-block-size:78vh; display:grid; place-items:center; padding:12vh 7vw; background-size:cover; background-position:center; color:#fff; text-align:start; } .inv-nojs::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,22,34,.55),rgba(10,22,34,.78)); } .inv-nojs__in{ position:relative; inline-size:min(90vw,900px); } .inv-nojs__k{ margin:0 0 12px; font:600 12px/1 var(--font-body,'Jost',sans-serif); letter-spacing:.14em; text-transform:uppercase; color:#5AA6D6; } .inv-nojs h2{ margin:0; font-family:var(--font-display,'Rimouski','Jost',sans-serif); font-size:clamp(32px,5vw,60px); line-height:1.12; color:#fff; } .inv-nojs__s{ margin:16px 0 0; font:400 clamp(15px,1.5vw,19px)/1.55 var(--font-body,'Jost',sans-serif); color:rgba(245,247,249,.86); } .inv-nojs__cta{ display:inline-flex; align-items:center; gap:10px; margin-block-start:26px; background:#D4882E; color:#1b1207; text-decoration:none; font:600 16px/1 var(--font-body,'Jost',sans-serif); padding:15px 28px; border-radius:999px; }