1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>News</title> 6 7<link rel="apple-touch-icon" sizes="180x180" href="/asset/3eb0efd6-48a6-4afc-9087-6abc9d7aba6b"> 8<link rel="icon" type="image/png" sizes="32x32" href="/asset/ded71e44-398e-4c0e-9df6-3918afeb17a8"> 9<link rel="icon" type="image/png" sizes="16x16" href="/asset/65975b34-2242-4308-a848-e7f8a915a1f9"> 10 11<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
12<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.7/underscore-min.js" integrity="sha512-dvWGkLATSdw5qWb2qozZBRKJ80Omy2YN/aF3wTUVC5+D1eqbA+TjWpPpoj8vorK5xGLMa2ZqIeWCpDZP/+pQGQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 12
12
13<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 13
13
14<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-balloon-js/1.1.2/jquery.balloon.min.js" integrity="sha512-uAuoMmf0Dq6YmQuIeGV8ME1MmXUoBrI5GfUG7lJs09sTn3cLGMBSdP56sJ5LnMXYJZabYC0pvCta9zYMMJPxBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 14
14
15<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
15 16
17<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js" integrity="sha512-gWlyRVDsJvp5kesJt4cSdPPLZIBdln/uSwzYgUicQcbTgRNQE4QhP5KUBIYlLYLkiKIQiuD7KUMHzqGNW/D2bQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 17
17
18<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js" integrity="sha512-K7WgwKJAJIRoRV8yDALsY4+CZhsWKk0gVFotVxC2RzCRyoEVyWH1DRDjxw2DdBKdZdBMPr4cacHbYbNco9wOvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 18
18
19<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollToPlugin.min.js" integrity="sha512-1xdGCuWYeijTaeifNNPc5UbPTZ3KCRZ5jdXNvNg59DeXnRPoLNS/V+q7u6yPHKGqN7LzXSZtUn3GFKoz/79a8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
19 20
21<script src="/assets/js/greensock/Draggable.min.js"></script>
vendor: 2 bytes, line 21
21
22<script src="/assets/js/greensock/InertiaPlugin.min.js"></script>
vendor: 2 bytes, line 22
22
23<script src="/assets/js/greensock/splittext.min.js"></script>
23 24
25<script type="text/javascript"> 26 gsap.registerPlugin(SplitText, Draggable, InertiaPlugin); 27</script>
27 28 29<!--Bootstrap-->
30<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js" integrity="sha512-ykZ1QQr0Jy/4ZkvKuqWn4iF3lqPZyij9iRv6sGqLRdTPkY69YX6+7wvVGmsdBbiIfN/8OdsI7HABjvEok6ZopQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
30 31<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap-grid.min.css" integrity="sha512-i1b/nzkVo97VN5WbEtaPebBG8REvjWeqNclJ6AItj7msdVcaveKrlIIByDpvjk5nwHjXkIqGZscVxOrTb9tsMA==" crossorigin="anonymous" referrerpolicy="no-referrer"> 32
33<script src="https://player.vimeo.com/api/player.js"></script>
33 34 35<style> 36body{ 37 opacity:0; 38} 39 40#content{ 41 margin:0 auto; 42 overflow:hidden; 43} 44.loader-fade{ 45 width: 100%; 46 height:100vw; 47 background:#000; 48 position: fixed; 49 z-index: 20; 50 display:none; 51} 52</style> 53 54<meta property="og:title" content="News"><meta property="og:url" content="https://codex.online//news"><meta property="og:type" content="website"><meta property="og:description" content="The latest news and industry related articles from around the world."><meta property="og:image" content="https://codex.online/asset/c0611db9-0d53-4198-af7c-e871c1a2a03a">
54<script type="text/javascript">var app=(()=>{ 55 var init=()=>{ 56 $(()=>{ 57 archivePage.initNews(); 58 }); 59 }; 60 init(); 61})();</script>
61<style>body{ 62 background:var(--base-background); 63 64} 65#footer ul li{ 66 line-height:1.2; 67}</style></head> 68<body> 69 70 <div class="loader-fade"></div> 71 <div class="codex"> 72 <div id="globalstyles"></div> 73 <div id="scriptstyleheader">
73<script> 74 75function updateFooter(){ 76 var htmlHeight = $("html").height(); 77 var windowHeight = window.innerHeight; 78 79 if($("#footer").hasClass("fixed")){ 80 htmlHeight += $("#footer").height(); 81 } 82 83 //console.log("window: " + windowHeight + " htmlHeight: " + htmlHeight); 84 85 if( htmlHeight < windowHeight){ 86 $("#footer").addClass("fixed"); 87 } 88 else{ 89 $("#footer").removeClass("fixed"); 90 } 91} 92 93var footerTimer; 94 95$(function(){ 96 //fixed footer 97 //$(window).resize(updateFooter); 98 //footerTimer = setInterval(updateFooter,500); 99 100 101 //$(window).resize(); 102}); 103 104</script>
104<script type="text/javascript">function showDialogbox(n,t=true){$(dialogbox).html(n).dialog("open");dialogbox.data("autoResize",t)}function closeDialogbox(){$(dialogbox).html("");$(dialogbox).dialog("close")}function sizeLightbox(){var i=100,t=$(window).height(),n=$(window).width(),r=800,u=600;return n>450&&(t>u?t=u:t-i*2,n>r?n=r:n-i*2),{width:n,height:t}}function resizeDialogbox(){if(dialogbox.data("autoResize")){var n=sizeLightbox();$(dialogbox).dialog("option","width",n.width);$(dialogbox).dialog("option","height",n.height);$("iframe",dialogbox).width(n.width-35).height(n.height-150)}else dialogbox.dialog("option","position",{my:"center",at:"center","of":window})}function revealImages(){var n=$(window).scrollTop(),t=$(window).height()+n;images=[];$("img, .fadein").not(".nofade").each(function(){images.push({top:this.getBoundingClientRect().top+n,image:this})});images.forEach(function(n){t>n.top+50&&$(n.image).animate({opacity:1},500)})}function doFadeinSlideup(){function i(n){$(n).attr("oldtop",$(n).css("top")).animate({opacity:1,top:0},1500)}function r(){doFadeinSlideup()}var n=$(window).scrollTop(),t=$(window).height()+n;objects=[];$(".fadeinslideup").each(function(){objects.push({top:this.getBoundingClientRect().top+n,obj:this})});objects.forEach(function(n){var u=$("img",n.obj).toArray(),f=!1;(u.length>0&&u.forEach(function(n){n.complete||(n.onload=r,f=!0)}),f)||($(n.obj).attr("oldtop")==null&t>n.top+50&&i(n.obj),$(n.obj).attr("oldtop")!=null&t<n.top-50&&$(n.obj).animate({opacity:0,top:$(n.obj).attr("oldtop")},0).removeAttr("oldtop"))})}function getOrdinal(n){n=n.toString().trim();n=n.length>1&&n[n.length-2]=="1"?0:n[n.length-1];switch(n){case"1":return"st";case"2":return"nd";case"3":return"rd";default:return"th"}}function getMonthText(n){return["January","February","March","April","May","June","July","August","September","October","November","December"][n]}function getDayText(n){return["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][n]}function getDateText(n){return getDayText(n.getDay())+" "+n.getDate()+getOrdinal(n.getDate())+" "+getMonthText(n.getMonth())+" "+n.getUTCFullYear()}function getTimeText(n){return n.getHours()+":"+n.getMinutes().toString().padStart(2,"0")}function lf_track_load(n,t){var r=escape(screen.width).substring(0,6),u=escape(screen.height).substring(0,6),f=escape(document.referrer).substring(0,1100),i=escape(t).substring(0,200);i=i.replace(/\%u00a0/g,"");i=i.replace(/\%u2122/g,"");i=i.replace(/\%u[0-9][0-9][0-9][0-9]/g,"");var e=escape(n).substring(0,200),o=escape(navigator.appName).substring(0,100),s=window.navigator.userLanguage||window.navigator.language,h=escape(navigator.userAgent+".lfcd"+screen.colorDepth+".lflng"+s).substring(0,1e3),c=escape(document.domain).substring(0,200),l="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(n){var t=Math.random()*16|0,i=n=="x"?t:t&3|8;return i.toString(16)}),a="https://secure.leadforensics.com/Track/Capture.aspx?trk_user=59299&trk_sw="+r+"&trk_sh="+u+"&trk_ref="+f+"&trk_tit="+i+"&trk_loc="+e+"&trk_agn="+o+"&trk_agv="+h+"&trk_dom="+c+"&trk_guid="+l+"&trk_cookie=NA",v=new Image;v.src=a}function initRevealTags(){function n(){var n=$(window).scrollTop(),t=$(window).height()+n;revealTags.forEach(function(i){var u,r;try{u=i.item.getBoundingClientRect();!i.visible&&t>u.top+n+u.height/2&&(r=$(i.item),window[r.attr("onreveal").replace("()","")].call(r),i.visible=!0);i.visible&&t<u.top+n&&(r=$(i.item),window[r.attr("onrevealreset").replace("()","")].call(r),i.visible=!1)}catch(f){}})}revealTags=$("[onReveal]").toArray().map(function(n){return{item:n,visible:!1}});n();$(window).on("scroll",n)}function setUserThemePreference(){function t(){return window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches}function u(){return n!=t()}function i(){t()?($("body").addClass("dark"),n=!0,$(window).resize()):($("body").removeClass("dark"),n=!1,$(window).resize())}var n=!1,r;i();r=setInterval(function(){u()&&i()},500)}function doRelativeFont(){$(".relativefont").toArray().forEach(n=>{n.style.fontSize=n.clientWidth/parseFloat(n.dataset.relativeFontFactor??50)+"px"})}function initRelativeFont(){$(window).resize(doRelativeFont);doRelativeFont()}function setCookie(n,t,i){var r,u;i==undefined&&(i=1);r=new Date;r.setTime(r.getTime()+i*864e5);u="expires="+r.toUTCString();document.cookie=n+"="+t+"; "+u+"; path=/;"}function getCookie(n){for(var t,r=n+"=",u=document.cookie.split(";"),i=0;i<u.length;i++){for(t=u[i];t.charAt(0)==" ";)t=t.substring(1);if(t.indexOf(r)==0)return t.substring(r.length,t.length)}return""}function decodeQuerystring(n){var t,i={};return(t=n.indexOf("?"))>=0&&(n=n.substr(t+1)),n.split("&").forEach(n=>{var t=n.split("=");i[t[0]]=t[1]}),i}function plural(n){return n>1||n==0?"s":""}function formatNumber(n){return Intl.NumberFormat("en").format(n)}function splitChars(n){$(n).each((n,t)=>{split=new SplitText(t,{type:"words,chars"}
104),split.chars.forEach(n=>{$(n).attr("data-char",n.innerText)})})}function preloadImages(n){n.forEach(n=>{var t=document.createElement("img");t.src=n})}function debounce(n,t){let i;return function(...r){const u=this;clearTimeout(i);i=setTimeout(()=>n.apply(u,r),t)}}function checkIfMobile(){return window.innerWidth<=768}function waitForCookieAcceptance(n=["_all","_func","_perf","_social"]){return new Promise(t=>{const r=()=>n.some(n=>getCookie(n)),i=()=>{r()?t("Cookie already accepted"):setTimeout(i,500)};i()})}var dialogbox,images,revealTags;jQuery.extend({getQueryParameters:function(n){return(n||document.location.search).replace(/(^\?)/,"").split("&").map(function(n){return n=n.split("="),this[n[0]]=n[1],this}.bind({}))[0]}});$(function(){dialogbox=$("#dialogbox").dialog({autoOpen:!1,resizable:!1,modal:!0,width:750,height:540,dialogClass:"theme_dialog",show:{effect:"fade",duration:750}});$(window).resize(function(){resizeDialogbox();$(".aspect16-9").each(function(){$(this).height($(this).width()/1.777)})});$(window).scroll(function(){resizeDialogbox()});$(".iframedialog a").click(function(n){n.preventDefault();var t=$("#dialog-iframe").clone();$("iframe.player",t).attr("src",$(this).attr("href").replace("http://","https://"));showDialogbox($(t).html());resizeDialogbox()});$(window).on("scroll",function(){revealImages();doFadeinSlideup()});$(window).on("resize",function(){revealImages();doFadeinSlideup()});revealTimer=setTimeout(function(){revealImages();doFadeinSlideup()},500);initRevealTags();$(window).resize()})</script>
104<style>@font-face{font-family:"Codec";src:url(/assets/fonts/codec/codecprovariable.woff2)}:root{--primary-font:Codec,AvantGarde,sans-serif;--siteMaxWidth:1664px;--color-black:#000;--color-white:#fff;--color-light-grey:#666;--color-dark-grey:#999;--siteMargin-mobile:1.125rem;--siteMargin-tablet:1.125rem;--siteMargin-desktop:2rem}html{font-variant-ligatures:none;font-size:16px}*{margin:0;padding:0}.no-wrap{white-space:nowrap}.smooth{-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6,a,div{font-family:var(--primary-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal}h1{font-size:2.5rem;letter-spacing:-.05em;font-weight:500}h2{font-size:1.9375rem;line-height:1.6875rem;letter-spacing:-.05em;font-weight:500}h3{font-size:1.3125rem;letter-spacing:-.05em;line-height:1.375rem;font-weight:500}h4{font-size:1rem;letter-spacing:-.05em;font-weight:500}h5{font-size:1.125rem;letter-spacing:-.05em;font-weight:500}h6{font-size:.9375rem;letter-spacing:-.05em;font-weight:500}.thin-title{letter-spacing:-.05em;font-size:2em;font-weight:250;margin-bottom:1em}p{font-family:var(--primary-font);font-size:.9375rem;font-style:normal;font-weight:250;letter-spacing:-.03em}.weight400{font-weight:250 !important}.weight250{font-weight:250 !important}.weight-l300{font-weight:300 !important}.weight-l400,.weight400{font-weight:400 !important}.weight-l500 .weight500{font-weight:500 !important}.weight-l600{font-weight:600 !important}.weight-l700{font-weight:700 !important}.weight-l800{font-weight:800 !important}body .question.text label,body .question.email label,body .question.date label,body .question.textarea label,body .question.s3file label{position:absolute;margin:0;left:.7em;z-index:1;transform:translateY(-50%);transition:top .3s,font-size .3s,color .3s;font-weight:300;pointer-events:none;top:.9em;font-size:.7em;color:#555;letter-spacing:.1em}body .question.text input:placeholder-shown+label,body .question.email input:placeholder-shown+label,body .question.date input:placeholder-shown+label,body .question.textarea textarea:placeholder-shown+label{top:47%;font-size:.9em;color:#000}body .question.text input:focus+label,body .question.email input:focus+label,body .question.date input:focus+label,body .question.textarea textarea:focus+label{top:.9em;font-size:.7em;color:#555;left:.7em}@media screen and (min-width:768px){h1,h2,h3,h4,h5,h6,a,blockquote{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:2.3125rem;padding-bottom:1.125rem}h2{font-size:2.3125rem;line-height:2.1875rem}h3{font-size:1.3125rem;line-height:1.375rem}h4{font-size:1.25rem}h5{font-size:1.25rem}h6{font-size:1.125rem}.thin-title{font-size:3em}p{font-size:1.25rem}}@media screen and (min-width:1200px){h1{font-size:3.75rem;padding-bottom:1.5625rem;margin-left:-4px}h2{font-size:2.8em;margin-left:-.02em;line-height:3.5rem}h3{font-size:2.4rem;line-height:2.4rem}h4{font-size:1.6rem;margin-left:-4px}h5{font-size:1.375rem;margin-left:-4px}h6{font-size:1.325rem;margin-left:-4px}p{font-size:1.4rem}}.g-m{margin-left:1.125rem;margin-right:1.125rem}.g-ml{margin-left:1.125rem}.g-mr{margin-right:1.125rem}.g-t-ml{margin-left:0}.g-p{padding-left:1.125rem;padding-right:1.125rem}.g-pl{padding-left:1.125rem}.g-pr{padding-right:1.125rem}.g-m-p{padding-left:1.125rem;padding-right:1.125rem}.g-m-pl{padding-left:1.125rem}.g-m-pr{padding-right:1.125rem}.g-t-pl{padding-left:0}.g-p-fw{padding-left:0 !important;padding-right:0 !important}.site-max{max-width:var(--siteMaxWidth)}.img-fluid{max-width:100%;height:auto}.text-start{text-align:left !important}.text-center{text-align:center !important}.text-end{text-align:right !important}#content .content-wrapper{max-width:var(--siteMaxWidth);margin:0 auto;padding-left:1em;padding-right:1em}.content-wrapper{max-width:var(--siteMaxWidth);margin:0 auto;padding-left:1em;padding-right:1em}#content .fullwidth-wrapper{max-width:var(--siteMaxWidth);margin:0 auto;padding-right:1.125rem}.dark #content a{color:#fff;text-decoration:none !important;position:relative}.dark #content a:after{content:'';position:absolute;width:100%;background-color:#a0a0a0;
104transform:scaleX(100%);height:1px;bottom:-1px;left:0;transform-origin:bottom left;transition:all .25s ease-out}.dark #content a:hover::after{width:100%;background-color:#fff}@media screen and (min-width:768px){.g-m{margin-left:1.125rem;margin-right:1.125rem}.g-ml{margin-left:1.125rem}.g-mr{margin-right:1.125rem}.g-t-ml{margin-left:0}.g-p{padding-left:1.125rem;padding-right:1.125rem}.g-pl{padding-left:1.125rem}.g-pr{padding-right:1.125rem}.g-t-pl{padding-left:0}.g-m-p{padding-left:0;padding-right:0}}@media screen and (min-width:992px){.g-m{margin-left:2rem;margin-right:2rem}.g-ml{margin-left:2rem}.g-mr{margin-right:2rem}.g-t-ml{margin-left:2rem}.g-p{padding-left:2rem;padding-right:2rem}.g-pl{padding-left:2rem}.g-pr{padding-right:2rem}.g-t-pl{padding-left:2rem}.text-lg-start{text-align:left !important}.text-lg-center{text-align:center !important}.text-lg-end{text-align:right !important}}@media screen and (min-width:1200px){#content .content-wrapper{max-width:var(--siteMaxWidth);margin:0 auto;padding-left:3.75rem;padding-right:3.75rem}.content-wrapper{max-width:var(--siteMaxWidth);margin:0 auto;padding-left:3.75rem;padding-right:3.75rem}#content .fullwidth-wrapper{max-width:var(--siteMaxWidth);margin:0 auto;padding-right:3.75rem}#content .fullhd-wrapper{max-width:1920px;margin:0 auto;padding-left:0;padding-right:0}}@media screen and (min-width:1980px){#content .fullhd-wrapper{max-width:1920px;margin:0 auto;padding-left:0;padding-right:0}}.hidden{display:none !important}.showOnDesktop{display:none}.showOnMobile{display:block}.showOnTablet{display:none}@media screen and (min-width:768px){.showOnMobile{display:none}.showOnTablet{display:block}}@media screen and (min-width:1200px){.showOnDesktop{display:block}.showOnMobile{display:none}}.white{color:#fff}.black{color:#000}.dark-grey{color:#999}.light-grey{color:#666}.blue{color:#006ceb}.white-outline{-webkit-text-stroke:.9px var(--color-white);text-stroke:.9px var(--color-white)}.b-black{background-color:var(--color-black);position:relative}.b-white{background-color:var(--color-white);position:relative}.b-offwhite{background-color:#f3f4f4;position:relative}.b-lightgrey{background-color:#d9d9d9;position:relative}.b-lightergrey{background-color:#e6e7e8;position:relative}.b-darkgrey{background-color:#414042;position:relative}.b-panelgrey{background-color:#f3f4f4;position:relative}.b-panelblack{background-color:#000;position:relative}.arrow:not(.player *){position:absolute;top:50%;transform:translateY(-50%);background:transparent;border-radius:.15em;border:1px solid #fff;text-align:center;transition:all .7s ease;cursor:pointer;pointer-events:all;width:2.2em;height:3.8em;font-size:1em;background:#000a}.arrow:not(.player *):hover{background:#999}.arrow:not(.player *):after:hover{filter:invert(1);transition:all .7s ease}.arrow.right:not(.player *):after,.arrow.left:not(.player *):after{content:"";width:100%;height:100%;display:block;background-image:url(/asset/175ab95b-6212-4fa9-85be-a15c1fb451e6);background-repeat:no-repeat;background-position:center;background-size:5px 10px;background-size:.50113rem 1.00225rem;filter:invert(1)}.arrow.left:not(.player *):after{transform:rotate(180deg)}.w-solid.arrow.right:active,.w-solid.arrow.left:active,.w-solid.arrow.right:focus,.w-solid.arrow.left:focus{outline:none}.b-solid-btn,.g-solid-btn,.w-solid-btn,.b-outline-btn,.w-outline-btn,.w-trans-btn,.b-trans-btn{display:block;position:relative;width:fit-content;height:2.7em;border-radius:.125rem;font-family:var(--primary-font);font-size:.8125rem;line-height:.8rem;font-weight:300;padding:0 1.875rem;border:none;cursor:pointer;display:inline-block;align-items:center;text-decoration:none;transition:background-color .7s ease;letter-spacing:.1em}.b-solid-btn a,.g-solid-btn a,.w-solid-btn a,.b-outline-btn a,.w-outline-btn a,.w-trans-btn a,.b-trans-btn a{text-align:center;font-family:var(--primary-font);font-size:.8125rem;line-height:.8rem;font-weight:200;letter-spacing:.07em;text-decoration:none;display:block;vertical-align:middle}.g-solid-btn:hover,.w-solid-btn:hover{background-color:#999;transition:background-color .7s ease}.g-solid-btn{color:#000;background-color:#d9d9d9}.g-solid-btn a{color:#000}.w-solid-btn{color:#000;background-color:#fff}.w-solid-btn a{color:#000}.w-trans-btn a{color:#0008}.w-outline-btn a{color:#0008}.b-solid-btn{color:#fff;background-color:#000}.b-solid-btn a{color:#fff}.b-trans-btn{color:#fff;background-color:#0008}.b-trans-btn a{color:#fff}.b-outline-btn{color:#000;background-color:#fff;border:1px solid #000;padding:.2rem 1.875rem 0}.b-outline-btn a{color:#fff}.w-outline-btn{color:#fff;border:1px solid #999;background:#0003}.w-outline-btn:hover{background-color:#999;border:1px solid #fff;transition:background-color .7s ease}.w-outline-btn-icon{display:flex;width:fit-content;height:auto;background-color:#000;padding:.63rem .56rem;border-radius:.14131rem;background:#000;cursor:pointer;color:#fff;text-align:center;font-family:var(--primary-font);font-size:.5rem;font-weight:400;line-height:normal;letter-spacing:.075rem;text-decoration:none;text-transform:uppercase;transition:background-color .7s ease}.w-outline-btn-icon:hover{background-color:#999;border:1px solid #fff;transition:background-color .7s ease}.w-outline-btn-icon span{padding:0 22px 0 36px}.w-outline-btn-icon .btn-icon-shopping{background:url("/asset/d7e939f1-898b-4d18-98e8-ec6e1398a3a4");background-repeat:no-repeat;background-size:contain;width:14px;
104height:13px;display:block}.black-trans-btn{display:block;position:absolute;width:35px;height:60px;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);width:1.5625rem;height:2.5rem;border-radius:.14988rem;border:1px solid #fff;text-align:center;transition:all .7s ease;cursor:pointer;pointer-events:all}.black-trans-btn.right:after,.black-trans-btn.left:after{content:"";width:100%;height:100%;display:block;background-image:url(/asset/175ab95b-6212-4fa9-85be-a15c1fb451e6);background-repeat:no-repeat;background-position:center;background-size:3px 6px;filter:invert(1)}.black-trans-btn.right:hover:after,.black-trans-btn.left:hover:after{filter:brightness(0) saturate(100%) invert(25%) sepia(48%) saturate(4722%) hue-rotate(211deg) brightness(101%) contrast(107%);transition:all .7s ease}.b-solid-wo-btn{height:1.4375rem;width:fit-content;display:flex;justify-content:center;align-items:center;font-family:var(--primary-font);font-size:.375rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.05625rem;text-decoration:none;padding:0 1.37731rem;border-radius:.11806rem;border:1px solid #fff;background:#000;color:#fff;transition:all .7s ease}.b-solid-wo-btn:hover{background-color:#666;border:1px solid #fff;color:var(--white);transition:all .7s ease}.b-solid-go-btn{height:1.4375rem;width:fit-content;display:flex;justify-content:center;align-items:center;font-family:var(--primary-font);font-size:.375rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.05625rem;text-decoration:none;padding:0 1.37731rem;border-radius:.11806rem;border:1px solid #8a8a8a;background:#000;color:#fff;transition:all .7s ease}.b-solid-go-btn:hover{background-color:#666;border:1px solid #fff;color:var(--white);transition:all .7s ease}.dg-solid-wo-btn{height:1.4375rem;width:fit-content;display:flex;justify-content:center;align-items:center;font-family:var(--primary-font);font-size:.375rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.05625rem;text-decoration:none;padding:0 1.37731rem;border-radius:.11806rem;border:1px solid #fff;background:#999;color:#fff;transition:all .7s ease}.dg-solid-wo-btn:hover{background-color:#999;border:1px solid #fff;color:var(--white);transition:all .7s ease}@media screen and (min-width:768px){.w-solid.arrow.right,.w-solid.arrow.left{display:block;width:25px;height:40px;border:1px solid #ccc;background-size:5px 10px}.w-solid.arrow.right:hover,.w-solid.arrow.left:hover{border:1px solid #ccc;background-color:#999;transition:background-color .7s ease}.w-solid.arrow.right:after,.w-solid.arrow.left:after{background-size:5px 10px}.b-solid-btn,.g-solid-btn,.w-solid-btn,.b-outline-btn,.w-outline-btn,.w-trans-btn,.b-trans-btn{font-size:.9375rem}.b-solid-btn a,.g-solid-btn a,.w-solid-btn a,.b-outline-btn a,.w-outline-btn a,.w-trans-btn a,.b-tran.btn a{font-size:.9375rem}.b-outline-btn{padding:.2rem 1.875rem 0}.w-outline-btn-icon{padding:.74rem .69rem;border-radius:.17275rem;font-size:.625rem}.w-outline-btn-icon span{padding:0 25px 0 42px}.w-outline-btn-icon .btn-icon-shopping{width:17px;height:14px}.black-trans-btn{background:rgba(0,0,0,.4);width:1.9375rem;height:3.125rem}.black-trans-btn.right:after,.black-trans-btn.left:after{background-size:7px 14px}.b-solid-wo-btn{height:1.875rem;font-size:.5rem;padding:0 1.78306rem}.b-solid-go-btn{height:1.875rem;font-size:.5rem;padding:0 1.78306rem}}@media screen and (min-width:992px){.w-solid.arrow.right,.w-solid.arrow.left{display:block;width:35px;height:60px;background-size:8px 16px}.w-solid.arrow.right:after,.w-solid.arrow.left:after{background-size:10px 18px}.b-solid-btn,.g-solid-btn,.w-solid-btn,.b-outline-btn,.w-outline-btn,.w-trans-btn,.b-trans-btn{font-size:1.125rem;line-height:1rem}.b-solid-btn a,.g-solid-btn a,.w-solid-btn a,.b-outline-btn a,.w-outline-btn a,.w-trans-btn a,.b-trans-btn a{font-size:1.125rem;line-height:1rem}.b-outline-btn{padding:.2rem 1.875rem 0}.w-outline-btn-icon{padding:1.06rem 1rem;border-radius:.25125rem;font-size:.875rem}.w-outline-btn-icon span{padding:0 40px 0 65px}.w-outline-btn-icon .btn-icon-shopping{width:25px;height:21px}.black-trans-btn{background:rgba(0,0,0,.4);width:2.8125rem;height:4.8125rem}.black-trans-btn.right:after,.black-trans-btn.left:after{background-size:11px 21px}.b-solid-go-btn{height:2.5rem;font-size:.625rem;padding:0 2.1875rem}}@media screen and (min-width:2000px){.col-xxxl-1{flex:0 0 auto;width:8.33333333%}.col-xxxl-2{flex:0 0 auto;width:16.66666667%}.col-xxxl-3{flex:0 0 auto;width:25%}.col-xxxl-4{flex:0 0 auto;width:33.33333333%}.col-xxxl-5{flex:0 0 auto;width:41.66666667%}.col-xxxl-6{flex:0 0 auto;width:50%}.col-xxxl-7{flex:0 0 auto;width:58.33333333%}.col-xxxl-8{flex:0 0 auto;width:66.66666667%}.col-xxxl-9{flex:0 0 auto;width:75%}.col-xxxl-10{flex:0 0 auto;width:83.33333333%}.col-xxxl-11{flex:0 0 auto;width:91.66666667%}
104.offset-xxxl-1{margin-left:8.33333333%}.offset-xxxl-2{margin-left:16.66666667%}.offset-xxxl-3{margin-left:25%}.offset-xxxl-4{margin-left:33.33333333%}.offset-xxxl-5{margin-left:41.66666667%}.offset-xxxl-6{margin-left:50%}.offset-xxxl-7{margin-left:58.33333333%}.offset-xxxl-8{margin-left:66.66666667%}.offset-xxxl-9{margin-left:75%}.offset-xxxl-10{margin-left:83.33333333%}.offset-xxxl-11{margin-left:91.66666667%}}div.cms-asset.round img{border:1px solid #aaa;border-radius:1.5em}div.cms-asset.no-border img{border:none}div.cms-asset.wide{max-width:initial}div.cms-asset.small{max-width:30em}div.cms-asset.xsmall{max-width:12em}.mce-offscreen-selection,.mce-offscreen-selection .cms-asset{display:none}.mx-n1{margin-right:-.25rem !important;margin-left:-.25rem !important}.mx-n2{margin-right:-.5rem !important;margin-left:-.5rem !important}.mx-n3{margin-right:-1rem !important;margin-left:-1rem !important}.mx-n4{margin-right:-1.5rem !important;margin-left:-1.5rem !important}.mx-n5{margin-right:-3rem !important;margin-left:-3rem !important}</style></div> 105 <div id="header"><div class="sticky"> 106 <nav class="sitenav"> 107 <div class="sitenav--inner-wrapper g-pl"> 108 <div class="logo"><a href="/us/" aria-label="Codex homepage link"><img src="/asset/30e82a0d-b94f-403b-a7b8-d1c4543b2ac2" alt="Codex Logo"></a></div> 109 <div class="sitenav-menu-wrap-container"> 110 <div class="sitenav--menu-wrap"> 111 <div class="logo"><a href="/us/" aria-label="Codex homepage link"><img src="/asset/30e82a0d-b94f-403b-a7b8-d1c4543b2ac2" alt="Codex Logo"></a></div> 112 <div class="sitenav-mobile-wrap"> 113 <div id="submenu-close" class="close"></div> 114 <div class="arrow"><img src="/asset/cca6f044-1acb-4263-a694-50d05f1aa8d5"><div class="menu-back">Back</div></div> 115 </div> 116 <ul class="sitenav--menu"> 117 <li class="menuitem"><button class="menuButton" aria-expanded="false">Product</button> 118 <i></i><p class="header-mobile">Product</p> 119 <ul class="submenu" aria-hidden="true"> 120 <li class="header header-sub"> 121 <div class="sub-section">CODEX Media & Readers</div> 122 <ul class="pages"> 123 <li class="menu-list" aria-label="CFexpress 4.0 Type A"><a href="/us/products/cfexpress-type-a">CFexpress 4.0 Type A</a></li> 124 <li class="menu-list" aria-label="CFexpress 4.0 Type B"><a href="/us/products/cfexpress-type-b">CFexpress 4.0 Type B</a></li> 125 <li class="menu-list" aria-label="CFexpress Type B Reader"><a href="/us/products/cfexpress-type-b-reader">CFexpress Type B Reader</a></li> 126 </ul> 127 </li> 128 <li class="header header-sub"> 129 <div class="sub-section">ARRI Media & Readers</div> 130 <ul class="pages"> 131 <li class="menu-list" aria-label="CompactDrive"><a href="/us/products/arri-media">CompactDrive</a></li> 132 <li class="menu-list" aria-label="CompactDrive Readers"><a href="/us/products/arri-media-readers">CompactDrive Readers</a></li> 133 </ul> 134 </li> 135 </ul> 136 </li> 137 <li class="menuitem"><button class="menuButton" aria-expanded="false">Solutions</button> 138 <i></i><p class="header-mobile">Solutions</p> 139 <ul class="submenu" aria-hidden="true"> 140 <li class="header"> 141 <ul class="pages"> 142 <li class="menu-list" aria-label="ARRI Workflow"><a href="/us/solutions/arri-workflow">ARRI Workflow</a></li> 143 <li class="menu-list" aria-label="Integrations"><a href="/us/solutions/integrations">Integrations</a></li> 144 </ul> 145 </li> 146 <li class="header"> 147 <ul class="pages"> 148 <li class="menu-list" aria-label="High Density Encoding (HDE)"><a href="/us/solutions/codex-hde">High Density Encoding (HDE)</a></li> 149 <li class="menu-list" aria-label="HDE Partner Program"><a href="/us/solutions/hde-partner-program">HDE Partner Program</a></li> 150 </ul> 151 </li> 152 </ul> 153 </li> 154 <li class="menuitem"><button class="menuButton" aria-expanded="false">Support</button> 155 <i></i><p class="header-mobile">Support</p> 156 <ul class="submenu" aria-hidden="true"> 157 <li class="header"> 158 <ul class="pages"> 159 <li class="menu-list" aria-label="Contact Support"><a href="https://help.codex.online/content/support">Contact Support</a></li> 160 <li class="menu-list" aria-label="Help Centre"><a href="https://help.codex.online/">Help Centre</a></li> 161 <li class="menu-list" aria-label="Software Downloads"><a href="https://help.codex.online/content/downloads/software">Software Downloads</a></li> 162 </ul> 163 </li> 164 <li class="header"> 165 <ul class="pages"> 166 <li class="menu-list" aria-label="Product Returns (RMA)"><a href="https://help.codex.online/content/rma-request">Product Returns (RMA)</a></li> 167 <li class="menu-list" aria-label="Office Locations"><a href="/us/support/office-locations">Office Locations</a></li> 168 </ul> 169 </li> 170 </ul> 171 </li> 172 <li class="menuitem"><button class="menuButton" aria-expanded="false">For the Makers</button> 173 <i></i><p class="header-mobile">For the Makers</p> 174 <ul class="submenu" aria-hidden="true"> 175 <li class="header"> 176 <ul class="pages"> 177 <li class="menu-list" aria-label="The CODEX Story"><a href="/us/the-codex-story">The CODEX Story</a></li> 178 <li class="menu-list" aria-label="Captured on CODEX"><a href="/us/captured-powered-cinema">Captured on CODEX</a></li> 179 <li class="menu-list" aria-label="Sign up for News"><a href="/us/login">Sign up for News</a></li> 180 </ul> 181 </li> 182 <li class="header"> 183 <ul class="pages"> 184 <li class="menu-list" aria-label="Case Studies"><a href="/us/case-studies">Case Studies</a></li> 185 <li class="menu-list" aria-label="DIT Showcase"><a href="/us/dits-in-the-field">DIT Showcase</a></li> 186 <li class="menu-list" aria-label="News"><a href="/us/news">News</a></li> 187 </ul> 188 </li> 189 </ul> 190 </li> 191 </ul> 192 </div> 193 </div> 194 <div class="sitenav--utility-wrap"></div> 195 <div class="submenu search-bar" id="search-bar"> 196 <input id="search-area" class="search-area" type="text" name="search" autocomplete="off"> 197 <div class="suggested-searches" id="suggested-searches"> 198 <div class="suggested-header"></div> 199 <div id="search-results"></div> 200 </div> 201 </div> 202 </div> 203 </nav> 204 <div id="quick-nav" class="quick-nav"> 205 <div class="quick-nav--header"> 206 <div class="drop-menu">
207 <span data-custom-field-name="Quicknav Header" data-custom-field-type="text" data-custom-field-group="Header"></span> 208 <div class="button"></div> 209 <div class="dropdown"> 210 <div class="bg"></div> 211 </div> 212 </div> 213 </div> 214 <div class="quick-nav--hr"></div> 215 <div class="quick-nav--links"> 216 <ul></ul> 217 <div class="quick-nav--menu-bar"></div> 218 <div class="quick-nav--mobile-arrows"> 219 <div class="quick-nav--prev"><img src="/asset/175ab95b-6212-4fa9-85be-a15c1fb451e6"></div> 220 <div class="quick-nav--next"><img src="/asset/175ab95b-6212-4fa9-85be-a15c1fb451e6"></div> 221 </div> 222 </div> 223 </div> 224 <div class="sitenav--dim-wrapper"></div> 225</div> 226<div class="totop"><img src="/asset/2e233c90-78ae-4615-812b-88abf8e6abf6"></div>
227<script type="text/javascript">let siteNav = (() => { 228 let init = async () => { 229 var timeOut; 230 window.addEventListener('resize', () => { 231 clearTimeout(timeOut); 232 timeOut = setTimeout(handleResize, 200); 233 }); 234 235 $(async () => { 236 selectNavigation(); 237 initSubNavigationMenu(); 238 initNavigationMenu(); 239 initUtiliyMenu(); 240 search(); 241 toTop(); 242 if (typeof (_quickNav) != "undefined" && _quickNav) { 243 $("body").addClass("quicknav"); 244 if (typeof (_hideQuickNavLinks) != "undefined" && _hideQuickNavLinks) { 245 $("body").addClass("hidequicknavlinks"); 246 } 247 } else { 248 initMenuScroll(); //default behaviour 249 } 250 251 //cart 252 $("#header .cart").append("<div></div>"); 253 $("#header .cart > button").click(() => { shop.toggleCart(); }).html("<div><i></i></div>"); 254 await shop.initCart($("#header .cart > div")[0]); 255 }); 256 }, 257 scrollDeadzone = 5, 258 topScrollDeadzone = 50, 259 lastScrollTop = 0, 260 menuHideTl, 261 menuScrollTl, 262 initMenuScroll = () => { 263 //menu hide/reveal animation 264 menuHideTl = gsap.timeline().pause(); 265 menuHideTl.to("#header", { top: "-5.1em", ease: "power1.inOut", duration: 0.7 }); 266 menuHideTl.to(".sitenav--inner-wrapper", { opacity: 0, delay: 0.5, duration: 0.2 }, "<"); //iphone transparent header fix 267 268 lastScrollTop = $(window).scrollTop(); 269 $(window).scroll(menuScrollHandler).scroll(); 270 271 menuScrollTl = gsap.from("body", { 272 scrollTrigger: { 273 start: "top top", 274 end: "+=100", 275 trigger: "body", 276 onEnter: e => { 277 gsap.set("#header", { position: "absolute" }); 278 }, 279 onLeave: e => { 280 e.trigger.classList.remove("top"); 281 gsap.set("#header", { position: "fixed" }); 282 menuHideTl.pause().seek(1); 283 }, 284 onLeaveBack: e => { 285 e.trigger.classList.add("top"); 286 menuHideTl.pause().seek(0); 287 }, 288 tag: "menu" 289 } 290 }); 291 292 if ($(window).scrollTop() == 0) { 293 $("body").addClass("top"); 294 } 295 }, 296 menuScrollHandler = e => { 297 scrollTop = $(e.currentTarget).scrollTop(); 298 299 //set menu visibility 300 if (scrollTop > lastScrollTop + scrollDeadzone && scrollTop > topScrollDeadzone) { 301 hideMenu(); 302 lastScrollTop = scrollTop; 303 return; 304 } 305 if (scrollTop < lastScrollTop - scrollDeadzone) { 306 showMenu(); 307 lastScrollTop = scrollTop; 308 return; 309 } 310 }, 311 showMenu = () => { 312 menuHideTl.reverse(); 313 }, 314 hideMenu = () => { 315 menuHideTl.play(); 316 }, 317 handleResize = () => { 318 menus = document.querySelectorAll('.sitenav--menu-wrap .sitenav--menu .menuitem'); 319 subHeader = document.querySelectorAll('.sitenav--inner-wrapper .submenu .header-sub'); 320 subHeader.forEach((subHeader) => { 321 gsap.set(subHeader, { clearProps: "all" }); 322 $(subHeader).removeClass("active"); 323 }); 324 if (!checkIfMobile()) { 325 $('.sitenav--menu .submenu.active').removeClass("active"); 326 } else { 327 gsap.set($('.sitenav--inner-wrapper .menuitem .submenu'), { clearProps: "all" }); 328 } 329 $('.sitenav--inner-wrapper .submenu .header.active').removeClass("active"); 330 gsap.set($('.sitenav--inner-wrapper .submenu .header'), { clearProps: "all" }); 331 $('.sitenav--inner-wrapper .submenu.active .header-sub.active').removeClass("active"); 332 submenu = null; 333 334 var topNavigation = document.querySelector('.sitenav'); 335 menus = topNavigation.querySelectorAll('.sitenav--menu-wrap .sitenav--menu .menuitem');
336 menus.forEach((button) => { 337 button.replaceWith(button.cloneNode(true)); 338 }); 339 340 initNavigationMenu(); 341 initSubNavigationMenu(); 342 setSearchClose(); 343 initSearchNavigationMenu(); 344 }, 345 toTop = () => { 346 $(".totop").insertAfter("#header"); 347 $(".totop").click((e) => { 348 e.preventDefault(); 349 gsap.to(window, { scrollTo: 0 }); 350 }); 351 var toTopVisible = false; 352 ScrollTrigger.create({ 353 start: 0, 354 end: () => document.body.clientHeight, 355 onUpdate: _.throttle(e => { 356 if (!toTopVisible && e.direction == 1 && $(window).scrollTop() > 500) { 357 gsap.to($(".totop"), { opacity: 1, duration: 0.5 }); 358 toTopVisible = true; 359 } 360 if (toTopVisible && e.direction == -1) { 361 gsap.to($(".totop"), { opacity: 0, duration: 0.5 }); 362 toTopVisible = false; 363 } 364 }, 500, { leading: false }), 365 invalidateOnRefresh: true 366 }); 367 }, 368 menuItems = { 369 utility: [ 370 { 371 label: "search", 372 icon: "/asset/a7626059-ecef-4ef1-98b4-b8b27d5b55f9", 373 }, 374 { 375 label: "cart", 376 icon: "/asset/7cf0729a-e853-4362-9e84-030bd39627dd" 377 }, 378 { 379 label: "account",
380 icon: "/asset/f474d0fc-01a1-4b13-9b27-160ed8741892", 381 dropdown: [ 382 { 383 pages: [ 384 { 385 label: 'Sign in', 386 url: "/login", 387 class: "log-in" 388 }, 389 { 390 label: 'Sign Out', 391 url: "https://signin.dev.codex.online/v2/logout?client_id=04UMxAbezif09fK25Qx2CbShGIELSyPZ&returnTo=https://staging.codex.online?action=logout", 392 class: "logout" 393 } 394 ] 395 } 396 ] 397 }, 398 { 399 label: "burger", 400 icon: "/asset/5aed46ee-b7e8-4b6d-b8a8-bb176c2d1d2a" 401 } 402 ] 403 }, 404 menuHtml, 405 selectNavigation = () => { 406 var utilityNav = document.querySelector('.sitenav--utility-wrap'); 407 renderNavigation(utilityNav, menuItems.utility); 408 }, 409 renderNavigation = (target, object) => { 410 menuHtml = '<ul class="sitenav--menu">'; 411 object.forEach((e) => { 412 menuHtml += target.className == 'sitenav--utility-wrap' ? '<li class="menuitem ' + e.label + '">' : '<li class="menuitem">'; 413 if (e.dropdown) { 414 if (e.icon) { 415 menuHtml += '<button class="menuButton" alt="' + e.label + '" aria-expanded="false"></button>'; 416 } else { 417 menuHtml += '<button class="menuButton" aria-expanded="false">' + e.label + '</button>'; 418 } 419 menuHtml += '<ul class="submenu" aria-hidden="true" ><i></i>'; 420 menuHtml += '<p class="header-mobile">' + e.label + '</p>'; 421 e.dropdown.forEach((sub) => { 422 if (sub.section) { 423 menuHtml += '<li class="header header-sub">'; 424 menuHtml += '<div class="sub-section">' + sub.section + '</div>'; 425 } else { 426 menuHtml += '<li class="header">'; 427 } 428 menuHtml += '<ul class="pages">'; 429 sub.pages.forEach((page) => { 430 if (page.subSubSection) { 431 listClass = page.class != undefined ? "sub-sub" + page.class : "sub-sub"; 432 menuHtml += `<li class=${listClass} onClick="window.location.href='${page.url}'; return false;" aria-label="${page.label}"><a href ="${page.url}">${page.label}</a></li>`; 433 menuHtml += '<ul class="subsub-pages">'; 434 menuHtml += '<p class="header-mobile">' + page.label + '</p>'; 435 page.subSubSection.forEach((subsub) => { 436 menuHtml += `<li class=${listClass} onClick="window.location.href='${subsub.url}'" aria-label="${subsub.label}"><a href ="${subsub.url}">${subsub.label}</a></li>`; 437 }); 438 menuHtml += '</ul></li>'; 439 } else { 440 listClass = page.class != undefined ? page.class : "menu-list"; 441 menuHtml += `<li class=${listClass} onClick="window.location.href='${page.url}'" aria-label="${page.label}">${page.url != undefined ? `<a href ="${page.url}">${page.label}</a>` : `<span>${page.label}</span>`}</li>`; 442 } 443 }); 444 menuHtml += '</ul></li>'; 445 }); 446 menuHtml += '</ul>'; 447 } else { 448 menuHtml += '<button class="menuButton" aria-label="' + e.label + '"></button>'; 449 } 450 menuHtml += '</li>'; 451 }); 452 menuHtml += '</ul>'; 453 target.innerHTML += menuHtml; 454 $(".sitenav--utility-wrap .sitenav--menu .menuitem.search").append($('.sitenav--inner-wrapper .search-bar')); 455 $('.sitenav--utility-wrap .menuitem.cart button').append($('#header_basket')); 456 }, 457 menus, 458 menuTop, 459 menuExpanded = false, 460 isAnimating = false, 461 showDimWrapper = () => { 462 $('.sitenav--dim-wrapper').addClass('show'); 463 }, 464 hideDimWrapper = () => { 465 $('.sitenav--dim-wrapper').removeClass('show'); 466 }, 467 searchMenuButton, searchButton, 468 searchOpen = (e) => { 469 gsap.to($('.menuitem.account .submenu'), { height: 0, duration: 0.1, ease: "Power3.out" }); 470 471 menuExpanded = true; 472 showDimWrapper(); 473 searchMenuButton.classList.add("active"); 474 searchMenuButton.removeEventListener("click", searchOpen); 475 searchMenuButton.addEventListener("click", searchClose); 476 if (!checkIfMobile()) { 477 setTimeout(() => { $("#search-area").focus(); }, 250); 478 } 479 480 $("#search-area").val(""); 481 setRollOverEvents(e); 482 }, 483 searchClose = (e) => { 484 if (e.target.closest('.search-area')) { 485 // If the click is inside the search input, do nothing and return early 486 return; 487 } 488 setRollOutEvents(e); 489 showDimWrapper(); 490 491 searchButton.classList.remove("active"); 492 searchMenuButton.classList.remove("active"); 493 searchMenuButton.removeEventListener("click", searchClose); 494 searchMenuButton.addEventListener("click", searchOpen); 495 }, 496 initSearchNavigationMenu = () => { 497 searchNav = document.querySelectorAll('.sitenav--utility-wrap .sitenav--menu .menuitem.search'); 498 searchNav.forEach((button) => { 499 searchButton = button.querySelector('button'); 500 searchMenuButton = button; 501 if (!checkIfMobile()) { 502 searchButton.addEventListener('click', searchOpen); 503 } else { 504 searchMenuButton.addEventListener("click", searchOpen); 505 } 506 }); 507 }, 508 currentButton = null, 509 submenu, 510 menuTl, 511 subHeader, 512 subMenuActive, 513 subSubMenuActive, 514 calculatedHeight, 515 initNavigationMenu = () => { 516 var topNavigation = document.querySelector('.sitenav'); 517 518 menus = topNavigation.querySelectorAll('.sitenav--menu-wrap .sitenav--menu .menuitem, .sitenav--utility-wrap .sitenav--menu .menuitem.account'); 519 if (checkIfMobile()) { 520 // Add event listeners for mobile clicks
521 menus.forEach((button) => { 522 button.removeEventListener("click", setMobileClickEvent); 523 524 let submenu = button.lastElementChild; 525 gsap.set(submenu, { top: menuTop }); 526 button.addEventListener("click", (e) => { 527 if (e.srcElement.nodeName == "A") return; //event source is link. navigate 528 button.classList.add("active"); 529 setMobileClickEvent(e); 530 button.removeEventListener("click", setMobileClickEvent); 531 }); 532 }); 533 } else { 534 //Event Listeners for navigation rollovers and rollouts 535 menus.forEach((button) => { 536 button.removeEventListener("click", setMobileClickEvent); 537 button.removeEventListener('mouseleave', handleMouseLeave); 538 var menuButton = button.querySelector('button'); 539 menuButton.removeEventListener('mousemove', handleMouseMove); 540 541 let timer, mouseLeaveTimer; 542 function handleMouseMove(e) { 543 clearTimeout(timer); 544 clearTimeout(mouseLeaveTimer); 545 timer = setTimeout(() => { 546 if (menuExpanded !== true) { 547 setRollOverEvents(e); 548 menuButton.removeEventListener('mousemove', handleMouseMove); 549 } 550 }, 100); 551 } 552 function handleMouseLeave(e) { 553 clearTimeout(timer); 554 button.classList.remove("active"); 555 mouseLeaveTimer = setTimeout(() => { 556 setRollOutEvents(e); 557 button.removeEventListener('mouseleave', handleMouseLeave); 558 }, 100); 559 } 560 menuButton.addEventListener('mouseover', (e) => { 561 button.classList.add("active"); 562 if ($('.menuitem.search.active').length) { 563 setSearchClose(); 564 } 565 showDimWrapper(); 566 menuButton.addEventListener('mousemove', handleMouseMove); 567 button.addEventListener('mouseleave', handleMouseLeave); 568 }); 569 let submenu = button.lastElementChild; 570 submenu.removeEventListener("click", setMobileClickEvent); 571 572 gsap.set(submenu, { top: 31 }); 573 }); 574 } 575 }, 576 initUtiliyMenu = () => { 577 $('.sitenav--menu .menuitem.burger').on("click", () => { 578 $('.sitenav, .sitenav--menu-wrap').addClass("active"); 579 submenu = null; 580 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 581 gsap.to($('.menuitem .submenu'), { height: 0, duration: 0.2, ease: "Power3.out" }); 582 } 583 setSearchClose(); 584 showDimWrapper(); 585 }); 586 587 $('.sitenav--dim-wrapper').on("click", (e) => { 588 dimWrapperClose(e); 589 }); 590 591 $('.sitenav--dim-wrapper').on('mouseover', (e) => { 592 if (!$("nav").hasClass("active")) { 593 dimWrapperClose(e); 594 } 595 }); 596 $('.sitenav-mobile-wrap .close').on("click", (e) => { 597 $("body").css({ position: "relative" }); 598 hideDimWrapper(); 599 $('nav').removeClass("active"); 600 menuExpanded = false; 601 $('.sitenav--menu-wrap.active').removeClass("active"); 602 $('.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu').css("right", "0%"); 603 $('.sitenav--menu .submenu.active').removeClass("active"); 604 $('.sitenav--menu-wrap .arrow').css('display', 'none'); 605 $('.sitenav--menu-wrap .sitenav--menu .menuitem.active').removeClass("active"); 606 $('.sitenav--menu-wrap .sitenav--menu .header-sub.active').removeClass("active"); 607 submenu = null; 608 if ($('.menuitem.search.active').length) { 609 setSearchClose(); 610 } 611 if (!$('.sitenav--inner-wrapper .account.active').length) { 612 gsap.to($('.menuitem.account .submenu'), { opacity: 0, delay: 0.2, ease: "Power3.out" }); 613 } 614 resetSubNav(); 615 initSearchNavigationMenu(); 616 }); 617 $('.sitenav-mobile-wrap .arrow').on("click", () => { 618 if (subMenuActive) { 619 $('.sitenav--inner-wrapper .submenu.active .header-sub.active').removeClass("active"); 620 $('.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu').css("right", "0%"); 621 $('.sitenav--menu .submenu.active').removeClass("active"); 622 $('.sitenav--menu-wrap .arrow').css('display', 'none'); 623 $('.sitenav--menu-wrap .sitenav--menu .menuitem.active').removeClass("active"); 624 } else if (subSubMenuActive) { 625 $('.sitenav--inner-wrapper .menuitem.active .submenu.active').css("right", "calc(-100% - 25px)"); 626 $('.sitenav--menu .submenu.active .sub-sub').removeClass("active"); 627 gsap.set($('.sitenav--menu .submenu'), { clearProps: "right" }); 628 subMenuActive = true; 629 } 630 }); 631 }, 632 dimWrapperClose = (e) => { 633 $('.sitenav--menu-wrap.active').removeClass("active"); 634 $('.sitenav--menu .submenu.active').removeClass("active"); 635 $('.sitenav--menu-wrap .arrow').css('display', 'none'); 636 $('.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu').css("right", "0%"); 637 $('.sitenav--menu-wrap .sitenav--menu .menuitem.active').removeClass("active"); 638 $('.sitenav--utility-wrap .menuitem.burger menuButton.active').removeClass("active"); 639 $('.sitenav--menu-wrap .sitenav--menu .header-sub.active').removeClass("active"); 640 $('.sitenav--inner-wrapper .search-bar .suggested-searches').css("display", "none"); 641 if (!checkIfMobile()) { 642 setRollOutEvents(e); 643 } 644 if (checkIfMobile() && !$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 645 submenu = null; 646 } 647 setSearchClose(); 648 initSearchNavigationMenu(); 649 resetSubNav(); 650 hideDimWrapper(); 651 }, 652 resetSubNav = () => { 653 $('.sitenav--inner-wrapper .menuitem.active .submenu.active').css("right", "calc(-100% - 25px)"); 654 $('.sitenav--menu .submenu.active .sub-sub').removeClass("active"); 655 gsap.set($('.sitenav--menu .submenu'), { clearProps: "right" }); 656 subMenuActive = false; 657 subSubMenuActive = false; 658 $("nav").removeClass("active"); 659 }, 660 initSubNavigationMenu = () => { 661 if (checkIfMobile) { 662 menuTop = 0; 663 } else { 664 menuTop = 58; 665 gsap.set($('.sitenav--inner-wrapper .menuitem .submenu'), { opacity: 0 }); 666 gsap.set($('.sitenav--inner-wrapper .menuitem.account .submenu'), { opacity: 0 }); 667 } 668 669 subsSection = document.querySelectorAll('.submenu .header-sub .sub-section'); 670 subsSection.forEach((button) => { 671 button.addEventListener("click", (e) => { 672 var target = e.currentTarget; 673 674 if (!checkIfMobile()) return; 675 676 if (target.parentElement.classList.contains("active")) { 677 gsap.to($('.sitenav--inner-wrapper .submenu.active .header-sub.active .pages'), { 678 height: 0, duration: 0.3, onComplete: () => { 679 gsap.set($('.sitenav--inner-wrapper .submenu.active .header-sub.active .pages'), { height: "unset", clearProps: "all" }); 680 $('.sitenav--inner-wrapper .submenu.active').removeClass("active"); 681 $('.sitenav--inner-wrapper .submenu .header-sub.active').removeClass("active"); 682 } 683 }); 684 return false; 685 } 686 e.preventDefault(); 687 gsap.to($('.sitenav--inner-wrapper .submenu.active .header-sub.active .pages'), { 688 height: 0, duration: 0.3, onComplete: () => { 689 gsap.set($('.sitenav--inner-wrapper .submenu.active .header-sub.active .pages'), { height: "unset", clearProps: "all" }); 690 $('.sitenav--inner-wrapper .submenu.active .header-sub.active').removeClass("active"); 691 if (checkIfMobile()) { 692 target.parentElement.classList.add("active"); 693 } 694 } 695 }); 696 }); 697 }); 698 }, 699 // Mobile Events 700 setMobileClickEvent = (event) => { 701 subMenuActive = true; 702 subSubMenuActive = false; 703 event.preventDefault(); 704 menuExpanded = true; 705 isAnimating = true; 706 target = event.target; 707 submenu = document.querySelector('.menuitem.active .submenu'); 708 if (checkIfMobile()) { 709 submenu.classList.add("active"); 710 $('.sitenav--menu').css("right", "calc(100% + 2em"); 711 } 712 $('.sitenav--menu-wrap .arrow').css('display', 'flex'); 713 isAnimating = false; 714 715 subSubmenus = submenu.querySelectorAll('.sub-sub'); 716
717 subSubmenus.forEach((button) => { 718 button.addEventListener("click", function (e) { 719 e.preventDefault(); 720 e.stopImmediatePropagation(); 721 }, true); 722 button.addEventListener('click', function (e) { 723 subMenuActive = false; 724 subSubMenuActive = true; 725 e.preventDefault(); 726 e.stopImmediatePropagation(); 727 button.classList.add("active"); 728 setMobileSubMenuClickEvent(e); 729 button.removeEventListener("click", setMobileSubMenuClickEvent); 730 }, true); 731 }); 732 }, 733 setMobileSubMenuClickEvent = (event) => { 734 event.preventDefault(); 735 event.stopImmediatePropagation(); 736 menuExpanded = true; 737 isAnimating = true; 738 target = event.target; 739 subsubmenu = document.querySelector('.menuitem.active .subsub-pages'); 740 if (checkIfMobile()) { 741 subsubmenu.classList.add("active"); 742 $('.sitenav--inner-wrapper .menuitem.active .submenu.active').css("right", "0"); 743 } 744 isAnimating = false; 745 }, 746 // Desktop Events 747 setRollOverEvents = async (event) => { 748 if (isAnimating) menuTl.play(); 749 750 menuTl = new gsap.timeline({ paused: true }); 751 752 $('nav').addClass("active"); 753 menuExpanded = true; 754 event.preventDefault(); 755 isAnimating = true; 756 //Check if current target is already open. 757 if (currentButton !== null && event.target === currentButton) return; 758 button = document.querySelector('.menuitem.active button'); 759 currentButton = button; 760 submenu = document.querySelector('.menuitem.active .submenu'); 761 subHeader = document.querySelectorAll('.menuitem.active .submenu .header'); 762 currentSubMenu = submenu; 763 if (submenu) { 764 submenu.style.opacity = '0'; 765 submenu.style.height = 'auto'; 766 submenuHeight = submenu.offsetHeight; 767 const computedStyle = window.getComputedStyle(submenu); 768 const paddingTop = parseFloat(computedStyle.paddingTop); 769 const paddingBottom = parseFloat(computedStyle.paddingBottom); 770 calculatedHeight = submenuHeight - paddingTop - paddingBottom; 771 // Reset the submenu to be hidden for the animation 772 submenu.style.height = 0; 773 submenu.style.visibility = 'visible'; 774 } 775 submenuLast = $(".menuitem.active .submenu .header:last-child"); 776 submenuWidth = $(".menuitem.active .submenu .header:last-child").width(); 777 778 //Set the width of the last submenu to correct roll over resizing. 779 gsap.set(submenuLast, { width: submenuWidth }); 780 781 gsap.set(submenu, { opacity: 1 }); 782 783 if (event.target.parentNode.classList.contains("search")) { 784 gsap.fromTo(submenu, { height: 0 }, { opacity: 1, height: calculatedHeight, duration: 0.05, ease: "Power3.out" }); 785 } else { 786 menuTl.fromTo(submenu, { height: 0 }, { opacity: 1, height: calculatedHeight, duration: 0.05, ease: "Power3.out" }); 787 } 788 789 menuTl.fromTo(subHeader, { top: -20, visibility: "hidden" }, { 790 top: 0, visibility: "visible", delay: 0, duration: 0.1, ease: "Power3.out", onComplete: () => { 791 isAnimating = false; 792 } 793 }, "<"); 794 if (event.target.parentNode.classList.contains("search")) return; 795 if (button != undefined) button.classList.add('active'); 796 menuTl.play(); 797 }, 798 setRollOutEvents = (event) => { 799 menuExpanded = false; 800 801 if (menuTl != undefined) { 802 isAnimating = true; 803 if (event.target.classList.contains('burger') 804 || event.target.classList.contains('search-bar') 805 || event.target.classList.contains('search-area') 806 ) { 807 return; 808 } else { 809 $('nav').removeClass("active"); 810 811 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 812 if (event.target.parentNode.classList.contains("search")) { 813 gsap.to(submenu, { 814 height: 0, duration: 0.1, ease: "Power3.out", onComplete: () => { 815 gsap.set(submenu, { opacity: 0, delay: 0.3 }); 816 } 817 }); 818 } else { 819 menuTl.to(submenu, { height: 0, duration: 0.1, ease: "Power3.out" }); 820 } 821 } 822 } 823 824 if (button.classList != null) button.classList.remove('active'); 825 currentButton = null; 826 currentSubMenu = null; 827 828 menuTl = new gsap.timeline({ paused: true });
829 if (event.relatedTarget && event.relatedTarget.classList.contains('menuitem') 830 || event.relatedTarget && event.relatedTarget.classList.contains('menuButton') 831 || event.relatedTarget && event.relatedTarget.classList.contains('search-bar') 832 || event.relatedTarget && event.relatedTarget.classList.contains('search-area') 833 ) { 834 return; 835 } else { 836 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 837 gsap.set($('.sitenav--inner-wrapper .menuitem .submenu'), { opacity: 0, delay: 0.2 }); 838 hideDimWrapper(); 839 } 840 isAnimating = false; 841 } 842 843 if (submenu != null) { 844 submenuHeight = submenu.offsetHeight; 845 } 846 } 847 848 isAnimating = false; 849 }, 850 setSearchClose = () => { 851 menuExpanded = false; 852 if (menuTl != undefined) { 853 isAnimating = true; 854 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 855 gsap.to($('.menuitem.search .submenu'), { 856 height: 0, duration: 0.2, ease: "Power3.out", onComplete: () => { 857 gsap.set($('.menuitem.search .submenu'), { opacity: 0, delay: 0.2 }); 858 } 859 }); 860 } 861 if (button.classList != null) button.classList.remove('active'); 862 currentButton = null; 863 currentSubMenu = null; 864 submenu = null; 865 menuTl = new gsap.timeline({ paused: true }); 866 $('.menuitem.search').removeClass('active'); 867 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 868 hideDimWrapper(); 869 } 870 } 871 872 initSearchNavigationMenu(); 873 $('.sitenav--menu .menuitem.search .menuButton').off("mousedown", searchClose); 874 }, 875 // Search functionality 876 search = () => { 877 const searchInput = document.getElementById('search-area'); 878 const searchResults = document.getElementById('search-results'); 879 searchBarHeight = $('#search-bar').outerHeight(); 880 let currentAbortController = null; 881 const fetchData = async (query, controller) => { 882 try { 883 const response = await fetch(`/getpages?search=${query}&limit=99`, { signal: controller.signal }); 884 if (!response.ok) { 885 throw new Error("Network reponse was not ok"); 886 } 887 const data = await response.json(); 888 displayResults(data, query); 889 } catch (error) { 890 if (error.name !== "AbortError") { 891 console.error("Fetch error ", error); 892 } 893 } 894 }; 895 let resultsHeight; 896 const displayResults = async (data, query) => { 897 searchResults.innerHTML = ""; 898 const animateBlock = () => { 899 $('#suggested-searches').css('display', 'block'); 900 resultsHeight = $('#suggested-searches').outerHeight(); 901 searchAdaptedHeight = searchBarHeight + resultsHeight; 902 gsap.to($('#search-bar'), { height: searchAdaptedHeight, duration: 0.3, ease: "Power3.out" }); 903 }; 904 if (data.length === 0) { 905 $(".sitenav--inner-wrapper .search-bar .suggested-searches .suggested-header").text(`No Results`); 906 animateBlock(); 907 } else { 908 data.forEach(item => { 909 path = item.Path.replace("/codex.online", 'https://codex.online'); 910 resultsDiv = `<section><a class="search-link" href="${path}/${item.Name}"><i ${item.Image != null ? `style="background-image:url(/asset/${item.Image}-200);"` : `class="default"`}></i><div><h2>${item.Title}</h2><h3>${item.Description ?? ""}</h3></div></a></section>`; 911 searchResults.innerHTML += resultsDiv; 912 }); 913 $(".sitenav--inner-wrapper .search-bar .suggested-searches .suggested-header").text(`${data.length} Result${data.length > 1 ? "s" : ""}`); 914 animateBlock(); 915 } 916 if (query.length < 3) { 917 searchResults.innerHTML = ''; 918 gsap.to($('#search-bar'), { height: searchBarHeight, duration: 0.3, ease: "Power3.out" }); 919 $('#suggested-searches').css('display', 'none'); 920 return; 921 } 922 }; 923 const handleSearch = _.debounce((event) => { 924 const query = event.target.value; 925 if (query.length < 3) { 926 searchResults.innerHTML = ''; 927 gsap.to($('#search-bar'), { height: searchBarHeight, duration: 0.3, ease: "Power3.out" }); 928 $('#suggested-searches').css('display', 'none'); 929 return; 930 } 931 if (currentAbortController) { 932 currentAbortController.abort(); // Cancel the previous request 933 } 934 currentAbortController = new AbortController(); 935 fetchData(query, currentAbortController); 936 }, 50); 937 searchInput.addEventListener('input', handleSearch); 938 }, 939 checkIfMobile = () => { 940 return window.innerWidth <= 992; 941 }; 942 init(); 943 return { 944 menuHideTl: () => { return menuHideTl; }, 945 menuScrollTrigger: () => { return menuScrollTl; }, 946 hideMenu: () => { menuHideTl.play(); } 947 }; 948})(); 949 950 951var quickNav = (() => { 952 var init = () => { 953 window.addEventListener("load", (event) => { 954 initMenu(); 955 updateActiveNavigation(); 956 window.addEventListener('resize', _.throttle(handleResize, 250)); 957 }); 958 }, 959 config= 960 [ 961 { 962 label : "CFexpress Type A Excel", 963 url: "cfexpress-type-a-excel", 964 group :"cfexpress" 965 }, 966 { 967 label : "CFexpress Type A Elite", 968 url: "cfexpress-type-a-elite", 969 group :"cfexpress" 970 }, 971 { 972 label : "CFexpress Type B Excel", 973 url: "cfexpress-type-b-excel", 974 group :"cfexpress" 975 }, 976 { 977 label : "CFexpress Type B Elite", 978 url: "cfexpress-type-b-elite", 979 group :"cfexpress" 980 }, 981 { 982 label : "CFexpress Type B Reader", 983 url: "cfexpress-type-b-reader", 984 group :"cfexpress" 985 }, 986 { 987 label : "CompactDrive",
988 url: "compact-drive", 989 group :"arri" 990 }, 991 { 992 label : "CompactDrive Express", 993 url: "compact-drive-express", 994 group :"arri" 995 }, 996 { 997 label : "CompactDrive Reader TB3", 998 url: "compact-drive-reader-tb3", 999 group :"arri" 1000 }, 1001 { 1002 label : "CompactDrive Reader USB-C", 1003 url: "compact-drive-reader-usb-c", 1004 group :"arri" 1005 }, 1006 { 1007 url: "cfexpress-type-a", 1008 group :"cfexpress" 1009 }, 1010 { 1011 url: "cfexpress-type-b", 1012 group :"cfexpress" 1013 }, 1014 { 1015 url: "arri-media", 1016 group :"arri" 1017 }, 1018 { 1019 url: "arri-media-readers", 1020 group :"arri" 1021 }, 1022 { 1023 url: "cfexpress-type-a-excel-copy", 1024 group :"cfexpress" 1025 } 1026 1027 ], 1028 quickNav, 1029 handleResize = () => { 1030 // set mobile navigation 1031 gsap.set($('.quick-nav ul'), { clearProps: 'all' }); 1032 if (checkIfMobile()) { 1033 $(".quick-nav--next").css('display', 'flex'); 1034 $(".quick-nav--prev").css('display', 'none'); 1035 } else { 1036 $(".quick-nav--next").css('display', 'none'); 1037 $(".quick-nav--prev").css('display', 'none'); 1038 } 1039 // Reset quicknav underline to correct position 1040 const rect = $('.quick-nav--section .active')[0].getBoundingClientRect(); 1041 $('.quick-nav--menu-bar').css({ 1042 'left': rect.left, 1043 'width': rect.width 1044 }); 1045 }, 1046 initMenu = () => { 1047 //Get all sections and create quick navigation 1048 const sections = document.querySelectorAll(".section-wrapper"); 1049 const linksUl = document.querySelector(".quick-nav--links ul"); 1050 let linkHtml = ""; 1051 sections.forEach((section, index) => { 1052 const sectionTitleElement = section.querySelector(".section-title"); 1053 if (sectionTitleElement) { 1054 const sectionTitle = sectionTitleElement.innerHTML; 1055 linkHtml += `<li ${sectionTitle.length == 0 ? "style=\"display: none;\" " : ""}class="quick-nav--section"><a id="nav${section.id.replace('section', '')}" href="#${section.id}">${sectionTitle}</a></li>`; 1056 } 1057 }); 1058 1059 linksUl.innerHTML += linkHtml; 1060 1061 //Update quick navigation on scroll 1062 window.addEventListener("scroll", (event) => { 1063 updateActiveNavigation(); 1064 }); 1065 1066 $("#nav1").addClass("active"); 1067 quickNavActiveSet(); 1068 1069 //render quick nav dropdown 1070 var url=window.location.pathname.split("/").slice(-1); 1071 var group=config.find(e=>e.url==url).group; 1072 var items=config.filter(e=>e.group==group && e.url!=url && e.label!=undefined); 1073 items.forEach(e=>{ 1074 $(".quick-nav .dropdown").append(`<a href="/products/${e.url}"><div>${e.label}</div></a>`) 1075 }); 1076 1077 clickHandlers(); 1078 }, 1079 clickHandlers = () => { 1080 quickNav = $(".quick-nav").outerHeight(); 1081 1082 $(".quick-nav a[href^='#']").on('click', function (e) { 1083 e.preventDefault(); 1084 $('.quick-nav--section a').removeClass("active"); 1085 $(this).addClass("active"); 1086 $('html, body').animate({ 1087 scrollTop: $(this.hash).offset().top - quickNav + 2 1088 }, 1000); 1089 1090 quickNavActiveSet(); 1091 }); 1092 1093 $(".quick-nav--next").on('click', function (e) { 1094 $('.quick-nav ul').css("right", '2rem'); 1095 if (checkIfMobile()) { 1096 $(".quick-nav--prev").css('display', 'flex'); 1097 $(".quick-nav--next").css('display', 'none'); 1098 } 1099 quickNavActiveSet(); 1100 }); 1101 $(".quick-nav--prev").on('click', function (e) { 1102 gsap.set($('.quick-nav ul'), { clearProps: 'all' }); 1103 if (checkIfMobile()) { 1104 $(".quick-nav--next").css('display', 'flex'); 1105 $(".quick-nav--prev").css('display', 'none'); 1106 } 1107 quickNavActiveSet(); 1108 }); 1109 1110 $(".quick-nav .drop-menu").click(()=>{ 1111 $(".quick-nav .dropdown").slideToggle(); 1112 $(".quick-nav .drop-menu").toggleClass("active"); 1113 }) 1114 }, 1115 quickNavActiveSet = () => { 1116 const rect = $('.quick-nav--section .active')[0]?.getBoundingClientRect(); 1117 if(rect==undefined) return; 1118 $('.quick-nav--menu-bar').css({ 1119 'left': rect.left, 1120 'width': rect.width 1121 }); 1122 }, 1123 updateActiveNavigation = () => { //not using intersectionobservers. 1124 const sections = [...document.querySelectorAll('.section-wrapper')]; 1125 const navLinks = document.querySelectorAll('#quick-nav ul li a'); 1126 1127 sections.reverse().every(e => { 1128 if (e.getBoundingClientRect().top < 70) { 1129 const sectionId = e.id; 1130 const navId = `nav${sectionId.replace('section', '')}`; 1131 const navLink = document.getElementById(navId); 1132 navLinks.forEach(link => link.classList.remove('active')); 1133 if (navLink != null) { 1134 navLink.classList.add('active'); 1135 const rect = navLink.getBoundingClientRect(); 1136 $('.quick-nav--menu-bar').css({ 1137 'left': rect.left, 1138 'width': rect.width 1139 }); 1140 } 1141 return false; 1142 } 1143 return true; 1144 }); 1145 }, 1146 additionalMenuItems = (label, url) => { 1147 $('.quick-nav--links ul').append(`<li class="quick-nav--section"><a id="nav-${label}" href="${url}">${label}</a></li>`); 1148 }, 1149 checkIfMobile = () => { 1150 return window.innerWidth <= 992; 1151 }; 1152 init(); 1153 return { 1154 additionalMenuItems: (label, url) => { return additionalMenuItems(label, url); } 1155 }; 1156})(); 1157</script>
1157<style>body.embed #header{ 1158 display: none; 1159} 1160 1161* { 1162 padding: 0; 1163} 1164 1165html { 1166 font-size: 16px; 1167} 1168body{ 1169 position: relative; 1170} 1171pre { 1172 white-space: nowrap; 1173 word-wrap: break-word; 1174} 1175dl,menu,ol,ul{ 1176 margin:0; 1177 padding:0; 1178} 1179 1180span.slim { 1181 max-width: 36rem; 1182 display: inline-block; 1183} 1184 1185#quick-nav{ 1186 display: none; 1187} 1188 1189.quicknav #quick-nav{ 1190 display:block; 1191 pointer-events: all; 1192} 1193 1194.quicknav.hidequicknavlinks #quick-nav .quick-nav--links, 1195.quicknav.hidequicknavlinks #quick-nav .quick-nav--hr{ 1196 display:none; 1197} 1198 1199/* ///////// Navigation Menu /////////*/ 1200 1201#header { 1202 position: absolute; 1203 width: 100%; 1204 z-index: 9999; 1205 filter: drop-shadow(0px 0px 1px #555); 1206} 1207 1208.quicknav #header{ 1209 height: 100%; 1210 top: 0; 1211 pointer-events: none; 1212} 1213 1214nav{ 1215 height: 52px; 1216 width: 100vw; 1217 max-width: 100%; 1218 z-index: 15; 1219 background-color: #fff; 1220 position: relative; 1221 display: flex; 1222 justify-content: flex-start; 1223 flex-direction: column; 1224 font-family: var(--primary-font), var(--secondary-font), "Noto Sans", sans-serif; 1225 font-weight: 400; 1226 font-style: normal; 1227 transition: box-shadow 0.7s, background-color 0.3s, filter 0.3s; 1228 filter: invert(0); 1229 padding: 0.9em 0; 1230} 1231 1232.quicknav .sticky{ 1233 position: sticky; 1234 top: -5.1em; 1235 overflow: hidden; 1236 height: calc(100vh + 6em); 1237} 1238 1239.top nav{ 1240 background-color: transparent; 1241 filter: invert(1); 1242 box-shadow: 0 1px 0 0 #0000; 1243} 1244 1245nav:hover{ 1246 background-color: #fff; 1247 filter: invert(0); 1248} 1249 1250#header .menuitem.search, 1251#header .menuitem.cart, 1252#header .menuitem.account{ 1253 display: none; 1254} 1255 1256.top .sitenav--utility-wrap .menuitem.cart > button > div{ 1257 filter: invert(1); 1258} 1259 1260.top nav:hover .sitenav--utility-wrap .menuitem.cart > button > div{ 1261 filter: invert(0); 1262} 1263 1264nav.active{ 1265 filter: invert(0); 1266} 1267.sitenav--dim-wrapper{ 1268 background-color: #000; 1269 opacity: 0; 1270 visibility:hidden; 1271 display: block; 1272 width: 100%; 1273 height: calc(100vh); 1274 top: 0; 1275 position: fixed; 1276 z-index: 12; 1277 cursor:pointer; 1278 transition: visibility .4s cubic-bezier(0.6,0,0.4,1) .1s, opacity .4s cubic-bezier(0.6,0,0.4,1) .1s; 1279 pointer-events: all; 1280} 1281.sitenav--dim-wrapper.show{ 1282 opacity: 0.5; 1283 visibility:visible; 1284 transition: visibility .4s cubic-bezier(0.6,0,0.4,1) .1s, opacity .4s cubic-bezier(0.6,0,0.4,1) .1s; 1285} 1286 1287.sitenav--inner-wrapper{ 1288 display: flex; 1289 justify-content: space-between; 1290 align-items: center; 1291 height: 100%; 1292 padding-right: 4px; 1293 padding-top: 0.7em; 1294 box-sizing: border-box; 1295} 1296 1297.sitenav--utility-space{ 1298 width:100%; 1299 height:100%; 1300} 1301.sitenav--inner-wrapper .sitenav--utility-wrap{ 1302 display: flex; 1303 flex-direction: row; 1304 justify-content: center; 1305 align-items: center; 1306 height: 100%; 1307} 1308.sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu{ 1309 display: flex; 1310 flex-direction: row; 1311 justify-content: center; 1312 align-items: center; 1313 height: 100%; 1314} 1315.sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem, 1316.sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem:last-child{ 1317 margin-right:0px; 1318} 1319.sitenav--inner-wrapper .logo{ 1320 height: 14px; 1321 width: 85px; 1322 cursor: pointer; 1323} 1324 1325.sitenav--inner-wrapper .logo img{ 1326 width: auto; 1327 height: 100%; 1328} 1329 1330.sitenav--menu-wrap .logo, 1331.sitenav--menu-wrap .logo img{ 1332 display: none; 1333} 1334 1335.sitenav--utility-wrap .account .submenu{ 1336 display: none; 1337} 1338.sitenav--menu-wrap{ 1339 display: flex; 1340 flex-direction: column; 1341 position: absolute; 1342 left:0; 1343 top: 0; 1344 height: 100vh; 1345 width: calc(100% - 50px); 1346 background: #000; 1347 z-index: 20; 1348 max-height: 100vh; 1349 overflow-y: auto; 1350 overflow-x: hidden; 1351 padding: 20px 25px; 1352 transition: transform 0.3s ease-out; 1353 transform: translateX(100%); 1354} 1355.sitenav--menu-wrap.active{ 1356 right: 0; 1357 transform: translateX(0); 1358 pointer-events: all; 1359} 1360.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu{ 1361 width: 100%; 1362 display: flex; 1363 flex-direction: column; 1364 padding-top: 24px; 1365} 1366 1367.sitenav--inner-wrapper ul li{ 1368 list-style-type: none; 1369 position: relative; 1370 font-weight: 250; 1371 cursor:pointer; 1372} 1373.sitenav--inner-wrapper ul li a{ 1374 color: #fff; 1375 letter-spacing:-0.01rem; 1376} 1377.sitenav--inner-wrapper ul .menuitem{ 1378 list-style-type: none; 1379 position: static; 1380 font-weight: 300; 1381 height: 40px; 1382 display: flex;
1383 align-items: center; 1384 top: 0.8em; 1385} 1386.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu .menuitem:first-child{ 1387 padding-top:0px; 1388} 1389.sitenav--inner-wrapper ul .menuitem .button, 1390.sitenav--utility-wrap ul button{ 1391 background: transparent; 1392 color: #000; 1393 border: none; 1394 cursor: pointer; 1395} 1396 1397.sitenav--menu-wrap .menuitem button{ 1398 border: none; 1399 background: #000; 1400 color: #fff; 1401 cursor: pointer; 1402 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 1403 font-weight: 400; 1404 letter-spacing:-0.01rem; 1405 white-space: nowrap; 1406 text-decoration: none; 1407 padding-bottom: 0px; 1408 font-size: 1.3em; 1409} 1410 1411.sitenav--inner-wrapper .menuitem .submenu{ 1412 display: flex; 1413 flex-direction: column; 1414 position: absolute; 1415 right: calc(-200% - 50px); 1416 top: 0; 1417 height: auto; 1418 z-index: 10; 1419 background: #000; 1420 cursor: auto; 1421 padding: 38px 0 20px; 1422 box-sizing: border-box; 1423 width: 100%; 1424 transition: right 0.3s ease-out; 1425 color: #fff; 1426 font-size: 1.3em; 1427} 1428 1429.sitenav--inner-wrapper .menuitem .submenu i{ 1430 position: absolute; 1431 width: 100%; 1432 height: 1px; 1433 background: #0002; 1434 left: 0; 1435 transform: translateY(1px); 1436} 1437 1438.sitenav--inner-wrapper .menuitem.active .submenu{ 1439 right: calc(-100% - 1.5em); 1440 transition: all 0.3s ease-out; 1441} 1442.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu{ 1443 position: relative; 1444 right: 0; 1445 transition: all 0.3s ease-out; 1446} 1447.sitenav--inner-wrapper .sitenav--menu-wrap .menuitem::after, 1448.sitenav--inner-wrapper .submenu .pages li::after{ 1449 content: ""; 1450 background-image: url(https://codex.online/asset/8624ca89-e54b-41a6-912e-49a26e97ac7e); 1451 width: 13px; 1452 min-height: 17px; 1453 background-size: contain; 1454 background-repeat: no-repeat; 1455 position: absolute; 1456 left: calc(100% - 25px); 1457} 1458 1459.sitenav--inner-wrapper .sitenav--menu-wrap .menuitem::after{ 1460 transform: translateX(1.3em); 1461} 1462 1463.sitenav--inner-wrapper .submenu a{ 1464 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 1465 font-weight: 400; 1466 white-space: nowrap; 1467 text-decoration: none; 1468 color: #fff; 1469 display:inline-block; 1470 padding-bottom: 26px; 1471} 1472.sitenav--inner-wrapper .header-mobile{ 1473 color: #999; 1474 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 1475 display:none; 1476 font-style: normal; 1477 font-weight: 400; 1478 padding-bottom:1.63rem; 1479 font-size: 1em; 1480 text-align: left; 1481} 1482.sitenav--inner-wrapper .cart .header-mobile, 1483.sitenav--inner-wrapper .search .header-mobile, 1484.sitenav--inner-wrapper .account .header-mobile{ 1485 display:none; 1486} 1487 1488.sitenav--inner-wrapper .submenu .sub-section{ 1489 padding-bottom: 1em; 1490} 1491 1492.sitenav--inner-wrapper .submenu .header-sub::after{ 1493 content: ""; 1494 background-image: url(https://codex.online/asset/8624ca89-e54b-41a6-912e-49a26e97ac7e); 1495 width: 13px; 1496 min-height: 17px; 1497 background-size: contain; 1498 background-repeat: no-repeat; 1499 position: absolute; 1500 left: calc(100% - 25px); 1501 top: 0; 1502 transform: rotate(0deg); 1503 transition: transform 0.4s; 1504} 1505.sitenav--inner-wrapper .submenu .header-sub.active::after{ 1506 transform:rotate(90deg); 1507} 1508.sitenav--inner-wrapper .submenu .header-sub.active a{ 1509 font-weight:500; 1510} 1511.sitenav--inner-wrapper .submenu .header-sub .pages li, 1512.sitenav--inner-wrapper .submenu .header-sub.active .pages li{ 1513 padding-left: 23px; 1514 font-weight: 250; 1515} 1516.sitenav--inner-wrapper .submenu .header-sub .pages li:after{ 1517 background-image:none; 1518} 1519 1520.sitenav--inner-wrapper .submenu .header-sub .pages{ 1521 height:0; 1522 max-height: 0; 1523 overflow: hidden; 1524 position:relative; 1525 padding-left:23px; 1526} 1527 1528.sitenav--inner-wrapper .submenu .header-sub .pages .sub{ 1529 cursor: default; 1530} 1531 1532.sitenav--inner-wrapper .submenu .header-sub .pages .sub span{ 1533 color: #fff; 1534 letter-spacing: -0.01em; 1535 font-size: 0.6em; 1536 margin: 0 0 0.5em; 1537 display: block; 1538} 1539 1540.sitenav--inner-wrapper .submenu .header-sub.active .pages{ 1541 max-height: 500px; 1542 height: 100%; 1543 position:relative; 1544 overflow:hidden; 1545 padding-left:23px; 1546 transition: max-height 1s,padding 1s; 1547} 1548.sitenav--inner-wrapper .submenu .header-sub.active .pages a{ 1549 font-weight: 400; 1550} 1551.sitenav--inner-wrapper .menuitem .submenu .subsub-pages{ 1552 display: flex; 1553 flex-direction: column; 1554 position: absolute; 1555 right: calc(-200% - 50px); 1556 top: -87px; 1557 height: auto; 1558 z-index: 10; 1559 background: #000; 1560 cursor: auto; 1561 padding: 38px 0 20px; 1562 box-sizing: border-box; 1563 width: 100%; 1564 transition: right 0.3s ease-out; 1565} 1566.sitenav--inner-wrapper .menuitem.active .submenu .subsub-pages{ 1567 right: calc(-100% - 25px); 1568 transition: all 0.3s ease-out; 1569} 1570 1571.sitenav--utility-wrap img{
1572 width: 20px; 1573} 1574 1575.sitenav--utility-wrap .menuitem > button{ 1576 padding:0 20px; 1577 cursor: pointer; 1578} 1579 1580.sitenav--utility-wrap .menuitem.account button{ 1581 background-image: url('https://codex.online/asset/bb3b9527-fd21-4d2e-9034-1e98fb3d44b6'); 1582 width: 100%; 1583 height: 100%; 1584 background-size: 0.6965rem 0.8125rem; 1585 background-repeat: no-repeat; 1586 background-position: center; 1587 cursor: pointer; 1588} 1589 1590.sitenav--utility-wrap .menuitem.cart > button{ 1591 background-image: url(/asset/763175ca-b021-41ab-b983-59fd65437d87); 1592 width: 100%; 1593 height: 100%; 1594 background-repeat: no-repeat; 1595 background-position: center; 1596 cursor: pointer; 1597 background-size: 1.8em; 1598 background-position: 50% 44%; 1599 position: relative; 1600} 1601 1602.sitenav--utility-wrap .menuitem.cart > button > div{ 1603 position: absolute; 1604 width: 1.1em; 1605 height: 1.1em; 1606 background: #0066FF; 1607 border-radius: 50%; 1608 color: #fff; 1609 top: 0.4em; 1610 left: 1.4em; 1611 display: none; 1612 align-items: center; 1613 justify-content: center; 1614 transition: filter 0.3s; 1615} 1616 1617.sitenav--utility-wrap .menuitem.cart > button > div > i{ 1618 font-style: normal; 1619 font-size: 0.7em; 1620 position: absolute; 1621 top: 0.25em; 1622 font-weight: 500; 1623} 1624 1625.sitenav--utility-wrap .menuitem.search button{ 1626 background-image: url('https://codex.online/asset/a7626059-ecef-4ef1-98b4-b8b27d5b55f9'); 1627 width: 100%; 1628 height: 100%; 1629 background-size: 1.0625rem 1.0625rem; 1630 background-repeat: no-repeat; 1631 background-position: center; 1632 cursor: pointer; 1633 animation-name: fadeSearchClose; 1634 animation-duration: 0.7s; 1635} 1636.sitenav--utility-wrap .menuitem.search button.active{ 1637 opacity: 0.2; 1638} 1639@keyframes fadeSearchClose { 1640 0% {opacity:0} 1641 100% {opacity:1} 1642} 1643.sitenav--utility-wrap .menuitem.burger{ 1644 display: flex; 1645 cursor: pointer; 1646} 1647.sitenav--utility-wrap .menuitem.burger button{ 1648 background-image: url('https://codex.online/asset/5aed46ee-b7e8-4b6d-b8a8-bb176c2d1d2a'); 1649 width: 100%; 1650 height: 100%; 1651 background-size: 1.9em; 1652 background-repeat: no-repeat; 1653 background-position: center; 1654 cursor: pointer; 1655 background-color: transparent; 1656} 1657.sitenav-mobile-wrap{ 1658 padding-bottom: 30px; 1659} 1660.sitenav--utility-wrap .sitenav--menu .menuitem.search{ 1661 position: unset; 1662 margin-top: 0; 1663} 1664 1665.sitenav--inner-wrapper #search-bar{ 1666 visibility: hidden; 1667 display: block; 1668 overflow: hidden; 1669 position: absolute; 1670 top: 4em; 1671 right:1px; 1672 padding: 0; 1673 background: #fff; 1674 border-radius: 0px 0px 6px 6px; 1675 width: 100%; 1676 max-width: 100vw; 1677 box-sizing: border-box; 1678 border-top: 1px solid #C4C3C3; 1679} 1680.sitenav--inner-wrapper .search-bar .suggested-searches .suggested-header{ 1681 padding: 0 4.1rem 23px; 1682 font-size: 15px; 1683} 1684.sitenav--inner-wrapper .search-bar .suggested-searches, 1685.sitenav--inner-wrapper .search-bar .suggested-searches p{ 1686 display: none; 1687 font-size: 0.8125rem; 1688 font-style: normal; 1689 font-weight: 500; 1690 line-height: normal; 1691 letter-spacing: -0.03rem; 1692 padding-bottom:1.94rem; 1693} 1694.sitenav--inner-wrapper .search-bar .suggested-searches p{ 1695 display:block; 1696} 1697.sitenav--inner-wrapper .search-bar.active{ 1698 display: block; 1699} 1700.sitenav--inner-wrapper .search-bar input{ 1701 box-sizing: border-box; 1702 background: #000; 1703 color: #fff; 1704 font-family: var(--primary-font); 1705 font-size: 1.25rem; 1706 font-weight: 500; 1707 width: calc(100% - 3.2rem); 1708 border: none; 1709 border-radius: 0.375rem; 1710 height: 47px; 1711 background-image: url(https://codex.online/asset/917cd3da-02b7-44d5-b879-aebd025fd1c2); 1712 background-position: 13px 50%; 1713 background-repeat: no-repeat; 1714 background-size: 20px; 1715 padding-left: 40px; 1716 margin: 1.94rem 1.6rem 30px; 1717 letter-spacing: -0.03em; 1718} 1719.sitenav--inner-wrapper .search-bar input:focus{ 1720 border: none; 1721 outline: none; 1722} 1723.sitenav--menu-wrap .close{ 1724 width: 2.3em; 1725 height: 2.3em; 1726 position: absolute; 1727 right: 0.5em; 1728 z-index: 10; 1729 cursor: pointer; 1730 display: block; 1731 background: url(/asset/5787723f-9262-4ba5-9167-61a6e686106c); 1732 background-size: cover; 1733 top: 1.4em; 1734 background-color: #fff; 1735 filter: invert(1); 1736} 1737.sitenav--menu-wrap .arrow{ 1738 display: none; 1739 width: 8px; 1740 height: 13px; 1741 position: absolute; 1742 left:25px; 1743 z-index: 11; 1744 cursor: pointer;
1745 align-items:center; 1746 top: 2.5em; 1747 border: none; 1748} 1749.sitenav--menu-wrap .arrow .menu-back{ 1750 padding-left:0.81rem; 1751 font-size: 0.9375rem; 1752 font-weight: 400; 1753 letter-spacing:-0.01rem; 1754 color:#FFF; 1755} 1756.sitenav--inner-wrapper .sitenav--utility-wrap .menuitem.account .submenu { 1757 background: #fff; 1758 color: #000; 1759 display: flex; 1760 flex-direction: row; 1761 position: absolute; 1762 top: 52px; 1763 width: auto; 1764 border-top: 1px solid #C4C3C3; 1765 border-bottom-left-radius: 10px; 1766 border-bottom-right-radius: 10px; 1767 right: 0; 1768 left: auto; 1769 padding:0 38px; 1770 transition: height 0.3s ease; 1771 visibility: hidden; 1772 overflow: hidden; 1773 text-align: left; 1774} 1775.sitenav--inner-wrapper .menuitem.account .submenu a { 1776 display: inline-block; 1777 font-size: 13px; 1778 font-weight: 250; 1779 line-height: 0; 1780 white-space: nowrap; 1781 text-decoration: none; 1782 color: #000; 1783 text-align: left; 1784 padding-bottom: 23px; 1785} 1786.sitenav--inner-wrapper .menuitem.account .submenu .pages li::after { 1787 content: ""; 1788 background-image: none; 1789} 1790.sitenav--inner-wrapper .menuitem.account .submenu .header{ 1791 margin-top: 15px; 1792 margin-bottom: 18px; 1793} 1794 1795.sitenav--inner-wrapper .submenu #search-results{ 1796 max-height: clamp(0vh, 53em, 60vh); 1797 overflow-y: auto; 1798 overscroll-behavior: contain; 1799} 1800 1801.sitenav--inner-wrapper .submenu #search-results section { 1802 display: flex; 1803 width: calc(100% - 7.2em); 1804 align-items: center; 1805 padding: 0.5rem 0rem; 1806 margin: 0rem 0 0 4rem; 1807} 1808 1809.sitenav--inner-wrapper .submenu #search-results section:hover { 1810 background: #ddd; 1811} 1812 1813.sitenav--inner-wrapper .submenu #search-results a{ 1814 color: #000; 1815 pointer-events: all; 1816 width: calc(100% - 5em); 1817 white-space: unset; 1818 line-height: normal; 1819 padding: 0; 1820 display: flex;
1821 align-items: center; 1822} 1823 1824.sitenav--inner-wrapper .submenu #search-results a > div{ 1825 width: calc(100% - 7em); 1826} 1827 1828.sitenav--inner-wrapper .submenu #search-results h2{ 1829 font-size: 1em; 1830 font-weight: 500; 1831 padding-left: 1em; 1832 display: inline-block; 1833 height: auto; 1834 line-height: 1em; 1835 width: 100%; 1836 letter-spacing: -0.03em; 1837} 1838 1839.sitenav--inner-wrapper .submenu #search-results h3{ 1840 font-size: 1em; 1841 font-weight: 300; 1842 padding: 1em 1em 0 1em; 1843 display: inline-block; 1844 height: auto; 1845 line-height: 1em; 1846 width: 100%; 1847 letter-spacing: -0.03em; 1848} 1849 1850.sitenav--inner-wrapper .submenu #search-results h3:empty{ 1851 display: none; 1852} 1853 1854.sitenav--inner-wrapper .submenu #search-results i{ 1855 width: 7em; 1856 display: inline-block; 1857 background-size: cover; 1858 background-repeat: no-repeat; 1859 height: 5em; 1860 border-radius: 0.3em; 1861 border: 1px solid #ccc; 1862 background-position: center; 1863} 1864 1865.sitenav--inner-wrapper .submenu #search-results i.default{ 1866 background-image: url(/asset/70207724-1058-4393-a008-57a90c32bd0f-320--70); 1867 background-size: 90%; 1868} 1869 1870.loggedout .sitenav--utility-wrap .logout{ 1871 display:none !important; 1872} 1873.sitenav--utility-wrap .log-in{ 1874 display:none !important; 1875} 1876.loggedout .sitenav--utility-wrap .log-in{ 1877 display:inline-block !important; 1878} 1879 1880.quicknav nav { 1881 border-bottom:1px solid rgba(0, 0, 0, 0.2); 1882 pointer-events: all; 1883} 1884 1885.quick-nav{ 1886 height:auto; 1887 width:100%; 1888 max-width:100vw; 1889 background:var(--color-white); 1890 position: relative; 1891 z-index: 10 !important; 1892} 1893 1894.quick-nav--header{ 1895 font-family: var(--primary-font); 1896 font-size: 0.875rem; 1897 font-weight: 500; 1898 line-height: normal; 1899 letter-spacing: -0.02625rem; 1900 text-align: left; 1901 background:var(--color-white); 1902 height:34px; 1903 color:#000; 1904 display:flex;
1905 align-items: center; 1906 padding-left: 1.125rem; 1907 padding-right: 1.125rem; 1908} 1909.quick-nav--hr{ 1910 height:1px; 1911 width:100%; 1912 border-bottom:1px solid rgba(0, 0, 0, 0.2); 1913} 1914.quick-nav--links{ 1915 font-family: var(--primary-font); 1916 font-size: 12px; 1917 font-weight: 400; 1918 line-height: 15px; 1919 letter-spacing: -0.12px; 1920 height:34px; 1921 width:100%; 1922 display:flex; 1923 align-items: center; 1924 padding-left: 1.125rem; 1925 padding-right: 1.125rem; 1926 position:relative; 1927} 1928.quick-nav ul{ 1929 width:100%; 1930 z-index:1 !important; 1931 background:var(--color-white); 1932 display:flex; 1933 flex-direction:row; 1934 padding: 0; 1935 position: absolute; 1936} 1937.quick-nav li{ 1938 z-index:1; 1939 list-style-type: none; 1940 font-family: Lato; 1941 font-size: 12px; 1942 font-weight: 400; 1943 line-height: 14px; 1944 text-align: left; 1945 color:#000; 1946 margin: 0; 1947 padding-right: 20px; 1948 width: auto; 1949 white-space: nowrap; 1950} 1951.quick-nav li a{ 1952 color:#000; 1953 text-decoration:none; 1954 letter-spacing: -0.02em; 1955 display: inline-block; 1956 font-weight:400; 1957} 1958.quick-nav li a:hover, 1959.quick-nav li a.active{ 1960 outline: none; 1961 text-decoration: none; 1962 letter-spacing: -0.02em; 1963} 1964a, a:active, a:focus { 1965 outline: none; 1966} 1967.quick-nav li a:before { 1968 display: block; 1969 content: attr(data-title); 1970 height: 0; 1971 visibility: hidden; 1972 overflow: hidden; 1973 user-select: none; 1974 pointer-events: none; 1975 font-weight: 500; 1976 letter-spacing: -0.02em; 1977} 1978.quick-nav--menu-bar{ 1979 background: #000000; 1980 position: absolute; 1981 height: 2px; 1982 width: 0; 1983 bottom: 0; 1984 z-index: 2; 1985 -webkit-transition: left 1s ease, width 1s ease; 1986 transition: left 1s ease, width 1s ease; 1987} 1988.quick-nav--mobile-arrows{ 1989 position: absolute; 1990 width: 100%; 1991 max-width: 100vw; 1992 height: 100%; 1993 left: 0; 1994 z-index: 2; 1995 pointer-events: none; 1996 display:block; 1997} 1998.quick-nav--prev,.quick-nav--next{ 1999 background-color:#fff; 2000 width:48px; 2001 height:100%; 2002 position:absolute; 2003 z-index:1; 2004 display: flex; 2005 justify-content: center; 2006 align-items: center; 2007 pointer-events: all; 2008} 2009.quick-nav--prev{ 2010 display:none; 2011 transform:rotate(180deg); 2012 left:0; 2013} 2014.quick-nav--next{ 2015 right:0; 2016} 2017 2018.quick-nav--prev img,.quick-nav--next img{ 2019 transform: scale(0.8); 2020} 2021 2022.quick-nav--header .label{ 2023 2024} 2025 2026.quick-nav .drop-menu{ 2027 display: flex; 2028 position: relative; 2029 cursor: pointer; 2030} 2031 2032.quick-nav .drop-menu .button{ 2033 background-image: url(/asset/f685455d-a500-4927-ae42-1af978ef4439); 2034 width: 1em; 2035 height: 1em; 2036 background-size: contain; 2037 background-repeat: no-repeat; 2038 background-position: center; 2039 margin-left: 0.7em; 2040 transform: translateY(1px) rotate(0deg); 2041 transition: transform 0.7s; 2042} 2043 2044.quick-nav .drop-menu.active .button{ 2045 transform: rotate(180deg); 2046} 2047 2048.quick-nav .drop-menu .dropdown{ 2049 position: absolute; 2050 background: #fff; 2051 z-index: 999; 2052 border: 1px solid #ccc; 2053 border-bottom-left-radius: 0.7em; 2054 border-bottom-right-radius: 0.7em; 2055 top: 1.8em; 2056 min-width: 100%; 2057 display: none; 2058 cursor: default; 2059} 2060 2061.quick-nav .drop-menu .dropdown a{ 2062 padding: 0.6em 2.2em; 2063 font-weight: 300; 2064 font-size: 15px; 2065 cursor: pointer; 2066 color: #000; 2067 transition: color 0.7s; 2068 display: block; 2069 white-space: nowrap; 2070 text-decoration: none; 2071} 2072 2073.quick-nav .drop-menu .dropdown a:first-of-type{ 2074 padding-top: 1.5em; 2075} 2076 2077.quick-nav .drop-menu .dropdown a:last-of-type{ 2078 padding-bottom: 1.5em; 2079} 2080 2081.quick-nav .drop-menu .dropdown a:hover { 2082 color: #777; 2083} 2084 2085.quick-nav .dropdown .bg{ 2086 position: fixed; 2087 top: 0; 2088 left: 0; 2089 width: 100%; 2090 height: 100vh; 2091 z-index: -1; 2092} 2093 2094/* hero image overrides */ 2095.hero-black.top #header{ 2096 filter: none; 2097} 2098 2099.hero-black.top nav { 2100 filter: invert(0); 2101} 2102 2103.hero-black.top .sitenav--utility-wrap .menuitem.cart > button > div{ 2104 filter: invert(0); 2105} 2106 2107 2108 2109@media screen and (min-width: 992px){ 2110 .quick-nav--header{ 2111 height:34px; 2112 font-size:0.875rem; 2113 } 2114 .quick-nav ul{ 2115 position: relative; 2116 } 2117 .quick-nav--links li{ 2118 font-size: 0.75rem; 2119 } 2120 .quick-nav--header, 2121 .quick-nav--links{ 2122 display:flex; 2123 padding-left: 5.75rem; 2124 padding-right: 2rem; 2125 position:unset; 2126 } 2127 .quick-nav--mobile-arrows, 2128 .quick-nav--prev,.quick-nav--next{ 2129 display:none !important; 2130 } 2131 2132 .sitenav--utility-wrap .menuitem.cart > button > div{ 2133 top: 0.8em; 2134 left: 2.4em; 2135 } 2136} 2137@media screen and (min-width: 1200px){ 2138 .quick-nav--header, 2139 .quick-nav--links{ 2140 padding-left: 5.75rem; 2141 } 2142 .quick-nav--mobile-arrows{ 2143 display:none !important; 2144 } 2145} 2146@media screen and (min-width: 1400px){ 2147 .quick-nav--header, 2148 .quick-nav--links{ 2149 max-width: var(--siteMaxWidth); 2150 margin: 0 auto; 2151 } 2152} 2153 2154@media only screen 2155 and (min-device-width: 320px) 2156 and (max-device-width: 480px) 2157 and (-webkit-min-device-pixel-ratio: 2) 2158 and (orientation: landscape), 2159 2160 (min-device-width: 320px) 2161 and (max-device-width: 568px) 2162 and (-webkit-min-device-pixel-ratio: 2) 2163 and (orientation: landscape), 2164 2165 (min-device-width: 375px) 2166 and (max-device-width: 667px) 2167 and (-webkit-min-device-pixel-ratio: 2) 2168 and (orientation: landscape), 2169 2170 (min-device-width: 414px) 2171 and (max-device-width: 736px) 2172 and (-webkit-min-device-pixel-ratio: 3) 2173 and (orientation: landscape), 2174 2175 (min-device-width: 375px) 2176 and (max-device-width: 812px) 2177 and (-webkit-min-device-pixel-ratio: 3) 2178 and (orientation: landscape) 2179 { 2180 .quick-nav--mobile-arrows{ 2181 display:none !important; 2182 } 2183} 2184 2185@media (max-width: 991.975px) { 2186 .sitenav-menu-wrap-container{ 2187 position: absolute; 2188 left: 0; 2189 top: 0; 2190 width: 100%; 2191 height: 100vh; 2192 pointer-events: none; 2193 overflow: hidden; 2194 } 2195 2196 .sitenav--inner-wrapper .search-bar input { 2197 margin: 0.84rem 1rem 0.6em; 2198 } 2199 2200 .sitenav--inner-wrapper .search-bar .suggested-searches .suggested-header { 2201 padding: 0 1.1rem 1em; 2202 font-size: 15px; 2203 } 2204 .sitenav--inner-wrapper .submenu #search-results section { 2205 width: calc(100% - 2.5em); 2206 padding: 0.5rem 0.5rem; 2207 margin: 0rem 0.5rem; 2208 } 2209 2210 .sitenav--inner-wrapper .submenu #search-results a { 2211 color: #000; 2212 pointer-events: all; 2213 width: 100%; 2214 padding: 0; 2215 flex-wrap: wrap; 2216 } 2217 2218 .sitenav--inner-wrapper .submenu #search-results a > div, 2219 .sitenav--inner-wrapper .submenu #search-results h2, 2220 .sitenav--inner-wrapper .submenu #search-results h3 { 2221 width: 100%; 2222 } 2223 2224 .sitenav--inner-wrapper .submenu #search-results h2, 2225 .sitenav--inner-wrapper .submenu #search-results h3 { 2226 padding: 1em 0 0 0; 2227 } 2228} 2229 2230@media (min-width: 992px) { 2231 nav{ 2232 height: 4em; 2233 width: auto; 2234 max-width: 100%; 2235 margin: 0 auto; 2236 padding: 0.2em 3.75rem 0; 2237 } 2238 .quicknav .sticky{ 2239 top: -4.2em; 2240 } 2241 2242 .sitenav-mobile-wrap{ 2243 display: none; 2244 } 2245 2246 .sitenav--inner-wrapper{ 2247 display: flex; 2248 flex-direction: row; 2249 justify-content: flex-start; 2250 align-items: center; 2251 height: 100%; 2252 width: 100%; 2253 box-sizing: border-box; 2254 max-width: var(--siteMaxWidth); 2255 margin: 0 auto; 2256 padding-right: 10px; 2257 position: relative; 2258 } 2259 .sitenav--inner-wrapper .logo{ 2260 height: 100%; 2261 width: 6rem; 2262 max-height: 18px; 2263 margin-right: 57px; 2264 cursor: pointer; 2265 } 2266 .sitenav--inner-wrapper .logo img{ 2267 width: auto; 2268 height: 100%; 2269 min-height: 18px; 2270 } 2271 2272 .sitenav--menu-wrap{ 2273 display: flex; 2274 right: 0; 2275 background: transparent; 2276 padding: 0; 2277 width: auto; 2278 overflow-y: unset; 2279 overflow-x: unset; 2280 transition: none; 2281 transform: translateX(0); 2282 position: relative; 2283 } 2284 .sitenav--menu-wrap.active{ 2285 transition: none; 2286 } 2287 2288 .sitenav--inner-wrapper .sitenav--menu-wrap, 2289 .sitenav--inner-wrapper .sitenav--utility-wrap{ 2290 height: 100%; 2291 } 2292 .sitenav--inner-wrapper .sitenav--utility-wrap{ 2293 display: flex; 2294 flex-direction: row; 2295 justify-content: flex-end; 2296 align-items: center; 2297 } 2298 .sitenav--inner-wrapper ul li{ 2299 cursor: pointer; 2300 } 2301 .sitenav--inner-wrapper .menu-list{ 2302 cursor: pointer; 2303 } 2304 .sitenav--inner-wrapper .sitenav--menu-wrap ul, 2305 .sitenav--inner-wrapper .sitenav--utility-wrap ul{ 2306 display: flex; 2307 flex-direction: row; 2308 justify-content: space-between; 2309 height: 100%; 2310 } 2311 .sitenav--inner-wrapper .sitenav--menu-wrap ul:first-child, 2312 .sitenav--inner-wrapper .sitenav--utility-wrap ul:first-child{ 2313 height: 100%; 2314 } 2315 .sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu{ 2316 flex-direction: row; 2317 padding-top: 0px; 2318 top: 0.2em; 2319 } 2320 .sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu .menuitem:last-child{ 2321 margin-right: 0; 2322 } 2323 .sitenav--inner-wrapper ul .menuitem{ 2324 position: relative; 2325 height: 100%; 2326 padding-top: 0;
2327 padding-bottom: 1.5em; 2328 } 2329 .sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem{ 2330 margin-right: 0; 2331 } 2332 .sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem:last-child, 2333 .sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem:nth-child(3){ 2334 margin-right: 0px; 2335 padding-right: 0; 2336 } 2337 .sitenav--inner-wrapper .sitenav--utility-wrap ul{ 2338 justify-content: flex-end; 2339 align-items: flex-start; 2340 } 2341 .sitenav--inner-wrapper .sitenav--utility-wrap ul .menuitem{ 2342 display: flex; 2343 justify-content: center; 2344 align-items: center; 2345 height: 100%; 2346 } 2347 .sitenav--inner-wrapper .sitenav--utility-wrap ul .pages{ 2348 flex-direction: column; 2349 gap: 0px; 2350 } 2351 .sitenav--inner-wrapper .sitenav--utility-wrap ul .menuitem.burger{ 2352 display: none; 2353 } 2354 .sitenav--utility-wrap{ 2355 flex-grow: 1; 2356 } 2357 .sitenav--utility-wrap .account{ 2358 display: flex; 2359 justify-content: flex-end; 2360 } 2361 2362 .sitenav--menu-wrap .menuitem button{ 2363 font-size: 15px; 2364 padding: 0 15px; 2365 font-weight: 300; 2366 line-height: 1rem; 2367 letter-spacing: -0.01em; 2368 background: transparent; 2369 color: #000; 2370 height: 100%; 2371 transition: color 0.2s; 2372 } 2373 .sitenav--menu-wrap .menuitem button:hover{ 2374 color: #777; 2375 } 2376 .sitenav--menu-wrap .menuitem.active button{ 2377 font-weight: 400; 2378 line-height: 1rem; 2379 letter-spacing: -0.01em; 2380 } 2381 .sitenav--inner-wrapper ul button, 2382 .sitenav--utility-wrap ul button{ 2383 background: transparent; 2384 color: #000; 2385 } 2386 .sitenav--utility-wrap .menuitem > button{ 2387 padding: 0 30px; 2388 } 2389 2390 .sitenav--inner-wrapper .sitenav--menu-wrap .nav-line{ 2391 position: absolute; 2392 height: 1px; 2393 width: 100%; 2394 top: -3px; 2395 left: 0; 2396 z-index: 5; 2397 } 2398 .sitenav--inner-wrapper .sitenav--utility-wrap .nav-line{ 2399 position: absolute; 2400 height: 1px; 2401 width: 100%; 2402 top: 74px; 2403 left: 0; 2404 z-index: 5; 2405 } 2406 2407 .sitenav--inner-wrapper .sitenav--menu-wrap .menuitem::after, 2408 .sitenav--inner-wrapper .submenu .pages li::after{ 2409 content: ""; 2410 background-image: none; 2411 } 2412 2413 .sitenav--inner-wrapper .menuitem .submenu{ 2414 background: #fff; 2415 display: flex; 2416 flex-direction: row; 2417 position: absolute; 2418 top: 63px; 2419 border-bottom-left-radius: 10px; 2420 border-bottom-right-radius: 10px; 2421 left: -24px; 2422 right: unset; 2423 width: auto; 2424 padding-left: 38px; 2425 padding-right: 38px; 2426 padding-top: 0; 2427 padding-bottom: 0; 2428 transition: height 0.3s ease; 2429 visibility: hidden; 2430 overflow: hidden; 2431 border-top: none; 2432 } 2433 .sitenav--inner-wrapper .menuitem.active .submenu{ 2434 right: auto; 2435 } 2436 .sitenav--inner-wrapper .menuitem .submenu .subsub-pages{ 2437 display: none; 2438 } 2439 .sitenav--inner-wrapper .header-mobile{ 2440 display: none; 2441 } 2442 2443 .sitenav--inner-wrapper .menuitem .submenu .pages{ 2444 height: auto; 2445 overflow: visible; 2446 max-height: 100%; 2447 } 2448 .sitenav--inner-wrapper .submenu .header{ 2449 font-weight: 400; 2450 margin-top: 18px; 2451 margin-bottom: 2em; 2452 visibility: hidden; 2453 padding-top: 0.4em; 2454 padding-right: 3em; 2455 } 2456 .sitenav--inner-wrapper .submenu .header:last-child{ 2457 width: auto; 2458 padding-right: 0; 2459 } 2460 .sitenav--inner-wrapper .submenu .sub-section{ 2461 display: inline-block; 2462 padding-bottom: 23px; 2463 font-weight: 500; 2464 font-size: 15px; 2465 line-height: 0; 2466 white-space: nowrap; 2467 text-decoration: none; 2468 color: #000; 2469 cursor: default; 2470 } 2471 .sitenav--inner-wrapper .submenu .sub-section:hover{ 2472 font-weight: 500 !important; 2473 } 2474 .sitenav--inner-wrapper .submenu .header-sub::after{ 2475 display: none; 2476 } 2477 .sitenav--inner-wrapper .submenu .header-sub .pages{ 2478 padding-left: 0px; 2479 } 2480 .sitenav--inner-wrapper .submenu .header-sub .pages li, 2481 .sitenav--inner-wrapper .submenu .header-sub.active .pages li{ 2482 padding-left: 0px; 2483 font-weight: 250; 2484 } 2485 .sitenav--inner-wrapper .menuitem .submenu .header:last-child .pages{ 2486 padding-right: 0px; 2487 } 2488 .sitenav--inner-wrapper .submenu .header-sub .pages .sub span{ 2489 color: #000; 2490 margin: 2.83em 0 -0.15em; 2491 } 2492 .sitenav--inner-wrapper .submenu .header-sub .pages .sub:first-of-type span{ 2493 margin: -0.17em 0 -0.15em; 2494 } 2495 .sitenav--inner-wrapper .submenu .pages li:last-child{ 2496 margin-bottom: 0px; 2497 } 2498 .sitenav--inner-wrapper ul .pages{ 2499 display: flex; 2500 flex-direction: column; 2501 justify-content: flex-start; 2502 } 2503 2504 .sitenav--inner-wrapper .submenu a{ 2505 display: inline-block; 2506 font-weight: 300; 2507 line-height: 0; 2508 white-space: nowrap; 2509 text-decoration: none; 2510 color: #000; 2511 text-align: left; 2512 padding-bottom: 1em; 2513 font-size: 15px; 2514 transition: color 0.2s; 2515 } 2516 .sitenav--inner-wrapper .submenu a:after{ 2517 display: block; 2518 content: attr(data-title); 2519 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 2520 height: 0; 2521 visibility: hidden; 2522 overflow: hidden; 2523 user-select: none; 2524 pointer-events: none; 2525 font-weight: 300; 2526 letter-spacing: -0.01rem; 2527 } 2528 .sitenav--inner-wrapper .submenu a:hover{ 2529 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 2530 color: #777; 2531 } 2532 2533 .sitenav--utility-wrap img{
2534 width: 20px; 2535 } 2536 .sitenav--utility-wrap .menuitem.account button{ 2537 width: 100%; 2538 height: 100%; 2539 background-size: 1.01794rem 1.1875rem; 2540 } 2541 .sitenav--utility-wrap .menuitem.cart > button{ 2542 width: 100%; 2543 height: 100%; 2544 background-size: 2.7em; 2545 background-position: 50% 44%; 2546 } 2547 .sitenav--utility-wrap .menuitem.search button{ 2548 width: 100%; 2549 height: 100%; 2550 background-size: 1.5625rem 1.5625rem; 2551 } 2552 .sitenav--utility-wrap .menuitem.burger button{ 2553 width: 100%; 2554 height: 100%; 2555 background-size: 1.10744rem 1.3125rem; 2556 } 2557 2558 .sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem.search{ 2559 position: unset; 2560 transition: height 0.3s ease; 2561 margin-top: 1.7em; 2562 } 2563 .sitenav--inner-wrapper .sitenav--utility-wrap .menuitem .submenu{ 2564 background: #fff; 2565 display: flex; 2566 flex-direction: row; 2567 position: absolute; 2568 top: 63px; 2569 border-top: 1px solid #C4C3C3; 2570 border-bottom-left-radius: 10px; 2571 border-bottom-right-radius: 10px; 2572 right: 0; 2573 left: auto; 2574 padding-left: 38px; 2575 padding-right: 38px; 2576 transition: height 0.3s ease; 2577 visibility: hidden; 2578 overflow: hidden; 2579 text-align: left; 2580 } 2581 .sitenav--inner-wrapper .sitenav--utility-wrap .menuitem.account .submenu{ 2582 top: 63px; 2583 } 2584 .sitenav--inner-wrapper .sitenav--utility-wrap .menuitem .submenu#search-bar, 2585 .sitenav--inner-wrapper #search-bar{ 2586 visibility: hidden; 2587 display: block; 2588 position: absolute; 2589 top: 63px; 2590 right: 1px; 2591 background: #fff; 2592 border-radius: 0px 0px 6px 6px; 2593 border-top: 1px solid #C4C3C3; 2594 } 2595 .sitenav--inner-wrapper .sitenav--utility-wrap .menuitem.search.active .submenu.search-bar{ 2596 display: block; 2597 } 2598 2599 .quicknav #content{ 2600 top: 0px; 2601 padding-top: 8.6em; 2602 } 2603 .quicknav.hidequicknavlinks #content{ 2604 padding-top: 6.4em; 2605 } 2606} 2607 2608.totop { 2609 position: fixed; 2610 z-index: 10; 2611 right: 1.125rem; 2612 bottom: 34px; 2613 display: flex; 2614 justify-content: center; 2615 align-items: center; 2616 opacity: 0; 2617 width: 1.2rem; 2618 height: 1.2rem; 2619 transform: rotate(180deg); 2620 border: solid 1px #8a8a8a; 2621 background: rgba(0,0,0,0.5); 2622 border-radius: 0.2em; 2623 padding: 0.5em; 2624 margin: 0; 2625 text-decoration: none; 2626 pointer-events: all; 2627 cursor: pointer; 2628} 2629.totop img { 2630 width: 1.2em; 2631 height: 1.2em; 2632} 2633 2634@media screen and (min-width: 1200px){ 2635 .totop img { 2636 width: 1em; 2637 height: 1em; 2638 } 2639} 2640 2641@media screen and (max-width: 991.995px){ 2642 .sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu { 2643 padding: 1.5em; 2644 width: calc(100% - 1.6em); 2645 margin: 1.9em 0 0 -1.6em; 2646 } 2647 2648 .sitenav--dim-wrapper.show { 2649 opacity: 1; 2650 background: #fff; 2651 } 2652 2653 .sitenav--menu-wrap .menuitem button { 2654 background: transparent; 2655 } 2656 2657 .sitenav--menu-wrap .logo{ 2658 display: block; 2659 filter: invert(1); 2660 top: 1.2em; 2661 position: relative; 2662 left: -0.4em; 2663 } 2664} 2665</style></div> 2666 <div id="header_basket"></div> 2667 <div id="listings-hero"><div class=""> 2668 <div id="hero" class="hero loadingAnimation" data-visibility="hidden"> 2669 <div class="hero-text d-flex flex-column align-items-center align-items-md-start justify-content-center"> 2670 <div class="col-12 col-md-10 offset-md-2 col-lg-11 offset-lg-1"> 2671 <div id="title" data-custom-field-name="Title" data-custom-field-group="Hero Group" data-custom-field-type="html"><h1>News & Events</h1></div> 2672 </div> 2673 <div class="col-10 col-md-5 offset-md-2 col-lg-5 offset-lg-1"> 2674 <p id="sub-title" data-custom-field-name="Sub Title" data-custom-field-group="Hero Group">Industry news and events from around the world</p> 2675 </div> 2676 <div id="backGround"></div> 2677 <p class="hero-guid hidden" data-custom-field-name="Asset Group" data-custom-field-type="assetgroup" data-custom-field-group="Hero Group">8d6d79c3-143d-4f03-886b-4122f7caa196</p> 2678 <p class="hero-single-guid hidden" data-custom-field-name="Single Static Asset" data-custom-field-type="asset" data-custom-field-group="Hero Group"> 2679 <p style="display: none;" class="hero-options" data-custom-field-name="Hero Options" data-custom-field-group="Hero Group" data-custom-field-type="optionmultiple" data-custom-field-options="Hero Gallery,Hero Static,Hero Single Static">Hero Static</p> 2680 <!--<div style="display: none;" data-custom-field-name="Page Options" data-custom-field-group="Options" data-custom-field-type="optionmultiple" data-custom-field-options="dark,test,test2"></div>--> 2681 </div> 2682 <div class="border left"></div> 2683 <div class="border right"></div> 2684 </div> 2685</div>
2685<script type="text/javascript">let caseStudyArchivePageHero=(()=>{ 2686 let init=()=>{ 2687 $(document).ready(function() { 2688 heroSlides(); 2689 setHeroResize(); 2690 }); 2691 window.addEventListener("resize", (event) => { 2692 // parallax(); 2693 }); 2694 2695 }, 2696 heroTl, 2697 heroSt, 2698 setHeroResize=()=>{ 2699 heroTl=gsap.timeline(); 2700 heroTl.fromTo(".hero .border", {width: 0}, {width: function(){ 2701 console.log(this); 2702 var maxSiteWidth = 1664; 2703 var maxSliderWidth = 2200; 2704 var padding = matchMedia("screen and (min-width: 1200px)").matches ? 60 : 16; 2705 return Math.min(Math.max((($(".hero").width() - (maxSiteWidth)) / 2),padding),maxSliderWidth); 2706 } 2707 }); 2708 heroSt = ScrollTrigger.create({ 2709 animation: heroTl, 2710 trigger: ".hero", 2711 start: "top top", 2712 end: "+=400", 2713 scrub: 0, 2714 invalidateOnRefresh: true, 2715 //markers: true 2716 }); 2717 }, 2718 heroSlides = () => { // create hero slides from guid 2719 let arrayImagesElement = document.getElementById("backGround"); // target container 2720 let imgs = [] ; // array for use holding images details 2721 let guid = $(".hero-guid").text(); // grab dynamic GUID 2722 let heroOptions = $(".hero-options").text(); 2723 2724 if(heroOptions == "Hero Single Static"){ 2725 let heroImage = $(".hero-single-guid"); 2726 let backgroundImage = `/asset/${heroImage.attr('data-guid')}`,
2727 heroHotSpotX = heroImage.attr('data-hotspot-x'), 2728 heroHotSpotY = heroImage.attr('data-hotspot-x'); 2729 2730 arrayImagesElement.insertAdjacentHTML('beforeend',createImage(backgroundImage, heroHotSpotX,heroHotSpotY)); 2731 revealHero(backgroundImage); 2732 gsap.set($("#backGround .image-wrap"), {autoAlpha: 1}); 2733 2734 } else{ 2735 $.get("/getassetgroupjson?guid=" + guid).done(data=>{ // get some data 2736 for (var i = 0; i < data.length; i++) { 2737 imgs.push( // create array of objects from details in the asset group 2738 { 2739 url : "/asset/"+data[i].Guid, 2740 hotspotX : data[i].HotspotX, 2741 hotspotY : data[i].HotspotY 2742 } 2743 ) 2744 } 2745 shuffleArray(imgs); // shuffle the array of images 2746 if(heroOptions !== "Hero Static"){ //if hero options have not been selected create a slide show 2747 imgs.forEach((img, index, array) => { // for each item write to target container the result of the image creation function 2748 // pass URL | hotspotX | hotspotY 2749 if (index < 10){ // only generate a limted number of images 2750 arrayImagesElement.insertAdjacentHTML('beforeend',createImage(img.url, img.hotspotX, img.hotspotY)); 2751 } 2752 if(index===0){ // on first element 2753 revealHero(img.url); 2754 } 2755 }); 2756 if (data.length > 1) { 2757 fadeSlides(); // call fading animation 2758 } else { 2759 gsap.set($("#backGround .image-wrap"), {autoAlpha: 1}) // if not fading set auto alpha 2760 } 2761 } else{ 2762 arrayImagesElement.insertAdjacentHTML('beforeend',createImage(imgs[0].url, imgs[0].hotspotX,imgs[0].hotspotY)); 2763 revealHero(imgs[0].url); 2764 gsap.set($("#backGround .image-wrap"), {autoAlpha: 1}); 2765 } 2766 2767 }); 2768 } 2769 2770 function createImage(imgUrl,hotspotX,hotspotY) { // create img element function 2771 return ` 2772 <div class="image-wrap"> 2773 <div class="img" 2774 data-hotspot-x="${hotspotX}" 2775 data-hotspot-y="${hotspotY}" 2776 style="background-image:url(${imgUrl});background-position:${hotspotX}% ${hotspotY}%"> 2777 </div> 2778 </div> 2779 ` 2780 } 2781 function revealHero(imgSrc){ // control timing of reveal base don load of proxy img 2782 let imgProxy = document.createElement("img"); // create proxy image 2783 imgProxy.src = imgSrc; // set src 2784 imgProxy.onload = function() { // on src load 2785 arrayImagesElement.style.opacity = 1 // set wrapper opacity 2786 let hero = document.getElementById("hero"); 2787 hero.classList.remove("loadingAnimation") // remove loading animation 2788 hero.dataset.visibility = "visible"; 2789 // parallax(); // call parallax animation 2790 heroText(); // call text animation 2791 }; 2792 } 2793 function shuffleArray(array) { /* Randomize array in-place using Durstenfeld shuffle algorithm */ 2794 for (var i = array.length - 1; i > 0; i--) { 2795 var j = Math.floor(Math.random() * (i + 1)); 2796 var temp = array[i]; 2797 array[i] = array[j]; 2798 array[j] = temp; 2799 } 2800 } 2801 }, 2802 2803 parallax = () => { 2804 gsap.registerPlugin(ScrollTrigger); 2805 // pin hero to create wipe effect 2806 ScrollTrigger.create({ 2807 trigger: "#hero", 2808 start: "top top", 2809 pin: true, 2810 pinSpacing: false 2811 }); 2812 // move background image wrapper in Y direction 2813 gsap.to("#backGround",{ 2814 y:"-20px", 2815 scrollTrigger: { 2816 start: "top top", 2817 end: "bottom top", 2818 scrub: true, 2819 invalidateOnRefresh: true 2820 } 2821 }); 2822 // move text in Y direction 2823 gsap.to(".hero-text",{ 2824 y:"-100px", 2825 scrollTrigger: { 2826 start: "top top", 2827 end: "bottom top", 2828 scrub: true, 2829 invalidateOnRefresh: true 2830 } 2831 }); 2832 // blur animation 2833 // gsap.to(".hero-text", { 2834 // duration: 1, 2835 // filter:"blur(20px)", 2836 // ease: "none", 2837 // scrollTrigger: { 2838 // start: "top top", 2839 // end: "bottom top", 2840 // scrub: true 2841 // } 2842 // }); 2843 }, 2844 2845 fadeSlides = () => { 2846 const imgs = gsap.utils.toArray("#backGround .image-wrap"); 2847 const next = 8; // time to change 2848 const fade = 1.5; // fade time 2849 gsap.set(imgs[0], {autoAlpha: 1}) // only for the first 2850 function crossfade() { 2851 const action = gsap.timeline() 2852 .to(imgs[0], {autoAlpha: 0, duration: fade}) 2853 .to(imgs[1], {autoAlpha: 1, duration: fade}, 0) 2854 imgs.push(imgs.shift()); 2855 gsap.delayedCall(next, crossfade); // start endless run 2856 } 2857 gsap.delayedCall(next, crossfade); // start the crossfade after next 2858 } 2859 2860 heroText = () => { 2861 // gsap.registerPlugin(SplitText); 2862 var tl = gsap.timeline(); 2863 2864 // mySplitText = new SplitText(".hero .inner_wrapper", { type: "words,chars" }), 2865 // chars = mySplitText.chars; //an array of all the divs that wrap each character 2866 // gsap.set(".hero .inner_wrapper", { opacity: 1 }); //reveal wrapper before animation 2867 tl.fromTo(".hero .hero-text", { 2868 duration: 1, 2869 opacity: 0, 2870 y: 18,
2871 ease: "none", 2872 // stagger: 0.01 2873 },{ 2874 delay: 0.5, 2875 duration: 1, 2876 opacity: 1, 2877 y: 0, 2878 ease: "none", 2879 // stagger: 0.01 2880 }); 2881 } 2882 2883 ; 2884 init(); 2885 return {}; 2886})();</script>
2886<style>@media screen and (prefers-reduced-motion: reduce) { 2887 html { 2888 scroll-behavior: auto; 2889 } 2890} 2891#listings-hero{ 2892 height:calc(100vh - 53px); 2893} 2894.hero{ 2895 box-sizing:border-box; 2896 position:relative; 2897 overflow: hidden; 2898 height: 100vh; 2899 margin-left: auto; 2900 margin-right: auto; 2901 max-width: 1800px; 2902} 2903 2904.hero .border { 2905 position: absolute; 2906 height: 100%; 2907 width: 0; 2908 background: #fff; 2909 top: 0; 2910 z-index: 4; 2911} 2912 2913.hero .border.left{ 2914 left: 0; 2915} 2916 2917.hero .border.right{ 2918 right: 0; 2919} 2920 2921.hero:after { 2922 content: ""; 2923 display: block; 2924 position: absolute; 2925 width: 100%; 2926 height: 100%; 2927 background: linear-gradient(0deg, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.4) 100%); 2928 z-index: 3; 2929} 2930.hero .hero-text{ 2931 opacity:0; 2932 2933} 2934 2935.hero .guid{ 2936 display:none; 2937} 2938.hero #backGround { 2939 position: absolute; 2940 top: 0; 2941 left: 0; 2942 width: 100%; 2943 height: 100%; 2944 background-size: cover; 2945 background-position: center; 2946 background-repeat: no-repeat; 2947 opacity:0; 2948 transition:opacity 0.5s ease; 2949} 2950 2951.hero #backGround .image-wrap { 2952 position: absolute; 2953 top: 0; 2954 left: 0; 2955 width: 100%; 2956 height: 100%; 2957 visibility: hidden; 2958} 2959.hero #backGround .image-wrap .img { 2960 width: 100%; 2961 height: 100%; 2962 background-size: cover; 2963 background-repeat: no-repeat; 2964 /*background-position:top center !important;*/ 2965} 2966 2967/* HERO TEXT*/ 2968.hero .hero-text{ 2969 position: absolute; 2970 width: 100%; 2971 height: 100%; 2972 z-index: 3; 2973 color:var(--color-white); 2974 top: -52px; 2975} 2976.hero .hero-text h1{ 2977 color:var(--color-white); 2978 padding-bottom:2vw; 2979 line-height:2rem; 2980 -webkit-font-smoothing: antialiased; 2981 -moz-osx-font-smoothing: grayscale; 2982 filter: drop-shadow(0px 0px 1px #555); 2983 font-size: 11vw; 2984} 2985.hero .hero-text p{ 2986 color:var(--color-white); 2987 font-family: var(--primary-font); 2988 font-size: 5vw; 2989 font-weight: 300; 2990 letter-spacing:-0.03em; 2991} 2992.hero .hero-text #title,.hero .hero-text #sub-title{ 2993 position:relative; 2994 z-index:2; 2995 text-align:center; 2996 filter: drop-shadow(0px 0px 1px #555); 2997} 2998@media screen and (min-width: 768px){ 2999 #listings-hero{ 3000 height:auto; 3001 } 3002 .hero .hero-text{ 3003 top: unset; 3004 } 3005 .content-wrapper { 3006 overflow: hidden; 3007 } 3008 .hero{ 3009 /*height: 21.5625rem;*/ 3010 height: auto; 3011 } 3012 @supports (aspect-ratio: auto) { 3013 .hero{ 3014 /*padding-bottom: 40.696278511404564%;*/ 3015 aspect-ratio:833 / 310; 3016 } 3017 } 3018 @supports not (aspect-ratio: auto) { 3019 .hero{ 3020 padding-bottom: 40.696278511404564%; 3021 } 3022 } 3023 3024 .hero .hero-text h1{ 3025 padding-bottom:0.875rem; 3026 line-height:1.8rem; 3027 font-size: 3.5em; 3028 } 3029 .hero .hero-text p{ 3030 font-size: 0.6875rem; 3031 line-height:0.68613rem; 3032 } 3033 .hero .hero-text #title,.hero .hero-text #sub-title{ 3034 text-align:left; 3035 } 3036} 3037@media screen and (min-width:992px){ 3038 3039 .hero .hero-text{ 3040 top: unset; 3041 } 3042 .hero .hero-text h1{ 3043 padding-bottom:1.56rem; 3044 line-height:3.1rem; 3045 } 3046 .hero .hero-text p{ 3047 font-size: 1.375rem; 3048 line-height: 1.375rem; 3049 } 3050} 3051/* CHEVRON START */ 3052.hero .hero-text .svg-wrap { 3053 display:none; 3054 display: none; 3055 justify-content: center; 3056 align-items: end; 3057 position:relative; 3058} 3059.hero .hero-text .svg-wrap svg{ 3060 width: 40px; 3061 height: 40px; 3062 z-index: 2; 3063 padding-top:var(--s2); 3064 fill:var(--light-main) 3065} 3066 3067/* CHEVRON END */ 3068 3069 3070/* HERO IMAGE*/ 3071.hero .hero-image{ 3072 position: absolute; 3073 object-fit: cover; 3074 top: 0; 3075 left: 0; 3076 width: 100%; 3077} 3078@keyframes placeHolderShimmerHero{ 3079 0%{ 3080 background-position: -468px 0 3081 } 3082 100%{ 3083 background-position: 468px 0 3084 } 3085} 3086.hero.loadingAnimation { 3087 /*animation-duration: 1s;*/ 3088 /*animation-fill-mode: forwards;*/ 3089 /*animation-iteration-count: infinite;*/ 3090 /*animation-name: placeHolderShimmer;*/ 3091 /*animation-timing-function: linear;*/ 3092 /*background: rgba(0, 0, 0, 0.2);*/ 3093 /*background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);*/ 3094 /*background-size: 1000px 104px;*/ 3095 /*position: relative;*/ 3096 /*overflow: hidden;*/ 3097} 3098 3099 3100/* ----------- iPhone 4 and 4S ----------- */ 3101/* Portrait */ 3102@media only screen 3103 and (min-device-width: 320px) 3104 and (max-device-width: 480px) 3105 and (-webkit-min-device-pixel-ratio: 2) 3106 and (orientation: portrait) { 3107 #listings-hero{ 3108 /*height: calc(100dvh - 52px);*/ 3109 height: calc(100dvh); 3110 min-height: -webkit-fill-available; 3111 } 3112/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ 3113/* Portrait */ 3114@media only screen 3115 and (min-device-width: 320px) 3116 and (max-device-width: 568px) 3117 and (-webkit-min-device-pixel-ratio: 2) 3118 and (orientation: portrait) { 3119 #listings-hero{ 3120 /*height: calc(100dvh - 52px);*/ 3121 height: calc(100dvh); 3122 min-height: -webkit-fill-available; 3123 } 3124} 3125 3126/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ 3127/* Portrait */ 3128@media only screen 3129 and (min-device-width: 375px) 3130 and (max-device-width: 667px) 3131 and (-webkit-min-device-pixel-ratio: 2) 3132 and (orientation: portrait) { 3133 #listings-hero{ 3134 /*height: calc(100dvh - 52px);*/ 3135 height: calc(100dvh); 3136 min-height: -webkit-fill-available; 3137 } 3138} 3139 3140/* ----------- iPhone 6+, 7+ and 8+ ----------- */ 3141/* Portrait */ 3142@media only screen 3143 and (min-device-width: 414px) 3144 and (max-device-width: 736px) 3145 and (-webkit-min-device-pixel-ratio: 3) 3146 and (orientation: portrait) { 3147 #listings-hero{ 3148 /*height: calc(100dvh - 52px);*/ 3149 height: calc(100dvh); 3150 min-height: -webkit-fill-available; 3151 } 3152} 3153</style></div> 3154 <div id="listings-cards"></div> 3155 <div id="content"> <div id="listings-cards"><p class="page-path" data-custom-field-name="asset-page-path" data-custom-field-type="text">/getCODEXEvents, /getX2XEvents</p> 3156 3157<div class="content-wrapper"> 3158 <div id="cards" class="row d-flex flex-column justify-content-center align-items-center p-0 g-m"> 3159 </div> 3160 <div class="show-more-wrapper col-12 col-md-6 offset-md-6"> 3161 <button id="show-more" class="">SEE MORE</button> 3162 </div> 3163</div> 3164
3165<script type="text/javascript">let archivePage = (() => { 3166 let init = () => { 3167 /* 3168 $(document).ready(function () { 3169 loadData(); 3170 // 1) get data from data pages listed in the page content 3171 // - 1.1) processData(); merge data & create a new array with data needed for rendering & sorted by date 3172 3173 // 2) renderCards(); split data into batches & add event listener for page scroll 3174 // 2.1) renderCardBatch(); calls function to create a card for each item in data array batch 3175 // 2.2) createCard(); render HTML for each card with formatted data 3176 3177 // 3) cardFadeScroll(); animate card image opacity on scroll 3178 3179 // 4) previewPlayer(); add event listener to each potential player div for click & mouseenter 3180 // 4.1) playerHandler(); create player, add event listeners to pause and play, mouseleave & mouseenter 3181 3182 }); 3183 */ 3184 }, 3185 isCaseStudy=false, 3186 loadDataCaseStudy=()=>{ 3187 let cardsDataArray = []; // array to store card data 3188 const folderPaths = $(".page-path").text(); // grab paths to folder pages: https://x2x.media/getX2XCaseStudies | https://x2x.media/getCODEXCaseStudies | https://x2x.media/getPIXCaseStudies 3189 const folderPathsArray = folderPaths.split(','); // add paths to array 3190 isCaseStudy=true; 3191 3192 requests = folderPathsArray.map((folderPath) => $.getJSON(folderPath,{ // get page data from folder pages 3193 tagmode: "any", 3194 format: "json" 3195 })); 3196 3197 Promise.all(requests) // when complete process the data 3198 .then(processData) 3199 .catch(err => { 3200 console.log(err); 3201 }); 3202 3203 function processData(folderData) { // combine data and push to new array for rendering 3204 let merged=[]; 3205 3206 for(var j = 0; j < folderData.length; j++){ 3207 merged.push(...folderData[j].nodes) 3208 } 3209 3210 for (var i = 0; i < merged.length; i++) { 3211 let customFields = merged[i].customFields; // get custom fields from each page 3212 let subTitle; 3213 let image; 3214 let externalLink; 3215 let vimeo = '726961821'; 3216 let displayorder; 3217 customFields.forEach((field, index, array) => { // data appears in different locations in array so check for name before assigning 3218 if(field.Name ==='Sub Title' && field.Value != ""){ // asign sub title if exists and has text in 3219 subTitle = field.Value; 3220 }else if(field.Name ==='ogDescription'){ // elseif no subtitle asign ogDescription 3221 subTitle = field.Value; 3222 } 3223 if(field.Name ==='ogImage'){ // asign image 3224 image = field.Value; 3225 } 3226 if(field.Name ==='External Link' && field.Value != ""){ // asign extranal link 3227 externalLink = field.Value; 3228 } 3229 if(field.Name ==='Vimeo' && field.Value != ""){ // asign vimeo code 3230 vimeo = field.Value; 3231 } 3232 if(field.Name ==='displayorder' && field.Value != ""){ // asign displayorder 3233 displayorder = field.Value; 3234 } 3235 }); 3236 cardsDataArray.push( // push data to cards array 3237 { 3238 title : merged[i].title, 3239 path : "/" + merged[i].path, 3240 kebabTitle : merged[i].name, 3241 unixDate: merged[i].date, 3242 subTitle : subTitle, 3243 image : image, 3244 externalLink : externalLink, 3245 vimeo: vimeo, 3246 displayorder: merged[i].displayorder, 3247 } 3248 ) 3249 } 3250 const sortedCardsDataArray = cardsDataArray.sort( // sort array by the date property 3251 (objA, objB) => { 3252 3253 return Number(objB.unixDate) - Number(objA.unixDate)} 3254 3255 // (objA, objB) => { 3256 // if(objB.displayorder == -1) return 1 3257 // return Number(objB.unixDate) - Number(objA.unixDate) 3258 // } 3259 ); 3260 renderCards(sortedCardsDataArray);
3261 } 3262 }, 3263 loadDataNews=()=>{ 3264 let cardsDataArray = []; // array to store card data 3265 3266 requests = $.getJSON({ // get page data from folder pages 3267 method: "GET", 3268 url: "/getassetgroupjson?guid=22dabb8d-33f3-57ba-11ac-1717d9b2172b", 3269 dataType: "json" 3270 }) 3271 .done(function(data){// when complete process the data 3272 processData(data); 3273 }) 3274 .fail(function(err){ 3275 console.log(err); 3276 }) 3277 3278 function processData(data) { // combine data and push to new array for rendering 3279 3280 for (var i = 0; i < data.length; i++) { 3281 let subTitle; 3282 let image; 3283 let externalLink; 3284 cardsDataArray.push( // push data to cards array 3285 { 3286 title : data[i].Name, 3287 subTitle : data[i].Content, 3288 image : data[i].Guid, 3289 path : data[i].Var2, 3290 //unixDate: "123", // merged[i].date, 3291 //pin : data[i].Var3, 3292 } 3293 ) 3294 } 3295 // let sortedCardsDataArray; 3296 for(let cardData of cardsDataArray){ 3297 if(cardData.pin === "pinned"){ 3298 const index = cardsDataArray.indexOf(cardData); 3299 const [el] = cardsDataArray.splice(index,1); 3300 cardsDataArray.unshift(el) 3301 } 3302 } 3303 renderCards(cardsDataArray); 3304 3305 // const sortedCardsDataArray = cardsDataArray.sort( // sort array by the date property 3306 // // (objA, objB) => Number(objB.unixDate) - Number(objA.unixDate), 3307 3308 // // sort array by the date property and pin card with display order -1 3309 // (objA, objB) => { 3310 // if(objB.pin == "pinned"){ 3311 // objB.pop 3312 // } 3313 // return Number(objB.unixDate) - Number(objA.unixDate) 3314 // } 3315 // ); 3316 // renderCards(sortedCardsDataArray); 3317 } 3318 }, 3319 renderCards = (cardsDataArray) => { // function to show cards 3320 const cardWrapper = document.getElementById("cards"); // get card wrapper 3321 let cardIndex = 0; 3322 let batchIndex = 1; 3323 const batchSize = 9; 3324 const batch = cardsDataArray.map( function(e,i){ // split data in batches 3325 return i%batchSize===0 ? cardsDataArray.slice(i,i+batchSize) : null; 3326 }).filter(function(e){ return e; }); 3327 3328 renderCardBatch(batch[0]); // render first batch 3329 // $(window).bind('scroll', function() { // show more card batches on scroll to bottom of container with offset 3330 // if($(window).scrollTop() >= $('#cards').offset().top + ($('#cards').outerHeight()-100) - window.innerHeight) { 3331 // renderCardBatch(batch[batchIndex]); 3332 // batchIndex++ 3333 // } 3334 // }); 3335 if(batch.length > 1){ 3336 $("#show-more").fadeIn(); 3337 // console.log('batch.length > 1'); 3338 }else{ 3339 $("#show-more").fadeOut(); 3340 // console.log('else'); 3341 } 3342 $("#show-more").on('click', function (e) { 3343 3344 e.preventDefault(); 3345 renderCardBatch(batch[batchIndex]); 3346 batchIndex++ 3347 3348 if(batchIndex === batch.length){ 3349 $(e.target).fadeOut(); 3350 } 3351 }); 3352 3353 function renderCardBatch(batchCardsDataArray){ // create card batches 3354 batchCardsDataArray.forEach((card, index, array) => { // for each item in data batch 3355 cardWrapper.insertAdjacentHTML('beforeend', // insert the result into the card wrapper 3356 createCard( // pass data to card function 3357 card.title, 3358 card.path, 3359 card.kebabTitle, 3360 card.subTitle, 3361 card.unixDate, 3362 card.image, 3363 card.externalLink, 3364 card.vimeo 3365 ) 3366 ); 3367 }); 3368 3369 cardFadeScroll(); // amimation for images 3370 3371 // previewPlayer(); // thumbnail video preview players 3372 } 3373 function createCard(title, path, kebabTitle, subTitle, unixDate, image, externalLink, vimeo) { // create card function 3374 cardIndex ++; 3375 let date = new Date(unixDate); // milliseconds date value 3376 let localDate = date.getDate() + getOrdinal(date.getDate()) + " " + getMonthText(date.getMonth()) +' '+ date.getUTCFullYear(); 3377 let truncatedSubTitle = truncateString(subTitle, 120); // shorten strings for subtitle 3378 let size = 500, q = 50; // size and quality of thumbnails 3379 if(cardIndex === 1){ size = 650; q = 60;} // if first item larger and higher quality 3380 let url = path, target = ''; // onsite or offsite for links 3381 if(externalLink){ url = externalLink, target = '_blank'} // if offsite open in new window 3382 let videoString=""; // Preview player 3383 if(vimeo){ // if vimeo code add html 3384 videoString = ` 3385 <div class="preview-panel" id="player-${cardIndex}"style="opacity:0;"> 3386 <div id="player-${cardIndex}" class="preview-player" data-plyr-provider="vimeo" data-plyr-embed-id="${vimeo}"></div> 3387 </div> 3388 ` 3389 } 3390 return ` 3391 <div id="player-${cardIndex}" class="card ${isCaseStudy && cardIndex == 1 ? 'col-12 col-md-12 col-lg-12 col-xl-10 d-flex row">' : 'col-12 col-md-8 col-lg-6 d-flex row">'} 3392 <a href="${url}" target="${target}"></a> 3393 <div class="card-wrapper col-12 col-md-6 p-0"> 3394 ${videoString} 3395 <div class="image-wrapper"> 3396 <img class="image nofade img-fluid" src="/asset/${image}-1000"> 3397 </div> 3398 </div> 3399 <div class="inner-card stack col-md-6 d-flex flex-column justify-content-center"> 3400 <h3>${title}</h3> 3401 <p>${truncatedSubTitle}</p> 3402 ${!isNaN(unixDate) ? ` 3403 <div class="stack-small"> 3404 <p class="sub-text">PUBLISHED</p> 3405 <p class="sub-text date">${localDate}</p> 3406 </div>` 3407 :""} 3408 </div> 3409 </div> 3410 ` 3411 } 3412 function truncateString(str, maxLen, separator = ' ') { 3413 if(str !== null){ 3414 if (str.length <= maxLen ) return str; 3415 return str.substr(0, str.lastIndexOf(separator, maxLen)) + "..."; 3416 } 3417 } 3418 3419 // function truncateString(str, num) { // truncate string function 3420 // if(str != null){ 3421 // if (str.length > num) { 3422 // return str.slice(0, num) + "..."; 3423 // } else { 3424 // return str; 3425 // } 3426 // } 3427 // } 3428 } 3429 3430 3431 cardFadeScroll = () => { // fade cards images in on scroll 3432 3433 const images = gsap.utils.toArray('.image-wrapper'); 3434 3435 gsap.utils.toArray(".card").forEach((card, i) => { 3436 // Card width 3437 // let cardTl = gsap.timeline({defaults: {ease: "none"}}); 3438 // ScrollTrigger.create({ 3439 // trigger: card, 3440 // animation: cardTl, 3441 // toggleActions: 'play none none reverse', 3442 // scrub: true, 3443 // markers:true, 3444 // start: "50% 70%", 3445 // end: "50% 30%", 3446 // }); 3447 // cardTl 3448 // .to( card, { width:"100%" }) 3449 // .to( card,{ width:"60%" });
3450 3451 // Image fade 3452 let imageWrapper = $(card).children(".image-wrapper"); 3453 const fadeAnimTl = gsap.timeline({defaults: {ease: "none"}}); 3454 ScrollTrigger.create({ 3455 trigger: card, 3456 animation: fadeAnimTl, 3457 toggleActions: 'play none none none', 3458 once: true, 3459 }); 3460 fadeAnimTl 3461 .to(imageWrapper,{ duration: 0.5, autoAlpha: 1 }) 3462 3463 // Text Scale 3464 // let innerCard = $(card).children(".inner-card"); 3465 // let innerCardTl = gsap.timeline({defaults: {ease: "none"}}); 3466 // ScrollTrigger.create({ 3467 // trigger: card, 3468 // animation: innerCardTl, 3469 // toggleActions: 'play none none reverse', 3470 // scrub: true, 3471 // }); 3472 // innerCardTl 3473 // .to( innerCard, { scale:1.5, transformOrigin:"left"} ) 3474 // .to( innerCard, { scale:1 } ) 3475 }); 3476 }; 3477 previewPlayer = () => { 3478 const controls = ` 3479 <div class="plyr__controls"> 3480 <button type="button" class="plyr__control" data-plyr="fullscreen"> 3481 <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg> 3482 <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg> 3483 </button> 3484 <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play"> 3485 <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg> 3486 <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg> 3487 </button> 3488 <button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute"> 3489 <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg> 3490 <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg> 3491 </button> 3492 <div class="plyr__progress"> 3493 <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek"> 3494 <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress> 3495 </div> 3496 <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div> 3497 </div> 3498 `; 3499 let options = { 3500 controls: false, 3501 invertTime: true, 3502 hideControls: true, 3503 disableContextMenu: true, 3504 autoplay:true, 3505 muted:true, 3506 storage: {enabled: false} 3507 } 3508 let potentialPlayers = document.getElementsByClassName("card"); 3509 let playerHandler = function() { 3510 let id = this.getAttribute("id"); 3511 let panelSelector ="#"+id+" .preview-panel"; 3512 3513 const player = new Plyr("#"+id+".preview-player", options); // create player 3514 3515 gsap.to(panelSelector, {duration: 0.5, autoAlpha: 1}); // animate opacity 3516 3517 function on(selector, type, callback) { 3518 document.querySelector(selector).addEventListener(type, callback, false); 3519 } 3520 on("#"+id, 'mouseleave', () => { // event listener to pause when leaving player 3521 gsap.to(panelSelector, {duration: 0.5, opacity: 0, onComplete: mouseLeaveTweenComplete});// animate opacity 3522 function mouseLeaveTweenComplete() { // on animation complete 3523 player.pause(); 3524 } 3525 }); 3526 on("#"+id, 'mouseenter', () => { // event listener to play when re-entering the player 3527 player.play(); 3528 gsap.to(panelSelector, {duration: 0.5, autoAlpha: 1}); // animate opacity 3529 }); 3530 }; 3531 "click mouseenter".split(" ").forEach(function(e){ // add event listeners to all potential players to create player 3532 for (let i = 0; i < potentialPlayers.length; i++) { 3533 potentialPlayers[i].addEventListener(e, playerHandler, {passive: true}); 3534 } 3535 }); 3536 } 3537 textTreatment=()=>{ 3538 function orphanPreventor(){ // add non breaking space between the last words in text blocks 3539 $('h1, h2, h3, h4, p, blockquote').each(function(i,d) { 3540 $(d).html( $(d).text().replace(/\s(?=[^\s]*$)/g, " ") ); 3541 }); 3542 } 3543 orphanPreventor(); 3544 } 3545 init(); 3546 return { 3547 initCaseStudy : ()=>{return loadDataCaseStudy();}, 3548 initNews : ()=>{return loadDataNews();} 3549 }; 3550})();</script>
3550<style>#listings-cards{ 3551 background:var(--color-white); 3552 position:relative; 3553} 3554.page-path{ 3555 display:none; 3556} 3557.card{ 3558 padding:2rem 0 1.8rem; 3559 border-bottom:solid 1px #686868; 3560 position: relative; 3561} 3562#cards a { 3563 position: absolute; 3564 top: 0; 3565 left: 0; 3566 width: 100%; 3567 height: 100%; 3568 z-index: 40; 3569} 3570#cards a:hover + .card-wrapper .image-wrapper img { 3571 transition:all 0.7s ease; 3572 transform:scale(1.1); 3573} 3574 3575#listings-cards h3{ 3576 color: #000; 3577 font-family: var(--primary-font), var(--secondary-font), Helvetica; 3578 font-size: 1.3125rem; 3579 font-style: normal; 3580 font-weight: 400; 3581 line-height: 0.95em; 3582 margin-bottom: 0.56rem; 3583} 3584 3585.case-study #cards .card:first-of-type h3{ 3586 font-weight:500; 3587} 3588 3589#listings-cards .inner-card{ 3590 padding:0; 3591} 3592#listings-cards .inner-card p{ 3593 color: #000; 3594 font-family: var(--secondary-font), var(--primary-font), Helvetica; 3595 font-size: 1.125rem; 3596 font-style: normal; 3597 font-weight: 300; 3598 line-height: 1.25rem; 3599 margin-bottom:1.25rem; 3600} 3601#listings-cards .inner-card .stack-small p{ 3602 font-size: 0.625rem; 3603 font-style: normal; 3604 font-weight: 250; 3605 line-height: unset; 3606 margin-bottom: 0px; 3607 letter-spacing: 0.075rem; 3608} 3609 3610.case-study #listings-cards #player-1 .inner-card .stack-small .sub-text{ 3611 font-size: 0.8em; 3612 margin-bottom: 0; 3613 line-height: 1.2em; 3614} 3615 3616#listings-cards .inner-card .stack-small .date{ 3617 font-weight: 400; 3618 text-transform:uppercase; 3619} 3620@supports (aspect-ratio: auto) { 3621 #cards .card .image-wrapper { 3622 aspect-ratio: 16/ 9; 3623 } 3624} 3625@supports not (aspect-ratio: auto) { 3626 #cards .card .image-wrapper{ 3627 /*padding-bottom: 62%;*/ 3628 padding-bottom: 56.25%; 3629 } 3630} 3631.image-wrapper { 3632 /*height: 12.5625rem;*/ 3633 /*width:100%;*/ 3634 overflow: hidden; 3635 margin-bottom:1.56rem; 3636} 3637 3638.image-wrapper img{ 3639 height: 100%; 3640 width: 100%; 3641 object-fit: cover; 3642 object-position: center center; 3643 transition:all 0.7s ease; 3644} 3645.show-more-wrapper { 3646 padding-left: 1.125rem; 3647} 3648#show-more{ 3649 display: block; 3650 width: fit-content; 3651 height: auto; 3652 border-radius: .1875rem; 3653 background-color: transparent; 3654 padding: 0.625rem 2.1875rem; 3655 border: 1px solid #000; 3656 color: #000; 3657 text-align: center; 3658 font-family: var(--primary-font); 3659 font-size: 0.625rem; 3660 font-style: normal; 3661 font-weight: 300; 3662 line-height: normal; 3663 text-decoration: none; 3664 letter-spacing: 0.15rem; 3665 text-transform: uppercase; 3666 cursor: pointer; 3667 margin-top:4.81rem; 3668 margin-bottom:8.75rem; 3669 transition: background-color .7s ease; 3670} 3671#show-more:hover{ 3672 background: #999; 3673 border: 1px solid #000; 3674 transition: background-color .7s ease; 3675} 3676 3677#cards .card:last-child{ 3678 border-bottom: none; 3679} 3680 3681@media screen and (min-width: 768px){ 3682 #cards .card{ 3683 padding:1.4rem 0 1.4rem; 3684 border-bottom:solid 1px #686868; 3685 } 3686 3687 .case-study #cards .card:first-child{ 3688 padding:2.56rem 0 2.5rem; 3689 border-bottom:solid 1px #686868; 3690 } 3691 #cards .card:nth-child(2){ 3692 padding:2.56rem 0 1.4rem; 3693 } 3694 #listings-cards .inner-card.stack{ 3695 padding-left:24px; 3696 padding-right:0px; 3697 } 3698 #listings-cards h3{ 3699 font-size: 1.2em; 3700 margin-bottom:1rem; 3701 } 3702 3703 #listings-cards .inner-card p{ 3704 font-size: 0.6875rem; 3705 line-height: 0.75rem; 3706 margin-bottom:1.25rem; 3707 } 3708 /*#listings-cards .inner-card .stack-small p{*/ 3709 /* font-size: 0.4375rem;*/ 3710 /* line-height:unset;*/ 3711 /* margin-bottom:8px;*/ 3712 /*}*/ 3713 .image-wrapper { 3714 /*height: 8.625rem;*/ 3715 margin-bottom:0; 3716 } 3717 3718 .case-study #listings-cards #player-1 h3{ 3719 font-size: 1.8em; 3720 margin-bottom:0.94rem; 3721 } 3722 3723 #listings-cards .inner-card p{ 3724 font-size: 0.875rem; 3725 line-height: 0.75rem; 3726 margin-bottom:1.31rem; 3727 } 3728 #listings-cards .inner-card .stack-small p{ 3729 font-size: 0.4375rem; 3730 line-height:unset; 3731 margin-bottom:unset; 3732 } 3733 #listings-cards .inner-card .stack-small p:first-child{ 3734 3735 } 3736 .case-study #player-1 .image-wrapper{ 3737 /*height: 13.625rem;*/ 3738 } 3739 .show-more-wrapper { 3740 padding-left: 24px; 3741 } 3742} 3743 3744@media screen and (min-width:1200px){ 3745 #cards .card{ 3746 padding:2.25rem 0 2.25rem; 3747 border-bottom:solid 1px #686868; 3748 } 3749 .case-study #cards .card:first-child{ 3750 padding:5.81rem 0 4.38rem; 3751 border-bottom:solid 1px #686868; 3752 } 3753 #cards .card:nth-child(2){ 3754 padding:4.37rem 0 2.25rem; 3755 } 3756 #listings-cards h3{ 3757 font-size: 1.8em; 3758 margin-bottom:1.0625rem; 3759 } 3760 3761 #listings-cards .inner-card.stack{ 3762 padding-left:56px; 3763 } 3764 #listings-cards .inner-card p{ 3765 font-size: clamp(0.875rem, 0.556vw + 0.458rem, 1.125rem); 3766 line-height:clamp(0.938rem, 0.972vw + 0.208rem, 1.375rem); 3767 margin-bottom:1.0625rem; 3768 } 3769 /*#listings-cards .inner-card .stack-small p{*/ 3770 /* font-size: clamp(0.625rem, 0.278vw + 0.417rem, 0.75rem);*/ 3771 /* line-height: unset;*/ 3772 /* margin-bottom:8px;*/ 3773 /*}
3773*/ 3774 .image-wrapper { 3775 /*height: 8.625rem;*/ 3776 } 3777 3778 .case-study #listings-cards #player-1 h3{ 3779 font-size: 2.5em; 3780 margin-bottom:1.5rem; 3781 } 3782 3783 .case-study #listings-cards #player-1 .inner-card p{ 3784 font-size: 1.5rem; 3785 line-height: 1.4375rem; 3786 margin-bottom:2.62rem; 3787 } 3788 .case-study #listings-cards #player-1 .inner-card .stack-small p, 3789 #listings-cards .inner-card .stack-small p{ 3790 font-size: 0.75rem; 3791 line-height:1.3em; 3792 } 3793 #listings-cards .inner-card .stack-small p:first-child{ 3794 } 3795 .case-study #player-1 .image-wrapper{ 3796 /*height: 23.75rem;*/ 3797 } 3798 .show-more-wrapper { 3799 padding-left: 56px; 3800 } 3801 3802} 3803 3804/*Site wrappers*/ 3805#listings-cards .content-wrapper{ 3806 max-width:var(--siteMaxWidth); 3807 margin:0 auto; 3808 padding-left: 0rem; 3809 padding-right: 0rem; 3810} 3811#listings-cards .fullwidth-wrapper{ 3812 max-width:var(--siteMaxWidth); 3813 margin:0 auto; 3814 padding-left: 1.125rem; 3815 padding-right: 1.125rem; 3816} 3817@media screen and (min-width: 768px){ 3818 3819} 3820@media screen and (min-width: 992px){ 3821 3822} 3823@media screen and (min-width:1200px){ 3824 3825 #listings-cards .content-wrapper{ 3826 max-width:var(--siteMaxWidth); 3827 margin:0 auto; 3828 padding-left: 3.75rem; 3829 padding-right: 3.75rem; 3830 } 3831 #listings-cards .fullwidth-wrapper{ 3832 max-width:var(--siteMaxWidth); 3833 margin:0 auto; 3834 padding-left: 3.75rem; 3835 padding-right: 3.75rem; 3836 } 3837 3838}</style></div> 3839 3840</div> 3841 3842 <div id="footer"><footer> 3843 <div class="inner"> 3844 <div class="panel"> 3845 <ul> 3846 <li><b>NEWSLETTER</b></li> 3847 <li></li> 3848 <li>Receive information about CODEX products and services. Your details will not be passed on to third parties.</li> 3849 <li><button class="button" onclick="return newsletter.showRegistration()">SUBSCRIBE</button></li> 3850 <li></li> 3851 <li></li> 3852 <li></li> 3853 <li><b>JOIN THE CONVERSATION</b></li> 3854 <li></li> 3855 <li> 3856 <ul class="social"> 3857 <a href="https://www.instagram.com/codexonline"><i class="instagram"></i></a> 3858 <a href="https://www.linkedin.com/company/627622"><i class="linkedin"></i></a> 3859 <a href="https://open.spotify.com/show/2xosctKgjcx9ijqXwg5Lh3?si=e49ba60bd60a441c&nd=1&dlsi=8bc7c7b6f3f14a6a"><i class="spotify"></i></a> 3860 </ul> 3861 </li> 3862 </ul> 3863 </div> 3864 <div class="panel"> 3865 <ul> 3866 <li><b>PRODUCT</b></li> 3867 <li></li> 3868 <li><b>CODEX Media & Readers</b></li> 3869 <li><a href="https://codex.online/us/products/cfexpress-type-a">CFexpress 4.0 Type A</a></li> 3870 <li><a href="https://codex.online/us/products/cfexpress-type-b">CFexpress 4.0 Type B</a></li> 3871 <li><a href="https://codex.online/us/products/cfexpress-type-b-reader">CFexpress Type B Reader 3872 <li></li> 3873 <li><b>ARRI Media & Readers</b></li> 3874 <li><a href="https://codex.online/us/products/arri-media">CompactDrive</a></li> 3875 <li><a href="https://codex.online/us/products/arri-media-readers">CompactDrive Readers</a></li> 3876 <li></li> 3877 </a></li></ul> 3878 </div> 3879 <div class="panel"> 3880 <ul> 3881 <li><b>SOLUTIONS</b></li> 3882 <li></li> 3883 <li><a href="https://codex.online/us/solutions/arri-workflow">ARRI Workflow</a></li> 3884 <li><a href="https://codex.online/us/solutions/integrations#">Integrations</a></li> 3885 <li><a href="https://codex.online/us/solutions/codex-hde">High Density Encoding [HDE]</a></li> 3886 <li><a href="https://codex.online/us/solutions/hde-partner-program">HDE Partner Program</a></li> 3887 </ul> 3888 </div> 3889 <div class="panel"> 3890 <ul> 3891 <li><b>SUPPORT</b></li> 3892 <li></li> 3893 <li><a href="https://help.codex.online/content/support">Contact Support</a></li> 3894 <li><a href="https://help.codex.online">Help Centre</a></li> 3895 <li><a href="https://help.codex.online/content/downloads/software">Software Downloads</a></li> 3896 <li><a href="https://help.codex.online/content/rma-request">Product Returns [RMA]</a></li> 3897 <li><a href="https://codex.online/us/support/office-locations">Office Locations</a></li> 3898 </ul> 3899 </div> 3900 <div class="panel"> 3901 <ul> 3902 <li><b>FOR THE MAKERS</b></li> 3903 <li></li> 3904 <li><a href="https://codex.online/us/the-codex-story">The CODEX Story</a></li> 3905 <li><a href="https://codex.online/us/captured-powered-cinema">Captured on CODEX</a></li> 3906 <li><a href="https://codex.online/us/case-studies">Case Studies</a></li> 3907 <li><a href="https://codex.online/us/dits-in-the-field">DIT Showcase</a></li> 3908 <li><a href="https://codex.online/us/news">News</a></li> 3909 </ul> 3910 </div> 3911 3912 </div> 3913 <div class="inner bottom"> 3914 Copyright © CODEX Tech Limited 2026. 3915 <ul> 3916 <li> 3917 <a href="https://codex.online/us/legal/terms-and-conditions">Terms & Conditions of Sale</a> 3918 </li> 3919 <li> 3920 <a href="https://codex.online/us/legal/returns-policy">Returns Policy</a> 3921 </li> 3922 <li> 3923 <a href="https://codex.online/us/legal/privacy-policy">Privacy Policy</a> 3924 </li> 3925 <li> 3926 <a href="https://codex.online/us/legal/warranty-cfexpress">CFexpress Warranty Policy</a> 3927 </li> 3928 <li> 3929 <a href="/us/#" onclick="return cookies.showPrivacy();">
3929Cookies Consent</a> 3930 </li> 3931 <li> 3932 <a href="https://codex.online/us/lets-talk">Contact Us</a> 3933 </li> 3934 </ul> 3935 </div> 3936</footer><style>body.embed #footer{display:none}#footer{margin:0 !important}footer{letter-spacing:-.01em;display:block;padding:2em 0 2em;font-size:clamp(1px,.89vw,16px);font-weight:250;position:relative}footer ul{padding:0;margin:0}footer .inner{max-width:var(--siteMaxWidth);margin:0 auto;display:flex;flex-wrap:wrap;padding:0 4em 0 6em}footer .panel{width:17.5em;margin-right:3em;border-top:1px solid;padding-top:1.5em;margin-top:1em}footer .inner .panel:last-child{margin-right:0}footer .panel ul{list-style:none}footer .panel li{font-weight:250;margin:.7em 0;line-height:1.3em}footer .panel li b{font-weight:500}footer .panel li:empty{height:.1em}footer a{text-decoration:none;color:#000;cursor:pointer}footer a:hover{text-decoration:none;border-bottom:1px solid #333}.dark footer a:hover{border-color:#ccc}footer .question{padding-bottom:.2em;width:100%;margin:0;display:inline-block;position:relative}footer input{border:none;background:#f3f3f3;padding:1.3em 1em .7em .6em;font-family:Codec;width:calc(100% - 1.6em);font-weight:300}footer button{font-size:.8em !important}footer .social{display:flex;width:60%;justify-content:space-between;padding-right:0}footer .social i{display:inline-block;width:1.7em;height:1.7em;background-size:cover;background-position:center}footer .social .instagram{background-image:url(/asset/eb51d4d5-bd6a-4752-ab3a-f69ee0925ebc)}footer .social .linkedin{background-image:url(/asset/17481e76-cd64-4cfc-b6e8-fbfe39c891e7)}footer .social .spotify{background-image:url(/asset/d447e82a-e212-43b7-af08-244f70f7113f)}footer .bottom{margin-top:6em}footer .bottom ul{list-style:none;overflow:hidden;margin-right:-1em;margin-left:2em}footer .bottom li{display:inline-block;margin-left:-2em;position:relative;padding:0 1em 1px 2em}footer .bottom li::before{content:"|";position:absolute;left:1.3em}footer .button{display:block;position:relative;width:fit-content;height:1.875rem;border-radius:.125rem;font-family:var(--primary-font);font-size:.8125rem;line-height:.8rem;font-weight:300;padding:0 1.875rem;border:none;cursor:pointer;display:flex;align-items:center;text-decoration:none;transition:background-color .7s ease;letter-spacing:.1em;color:#fff;background-color:#000}.dark footer{background:#000}.dark footer,.dark footer a{color:#fff}.dark footer .button{border:1px solid #aaa}@media screen and (max-width:767.955px){footer{font-size:1em}footer .inner{padding:0 1em}footer .panel{width:100%;margin-right:0}footer .social{width:10em}footer .bottom ul{margin-left:0;margin-top:.1em}}</style></div> 3937 <div id="cookies"><div class="cookies"> 3938 <div class="inner"> 3939 <div> 3940 <div class="title"> 3941 Cookies Consent 3942 </div> 3943 <p>We use cookies for analytics purposes to understand website usage and improve site performance. We do not use cookies for advertising or marketing, and we do not sell or share personal information. For more information about our privacy practices, please visit our <a href="/us/legal/privacy-policy">Privacy Policy.</a></p> 3944 </div> 3945 <div> 3946 <button class="decline">DECLINE</button> 3947 </div> 3948 <div> 3949 <button class="accept">ACCEPT</button> 3950 </div> 3951 </div> 3952</div>
3953<script async="" src="https://www.googletagmanager.com/gtag/js"></script>
vendor: 2 bytes, line 3953
3953
3954<script> 3955 window.dataLayer = window.dataLayer || []; 3956 function gtag(){dataLayer.push(arguments);} 3957</script>
3957<script type="text/javascript">var cookies=(()=>{var r=()=>{$(()=>{u()})},u=()=>{navigator.globalPrivacyControl||(t("p").length==0?setTimeout(n,3e3):i()),$(".cookies button").click(n=>{f("p",n.currentTarget.classList.contains("accept")),i(),gsap.to(".cookies",{opacity:0,duration:.7,onComplete:()=>{gsap.set(".cookies",{display:"none",y:0})}})}),$(".show-privacy").click(n)},n=()=>{gsap.set(".cookies",{display:"block",opacity:1}),gsap.to(".cookies",{y:"-120%",ease:"back.out(2)",duration:.7})},f=(n,t,i)=>{var r=new Date,u;r.setTime(r.getTime()+i*864e5);u="expires="+r.toUTCString();document.cookie=n+"="+t+"; "+u+";path=/"},t=n=>{for(var t,r=n+"=",u=document.cookie.split(";"),i=0;i<u.length;i++){for(t=u[i];t.charAt(0)==" ";)t=t.substring(1);if(t.indexOf(r)==0)return t.substring(r.length,t.length)}return""},i=()=>{t("p")=="true"&&(gtag("js",new Date),gtag("config","G-TH707HHRGJ"))};return r(),{showPrivacy:()=>(n(),!1)}})()</script>
3957<style>#cookies .cookies{position:fixed;z-index:5;background:#fff;left:50%;width:calc(100% - 8em);border:1px solid #ccc;padding:2em;text-align:left;max-width:101em;top:100%;transform:translate(-50%,0);z-index:999;color:#000}#cookies .cookies .inner{display:flex;align-items:center}#cookies .cookies .inner>div:first-child{width:100%}#cookies .cookies .inner .title{font-weight:400;letter-spacing:-.03em;font-size:1.2em}#cookies .cookies .inner p{font-weight:250;margin:1em 0;padding-right:3em;font-size:1em;color:#000;letter-spacing:-.03em;text-align:left;max-width:56em}#cookies .cookies button{font-weight:300;letter-spacing:-.03em;border:1px solid #aaa;padding:.8em 1em .7em;background:#fff;min-width:15em;margin:0 1em;cursor:pointer;font-size:1em;font-family:Codec;letter-spacing:.05em}#cookies .cookies button.accept{background:#039;color:#fff}#cookies .cookies a{color:#039;text-decoration:none;font-weight:500;display:inline-block}@media screen and (max-width:1024px){#cookies .cookies .inner{flex-wrap:wrap}#cookies .cookies button{margin:1em 1em 0}#cookies .cookies button.decline{margin-left:0}}@media screen and ((max-width:768px)or(max-height:399.955px)){}@media screen and (max-width:768px){#cookies .cookies{text-align:center}#cookies .cookies button{margin:.7em 0}#cookies .cookies .inner p{padding-right:0;text-align:center}#cookies .cookies .inner>div{width:100%}}</style></div> 3958 <div id="script-player" class="dark"><!--
3958<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
3958--> 3959<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />-->
3960<script src="/assets/js/greensock/MorphSVGPlugin.min.js"></script>
3960 3961
3962<script src="https://www.youtube.com/iframe_api"></script>
vendor: 2 bytes, line 3962
3962
3963<script src="https://player.vimeo.com/api/player.js"></script>
vendor: 2 bytes, line 3963
3963
3964<script src="/assets/js/can-autoplay.3.0.2.js"></script>
3964 3965<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.15.0/alt/video-js-cdn.min.css" integrity="sha512-RU6FIpN8MZ6jrswHMYzP9t7QlAtDkpCJP6uqyHYm56iP6eEdYCDfMW2C42KtimtJ8DKa+iWJqjpeTyLyQjV61g==" crossorigin="anonymous" referrerpolicy="no-referrer"> 3966<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/font-awesome-line-awesome/css/all.min.css" integrity="sha512-dC0G5HMA6hLr/E1TM623RN6qK+sL8sz5vB+Uc68J7cBon68bMfKcvbkg6OqlfGHo1nMmcCxO5AinnRTDhWbWsA==" crossorigin="anonymous" referrerpolicy="no-referrer"> 3967 3968<div id="playerTemplate" class="player"> 3969 <div class="close"><i class="fa fa-times"></i></div> 3970 <div class="shuffle prev"><i class="fa fa-angle-left"></i></div> 3971 <div class="shuffle next"><i class="fa fa-angle-right"></i></div> 3972 <div class="label"> 3973 <div class="inner"> 3974 <div class="name"></div> 3975 <div class="sub"></div> 3976 <div class="description"></div> 3977 </div> 3978 </div> 3979 3980 <div class="frame"> 3981 <div class="loading"></div> 3982 <div class="video"> </div> 3983 <div class="poster"></div> 3984 <div class="play"> 3985 <div class="loader"> 3986 <svg class="circular-loader" viewbox="25 25 50 50"> 3987 <circle class="loader-path" cx="50" cy="50" r="22" fill="none"></circle> 3988 </svg> 3989 </div> 3990 <div class="arrow"></div> 3991 <div class="pause"></div> 3992 </div> 3993 <div class="nav"> 3994 <div class="play"> 3995 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 16 20" style="enable-background:new 0 0 16 20;" xml:space="preserve"> 3996 <polyline class="playLRef" points="8,15 0.1,20 0.1,0 8,5 "></polyline> 3997 <polygon class="playRRef" points="7.9,5 15.9,10 7.9,15 7.9,10 "></polygon> 3998 <polyline class="playL" points="8,15 0.1,20 0.1,0 8,5 "></polyline> 3999 <polygon class="playR" points="7.9,5 15.9,10 7.9,15 7.9,10 "></polygon> 4000 <rect class="pauseL" x="0.5" y="1.6" width="2.5" height="16.8"></rect> 4001 <rect class="pauseR" x="9.4" y="1.6" width="2.5" height="16.8"></rect> 4002 </svg> 4003 </div> 4004 <div class="control volumeControls"> 4005 <div class="volume"> 4006 <div class="volume-bck"> 4007 <div class="slider-vertical"></div> 4008 </div> 4009 </div> 4010 <div class="mute"></div> 4011 </div> 4012 <div class="seek"> 4013 <div class="bg"></div> 4014 <div class="loaded"></div> 4015 <div class="position"></div> 4016 </div> 4017 <div class="time"></div> 4018 <div class="control subtitle"><i></i><ul></ul></div> 4019 <div class="control fullscreen"></div> 4020 <div class="thumbs"> 4021 <div class="thumb-frame"> 4022 <video width="100%" height="100%" preload="auto"> 4023 <source src="" type="video/mp4"> 4024 </source></video> 4025 </div> 4026 <div class="label"></div> 4027 </div> 4028 </div> 4029 </div> 4030</div>
4031<script type="text/javascript">let player=(()=>{ 4032 let init=()=>{ 4033 $(()=>{ 4034 $template=$("#playerTemplate"); 4035 initResize(); 4036 //initAutoplay(); 4037 //initControls(); 4038 initEvents(); 4039 initMorphConvert(); 4040 }); 4041 }, 4042 $template, 4043 isActive=false, 4044 assets, 4045 players=[], 4046 youTubePlayers=[], 4047 initResize=()=>{ 4048 $(window).resize(()=>{ 4049 var rect = $(".player .frame")[0].getBoundingClientRect(); 4050 $(".player .close").height(rect.top); 4051 $("#playerTemplate > .label").height($(window).height() - rect.bottom); 4052 }).resize(); 4053 }, 4054 initMorphConvert=()=>{ 4055 MorphSVGPlugin.convertToPath("polygon, rect, polyline, line"); 4056 }, 4057 createPlayer=(asset, target)=>{ 4058 4059 var context, 4060 autoplay=(target === undefined), //disable autoplay for inline player 4061 controlTimer, 4062 isControlsVisible=true, 4063 initControls=()=>{ 4064 $(context).on("mousemove",()=>{ 4065 if(isControlsVisible){ 4066 clearTimeout(controlTimer); 4067 controlTimer = setTimeout(hideControls, 3000); 4068 } 4069 else 4070 { 4071 showControls(); 4072 } 4073 }); 4074 }, 4075 hideControls=()=>{ 4076 isControlsVisible=false; 4077 $(".nav",context).animate({opacity : 0},750); 4078 }, 4079 showControls=()=>{ 4080 isControlsVisible=true; 4081 $(".nav",context).animate({opacity : 1},250); 4082 }, 4083 preloadImages=(data)=>{ 4084 data.forEach(asset=>{ 4085 $("<img src=\"/?action=asset&id=" + asset.Guid + "\">"); 4086 }); 4087 }, 4088 attachHandlers=()=>{ 4089 $(".gallery .tile",context).click(tileClickHandler); 4090 }, 4091 tileClickHandler=(e)=>{ 4092 createPlayer($(e.currentTarget).data().asset,context); 4093 }, 4094 player, 4095 createPlayer=(asset, target)=>{ 4096 if(target==undefined){ 4097 //single player instance. master template is context. 4098 context=$template[0]; 4099 4100 //iframe embedded viewer signalling 4101 if(window.parent!=window && !dispatchEvent(asset)) return; //send play event to parent document player if this player is embedded (parent window is not this window). stop playing in this window if received (event cencelled). for playing video in parent window from embedded viewer. 4102 } 4103 else{ 4104 //inline player. possibly multiple instances. make copy of template in target element and keep separate context 4105 context=$template.clone().removeAttr("id")[0]; 4106 $(target).replaceWith(context); 4107 setPoster(asset.Guid); 4108 } 4109 4110 resetControls(); 4111
4112 //determin if video id is vimeo or yt 4113 if(isNaN(asset.Var1.split(",")[0])) 4114 createYTPlayer(asset.Var1); 4115 else 4116 createVimeoPlayer(asset.Var1); 4117 4118 players.push(player); 4119 4120 player.asset=asset; 4121 updateLabels(asset); 4122 logEvent(asset); 4123 isActive=true; 4124 }, 4125 playerTimer, 4126 volumeLevel=60, 4127 vimeoVolumeLevel = volumeLevel/100, 4128 createYTPlayer=(id)=>{ 4129 $(".video",context).html("<div></div>").removeClass("vimeo").addClass("yt"); 4130 $(".nav",context).addClass("yt"); 4131 4132 player = new YT.Player($(".video div",context)[0],{ 4133 videoId : id, 4134 playerVars: { 4135 'autoplay': autoplay ? 1 : 0, 4136 'controls': 0, 4137 "showinfo" : 0, 4138 'rel' : 0, 4139 'fs' : 0, 4140 "modestbranding" : 1, 4141 "playsinline" : 1, 4142 "allowfullscreen" : 1 4143 }, 4144 events : { 4145 "onStateChange" : ytStateChange, 4146 "onReady" : ()=>{ 4147 if(isMuted) player.mute(); 4148 onLoaded(); 4149 playerTimer = setInterval(ytTimeUpdate,100); 4150 } 4151 } 4152 }); 4153 4154 player.playerType="yt"; 4155 youTubePlayers.push(player); 4156 4157 bindControls(); 4158 showPlayer(); 4159 4160 }, 4161 ytTimeUpdate=()=>{ 4162 var currentTime = !player.getCurrentTime ? 0.0 : player.getCurrentTime(), 4163 duration = !player.getDuration ? 0.0 : player.getDuration(), 4164 percent = currentTime / duration; 4165 updatePosition(percent); 4166 if(player.getPlayerState()==2) 4167 $(".nav .play",context).removeClass("playing"); 4168 else 4169 $(".nav .play",context).addClass("playing"); 4170 $(".nav .loaded",context).width((player.getVideoLoadedFraction() * 100) + "%"); 4171 updateTime(currentTime,duration); 4172 }, 4173 ytStateChange=(e)=>{ 4174 if(e.data==0) 4175 playNext(); 4176 }, 4177 createVimeoPlayer=(data)=>{ 4178 4179 dataArray=data.split(","); 4180 $(".video",context).html("<div></div>").removeClass("yt").addClass("vimeo"); 4181 $(".nav",context).removeClass("yt"); 4182 player = new Vimeo.Player($(".video div",context)[0], { 4183 id : dataArray[0], 4184 autoplay : autoplay, 4185 controls : false, 4186 transparent : false, 4187 playsinline : true 4188 }); 4189 player.playerType="vimeo"; 4190 player.on("timeupdate", vimeoTimeUpdate); 4191 player.on("ended", vimeoEnded); 4192 player.on("progress", vimeoProgress); 4193 player.on("loaded", onLoaded); 4194 player.on("play", hideLoading); 4195 playerTimer = setInterval(vimeoStatusUpdate,100); 4196 player.thumbs=dataArray[1]; 4197 4198 if(isMuted){ 4199 player.setVolume(0); 4200 } 4201 else{ 4202 player.setVolume(vimeoVolumeLevel); 4203 } 4204 4205 renderVimeoTextTracks(); 4206 initThumbs(); 4207 bindControls(); 4208 showPlayer(); 4209 }, 4210 setSubtitleLanguage=()=>{ 4211 let currentLang = getCookie("language"); 4212 $(".nav .subtitle li", context).removeClass("active"); 4213 if(getCookie("language")!=="en"){ 4214 player.enableTextTrack(getCookie("language")); 4215 $(".nav .subtitle li[data-language=" + currentLang + "]",context).addClass("active"); 4216 }else{ 4217 player.disableTextTrack(); 4218 $(".nav .subtitle li[data-language='']",context).addClass("active"); 4219 } 4220 }, 4221 renderVimeoTextTracks=()=>{ 4222 $(".nav",context).removeClass("subtitle"); 4223 $(".nav .subtitle ul",context).html(""); 4224 player.getTextTracks().then(data=>{ 4225 if(data.length>0){ 4226 $(".nav",context).addClass("subtitle"); 4227 4228 //create 'None' language in text tracks list 4229 // data.push({ 4230 data.unshift({ 4231 label: "NO SUBTITLES", 4232 language: "", 4233 mode : data.filter(e=>{return e.mode=="showing"}).length==0 ? "showing" : "none" 4234 }); 4235
4236 data.forEach(e=>{ 4237 $(".nav .subtitle ul",context).append(`<li data-language="${e.language}" class="${e.mode=="showing" ? `active` : ""}">${e.label}</li>`); 4238 }); 4239 4240 $(".nav .subtitle li",context).click(subtitleLanguageClickHandler); 4241 4242 //Remove English Auto generated text 4243 if($('li[data-language="en-x-autogen"]').length !== 0){ 4244 var autoGen = $('li[data-language="en-x-autogen"]')[0].innerHTML.split(" ")[0]; 4245 $('li[data-language="en-x-autogen"]').html(autoGen); 4246 } 4247 4248 $(".nav .subtitle",context).css("display", "block"); 4249 }else{ 4250 $(".nav .subtitle",context).css("display", "none"); 4251 } 4252 setSubtitleLanguage(); 4253 }); 4254 4255 }, 4256 subtitleClickHandler=e=>{ 4257 $(".nav .subtitle ul",context).toggle(); 4258 }, 4259 subtitleLanguageClickHandler=e=>{ 4260 if(e.currentTarget.dataset.language.length>0) 4261 player.enableTextTrack(e.currentTarget.dataset.language); 4262 else 4263 player.disableTextTrack(); 4264 4265 $(".nav .subtitle li", context).removeClass("active"); 4266 $(".nav .subtitle ul",context).toggle(); 4267 subtitleClickHandler(); 4268 $(e.currentTarget).addClass("active"); 4269 4270 }, 4271 vimeoTimeUpdate=(e)=>{ 4272 updatePosition(e.percent); 4273 // updateTime(e.duration - e.seconds); 4274 updateTime(e.seconds, e.duration); 4275 console.log(e); 4276 }, 4277 vimeoStatusUpdate=()=>{ 4278 player.getPaused().then(paused=>{ 4279 if(paused){ 4280 $(context).removeClass("playing"); 4281 } 4282 else{ 4283 hideLoading(); 4284 $(context).addClass("playing"); 4285 $(context).addClass("show"); 4286 } 4287 }); 4288 }, 4289 vimeoEnded=()=>{ 4290 if(assets==undefined || asset.length <= 1){ 4291 vimeoRestart(); 4292 }else{ 4293 playNext(); 4294 } 4295 }, 4296 vimeoProgress=e=>{ 4297 $(".nav .loaded",context).width((e.percent * 100) + "%"); 4298 }, 4299 vimeoRestart=()=>{ 4300 player.setCurrentTime(0); 4301 resetControls(); 4302 showBigPlay(); 4303 }, 4304 updateLabels=(asset)=>{ 4305 $(".name",context).html(asset.Name?.toUpperCase()); 4306 $(".description",context).html(asset?.Content); 4307 $(".sub",context).html(asset?.Var2); 4308 $(window).resize(); 4309 }, 4310 updatePosition=(percent)=>{ 4311 $(".seek .position",context).width((percent * 100) + "%"); 4312 }, 4313 updateTime=(position,duration)=>{ 4314 if(position < 0) position = 0; 4315 if(duration < 0) duration = 0; 4316 $(".nav .time",context).text(getTimeText(position) + " / " + getTimeText(duration)); 4317 }, 4318 getTime=seconds=>{ 4319 return { 4320 minutes : Math.floor(seconds / 60), 4321 seconds : seconds % 60 4322 }; 4323 }, 4324 getTimeText=seconds=>{ 4325 var time=getTime(seconds); 4326 return time.minutes + ":" + Math.floor(time.seconds).toString().padStart(2,"0"); 4327 }, 4328 bigPlayTimer = 0, 4329 playPauseMorph=()=>{ 4330 var tl = new TimelineMax(); 4331 var playR = $(".playR",context), 4332 playL = $(".playL",context), 4333 pauseR = $(".pauseR",context), 4334 pauseL = $(".pauseL",context); 4335 showBigPlay(); 4336 hideClickPlay(); 4337 tl 4338 .to(playL, 0.5, {morphSVG:{shape: pauseL,shapeIndex:4},delay:0.5}) 4339 .to(playR, 0.5, {morphSVG:{shape:pauseR,shapeIndex:4},delay:0.5},0); 4340 4341 $(".play.bigPlay .arrow",context).show(); 4342 $(".play.bigPlay .pause",context).hide(); 4343 setTimeout(()=>{ 4344 hideBigPlay(); 4345 bigPlayTimer=1500; 4346 }, bigPlayTimer); 4347 }, 4348 pausePlayMorph=()=>{ 4349 var tl = new TimelineMax(); 4350 var playR = $(".playR",context), 4351 playL = $(".playL",context), 4352 pauseR = $(".pauseR",context), 4353 pauseL = $(".pauseL",context); 4354 playLRef= $(".playLRef",context); 4355 playRRef= $(".playRRef",context); 4356 showBigPlay(); 4357 tl 4358 .to(playL, 0.5, {morphSVG:{shape: playLRef,shapeIndex:4}, delay:0.5}) 4359 .to(playR, 0.5, {morphSVG:{shape:playRRef,shapeIndex:4},delay:0.5},0); 4360 $(".play.bigPlay .arrow",context).hide(); 4361 $(".play.bigPlay .pause",context).show(); 4362 setTimeout(()=>{ 4363 hideBigPlay(); 4364 }, 1500); 4365 }, 4366 resetMorph=()=>{ 4367 var tl = new TimelineMax(); 4368 var playR = $(".playR"), 4369 playL = $(".playL"), 4370 pauseR = $(".pauseR"), 4371 pauseL = $(".pauseL"); 4372 playLRef= $(".playLRef"); 4373 playRRef= $(".playRRef"); 4374 tl 4375 .to(playL, 0.5, {morphSVG:{shape: playLRef,shapeIndex:4}, delay:0.5}) 4376 .to(playR, 0.5, {morphSVG:{shape:playRRef,shapeIndex:4},delay:0.5},0); 4377 4378 }, 4379 playPause=()=>{ 4380 $(".nav .subtitle ul",context).css("display", "none"); 4381 if(!autoplay){ 4382 stopAllVideos(); 4383 } 4384 if(player.playerType=="vimeo"){ 4385 player.getPaused().then(paused=>{ 4386 if(paused){ 4387 player.play(); 4388 // hideBigPlay(); 4389 playPauseMorph(); 4390 4391 $(".frame .poster",context).hide(); 4392 // clearPoster(); 4393 } 4394 else{ 4395 player.pause(); 4396 // showBigPlay(); 4397 4398 pausePlayMorph(); 4399 } 4400 }); 4401 } 4402 else{ 4403 if(player.getPlayerState() == 1){ 4404 player.pauseVideo(); 4405 $(context).removeClass("playing"); 4406 // showBigPlay(); 4407 pausePlayMorph(); 4408 } 4409 else{ 4410 $(context).addClass("show"); 4411 $(context).addClass("playing"); 4412 $(".frame .poster",context).hide(); 4413 player.playVideo(); 4414 // hideBigPlay(); 4415 playPauseMorph() 4416 } 4417 } 4418 }, 4419 stopAllVideos=()=>{ 4420 // Find all Vimeo iframes 4421 var vimeoFrames = document.querySelectorAll(".video.vimeo"); 4422 // Loop through each YouTube iframe and create a player instance 4423 if(youTubePlayers.length>=1){
4424 youTubePlayers.forEach(function(p) { 4425 p.pauseVideo(); 4426 }) 4427 4428 } 4429 4430 if (vimeoFrames.length>=1){ 4431 // Loop through each Vimeo iframe and create a player instance 4432 vimeoFrames.forEach(function(frame) { 4433 var player = new Vimeo.Player(frame); 4434 player.getPaused().then(paused=>{ 4435 if(!paused){ 4436 // Stop Vimeo playback 4437 player.pause(); 4438 } 4439 }) 4440 }); 4441 } 4442 resetMorph(); 4443 }, 4444 addVolumeControl=()=>{ 4445 $( ".slider-vertical",context).slider({ 4446 orientation: "vertical", 4447 range: "min", 4448 min: 0, 4449 max: 100, 4450 value: 60, 4451 slide: function(e, ui) { 4452 // volumeLevel = ui.value/100; 4453 volumeLevel = ui.value; 4454 // player.setVolume(volumeLevel/100); 4455 vimeoVolumeLevel = volumeLevel/100; 4456 if(player.playerType=="vimeo"){ 4457 player.setVolume(vimeoVolumeLevel); 4458 if(vimeoVolumeLevel == 0){ 4459 setMuted(); 4460 }else{ 4461 volumeUnmute(); 4462 } 4463 }else{ 4464 player.setVolume(volumeLevel); 4465 if(volumeLevel == 0){ 4466 setMuted(); 4467 }else{ 4468 volumeUnmute(); 4469 } 4470 } 4471 4472 } 4473 }); 4474 }, 4475 volumeUnmute=()=>{ 4476 4477 if(player.playerType=="vimeo"){ 4478 player.getVolume().then(vol=>{ 4479 player.setVolume(vimeoVolumeLevel); 4480 $(".nav .mute",context).removeClass("muted"); 4481 }); 4482 } 4483 else{ 4484 player.unMute(); 4485 $(".nav .mute",context).removeClass("muted"); 4486 $(".player .nav.yt .ui-slider-vertical .ui-slider-range-min",context).height(volumeLevel + "%"); 4487 player.setVolume(volumeLevel); 4488 } 4489 4490 }, 4491 volume=()=>{ 4492 $( ".volume" ,context).addClass("volumeSlider"); 4493 $(".nav .volumeControls" ,context).on("mouseout", function(){ 4494 hideVolume(); 4495 }) 4496 }, 4497 hideVolume=()=>{ 4498 $( ".volume" ,context ).removeClass("volumeSlider"); 4499 }, 4500 isMuted = false, 4501 setMuted=()=>{ 4502 $(".nav .mute",context).addClass("muted"); 4503 $(".slider-vertical" ,context).slider({value: 0}); 4504 isMuted = true 4505 }, 4506 clearMuted=()=>{ 4507 $(".nav .mute",context).removeClass("muted"); 4508 // $(".slider-vertical" ,context ).slider({value: volumeLevel*100}); 4509 $(".slider-vertical" ,context ).slider({value: volumeLevel}); 4510 isMuted = false; 4511 }, 4512 mute=()=>{ 4513 if(player.playerType=="vimeo"){ 4514 player.getVolume().then(vol=>{ 4515 if(vol != 0){ 4516 player.setVolume(0); 4517 setMuted(); 4518 } 4519 else{ 4520 if(volumeLevel == 0){ 4521 vimeoVolumeLevel = 0.5; 4522 volumeLevel = 50; 4523 }; 4524 player.setVolume(vimeoVolumeLevel); 4525 clearMuted(); 4526 } 4527 }); 4528 } 4529 else{ 4530 if(player.isMuted()){ 4531 if(volumeLevel == 0){ 4532 vimeoVolumeLevel = 0.5; 4533 volumeLevel = 50; 4534 }; 4535 player.unMute(); 4536 clearMuted(); 4537 } 4538 else{ 4539 player.mute(); 4540 setMuted(); 4541 } 4542 } 4543 }, 4544 fullscreen=()=>{ 4545 target = $("iframe",context)[0]; 4546 switch(true){ 4547 case target.requestFullScreen != undefined: 4548 target.requestFullScreen(); 4549 break; 4550 case target.webkitRequestFullscreen != undefined: 4551 target.webkitRequestFullscreen(); 4552 break; 4553 case target.mozRequestFullScreen != undefined: 4554 target.mozRequestFullScreen(); 4555 break; 4556 case target.webkitRequestFullscreen != undefined: 4557 target.webkitRequestFullscreen(); 4558 break; 4559 case player.requestFullscreen != undefined: 4560 player.requestFullscreen(); 4561 break; 4562 } 4563 hideBigPlay(); 4564 }, 4565 seek=(e)=>{ 4566 updateThumbs(e); 4567
4568 if(e.buttons==0 && e.which == 0) return; 4569 rect = e.currentTarget.getBoundingClientRect(); 4570 percent = (e.clientX - rect.left) / rect.width; 4571 4572 if(player.playerType=="vimeo"){ 4573 player.getDuration().then(duration=>{ 4574 var seconds = Math.floor(duration * percent); 4575 player.setCurrentTime(seconds); 4576 updateTime(seconds,duration); 4577 updatePosition(percent); 4578 player.play(); 4579 playPauseMorph(); 4580 $(".frame .poster",context).hide(); 4581 }); 4582 } 4583 else{ 4584 var duration = player.getDuration(); 4585 var seconds = duration * percent; 4586 player.seekTo(seconds); 4587 updateTime(seconds,duration); 4588 } 4589 }, 4590 thumbsVideo, 4591 initThumbs=()=>{ 4592 if(player.thumbs==undefined) return; 4593 thumbsVideo=$(".thumbs video",context)[0]; 4594 thumbsVideo.src="/asset/" + player.thumbs; 4595 }, 4596 updateThumbs=e=>{ 4597 if(player.thumbs==undefined) return; 4598 var seconds=thumbsVideo.duration * (e.originalEvent.offsetX / e.currentTarget.clientWidth); 4599 thumbsVideo.currentTime = seconds; 4600 if(seconds<0) seconds = 0; 4601 $(".thumbs .label",context).text(getTimeText(seconds)); 4602 gsap.set($(".thumbs",context)[0], {x : e.originalEvent.offsetX}); 4603 $(".thumbs",context).show(); 4604 }, 4605 navMouseEnter=()=>{ 4606 $(".thumbs",context).show(); 4607 }, 4608 navMouseleave=()=>{ 4609 $(".thumbs",context).hide(); 4610 }, 4611 assertControls=()=>{ 4612 if(assets==undefined){ 4613 $(context).addClass("single"); 4614 } 4615 }, 4616 bindControls=()=>{ 4617 unbindControls(); 4618 assertControls(); 4619 $(".nav .play",context).click(playPause); 4620 $(".nav .volumeControls .mute",context).click(mute); 4621 addVolumeControl(); 4622 $(".nav .volumeControls",context).on( "mouseover", (e)=> { 4623 volume(); 4624 e.preventDefault(); 4625 }); 4626 $(".nav .fullscreen",context).click(fullscreen); 4627 $(".close",context).click(closePlayer); 4628 $(".seek",context).click(seek).on("mousemove",seek).on("touchmove",seek); 4629 $(".next",context).click(playNext); 4630 $(".prev",context).click(playPrevious); 4631 $(".frame .play",context).click(bigPlayClickHandler); 4632 $(".nav .subtitle",context).click(subtitleClickHandler); 4633 // $(".frame .play").click(playPause); 4634 4635 if(player.thumbs!=undefined){ 4636 $(".seek",context).on("mouseenter", navMouseEnter); 4637 $(".seek",context).on("mouseleave", navMouseleave); 4638 } 4639 }, 4640 unbindControls=()=>{ 4641 $(".nav .play, .nav .mute, .nav .fullscreen, .close, .seek, .next, .prev, .frame >
4641 .play, .nav .subtitle",context).off("click").off("mouseenter").off("mousemove").off("mouseleave").off("touchmove"); 4642 }, 4643 closePlayer=()=>{ 4644 if(player.playerType=="vimeo"){ 4645 player.pause(); 4646 } 4647 else{ 4648 player.pauseVideo(); 4649 } 4650 clearInterval(playerTimer); 4651 hidePlayer(); 4652 hideBigPlay(); 4653 clearTimeout(playerTimer); 4654 player.destroy(); 4655 isActive=false; 4656 }, 4657 getNextAsset=()=>{ 4658 if(assets==undefined) return player.asset; 4659 var index=assets.indexOf(player.asset); 4660 if(index==(assets.length-1)) return assets[0]; 4661 return assets[index+1]; 4662 }, 4663 getPreviousAsset=()=>{ 4664 if(assets==undefined) return player.asset; 4665 var index=assets.indexOf(player.asset); 4666 if(index==0) return assets[assets.length-1]; 4667 return assets[index-1]; 4668 }, 4669 playNext=()=>{ 4670 clearInterval(playerTimer); 4671 createPlayer(getNextAsset()) 4672 hideBigPlay(); 4673 }, 4674 playPrevious=()=>{ 4675 clearInterval(playerTimer); 4676 createPlayer(getPreviousAsset()); 4677 hideBigPlay(); 4678 }, 4679 resetControls=()=>{ 4680 $(context).removeClass("show"); 4681 $(".seek .position, .nav .loaded",context).width(0); 4682 $(context).removeClass("playing"); 4683 $(".nav .time",context).text("0:00 / 0:00"); 4684 $(".nav .mute",context).removeClass("muted"); 4685 $(".frame .loading",context).show(); 4686 $(".player .frame .poster",context).show(); 4687 }, 4688 onLoaded=()=>{ 4689 hideLoading(); 4690 //play if available 4691 4692 if(autoplay){ 4693 4694 if(player.playerType=="vimeo"){ 4695 var playPromise = player.play(); 4696 if (playPromise !== undefined) { 4697 playPromise.then((e) => { 4698 // Auto-play started 4699 playPauseMorph(); 4700 if(e?.result && isActive){ 4701 playPause(); 4702 } 4703 }).catch((error) => { 4704 // Auto-play was prevented 4705 // Show a UI element to let the user manually start playback 4706 // showBigPlay(); 4707 console.log('Auto-play was prevented') 4708 showClickPlay(); 4709 // showBigPlay(); 4710 // setPoster(asset.Guid); 4711 // pausePlayMorph(); 4712 }); 4713 } 4714 } 4715 else{ 4716 canAutoplay.video().then(e=>{ 4717 if(e.result && isActive){ 4718 $(context).addClass("show"); 4719 $(context).addClass("playing"); 4720 $(".frame .poster",context).hide(); 4721 player.playVideo(); 4722 hideBigPlay(); 4723 playPauseMorph(); 4724 $(".frame .loading",context).hide(); 4725 }else{ 4726 showBigPlay(); 4727 $(".frame .poster",context).show(); 4728 } 4729 }); 4730 } 4731 } 4732 else 4733 { 4734 showBigPlay(); 4735 } 4736 }, 4737 hideLoading=()=>{ 4738 $(".frame .loading",context).hide(); 4739 }, 4740 hideLoadingDelay=()=>{ 4741 setTimeout(hideLoading,1000); 4742 }, 4743 showClickPlay=()=>{ 4744 $(".frame > .play",context).addClass("autoPlay"); 4745 hideLoading(); 4746 }, 4747 hideClickPlay=()=>{ 4748 $(".frame > .play",context).removeClass("autoPlay"); 4749 }, 4750 showBigPlay=()=>{ 4751 $(".frame > .play",context).addClass("bigPlay"); 4752 hideLoading(); 4753 }, 4754 hideBigPlay=()=>{ 4755 $(".frame > .play",context).removeClass("bigPlay"); 4756 }, 4757 bigPlayClickHandler=()=>{ 4758 // playPause(); 4759 $(".nav .subtitle ul",context).css("display", "none"); 4760 if(!autoplay){ 4761 stopAllVideos(); 4762 } 4763 if(player.playerType=="vimeo"){ 4764 player.getPaused().then(paused=>{ 4765 if(paused){ 4766 player.play(); 4767 // hideBigPlay(); 4768 playPauseMorph(); 4769 $(".frame .poster",context).hide(); 4770 // clearPoster(); 4771 } 4772 else{ 4773 player.pause(); 4774 // showBigPlay(); 4775 pausePlayMorph(); 4776 } 4777 }); 4778 } 4779 else{ 4780 if(player.getPlayerState() == 1){ 4781 player.pauseVideo(); 4782 $(context).removeClass("playing"); 4783 // showBigPlay(); 4784 pausePlayMorph(); 4785 } 4786 else{ 4787 $(context).addClass("show"); 4788 $(context).addClass("playing"); 4789 // $(".frame .poster",context).hide(); 4790 4791 player.playVideo(); 4792 // hideBigPlay(); 4793 playPauseMorph(); 4794 } 4795 } 4796 }, 4797 showPlayer=()=>{ 4798 if($(context).css("display")!="block"){ 4799 gsap.set(context, {opacity:0, duration: 0.7, display:"block"}); 4800 gsap.to(context, { opacity:1 }); 4801 } 4802 //$(".player").css({opacity:0}
4802).show().animate({opacity:1},500); 4803 }, 4804 hidePlayer=()=>{ 4805 gsap.to(context, {opacity:0, duration: 0.7, onComplete: ()=>{ gsap.set(context, {display: "none"}); }}); 4806 //$(".player").animate({opacity:0},500,); 4807 }, 4808 setPoster=guid=>{ 4809 $(".frame .poster",context).css("background-image","url(/asset/" + guid + ")").show(); 4810 } 4811 clearPoster=()=>{ 4812 $(".frame .poster",context).hide(); 4813 } 4814 ; 4815 createPlayer(asset,target); 4816 }, 4817 // autoplay with url ?play parameter 4818 initAutoplay=()=>{ 4819 play=$.getQueryParameters().play; 4820 if(play!=undefined){ 4821 getName=n=>{ 4822 if(n==null || n==undefined) return ""; 4823 return n.replace(/:/g,"").replace(/'/g,"").replace(/\(/g,"").replace(/\)/g,"").replace(/-/g," ").replace(/\./g," ").replace(/,/g,"").replace(/!/g,"").replace(/&/g,"and").replace(/á/g,"a").replace(/à/g,"a").replace(/#/g,"").trim(); 4824 } 4825 play=play.replace(/-/g," "); 4826 //autoplay=false; 4827 asset = assets.find(a=>getName(a.Name).toLowerCase()==play.toLowerCase()); 4828 4829 if(asset!=undefined) 4830 createPlayer(asset); 4831 //$($(".gallery .tile").toArray().find(e=>$(e).data().asset.Name.toLowerCase()==play)).click(); 4832 } 4833 }, 4834 // iframe events 4835 initEvents=()=>{ 4836 window.document.addEventListener("player_play", e=>{ 4837 //received play event from child document in iframe 4838 e.preventDefault(); //signal to embedded player that this player will play the video. 4839 createPlayer(e.detail); 4840 }); 4841 }, 4842 dispatchEvent = asset=>{ 4843 try{ 4844 return window.parent.document.dispatchEvent(new CustomEvent("player_play", { cancelable : true, detail : asset })); 4845 } 4846 catch(e){ 4847 return true; 4848 } 4849 }, 4850 //ga events 4851 logEvent=(asset)=>{ 4852 gtag("event","Trailer", { 4853 event_label : asset.Name 4854 }); 4855 }, 4856 // inline player 4857 createInlineElement=e=>{ 4858 if(Array.isArray(e)){ 4859 e.forEach(e=>{ 4860 initInlineVideoElement(e); 4861 }); 4862 } 4863 else{ 4864 initInlineVideoElement(e); 4865 } 4866 }, 4867 initInlineVideoElement=e=>{ 4868 //create asset 4869 var asset={ 4870 Guid: e.parentElement.dataset.assetid, 4871 Var1: e.dataset.var1, 4872 }; 4873 4874 createPlayer(asset,e); 4875 } 4876 ; 4877 init(); 4878 return { 4879 createPlayer : (asset)=>{createPlayer(asset);}, 4880 createInlineElement : e=>{createInlineElement(e);}, 4881 setAssets: (data)=>{assets = data;}, 4882 initAutoplay: ()=>{initAutoplay();}, 4883 getPlayers: ()=>{return players;}, 4884 //initEvents : ()=>{initEvents();} 4885 }; 4886})();</script>
4886<style>#case-study-detail-block .cms-section .content{ 4887 overflow:visible !important; 4888} 4889.playShape,.unMuteSvg{ 4890 display:none; 4891} 4892.pauseR,.pauseL{ 4893 opacity:0; 4894 -webkit-filter: invert(100%); 4895 -ms-filter: invert(100%); 4896 -o-filter: invert(100%); 4897 filter: invert(1); 4898 fill: #ffffff; 4899} 4900.playLRef, .playRRef{ 4901 display:none; 4902} 4903#morph, #morph svg{ 4904 width: 100%; 4905 height: 100%; 4906 position: relative; 4907 top: 0; 4908 bottom: 0; 4909} 4910#morph #pSvg1, #morph #paSvg1,#morph #pSvg2, #morph #paSvg2{ 4911 -webkit-filter: invert(1); 4912 -ms-filter: invert(100%); 4913 -o-filter: invert(100%); 4914 filter: invert(1); 4915 fill: #ffffff; 4916} 4917.dark .playL, 4918.dark .playR, 4919.pix #pin .playR, 4920.pix #pin .playL, 4921.codex #pin .playR, 4922.codex #pin .playL{ 4923 fill: #ffffff; 4924} 4925 4926#playerTemplate .playR{ 4927 transform: translate(-0.5px,0px); 4928} 4929.player{ 4930 position: fixed; 4931 width: 100%; 4932 height: 100%; 4933 top: 0; 4934 left: 0; 4935 background: #222; 4936 display:none; 4937 z-index: 20000; 4938 color: #fff; 4939} 4940 4941.player .frame{ 4942 left: 50%; 4943 position: absolute; 4944 top: 45%; 4945 transform: translate(-50%,-50%); 4946 width: 65%; 4947 background: #000; 4948 padding-bottom: 37%; 4949} 4950 4951.player .frame .loading{ 4952 height: 100%; 4953 width: 100%; 4954 position: absolute; 4955 background-image: url(/?action=asset&id=8251dbc9-5c3e-4311-ad37-10af96e3b895); 4956 z-index: 1; 4957 background-repeat: no-repeat; 4958 background-position: center; 4959} 4960 4961.player .video{ 4962 height: 100%; 4963 width: 100%; 4964 position: absolute; 4965 opacity: 0; 4966 transition: opacity 0.3s 0.4s; 4967} 4968 4969.player.show .video{ 4970 opacity: 1; 4971} 4972 4973.player .video iframe{ 4974 width: 100%; 4975 height: 100%; 4976} 4977 4978.player .video.vimeo iframe{ 4979 4980} 4981 4982.player .video.vimeo > div{ 4983 height: 100%; 4984} 4985 4986.player .video.yt iframe{ 4987 4988} 4989 4990.player .frame .nav{ 4991 position: absolute; 4992 top: calc(100% + 1em); 4993 width: calc(100% - 20px); 4994 z-index: 3; 4995 display: flex;
4996 align-items: center; 4997 justify-content: space-between; 4998 padding: 0 10px; 4999} 5000 5001.player .nav .control, .player .close{ 5002 /*font-family: VideoJS;*/ 5003 font-weight: 400; 5004 font-style: normal; 5005 font-size: 1em; 5006 line-height: 1.67; 5007 display: inline-block; 5008 cursor: pointer; 5009 color: #000; 5010} 5011 5012.pix #pin .player .nav .control, 5013.pix #pin .player .close, 5014.codex #pin .player .nav .control, 5015.codex #pin .player .close{ 5016 color: #fff; 5017} 5018 5019.player .nav .play{ 5020 /*top: -0.06em;*/ 5021 position: relative; 5022 width: 16px; 5023 height: 20px; 5024 cursor:pointer; 5025} 5026 5027#case-study-detail-block .cms-section .content .cms-asset.video .player .nav .play{ 5028 top: -0.15em; 5029} 5030@media screen and (max-width: 1024px) { 5031 #case-study-detail-block .cms-section .content .cms-asset.video .player .nav .play{ 5032 top: 0.05em; 5033 } 5034} 5035@media not all and (min-width: 768px) and (min-resolution:.1dpi) { 5036 .player .nav .play{ 5037 /*top: -0.1em;*/ 5038 } 5039} 5040.player .nav .play:before{ 5041 content: ''; 5042 background-image: url(/asset/251b4174-8010-40d2-a854-71e56a507f0a); 5043 /*background-size: contain;*/ 5044 background-position: center; 5045 background-repeat: no-repeat; 5046 width: 100%; 5047 height: 100%; 5048 display: none; 5049 border: none; 5050} 5051 5052.player.playing .nav .play:before{ 5053 content: ''; 5054 background-image: url(/asset/83548cd5-b1b3-40dc-a18e-09f94c51dc57); 5055} 5056 5057.dark .player .nav .play:before, 5058.dark .player.playing .nav .play:before{ 5059 content: ''; 5060 filter: invert(1); 5061} 5062 5063.player .nav .volumeControls{ 5064 position: relative; 5065 z-index:2; 5066 cursor:pointer; 5067} 5068.player .nav .volumeControls .volume{ 5069 display: none; 5070 z-index: 200; 5071 position: absolute; 5072 bottom: 100%; 5073 width:100%; 5074} 5075.player .nav .volumeControls .volume .volume-bck{ 5076 height: 100%; 5077 padding: 10px 4px; 5078 /*width: 14px;*/ 5079 border-radius: 2px; 5080 background: #222; 5081 margin-bottom: calc(1.5em - 1px); 5082} 5083 5084/*Iphones*/ 5085@media only screen 5086 and (min-device-width: 320px) 5087 and (max-device-width: 667px) 5088 and (-webkit-min-device-pixel-ratio: 2){ 5089 .player .nav .volumeControls .volume{ 5090 display: none !important; 5091 } 5092} 5093/*Iphones*/ 5094@media only screen 5095 and (min-device-width: 375px) 5096 and (max-device-width: 667px) 5097 and (-webkit-min-device-pixel-ratio: 2) { 5098 .player .nav .volumeControls .volume{ 5099 display: none !important; 5100 } 5101} 5102/* Ipad */ 5103@media only screen 5104 and (min-device-width: 768px) 5105 and (max-device-width: 1024px) 5106 and (-webkit-min-device-pixel-ratio: 2) { 5107 .player .nav .volumeControls .volume{ 5108 display: none !important; 5109 } 5110} 5111/* Ipad */ 5112@media only screen 5113 and (min-device-width: 1024px) 5114 and (max-device-width: 1366px) 5115 and (-webkit-min-device-pixel-ratio: 2) { 5116 .player .nav .volumeControls .volume{ 5117 display: none !important; 5118 } 5119} 5120 5121 5122.player .nav .volumeControls .volume.volumeSlider{ 5123 display:block; 5124} 5125.player .nav .volumeControls .volume .slider-vertical{ 5126 height: 60px; 5127 cursor:pointer; 5128} 5129.player .nav .volumeControls .volume .ui-slider .ui-slider-handle{ 5130 width: 5px; 5131 height: 5px; 5132 opacity: 1; 5133 border: 0px solid #c5c5c5; 5134 /*left: 2.5px;*/ 5135 left: 50%; 5136 transform: translateX(-50%); 5137} 5138 5139.player .nav .volumeControls .volume .ui-slider-vertical{ 5140 width: 10px; 5141 border: none; 5142 position:relative; 5143 left: 50%; 5144 background: #222; 5145 transform: translateX(-50%); 5146} 5147.player .nav .volumeControls .volume .ui-slider-vertical:after{ 5148 content: ""; 5149 border-left: 2px solid #555; 5150 position: absolute; 5151 left: calc(50% - 1px); 5152 top: 0; 5153 width: 100%; 5154 height: 100%; 5155} 5156.player .nav .volumeControls .volume .ui-slider-vertical .ui-slider-range-min { 5157 bottom: 0; 5158 width:2px; 5159 left: 4px; 5160} 5161 5162.dark .player .nav .volumeControls .volume .ui-slider-vertical{ 5163 color:#fff; 5164 background:#222; 5165} 5166.dark .player .nav .volumeControls .volume .ui-slider-vertical .ui-slider-handle{ 5167 margin-bottom:0; 5168} 5169.player .nav .volumeControls .volume .ui-slider-vertical .ui-slider-handle{ 5170 margin-bottom:0; 5171} 5172 5173.player .nav .volumeControls .volume .ui-slider-vertical{ 5174 color:#000; 5175} 5176 5177.player .nav .volumeControls .mute{ 5178 top: 0px; 5179 position: relative; 5180 width: 22px; 5181 height: 20px; 5182 cursor:pointer; 5183 /*padding-top: 2em;*/ 5184 /*transform: translate(0, -1em);*/ 5185} 5186 5187.player .nav .mute:before{ 5188 content: ''; 5189 background-image: url(/asset/38c4f7bb-af5d-4aba-812c-aeead3a6b0ee); 5190 background-size: contain; 5191 background-position: center; 5192 background-repeat: no-repeat; 5193 width: 22px; 5194 height: 20px; 5195 display: block; 5196 border: none; 5197} 5198 5199 5200.dark .player .nav .mute:before{ 5201 content: ''; 5202 filter: invert(1); 5203} 5204 5205.player .nav .mute:before{ 5206 content: ''; 5207 filter: invert(0); 5208} 5209 5210.pix #pin .player .nav .mute:before, 5211.codex #pin .player .nav .mute:before{ 5212 content: ''; 5213 filter: invert(1); 5214} 5215 5216.player .nav .mute.muted:before{ 5217 content: ''; 5218 background-image: url(/asset/4d268ea2-5a84-424f-bc46-4bf8d21cdb94); 5219} 5220 5221.player .nav .time{ 5222 display: inline-block; 5223 width: 7em; 5224 /*height: 1em;*/ 5225 position: relative; 5226 font-family: 'Lato'; 5227 font-weight: 300; 5228 font-size: 0.8em; 5229 padding-left: 0em; 5230 color: #000; 5231 text-align:right; 5232} 5233 5234.player .nav .seek{ 5235 display: inline-block; 5236 width: calc(100% - 11em); 5237 position: relative; 5238 height: 2em; 5239 cursor: pointer; 5240} 5241@media only screen and (min-width: 500px) { 5242 .player .nav .seek { 5243 width: calc(100% - 16em); 5244 } 5245 .player .nav .time{ 5246 5247 } 5248} 5249 5250.pix #pin .player .nav .time, 5251.codex #pin .player .nav .time{ 5252 color: #fff; 5253} 5254.player .nav .subtitle{ 5255 /*position: relative;*/ 5256} 5257.player .nav.yt .subtitle{ 5258 display:none !important; 5259} 5260 5261.player .nav .subtitle:before{ 5262 content: ''; 5263 background-image: url(/asset/2e685a5c-6f3b-411f-840b-f9b51a6bcff3); 5264 background-repeat: no-repeat; 5265 background-size: contain; 5266 width: 30px; 5267 height: 27px; 5268 display: block; 5269 position: relative; 5270 top: 3.5px; 5271} 5272@media not all and (min-width: 768px) and (min-resolution:.1dpi) { 5273 .player .nav .subtitle:before{ 5274 /*font-size:26.5px;*/ 5275 /*top: 4px;*/ 5276 } 5277 @supports (-webkit-appearance:none) { 5278 5279 .player .nav .volumeControls .volume .ui-slider .ui-slider-handle { 5280 5281 /*left: 2.5px;*/ 5282 5283 } 5284 } 5285} 5286.dark .player .nav .subtitle:before, 5287.pix #pin .player .nav .subtitle:before, 5288.codex #pin .player .nav .subtitle:before{ 5289 filter: invert(1); 5290} 5291.player .nav .subtitle:before{ 5292 filter: invert(0); 5293} 5294 5295 5296 5297.player .nav.subtitle .subtitle{ 5298 display: inline-block; 5299 cursor:pointer; 5300} 5301/*.player .nav .subtitle > i{*/ 5302/* background-image: url(/asset/03418cfb-e1b9-4621-8d69-7d7fc213e604);*/ 5303/* background-repeat: no-repeat;*/ 5304/* background-size: contain;*/ 5305/* width: 1em;*/ 5306/* height: 1em;*/ 5307/* display: block;*/ 5308/*}*/ 5309 5310 5311 5312.player .nav .subtitle ul{ 5313 font-family: "Lato", Helvetica, Arial; 5314 font-size: 0.7em; 5315 position: absolute; 5316 background: #333; 5317 padding: 0.5em !important; 5318 bottom: 4.3em; 5319 right: 0; 5320 width: 10em; 5321 margin: 0; 5322 text-transform: uppercase; 5323 display: none; 5324} 5325 5326.player .nav .subtitle li{ 5327 font-size: 0.9em; 5328 list-style-type: none !important; 5329 position: relative; 5330 margin: 0.25em 0 !important; 5331 padding: 0.1em 0.1em 0.1em 0.5em; 5332 color: #fff; 5333 cursor:pointer; 5334 font-weight:300; 5335} 5336 5337.player .nav .subtitle li.active, 5338.player .nav .subtitle li:hover{ 5339 background-color: #555; 5340} 5341.player .nav .subtitle li:before{ 5342 content: ""; 5343 display: inline-block; 5344 width: 1.4em; 5345 height: 1em; 5346 background-size: 100%; 5347 background-repeat: no-repeat; 5348 margin-right: 10px; 5349 position: relative; 5350 top: 0.3em; 5351 left: 0em; 5352} 5353 5354.player .nav .subtitle li[data-language=""]:before{ 5355 background-image: url(/asset/497c1e02-8b6d-462d-bd10-d087eab29860); 5356 border:1px solid #414141; 5357} 5358.player .nav .subtitle li[data-language="en"]:before, 5359.player .nav .subtitle li[data-language="en-x-autogen"]:before{ 5360 background-image: url(/asset/c38736f5-99cc-433c-90a6-e8f6ca7fc867); 5361} 5362 5363.player .nav .subtitle li[data-language="pt"]:before{ 5364 background-image: url(/asset/99efb939-b37e-4cd5-8f8b-c81eea6e5047); 5365} 5366.player .nav .subtitle li[data-language="zh-Hans"]:before{ 5367 background-image: url(/asset/db1c1e98-8bd3-4c62-b3f5-5121366ecbe1); 5368} 5369.player .nav .subtitle li[data-language="fr"]:before{ 5370 background-image: url(/asset/8c3f4dc6-cc84-4654-b938-73322136cef0); 5371} 5372.player .nav .subtitle li[data-language="es"]:before{ 5373 background-image: url(/asset/c60ae9c2-b503-4d44-955f-0451539b6d43); 5374} 5375.player .nav .subtitle li[data-language="de"]:before{ 5376 background-image: url(/asset/f8867338-920d-4d83-8b09-ac9b9445c71b); 5377} 5378.player .nav .subtitle li[data-language="pl"]:before{ 5379 background-image: url(/asset/2dae34cb-695f-4428-85de-a3d8e7e37beb); 5380} 5381.player .nav .subtitle li[data-language="tr"]:before{ 5382 background-image: url(/asset/bffa6510-f12a-4092-a2a6-302c993dd8bd); 5383} 5384.player .nav .subtitle li[data-language="hi"]:before{ 5385 background-image: url(/asset/9144a6be-2ed7-4f04-9069-bbaa111cf634); 5386} 5387.player .nav .subtitle li[data-language="ar"]:before{ 5388 background-image: url(/asset/abba8798-77dd-48a4-b325-452cc0564ebc); 5389} 5390.player .nav .subtitle li[data-language="vi"]:before{ 5391 background-image: url(/asset/95cd4680-742e-45ee-b26b-3ab82c95f674); 5392} 5393.player .nav .subtitle li[data-language="hu"]:before{ 5394 background-image: url(/asset/2de3343f-4b82-4f9c-9035-deaea5f0845e); 5395} 5396.player .nav .subtitle li[data-language="hu"]:before{ 5397 background-image: url(/asset/2de3343f-4b82-4f9c-9035-deaea5f0845e); 5398} 5399.player .nav .subtitle li[data-language="it"]:before{ 5400 background-image: url(/asset/c927fc09-264d-4e6c-8db6-97f0fdb02d2e); 5401} 5402.player .nav .subtitle li[data-language="ja"]:before{ 5403 background-image: url(/asset/f3eb0473-3251-4772-9788-1ef09a79d4b2); 5404} 5405.player .nav .subtitle li[data-language="ko"]:before{ 5406 background-image: url(/asset/d78cf51d-de46-43c1-bb87-b71ff2441d54); 5407} 5408 5409.player .nav .fullscreen{ 5410 position: relative; 5411 cursor:pointer; 5412} 5413/*#case-study-detail-block .cms-section .content .player .nav .fullscreen{*/ 5414/* bottom: 0.5em;*/ 5415/*}*/ 5416/*#playerTemplate .player .nav .fullscreen{*/ 5417/* bottom: 0.28em;*/ 5418/*}*/ 5419 5420#case-study-detail-block .cms-section .content .player .nav .subtitle, 5421#playerTemplate .player .nav .subtitle{ 5422 /*left: 0.4em;*/ 5423} 5424 5425.player .nav .fullscreen:before{ 5426 content: ''; 5427 background-image: url(/asset/90124563-30f4-4fac-b179-00a767549fc3); 5428 background-repeat: no-repeat; 5429 background-size: contain;
5430 width: 20px; 5431 height: 20px; 5432 display: block; 5433 position: relative; 5434} 5435.player .nav .fullscreen:hover{ 5436 animation: 1s ease-in fullscreenScale forwards; 5437} 5438 5439 5440@keyframes fullscreenScale { 5441 0%{ 5442 transform: scale(1); 5443 } 5444 30%{ 5445 transform: scale(1.1); 5446 } 5447 60%{ 5448 transform: scale(1.1) rotate(90deg); 5449 } 5450 100% { 5451 transform: scale(1) rotate(90deg); 5452 } 5453} 5454.dark .player .nav .fullscreen:before, 5455.pix #pin .player .nav .fullscreen:before, 5456.codex #pin .player .nav .fullscreen:before{ 5457 filter: invert(1); 5458} 5459.player .nav .fullscreen:before{ 5460 filter: invert(0); 5461} 5462 5463.player .close{ 5464 position: absolute; 5465 right: 0; 5466 font-size: 2.5em; 5467 width: 17.5%; 5468 cursor: pointer; 5469 z-index: 2; 5470} 5471 5472.player .close i{ 5473 position: absolute; 5474 left: 50%; 5475 top: 50%; 5476 transform: translate(-50%,-50%); 5477} 5478 5479.player .frame > .play{ 5480 position: absolute; 5481 width: 100%; 5482 height: 100%; 5483 /*display: none;*/ 5484 z-index: 1; 5485 cursor: pointer; 5486} 5487 5488.player .frame > .play.autoPlay{ 5489 content:""; 5490 width: 100%; 5491 height: 100%; 5492 background-image: url(/asset/31af64e5-d3df-4262-9a10-0433d8989a70); 5493 background-repeat: no-repeat; 5494 background-position: center; 5495 top:0; 5496 left:0; 5497 background-size: 12.3%;; 5498 position: absolute; 5499 display: block; 5500 opacity:1; 5501 cursor: pointer; 5502} 5503 5504.player .frame > .play.bigPlay{ 5505 width: 100%; 5506 height: 100%; 5507 top: 50%; 5508 left: 50%; 5509 transform: translate(-50%, -50%); 5510 /*display: block;*/ 5511 position: absolute; 5512} 5513 5514 5515.player .frame > .play.bigPlay .arrow{ 5516 content:""; 5517 width: 100%; 5518 height: 100%; 5519 background-image: url(/asset/425265ef-5334-4a57-9f7c-6a9f7685a784); 5520 background-repeat: no-repeat; 5521 background-position: center; 5522 top:0; 5523 left:0; 5524 background-size: 12.3%;; 5525 position: absolute; 5526 display: block; 5527 opacity:1; 5528 cursor: pointer; 5529 /*filter: invert(1);*/ 5530} 5531 5532.player .frame > .play.bigPlay .pause{ 5533 content:""; 5534 width: 100%; 5535 height: 100%; 5536 background-image: url(/asset/9a32547c-c067-4167-a7b3-4d2482710b5a); 5537 background-repeat: no-repeat; 5538 background-position: center; 5539 top:0%; 5540 left:0; 5541 background-size: 2.6%; 5542 position: absolute; 5543 display: none; 5544 opacity:1; 5545 /*animation: 0.5s ease-in slideRight forwards;*/ 5546 cursor: pointer; 5547} 5548 5549@keyframes slideRight { 5550 from{ 5551 opacity:0; 5552 left:-10px; 5553 } 5554 to{ 5555 opacity:1; 5556 left:0; 5557 } 5558} 5559.player .frame > .play .loader, 5560.player .frame > .play .circular-loader{ 5561 position: relative; 5562 width: 100%; 5563 height: 100%; 5564} 5565.player .frame > .play.bigPlay .loader{ 5566 width: 100%; 5567 height: 100%; 5568 z-index: 20; 5569 /*transition: all 0.5s ease;*/ 5570 top: 50%; 5571 left: 50%; 5572 transform: translate(-50%, -50%); 5573 position: relative; 5574} 5575.player .frame > .play.bigPlay .circular-loader{ 5576 position: absolute; 5577 z-index: 2; 5578 width: 24%; 5579 height: 24%; 5580 top: 50%; 5581 left: 50%; 5582 transform: translate(-50%, -50%) rotate(270deg); 5583 position: relative; 5584} 5585.player.show .play.bigPlay{ 5586 animation: 0.5s 0.5s ease-in fadeOut forwards; 5587} 5588 5589.player .frame > .play.bigPlay .loader-path { 5590 fill: none; 5591 stroke: #fff; 5592 /*stroke-width: 1.5px;*/ 5593 /*stroke-dasharray: 119.5, 150;*/ 5594 /*-webkit-animation: animate-stroke 0.5s ease-in-out;*/ 5595 /*animation: animate-stroke 0.5s ease-in-out;*/ 5596 /*animation-iteration-count: 1;*/ 5597 stroke-width: 0.6px; 5598 stroke-dasharray: 138.5, 200; 5599 -webkit-animation: animate-stroke .5s ease-in-out; 5600 animation: animate-stroke .5s ease-in-out; 5601 animation-iteration-count: 1; 5602} 5603 5604@keyframes rotate { 5605 100% { 5606 transform: rotate(270deg); 5607 } 5608} 5609 5610@keyframes animate-stroke { 5611 0% { 5612 stroke-dasharray: 1, 200; 5613 } 5614 5615 100% { 5616 stroke-dasharray: 120, 150; 5617 5618 } 5619} 5620@keyframes fadeIn{ 5621 0% { 5622 opacity:0; 5623 display:block; 5624 } 5625 100%{ 5626 opacity:100; 5627 } 5628} 5629@keyframes fadeOut{ 5630 0% { 5631 opacity:100; 5632 } 5633 100%{ 5634 opacity:0; 5635 5636 } 5637} 5638 5639.player .frame .poster{ 5640 position: absolute; 5641 width: 100%; 5642 height: 100%; 5643 display: none; 5644 background-size: cover; 5645} 5646 5647.player .label{ 5648 font-family: 'Lato'; 5649 font-weight: 300; 5650 font-size: 0.8em; 5651 position: absolute; 5652 width: 100%; 5653 text-align: center; 5654 bottom: 0; 5655} 5656 5657.player .label .inner{ 5658 position: absolute; 5659 left: 50%; 5660 top: 50%; 5661 transform: translate(-50%,-50%); 5662 width: 100%; 5663} 5664 5665.player .name{ 5666} 5667 5668.player .sub{ 5669 font-weight: 300; 5670 /*padding: 1em 0;*/ 5671 letter-spacing: 0em; 5672} 5673.player .description{ 5674 letter-spacing: 0.02em; 5675 font-weight: 300; 5676 padding: 0 1em; 5677} 5678 5679 5680.player .nav.yt{ 5681 width: calc(100% - 20px); 5682} 5683.player .nav.yt .seek { 5684 width: calc(100% - 9em); 5685} 5686 5687.player .nav .seek .bg{ 5688 height: 2px; 5689 background: #ddd; 5690 width: 100%; 5691 position: absolute; 5692 top: 1em; 5693} 5694 5695.player .nav .seek .loaded{ 5696 height: 2px; 5697 background: #bbb; 5698 position: absolute; 5699 width: 0; 5700 top: 1em; 5701} 5702 5703.player .nav .seek .position{ 5704 height: 2px; 5705 background: #000; 5706 position: absolute; 5707 width: 0; 5708 top: 1em; 5709} 5710 5711.player .nav .seek .handle{ 5712 5713} 5714 5715.player .nav .seek .handle:after{ 5716 font-family: VideoJS; 5717 font-weight: 400; 5718 font-style: normal; 5719 font-size: 0.6em; 5720 display: inline-block; 5721 content: "\f111"; 5722 position: absolute; 5723 top: -4px; 5724 right: -4px; 5725} 5726 5727.player .shuffle{ 5728 position: absolute; 5729 top: 45%; 5730 font-size: 2.5em; 5731 cursor: pointer; 5732 width: 17.5%; 5733 text-align: center; 5734 transform: translateY(-50%); 5735 display: block !important; 5736 height: 1em; 5737} 5738 5739.player .prev{ 5740 left: 0; 5741} 5742 5743 5744 5745.player .next{ 5746 right: 0; 5747} 5748 5749.player.single .next, 5750.player.single .prev{ 5751 display:none !important; 5752} 5753 5754.player .thumbs{ 5755 position: absolute; 5756 bottom: 3em; 5757 aspect-ratio: 16/9; 5758 height: 5em; 5759 padding: 10px 10px 2em; 5760 background: #1a1a1a; 5761 border-radius: 4px; 5762 display: none; 5763} 5764.thumb-frame{ 5765 overflow:hidden; 5766 aspect-ratio: 16/9; 5767 display: flex; 5768 justify-content: center;
5769 align-content: center; 5770} 5771.thumb-frame video{ 5772 width: 100%; 5773 height: auto; 5774 margin: 0 auto; 5775 position: relative; 5776 /*left: 50%;*/ 5777 /*top: 50%;*/ 5778 /* -webkit-transform: translate(-50%, 0%);*/ 5779 /*-ms-transform: translate(-50%, -50%);*/ 5780 /*-moz-transform: translate(-50%, -50%);*/ 5781 /*-o-transform: translate(-50%, -50%);*/ 5782 /*transform: translate(-50%, -50%);*/ 5783 5784} 5785 5786 5787/* Iphone Portrait and Landscape */ 5788@media only screen 5789 and (min-device-width: 320px) 5790 and (max-device-width: 667px) 5791 and (-webkit-min-device-pixel-ratio: 2) { 5792 .player .thumbs{ 5793 display: none !important; 5794 } 5795} 5796@media only screen 5797 and (min-device-width: 414px) 5798 and (max-device-width: 736px) 5799 and (-webkit-min-device-pixel-ratio: 3) { 5800 .player .thumbs{ 5801 display: none !important; 5802 } 5803} 5804/* Tablet Portrait and Landscape */ 5805@media only screen 5806 and (min-device-width: 768px) 5807 and (max-device-width: 1024px) 5808 and (-webkit-min-device-pixel-ratio: 1) { 5809 .player .thumbs{ 5810 display: none !important; 5811 } 5812} 5813@media only screen 5814 and (min-device-width: 768px) 5815 and (max-device-width: 1024px) 5816 and (-webkit-min-device-pixel-ratio: 2) { 5817 .player .thumbs{ 5818 display: none !important; 5819 } 5820} 5821 5822.player .thumbs video{ 5823 align-self: center; 5824} 5825 5826.player .thumbs .label{ 5827 position: absolute; 5828 width: initial; 5829 transform: translateX(-50%); 5830 left: 50%; 5831 bottom: 0.6em; 5832} 5833 5834@media not all and (min-width: 768px) and (min-resolution:.1dpi) { 5835 .player .thumbs{ 5836 padding: 10px 10px 2.5em; 5837 width: 10em; 5838 } 5839 .thumb-frame{ 5840 position: relative; 5841 padding-top: 56.25%; 5842 aspect-ratio: auto; 5843 } 5844 .thumb-frame video{ 5845 position: absolute; 5846 top: -1em; 5847 /*width: 100%;*/ 5848 /*height: 100%;*/ 5849 object-fit: cover; 5850 -webkit-transform: translate(0%, 0%); 5851 } 5852 5853 .player .thumbs .label{ 5854 bottom: 0.6em; 5855 } 5856} 5857 5858 5859/* cms-asset inline video */ 5860.cms-asset .player{ 5861 display: block; 5862 position: relative; 5863 padding-bottom: 56.2%; 5864 margin-bottom: 5em; 5865 z-index: initial; 5866} 5867 5868.cms-asset .player .close{ 5869 display: none; 5870} 5871 5872.cms-asset .player .frame{ 5873 transform: none; 5874 left: 0; 5875 display: inline-block; 5876 margin-bottom: 2em; 5877 top: 0; 5878 padding-bottom: 0; 5879 height: 100%; 5880 width: 100%; 5881} 5882 5883.cms-asset .player .video { 5884 margin-top: 0; 5885} 5886 5887 5888 5889/* dark mode */ 5890 5891.dark .player .nav .control, .dark .player .close{ 5892 color: #fff; 5893} 5894 5895.dark .player .nav .seek .bg { 5896 background: #333; 5897} 5898 5899.dark .player .nav .seek .loaded { 5900 background: #555; 5901} 5902 5903.dark .player .nav .seek .position{ 5904 background: #fff; 5905} 5906 5907.dark .player .nav .time{ 5908 color: #fff; 5909} 5910 5911.dark .player .nav .subtitle > i{ 5912 filter: invert(1); 5913} 5914 5915 5916 5917/* pure-font-xs */ 5918@media screen and (max-width:35.438em) { 5919 5920 .player .close { 5921 top: 0.7em; 5922 font-size: 1.5em; 5923 } 5924 5925 .player .shuffle{ 5926 font-size: 1.5em; 5927 } 5928 5929 .player .description { 5930 font-size: 0.8em; 5931 } 5932} 5933/* pure-font-sm */ 5934@media screen and (min-width:35.5em) and (max-width:47.938em) { 5935 5936} 5937/* pure-font-md */ 5938@media screen and (min-width:48em) and (max-width:63.938em) { 5939 5940} 5941/* pure-font-lg */ 5942@media screen and (min-width:64em) and (max-width:79.938em) { 5943 5944} 5945/* pure-font-xl */ 5946@media screen and (min-width:80em) { 5947 5948} 5949 5950 5951@media screen and (max-height:35.438em) { 5952 .player .frame { 5953 top: 1em; 5954 transform: translate(-50%,0%); 5955 width: 50%; 5956 padding-bottom: 28%; 5957 } 5958 5959 .nav { 5960 bottom: -3em; 5961 } 5962 5963 .player .close { 5964 top: 0.7em; 5965 font-size: 1.5em; 5966 } 5967 5968 .player .shuffle{ 5969 font-size: 1.5em; 5970 } 5971 5972 .player .label{ 5973 bottom: 1em; 5974 } 5975 5976 .player .name { 5977 margin-bottom: 0.5em; 5978 } 5979 5980 .player .description { 5981 font-size: 0.8em; 5982 } 5983 5984} 5985#case-study-detail-block .cms-section .content .cms-asset .nav{ 5986 width: calc(100% - 0px); 5987} 5988 5989#case-study-detail-block .cms-section .content .cms-asset.video{ 5990 margin-bottom:40px; 5991 width:100%; 5992} 5993 5994#case-study-detail-block .cms-section .content .player .nav .time { 5995 /*width: 4.5em;*/ 5996} 5997 5998#case-study-detail-block .cms-section .content .player .thumbs{ 5999 height: 8.5em; 6000 width: 12em; 6001 padding: 10px 10px 2em; 6002} 6003 6004#case-study-detail-block .cms-section .content .player .thumbs .label{ 6005 bottom:0; 6006} 6007 6008#case-study-detail-block .cms-section .content .player .label{ 6009 /*display:none;*/ 6010} 6011.titleframe .player{ 6012 position: relative; 6013 width: 100%; 6014 height: 100%; 6015 top: 0; 6016 left: 0; 6017 background: #eee; 6018 z-index: 1; 6019 color: #fff; 6020} 6021.dark .titleframe .player{ 6022 background: #111; 6023} 6024.titleframe .player .frame{ 6025 left: 0%; 6026 position: relative; 6027 top: 0%; 6028 transform: translate(0%,0%); 6029 width: 100%; 6030 background: #000; 6031 padding-bottom: 0%; 6032 padding-bottom: 56.25%; 6033 /*aspect-ratio: 16 / 9;*/ 6034} 6035.titleframe .player .nav{ 6036 position: absolute; 6037 top: calc(100% + 1em); 6038 bottom: auto; 6039 width: calc(100% - 20px); 6040 z-index: 3; 6041 display: flex;
6042 align-items: center; 6043 justify-content: space-between; 6044 padding: 0 10px; 6045} 6046.titleframe .player .nav .time{ 6047 top: 0em; 6048 padding-left:1em; 6049} 6050.titleframe .player .nav .seek{ 6051 width: calc(100% - 150px - 4em); 6052} 6053.titleframe .player .nav .volumeControls .volume .volume-bck{ 6054 margin-bottom: calc(0.8em - 1px); 6055} 6056.titleframe .player .nav .subtitle ul{ 6057 font-size: 13px; 6058} 6059.titleframe .player .close{ 6060 display:none !important; 6061} 6062 6063 6064/*Onbaording and Imageframe video*/ 6065.imageframe .player .frame { 6066 position: relative; 6067 top: 45%; 6068 width: 100%; 6069 padding-bottom: 61%; 6070 left: 0%; 6071 transform:translate(0,0); 6072} 6073.imageframe .player .label{ 6074 display:none; 6075} 6076 6077.imageframe .player .close{ 6078 display: none; 6079} 6080 6081.imageframe .player{ 6082 background: none; 6083} 6084 6085.imageframe .player .nav .seek { 6086 width: calc(100% - 90px - 4em); 6087} 6088 6089.imageframe .player .nav .time{ 6090 top: 0em; 6091 padding-left:0.2em; 6092} 6093 6094.imageframe .player .nav .subtitle{ 6095 display: none; 6096} 6097.imageframe .player .nav{ 6098 width: calc(100% - 20px); 6099} 6100.imageframe .player .nav .volumeControls .volume .volume-bck{ 6101 margin-bottom: calc(1.1em - 1px); 6102}</style></div> 6103 <div id="newsletter"><div id="newsletter-dialog" style="display:none;"></div> 6104<div id="newsletter-popup"> 6105 <div class="newsletter"> 6106 <div class="inner"> 6107 <div class="close"></div> 6108 <div class="frame"> 6109 <div class="logo"></div> 6110 <div class="title"></div> 6111 <div class="caption"></div> 6112 <form class="form" method="post"> 6113 <input class="name" type="text" name="firstname" placeholder="First Name" required=""> 6114 <input class="name" type="text" name="lastname" placeholder="Last Name" required=""> 6115 <input class="email" type="email" name="email" placeholder="Email" required=""> 6116 <input class="password" type="password" name="password" placeholder="Password" disabled=""> 6117 <label class="checkbox"><span class="label"></span> 6118 <input class="privacy" type="checkbox" autocomplete="off"> 6119 <i></i> 6120 </label> 6121 <button class="subscribe"><span></span></button> 6122 <button class="reset" type="button"><span></span></button> 6123 </form> 6124 </div> 6125 <div id="newsletterCaptcha"></div> 6126 </div> 6127 </div> 6128 <div class="newsletter-button-frame"> 6129 <div class="newsletter-button"><div></div></div> 6130 </div> 6131</div> 6132<div style="display: none;"> 6133 <div class="config"> 6134 <div class="title">JOIN THE CODEX COMMUNITY</div> 6135 <div class="subTitle">Latest news and events directly into <span class="no-wrap">your inbox.</span></div> 6136 <div class="privacy">I agree to the CODEX <b><a href="https://codex.online/us/legal/privacy-policy/">Privacy Policy</a></b></div> 6137 <div class="success">Registration Successful.<br><br>Please check your inbox.</div> 6138 <div class="confirmed">Your Email is Confirmed.<br><br>Thank you for registering<br><br><button>CLOSE</button></div> 6139 <div class="alreadyregistered">It appears you are already registered.<br><br>Please enter you password to update your marketing preferences.<br><br><a href="https://x2x.media/resetpassword">Forgot Password</a></div> 6140 <div class="passwordincorrect">Incorect Password<br><br>Please enter you password to update your marketing preferences.</div> 6141 <div class="passwordreset">Password reset sent.<br><br>Please check your inbox</div> 6142 <div class="agree">Please agree to our privacy policy.</div> 6143 <div class="subscribe">SUBSCRIBE</div> 6144 <div class="forgotpassword">FORGOT PASSWORD</div> 6145 <div class="marketingGroups">1</div> 6146 </div> 6147</div>
vendor: 67 bytes, lines 6147-6148
6147 6148<script src="https://www.google.com/recaptcha/api.js"></script>
6149test
6149<script type="text/javascript">var newsletter=(()=>{ 6150 var init=()=>{ 6151 $(function(){ 6152 initNewsletterPopup(); 6153 }); 6154 }, 6155 toggleNewsletterPopup=()=>{ 6156 var element = $("#newsletter-popup .newsletter"); 6157 if(element.hasClass("active")){ 6158 hideNewsletterPopup(); 6159 } 6160 else 6161 { 6162 showNewsletterPopup(); 6163 } 6164 6165 }, 6166 getSetting=(c)=>{ 6167 return $(".config ." + c).html(); 6168 }, 6169 showNewsletterPopup=()=>{ 6170 element = $("#newsletter-popup .newsletter"); 6171 gsap.set(element, {display: "block"}); 6172 gsap.to(element,{ opacity: 1, duration : 0.5 }); 6173 element.addClass("active"); 6174 $("#newsletter-popup .reset", element).click(resetPassword); 6175 }, 6176 hideNewsletterPopup=()=>{ 6177 element = $("#newsletter-popup .newsletter"); 6178 gsap.to(element, {display: "none", delay: 0.5, duration:0 }); 6179 gsap.to(element,{ opacity: 0, duration : 0.5 }); 6180 element.removeClass("active"); 6181 }, 6182 initNewsletterPopup=()=>{ 6183 $("#newsletter-popup .newsletter-button, #footer-newsletter-popup .button").click(function(){ 6184 toggleNewsletterPopup(); 6185 }); 6186 6187 $("#newsletter-popup .newsletter .close, #newsletter-popup .newsletter").click(function(){ 6188 hideNewsletterPopup(); 6189 }); 6190 6191 //prevent click event bubbling when form is clicked. 6192 $("#newsletter-popup .newsletter .inner").click(e=>{ 6193 e.stopPropagation(); 6194 }); 6195 6196 if(getCookie("newsletter") == "true"){ 6197 gsap.set($("#newsletter-popup .newsletter-button, #footer-newsletter-popup .button "), {opacity: 1}); 6198 } 6199 6200 form=$("#newsletter-popup .newsletter form")[0]; 6201 form.onsubmit=newsletterSubmitHandler; 6202 6203 $("#newsletter-popup .newsletter .title").html(getSetting("title")); 6204 $("#newsletter-popup .newsletter .caption").html(getSetting("subTitle")); 6205 $("#newsletter-popup .newsletter .checkbox .label").html(getSetting("privacy")); 6206 $("#newsletter-popup .newsletter .subscribe span").html(getSetting("subscribe")); 6207 $("#newsletter-popup .newsletter .reset span").html(getSetting("forgotpassword")); 6208 6209 if(window.location.hash=="#registered"){ 6210 newsletterPopupRegistrationConfirmed(); 6211 } 6212 }, 6213 form, 6214 newsletterSubmitHandler=()=>{ 6215 if($("#newsletter-popup .newsletter .privacy").is(":checked")){ 6216 newsletterPopupCaptcha(); 6217 //newsletterPopupPostRegistration("test"); 6218 } 6219 else{ 6220 alert(getSetting("agree")); 6221 } 6222 6223 return false; 6224 }, 6225 recaptcha, 6226 newsletterPopupCaptcha=()=>{ 6227 //$(dialogbox).html("<div id=\"newsletterCaptcha\"></div>"); 6228 //$(dialogbox).dialog("option", {width: 350, height : 100, autoResize : false}).dialog("open"); 6229 $("#newsletterCaptcha").show(); 6230 6231 if(recaptcha != undefined){ 6232 grecaptcha.reset(); 6233 } 6234 6235 try{ 6236 recaptcha = grecaptcha.render("newsletterCaptcha", { 6237 sitekey : "6LdDNAktAAAAAPjRhiTgKxSzWTNMVaqcrZxI25gs", 6238 theme : "dark", 6239 callback : newsletterPopupPostRegistration 6240 }); 6241 } 6242 catch(e) 6243 { 6244 6245 } 6246 }, 6247 newsletterPopupPostRegistration=(response)=>{ 6248 closeDialogbox(); 6249 var data = new FormData(form); 6250 data.append("g-recaptcha-response",response); 6251 //data.append("referer", "https://x2x.media/newsletter-sign-up-thankyou"); 6252 data.append("marketinggroups",getSetting("marketingGroups")); 6253 data.append("json","true"); 6254 var request = new XMLHttpRequest(); 6255 request.open("POST", "/?action=register"); 6256 request.onload = function(e){ 6257 try{ 6258 response = JSON.parse(e.currentTarget.response); 6259 $("#newsletterCaptcha").hide(); 6260 switch(response.RegistrationStatus){ 6261 case 0: 6262 newsletterPopupRegistrationSuccessfull(); 6263 break; 6264 case 1:
6265 newsletterPopupRegistrationExisting(); 6266 break; 6267 case 2: 6268 newsletterPopupRegistrationError(); 6269 break; 6270 case 3: 6271 newsletterPopupBadLogin(); 6272 break; 6273 6274 } 6275 } 6276 catch(error){ 6277 registrationError(); 6278 } 6279 } 6280 request.onerror = function(e){ 6281 registrationError(); 6282 } 6283 6284 request.send(data); 6285 }, 6286 newsletterPopupRegistrationSuccessfull=()=>{ 6287 $(".newsletter .caption").html(getSetting("success")); 6288 $(".newsletter form").remove(); 6289 setTimeout(hideNewsletter,10000); 6290 setRegistered(); 6291 }, 6292 newsletterPopupRegistrationConfirmed=()=>{ 6293 $("#newsletter-popup .newsletter .title").html(getSetting("title")); 6294 $(".newsletter .caption").html(getSetting("confirmed")); 6295 $("#newsletter-popup .newsletter button").click(function(){ 6296 hideNewsletterPopup(); 6297 }); 6298 $(".newsletter form").remove(); 6299 window.location.hash=""; 6300 showNewsletterPopup(); 6301 }, 6302 newsletterPopupRegistrationExisting=()=>{ 6303 $(".newsletter .caption").html(getSetting("alreadyregistered")); 6304 $(".newsletter form").addClass("password"); 6305 $(".newsletter form > .name").hide(); 6306 $(".newsletter form > .email").hide(); 6307 $(".newsletter form > input.password").removeAttr("disabled").focus(); 6308 //$(".newsletter form").remove(); 6309 setRegistered(); 6310 }, 6311 newsletterPopupBadLogin=()=>{ 6312 $(".newsletter .caption").html(getSetting("passwordincorrect")); 6313 }, 6314 resetPassword=()=>{ 6315 $.post("/?action=resetpasswordrequest", {email : $("#newsletter-popup .email").val(), json: "true" }).done(data=>{ 6316 if(data=="ok"){ 6317 $(".newsletter .caption").html(getSetting("passwordreset")); 6318 $(".newsletter form").hide(); 6319 } 6320 }); 6321 }, 6322 setRegistered = ()=>{ 6323 setCookie("registration","1",7); 6324 $("body").addClass("marketinggroup1"); 6325 }, 6326 isRegistered = ()=>{ 6327 return $("body").hasClass("marketinggroup1") && !getCookie("registered") == "1"; 6328 }, 6329 config=[ 6330 { 6331 domain : "codex.online", 6332 title : "JOIN THE CODEX COMMUNITY", 6333 subTitle : "Latest news and events directly into <span class=\"no-wrap\">your inbox.</span>", 6334 marketingGroups : "1" 6335 }, 6336 { 6337 domain : "pix.online", 6338 title : "JOIN THE PIX COMMUNITY", 6339 subTitle : "Latest news and events directly into <span class=\"no-wrap\">your inbox.</span>", 6340 marketingGroups : "5" 6341 }, 6342 { 6343 domain : "x2x.media", 6344 title : "JOIN THE X2X COMMUNITY", 6345 subTitle : "Latest news and events directly into <span class=\"no-wrap\">your inbox.</span>", 6346 marketingGroups : "1" 6347 } 6348 ] 6349 ; 6350 init(); 6351 return { 6352 showRegistration : showNewsletterPopup 6353 }; 6354 6355})();</script>
6355<style>#newsletter{ 6356 position: fixed; 6357 z-index: 1000; 6358} 6359 6360#newsletter-popup{ 6361 position: fixed; 6362 width: 100%; 6363 bottom: 0; 6364 z-index: 1; 6365} 6366 6367#newsletter-popup .newsletter{ 6368 position: fixed; 6369 width: 100%; 6370 height: 100%; 6371 top: 0; 6372 left: 0; 6373 font-size: 1.7em; 6374 display: none; 6375 opacity: 0; 6376 background: #000a; 6377} 6378 6379#newsletter-popup .newsletter .inner { 6380 background: #fff; 6381 padding: 3em; 6382 position: fixed; 6383 max-width: 21em; 6384 height: 23em; 6385 bottom: -17em; 6386 right: 0; 6387 z-index: 2; 6388 top: 50%; 6389 left: 50%; 6390 transform: translate(-50%, -50%); 6391 width: calc(100% - 4em); 6392 font-size: 16px; 6393 font-family: Codec; 6394 font-weight: 300; 6395 letter-spacing: -0.03em; 6396} 6397 6398#newsletter-popup .frame{ 6399 position: absolute; 6400 width: calc(100% - 4em); 6401 left: 0; 6402 top: 50%; 6403 transform: translateY(-50%); 6404 padding: 2em; 6405} 6406 6407#newsletter-popup .newsletter .bg{ 6408 6409} 6410 6411#newsletter-popup .newsletter .logo{ 6412 background-image: url(/?action=asset&id=BB25910A-BFDB-4BBC-8B9F-D02D14DD0B8C); 6413 width: 100%; 6414 height: 3em; 6415 background-size: 16em; 6416 background-position: top center; 6417 background-repeat: no-repeat; 6418 display: none; 6419} 6420 6421#newsletter-popup .newsletter .close{ 6422 position: absolute; 6423 right: 2em; 6424 background-image: url(/?action=asset&id=717892B3-5BA8-4525-AFC0-C2F9061E63EA); 6425 width: 1.3em; 6426 height: 1.3em; 6427 background-size: cover; 6428 top: 1.3em; 6429 cursor: pointer; 6430 z-index: 1; 6431 display: block; 6432} 6433 6434#newsletter-popup .newsletter .title{ 6435 color: #000; 6436 margin: 0; 6437 font-size: 2.1em; 6438 font-weight: 600; 6439 text-align: center; 6440 line-height: 1em; 6441 letter-spacing: -0.05em; 6442} 6443 6444#newsletter-popup .newsletter .caption{ 6445 color: #000; 6446 text-align: center; 6447 font-family: "Codec"; 6448 padding: 0.4em 0 0.9em; 6449 margin: 0.6em auto 0; 6450 line-height: 1em; 6451} 6452 6453#newsletter-popup .newsletter .caption a { 6454 color: #000; 6455} 6456 6457#newsletter-popup .newsletter button{ 6458 background: #000; 6459 color: #fff; 6460 border: none; 6461 padding: 0.9em 1em; 6462 margin: 0 auto; 6463 width: 100%; 6464 display: block; 6465} 6466 6467#newsletter-popup .newsletter button span{ 6468 font-family: 'Codec'; 6469 font-size: 0.8em; 6470 letter-spacing: 0.3em; 6471} 6472 6473#newsletter-popup .newsletter button.reset{ 6474 font-size: 0.6em; 6475 width: 50%; 6476 margin-top: 2em; 6477 display: none; 6478} 6479 6480#newsletter-popup .newsletter button.reset span{ 6481 6482} 6483 6484#newsletter-popup .newsletter .form{ 6485 margin-top: 1.4em; 6486} 6487 6488#newsletter-popup .newsletter input{ 6489 margin-bottom: 0.8em; 6490 border: 1px solid #888; 6491 font-family: 'Codec'; 6492 padding: 0.8em 0.2em 0.8em 1em; 6493 width: calc(100% - 1.4em); 6494 font-weight: 300; 6495 outline: none; 6496} 6497 6498#newsletter-popup .newsletter form > .password{ 6499 display: none; 6500} 6501 6502#newsletter-popup .newsletter form.password > .password{ 6503 display: block; 6504} 6505 6506#newsletter-popup .newsletter form.password > .name{ 6507 display: none; 6508} 6509 6510#newsletter-popup .newsletter-button-frame{ 6511 position: relative; 6512 width: 100%; 6513 margin: 0 auto; 6514} 6515 6516#newsletter-popup .newsletter-button > div{ 6517 background-image: url(/?action=asset&id=912be6ac-d792-4f88-9ae4-7bfea4854311); 6518 background-repeat: no-repeat; 6519 background-size: 3em; 6520 height: 3em; 6521 opacity: 0.6; 6522 transition: opacity 0.5s; 6523} 6524 6525#newsletter-popup .newsletter-button > div:hover{ 6526 opacity: 1; 6527} 6528 6529#newsletter-popup .newsletter-button{ 6530 position: absolute; 6531 bottom: 1em; 6532 right: 1em; 6533 z-index: 1; 6534 color: #000; 6535 width: 4em; 6536 height: 4em; 6537 cursor: pointer; 6538 display: none !important; 6539} 6540 6541.marketinggroup1 #newsletter-popup .newsletter-button{ 6542 display:none; 6543} 6544 6545#newsletterCaptcha{ 6546 position: fixed; 6547 top: 50%; 6548 left: 50%; 6549 transform: translate(-50%, -50%); 6550 display:none; 6551 z-index: 2; 6552} 6553 6554 6555#newsletter-popup .checkbox { 6556 display: block; 6557 position: relative; 6558 padding: 0.2em 0 0 2.5em; 6559 margin-bottom: 1.2em; 6560 cursor: pointer; 6561 -webkit-user-select: none; 6562 -moz-user-select: none;
6563 -ms-user-select: none; 6564 user-select: none; 6565 color: #000; 6566 font-size: 0.9em; 6567 text-align: left; 6568 min-height: 28px; 6569 display: flex; 6570 display: -moz-box; 6571 display: -webkit-flex; 6572 display: -ms-flexbox; 6573 align-items: center; 6574 -ms-align-items: center; 6575 -webkit-align-items: center; 6576} 6577 6578 6579#newsletter-popup .checkbox input { 6580 position: absolute; 6581 opacity: 0; 6582 cursor: pointer; 6583 height: 0; 6584 width: 0; 6585} 6586 6587#newsletter-popup .checkbox i { 6588 position: absolute; 6589 top: 0.4em; 6590 left: 0; 6591 height: 1.5em; 6592 width: 1.5em; 6593 background-color: #eee; 6594 border: 1px solid #555; 6595} 6596 6597#newsletter-popup .checkbox:hover input ~ .checkmark { 6598 background-color: #ccc; 6599} 6600 6601#newsletter-popup .checkbox input:checked ~ .checkmark { 6602 background-color: #2196F3; 6603} 6604 6605#newsletter-popup .checkbox i:after { 6606 content: ""; 6607 position: absolute; 6608 display: none; 6609} 6610 6611#newsletter-popup .checkbox input:checked ~ i:after { 6612 display: block; 6613} 6614 6615#newsletter-popup .checkbox i:after { 6616 left: 0.5em; 6617 top: 0.15em; 6618 width: 0.3em; 6619 height: 0.8em; 6620 border: solid #000; 6621 border-width: 0 3px 3px 0; 6622 -webkit-transform: rotate(45deg); 6623 -ms-transform: rotate(45deg); 6624 transform: rotate(45deg); 6625} 6626 6627#newsletter-popup .checkbox a{ 6628 color: #000; 6629 text-decoration: underline; 6630} 6631 6632#newsletter .no-wrap{ 6633 display: inline-block; 6634} 6635 6636/* pure-font-xs */ 6637@media screen and (max-width:35.438em) { 6638 #newsletter-popup .newsletter-button{ 6639 bottom: 0; 6640 right: 0; 6641 } 6642 6643 #newsletter-popup .newsletter-button > div { 6644 background-size: 3em; 6645 height: 3em; 6646 } 6647} 6648 6649/* pure-font-sm */ 6650@media screen and (min-width:35.5em) and (max-width:47.938em) { 6651 #newsletter-popup .newsletter-button{ 6652 bottom: 0; 6653 right: 0; 6654 } 6655 6656 #newsletter-popup .newsletter-button > div { 6657 background-size: 3em; 6658 height: 3em; 6659 } 6660} 6661/* pure-font-md */ 6662@media screen and (min-width:48em) and (max-width:63.938em) { 6663 6664} 6665/* pure-font-lg */ 6666@media screen and (min-width:64em) and (max-width:79.938em) { 6667 6668} 6669/* pure-font-xl */ 6670@media screen and (min-width:80em) { 6671 6672} 6673 6674 6675</style></div> 6676 </div> 6677 <style> 6678 body{ 6679 opacity:1; 6680 } 6681 </style> 6682</body> 6683</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.