1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>CODEX CFexpress 4.0 Type A</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="format-detection" content="telephone=no"> 12<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"> 13
14<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 14
14
15<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 15
15
16<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 16
16
17<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js" integrity="sha512-MSOo1aY+3pXCOCdGAYoBZ6YGI0aragoQsg1mKKBHXCYPIWxamwOE7Drh+N5CPgGI5SA9IEKJiPjdfqWFWmZtRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
17 18 19<link rel="preconnect" href="https://player.vimeo.com"> 20<link rel="preconnect" href="https://f.vimeocdn.com"> 21<link rel="preconnect" href="https://vod-adaptive-ak.vimeocdn.com"> 22<link rel="preconnect" href="https://www.gstatic.com"> 23 24<!--
24<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>
24--> 25<!--
25<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>
25-->
26<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 26
26
27<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js" integrity="sha512-P2IDYZfqSwjcSjX0BKeNhwRUH8zRPGlgcWl5n6gBLzdi4Y5/0O4zaXrtO4K9TZK6Hn1BenYpKowuCavNandERg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 27
27
28<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollToPlugin.min.js" integrity="sha512-kz526itdNcpyMs18TLPOhsnIeOIO1JywWKbbF77zR+ZKpZ4gwubXhwaURHpt5Se9AAqSK2j8ID0LnfXsB2Jkjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
28 29
30<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/Draggable.min.js" integrity="sha512-dgqdovLK5r/NMiV5YfWA0xC94DKGrm+6q1OZpuWHm+uBGLTck6wu58WAX9lmy8wec6cVnsgxbPJ60DtmNFnfgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 30
30
31<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/InertiaPlugin.min.js" integrity="sha512-PEhxb+AivyFXL3zZnE/TwS4sgWRDZRF7aTGVGkiF7ej++sMKTtN+ZfrEo8lPxrfMIOws/1RkVc1Apua29ktRwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
vendor: 2 bytes, line 31
31
32<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/SplitText.min.js" integrity="sha512-wOeEC+9qERAzhliwBFPDb6t8TiFFxdxG8vhK/Ygs7TuC44bpg8pg/X2/U/u+0X4fK05wb9id1EIipnF02+CFQw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
32 33
34<script type="text/javascript"> 35 gsap.registerPlugin(SplitText, Draggable, InertiaPlugin); 36</script>
36 37 38<!--Bootstrap-->
39<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.min.js" integrity="sha512-nKXmKvJyiGQy343jatQlzDprflyB5c+tKCzGP3Uq67v+lmzfnZUi/ZT+fc6ITZfSC5HhaBKUIvr/nTLCV+7F+Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
39 40<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap-grid.min.css" integrity="sha512-dOjUSaLkr6G2pwQ7ry9juX+iXw5602zg1kg8yH+guR3uSEidGyCnOEQnGlr7xwu/8WE+pVm1ZNqaIs5ETTIJQg==" crossorigin="anonymous" referrerpolicy="no-referrer"> 41
42<script src="https://player.vimeo.com/api/player.js"></script>
42 43 44<style> 45body{ 46 opacity:0; 47} 48/*@import url(/assets/css/editor2015.css);*/ 49#content{ 50 margin:0 auto; 51 overflow:hidden; 52} 53.loader-fade{ 54 width: 100%; 55 height:100vw; 56 background:#000; 57 position: fixed; 58 z-index: 20; 59 display:none; 60} 61</style> 62 63<meta property="og:title" content="CODEX CFexpress 4.0 Type A"><meta property="og:url" content="https://codex.online/products/cfexpress-type-a"><meta property="og:type" content="website">
63<script type="text/javascript">var _quickNav=true; 64var _hideQuickNavLinks=true;</script>
64</head> 65<body> 66 67 <div class="loader-fade"></div> 68 <div class="codex"> 69 <div id="globalstyles"></div> 70 <div id="scriptstyleheader">
70<script> 71 72function updateFooter(){ 73 var htmlHeight = $("html").height(); 74 var windowHeight = window.innerHeight; 75 76 if($("#footer").hasClass("fixed")){ 77 htmlHeight += $("#footer").height(); 78 } 79 80 //console.log("window: " + windowHeight + " htmlHeight: " + htmlHeight); 81 82 if( htmlHeight < windowHeight){ 83 $("#footer").addClass("fixed"); 84 } 85 else{ 86 $("#footer").removeClass("fixed"); 87 } 88} 89 90var footerTimer; 91 92$(function(){ 93 //fixed footer 94 //$(window).resize(updateFooter); 95 //footerTimer = setInterval(updateFooter,500); 96 97 98 //$(window).resize(); 99}); 100 101</script>
101<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"}
101),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>
101<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;
101transform: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;
101height: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%}
101.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> 102 <div id="header"><div class="sticky"> 103 <nav class="sitenav"> 104 <div class="sitenav--inner-wrapper g-pl"> 105 <div class="logo"><a href="/us/" aria-label="Codex homepage link"><img src="/asset/30e82a0d-b94f-403b-a7b8-d1c4543b2ac2" alt="Codex Logo"></a></div> 106 <div class="sitenav-menu-wrap-container"> 107 <div class="sitenav--menu-wrap"> 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-mobile-wrap"> 110 <div id="submenu-close" class="close"></div> 111 <div class="arrow"><img src="/asset/cca6f044-1acb-4263-a694-50d05f1aa8d5"><div class="menu-back">Back</div></div> 112 </div> 113 <ul class="sitenav--menu"> 114 <li class="menuitem"><button class="menuButton" aria-expanded="false">Product</button> 115 <i></i><p class="header-mobile">Product</p> 116 <ul class="submenu" aria-hidden="true"> 117 <li class="header header-sub"> 118 <div class="sub-section">CODEX Media & Readers</div> 119 <ul class="pages"> 120 <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> 121 <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> 122 <li class="menu-list" aria-label="CFexpress Type B Reader"><a href="/us/products/cfexpress-type-b-reader">CFexpress Type B Reader</a></li> 123 </ul> 124 </li> 125 <li class="header header-sub"> 126 <div class="sub-section">ARRI Media & Readers</div> 127 <ul class="pages"> 128 <li class="menu-list" aria-label="CompactDrive"><a href="/us/products/arri-media">CompactDrive</a></li> 129 <li class="menu-list" aria-label="CompactDrive Readers"><a href="/us/products/arri-media-readers">CompactDrive Readers</a></li> 130 </ul> 131 </li> 132 </ul> 133 </li> 134 <li class="menuitem"><button class="menuButton" aria-expanded="false">Solutions</button> 135 <i></i><p class="header-mobile">Solutions</p> 136 <ul class="submenu" aria-hidden="true"> 137 <li class="header"> 138 <ul class="pages"> 139 <li class="menu-list" aria-label="ARRI Workflow"><a href="/us/solutions/arri-workflow">ARRI Workflow</a></li> 140 <li class="menu-list" aria-label="Integrations"><a href="/us/solutions/integrations">Integrations</a></li> 141 </ul> 142 </li> 143 <li class="header"> 144 <ul class="pages"> 145 <li class="menu-list" aria-label="High Density Encoding (HDE)"><a href="/us/solutions/codex-hde">High Density Encoding (HDE)</a></li> 146 <li class="menu-list" aria-label="HDE Partner Program"><a href="/us/solutions/hde-partner-program">HDE Partner Program</a></li> 147 </ul> 148 </li> 149 </ul> 150 </li> 151 <li class="menuitem"><button class="menuButton" aria-expanded="false">Support</button> 152 <i></i><p class="header-mobile">Support</p> 153 <ul class="submenu" aria-hidden="true"> 154 <li class="header"> 155 <ul class="pages"> 156 <li class="menu-list" aria-label="Contact Support"><a href="https://help.codex.online/content/support">Contact Support</a></li> 157 <li class="menu-list" aria-label="Help Centre"><a href="https://help.codex.online/">Help Centre</a></li> 158 <li class="menu-list" aria-label="Software Downloads"><a href="https://help.codex.online/content/downloads/software">Software Downloads</a></li> 159 </ul> 160 </li> 161 <li class="header"> 162 <ul class="pages"> 163 <li class="menu-list" aria-label="Product Returns (RMA)"><a href="https://help.codex.online/content/rma-request">Product Returns (RMA)</a></li> 164 <li class="menu-list" aria-label="Office Locations"><a href="/us/support/office-locations">Office Locations</a></li> 165 </ul> 166 </li> 167 </ul> 168 </li> 169 <li class="menuitem"><button class="menuButton" aria-expanded="false">For the Makers</button> 170 <i></i><p class="header-mobile">For the Makers</p> 171 <ul class="submenu" aria-hidden="true"> 172 <li class="header"> 173 <ul class="pages"> 174 <li class="menu-list" aria-label="The CODEX Story"><a href="/us/the-codex-story">The CODEX Story</a></li> 175 <li class="menu-list" aria-label="Captured on CODEX"><a href="/us/captured-powered-cinema">Captured on CODEX</a></li> 176 <li class="menu-list" aria-label="Sign up for News"><a href="/us/login">Sign up for News</a></li> 177 </ul> 178 </li> 179 <li class="header"> 180 <ul class="pages"> 181 <li class="menu-list" aria-label="Case Studies"><a href="/us/case-studies">Case Studies</a></li> 182 <li class="menu-list" aria-label="DIT Showcase"><a href="/us/dits-in-the-field">DIT Showcase</a></li> 183 <li class="menu-list" aria-label="News"><a href="/us/news">News</a></li> 184 </ul> 185 </li> 186 </ul> 187 </li> 188 </ul> 189 </div> 190 </div> 191 <div class="sitenav--utility-wrap"></div> 192 <div class="submenu search-bar" id="search-bar"> 193 <input id="search-area" class="search-area" type="text" name="search" autocomplete="off"> 194 <div class="suggested-searches" id="suggested-searches"> 195 <div class="suggested-header"></div> 196 <div id="search-results"></div> 197 </div> 198 </div> 199 </div> 200 </nav> 201 <div id="quick-nav" class="quick-nav"> 202 <div class="quick-nav--header"> 203 <div class="drop-menu">
204 <span data-custom-field-name="Quicknav Header" data-custom-field-type="text" data-custom-field-group="Header">CFexpress 4.0 Type A</span> 205 <div class="button"></div> 206 <div class="dropdown"> 207 <div class="bg"></div> 208 </div> 209 </div> 210 </div> 211 <div class="quick-nav--hr"></div> 212 <div class="quick-nav--links"> 213 <ul></ul> 214 <div class="quick-nav--menu-bar"></div> 215 <div class="quick-nav--mobile-arrows"> 216 <div class="quick-nav--prev"><img src="/asset/175ab95b-6212-4fa9-85be-a15c1fb451e6"></div> 217 <div class="quick-nav--next"><img src="/asset/175ab95b-6212-4fa9-85be-a15c1fb451e6"></div> 218 </div> 219 </div> 220 </div> 221 <div class="sitenav--dim-wrapper"></div> 222</div> 223<div class="totop"><img src="/asset/2e233c90-78ae-4615-812b-88abf8e6abf6"></div>
224<script type="text/javascript">let siteNav = (() => { 225 let init = async () => { 226 var timeOut; 227 window.addEventListener('resize', () => { 228 clearTimeout(timeOut); 229 timeOut = setTimeout(handleResize, 200); 230 }); 231 232 $(async () => { 233 selectNavigation(); 234 initSubNavigationMenu(); 235 initNavigationMenu(); 236 initUtiliyMenu(); 237 search(); 238 toTop(); 239 if (typeof (_quickNav) != "undefined" && _quickNav) { 240 $("body").addClass("quicknav"); 241 if (typeof (_hideQuickNavLinks) != "undefined" && _hideQuickNavLinks) { 242 $("body").addClass("hidequicknavlinks"); 243 } 244 } else { 245 initMenuScroll(); //default behaviour 246 } 247 248 //cart 249 $("#header .cart").append("<div></div>"); 250 $("#header .cart > button").click(() => { shop.toggleCart(); }).html("<div><i></i></div>"); 251 await shop.initCart($("#header .cart > div")[0]); 252 }); 253 }, 254 scrollDeadzone = 5, 255 topScrollDeadzone = 50, 256 lastScrollTop = 0, 257 menuHideTl, 258 menuScrollTl, 259 initMenuScroll = () => { 260 //menu hide/reveal animation 261 menuHideTl = gsap.timeline().pause(); 262 menuHideTl.to("#header", { top: "-5.1em", ease: "power1.inOut", duration: 0.7 }); 263 menuHideTl.to(".sitenav--inner-wrapper", { opacity: 0, delay: 0.5, duration: 0.2 }, "<"); //iphone transparent header fix 264 265 lastScrollTop = $(window).scrollTop(); 266 $(window).scroll(menuScrollHandler).scroll(); 267 268 menuScrollTl = gsap.from("body", { 269 scrollTrigger: { 270 start: "top top", 271 end: "+=100", 272 trigger: "body", 273 onEnter: e => { 274 gsap.set("#header", { position: "absolute" }); 275 }, 276 onLeave: e => { 277 e.trigger.classList.remove("top"); 278 gsap.set("#header", { position: "fixed" }); 279 menuHideTl.pause().seek(1); 280 }, 281 onLeaveBack: e => { 282 e.trigger.classList.add("top"); 283 menuHideTl.pause().seek(0); 284 }, 285 tag: "menu" 286 } 287 }); 288 289 if ($(window).scrollTop() == 0) { 290 $("body").addClass("top"); 291 } 292 }, 293 menuScrollHandler = e => { 294 scrollTop = $(e.currentTarget).scrollTop(); 295 296 //set menu visibility 297 if (scrollTop > lastScrollTop + scrollDeadzone && scrollTop > topScrollDeadzone) { 298 hideMenu(); 299 lastScrollTop = scrollTop; 300 return; 301 } 302 if (scrollTop < lastScrollTop - scrollDeadzone) { 303 showMenu(); 304 lastScrollTop = scrollTop; 305 return; 306 } 307 }, 308 showMenu = () => { 309 menuHideTl.reverse(); 310 }, 311 hideMenu = () => { 312 menuHideTl.play(); 313 }, 314 handleResize = () => { 315 menus = document.querySelectorAll('.sitenav--menu-wrap .sitenav--menu .menuitem'); 316 subHeader = document.querySelectorAll('.sitenav--inner-wrapper .submenu .header-sub'); 317 subHeader.forEach((subHeader) => { 318 gsap.set(subHeader, { clearProps: "all" }); 319 $(subHeader).removeClass("active"); 320 }); 321 if (!checkIfMobile()) { 322 $('.sitenav--menu .submenu.active').removeClass("active"); 323 } else { 324 gsap.set($('.sitenav--inner-wrapper .menuitem .submenu'), { clearProps: "all" }); 325 } 326 $('.sitenav--inner-wrapper .submenu .header.active').removeClass("active"); 327 gsap.set($('.sitenav--inner-wrapper .submenu .header'), { clearProps: "all" }); 328 $('.sitenav--inner-wrapper .submenu.active .header-sub.active').removeClass("active"); 329 submenu = null; 330 331 var topNavigation = document.querySelector('.sitenav'); 332 menus = topNavigation.querySelectorAll('.sitenav--menu-wrap .sitenav--menu .menuitem');
333 menus.forEach((button) => { 334 button.replaceWith(button.cloneNode(true)); 335 }); 336 337 initNavigationMenu(); 338 initSubNavigationMenu(); 339 setSearchClose(); 340 initSearchNavigationMenu(); 341 }, 342 toTop = () => { 343 $(".totop").insertAfter("#header"); 344 $(".totop").click((e) => { 345 e.preventDefault(); 346 gsap.to(window, { scrollTo: 0 }); 347 }); 348 var toTopVisible = false; 349 ScrollTrigger.create({ 350 start: 0, 351 end: () => document.body.clientHeight, 352 onUpdate: _.throttle(e => { 353 if (!toTopVisible && e.direction == 1 && $(window).scrollTop() > 500) { 354 gsap.to($(".totop"), { opacity: 1, duration: 0.5 }); 355 toTopVisible = true; 356 } 357 if (toTopVisible && e.direction == -1) { 358 gsap.to($(".totop"), { opacity: 0, duration: 0.5 }); 359 toTopVisible = false; 360 } 361 }, 500, { leading: false }), 362 invalidateOnRefresh: true 363 }); 364 }, 365 menuItems = { 366 utility: [ 367 { 368 label: "search", 369 icon: "/asset/a7626059-ecef-4ef1-98b4-b8b27d5b55f9", 370 }, 371 { 372 label: "cart", 373 icon: "/asset/7cf0729a-e853-4362-9e84-030bd39627dd" 374 }, 375 { 376 label: "account",
377 icon: "/asset/f474d0fc-01a1-4b13-9b27-160ed8741892", 378 dropdown: [ 379 { 380 pages: [ 381 { 382 label: 'Sign in', 383 url: "/login", 384 class: "log-in" 385 }, 386 { 387 label: 'Sign Out', 388 url: "https://signin.dev.codex.online/v2/logout?client_id=04UMxAbezif09fK25Qx2CbShGIELSyPZ&returnTo=https://staging.codex.online?action=logout", 389 class: "logout" 390 } 391 ] 392 } 393 ] 394 }, 395 { 396 label: "burger", 397 icon: "/asset/5aed46ee-b7e8-4b6d-b8a8-bb176c2d1d2a" 398 } 399 ] 400 }, 401 menuHtml, 402 selectNavigation = () => { 403 var utilityNav = document.querySelector('.sitenav--utility-wrap'); 404 renderNavigation(utilityNav, menuItems.utility); 405 }, 406 renderNavigation = (target, object) => { 407 menuHtml = '<ul class="sitenav--menu">'; 408 object.forEach((e) => { 409 menuHtml += target.className == 'sitenav--utility-wrap' ? '<li class="menuitem ' + e.label + '">' : '<li class="menuitem">'; 410 if (e.dropdown) { 411 if (e.icon) { 412 menuHtml += '<button class="menuButton" alt="' + e.label + '" aria-expanded="false"></button>'; 413 } else { 414 menuHtml += '<button class="menuButton" aria-expanded="false">' + e.label + '</button>'; 415 } 416 menuHtml += '<ul class="submenu" aria-hidden="true" ><i></i>'; 417 menuHtml += '<p class="header-mobile">' + e.label + '</p>'; 418 e.dropdown.forEach((sub) => { 419 if (sub.section) { 420 menuHtml += '<li class="header header-sub">'; 421 menuHtml += '<div class="sub-section">' + sub.section + '</div>'; 422 } else { 423 menuHtml += '<li class="header">'; 424 } 425 menuHtml += '<ul class="pages">'; 426 sub.pages.forEach((page) => { 427 if (page.subSubSection) { 428 listClass = page.class != undefined ? "sub-sub" + page.class : "sub-sub"; 429 menuHtml += `<li class=${listClass} onClick="window.location.href='${page.url}'; return false;" aria-label="${page.label}"><a href ="${page.url}">${page.label}</a></li>`; 430 menuHtml += '<ul class="subsub-pages">'; 431 menuHtml += '<p class="header-mobile">' + page.label + '</p>'; 432 page.subSubSection.forEach((subsub) => { 433 menuHtml += `<li class=${listClass} onClick="window.location.href='${subsub.url}'" aria-label="${subsub.label}"><a href ="${subsub.url}">${subsub.label}</a></li>`; 434 }); 435 menuHtml += '</ul></li>'; 436 } else { 437 listClass = page.class != undefined ? page.class : "menu-list"; 438 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>`; 439 } 440 }); 441 menuHtml += '</ul></li>'; 442 }); 443 menuHtml += '</ul>'; 444 } else { 445 menuHtml += '<button class="menuButton" aria-label="' + e.label + '"></button>'; 446 } 447 menuHtml += '</li>'; 448 }); 449 menuHtml += '</ul>'; 450 target.innerHTML += menuHtml; 451 $(".sitenav--utility-wrap .sitenav--menu .menuitem.search").append($('.sitenav--inner-wrapper .search-bar')); 452 $('.sitenav--utility-wrap .menuitem.cart button').append($('#header_basket')); 453 }, 454 menus, 455 menuTop, 456 menuExpanded = false, 457 isAnimating = false, 458 showDimWrapper = () => { 459 $('.sitenav--dim-wrapper').addClass('show'); 460 }, 461 hideDimWrapper = () => { 462 $('.sitenav--dim-wrapper').removeClass('show'); 463 }, 464 searchMenuButton, searchButton, 465 searchOpen = (e) => { 466 gsap.to($('.menuitem.account .submenu'), { height: 0, duration: 0.1, ease: "Power3.out" }); 467 468 menuExpanded = true; 469 showDimWrapper(); 470 searchMenuButton.classList.add("active"); 471 searchMenuButton.removeEventListener("click", searchOpen); 472 searchMenuButton.addEventListener("click", searchClose); 473 if (!checkIfMobile()) { 474 setTimeout(() => { $("#search-area").focus(); }, 250); 475 } 476 477 $("#search-area").val(""); 478 setRollOverEvents(e); 479 }, 480 searchClose = (e) => { 481 if (e.target.closest('.search-area')) { 482 // If the click is inside the search input, do nothing and return early 483 return; 484 } 485 setRollOutEvents(e); 486 showDimWrapper(); 487 488 searchButton.classList.remove("active"); 489 searchMenuButton.classList.remove("active"); 490 searchMenuButton.removeEventListener("click", searchClose); 491 searchMenuButton.addEventListener("click", searchOpen); 492 }, 493 initSearchNavigationMenu = () => { 494 searchNav = document.querySelectorAll('.sitenav--utility-wrap .sitenav--menu .menuitem.search'); 495 searchNav.forEach((button) => { 496 searchButton = button.querySelector('button'); 497 searchMenuButton = button; 498 if (!checkIfMobile()) { 499 searchButton.addEventListener('click', searchOpen); 500 } else { 501 searchMenuButton.addEventListener("click", searchOpen); 502 } 503 }); 504 }, 505 currentButton = null, 506 submenu, 507 menuTl, 508 subHeader, 509 subMenuActive, 510 subSubMenuActive, 511 calculatedHeight, 512 initNavigationMenu = () => { 513 var topNavigation = document.querySelector('.sitenav'); 514 515 menus = topNavigation.querySelectorAll('.sitenav--menu-wrap .sitenav--menu .menuitem, .sitenav--utility-wrap .sitenav--menu .menuitem.account'); 516 if (checkIfMobile()) { 517 // Add event listeners for mobile clicks
518 menus.forEach((button) => { 519 button.removeEventListener("click", setMobileClickEvent); 520 521 let submenu = button.lastElementChild; 522 gsap.set(submenu, { top: menuTop }); 523 button.addEventListener("click", (e) => { 524 if (e.srcElement.nodeName == "A") return; //event source is link. navigate 525 button.classList.add("active"); 526 setMobileClickEvent(e); 527 button.removeEventListener("click", setMobileClickEvent); 528 }); 529 }); 530 } else { 531 //Event Listeners for navigation rollovers and rollouts 532 menus.forEach((button) => { 533 button.removeEventListener("click", setMobileClickEvent); 534 button.removeEventListener('mouseleave', handleMouseLeave); 535 var menuButton = button.querySelector('button'); 536 menuButton.removeEventListener('mousemove', handleMouseMove); 537 538 let timer, mouseLeaveTimer; 539 function handleMouseMove(e) { 540 clearTimeout(timer); 541 clearTimeout(mouseLeaveTimer); 542 timer = setTimeout(() => { 543 if (menuExpanded !== true) { 544 setRollOverEvents(e); 545 menuButton.removeEventListener('mousemove', handleMouseMove); 546 } 547 }, 100); 548 } 549 function handleMouseLeave(e) { 550 clearTimeout(timer); 551 button.classList.remove("active"); 552 mouseLeaveTimer = setTimeout(() => { 553 setRollOutEvents(e); 554 button.removeEventListener('mouseleave', handleMouseLeave); 555 }, 100); 556 } 557 menuButton.addEventListener('mouseover', (e) => { 558 button.classList.add("active"); 559 if ($('.menuitem.search.active').length) { 560 setSearchClose(); 561 } 562 showDimWrapper(); 563 menuButton.addEventListener('mousemove', handleMouseMove); 564 button.addEventListener('mouseleave', handleMouseLeave); 565 }); 566 let submenu = button.lastElementChild; 567 submenu.removeEventListener("click", setMobileClickEvent); 568 569 gsap.set(submenu, { top: 31 }); 570 }); 571 } 572 }, 573 initUtiliyMenu = () => { 574 $('.sitenav--menu .menuitem.burger').on("click", () => { 575 $('.sitenav, .sitenav--menu-wrap').addClass("active"); 576 submenu = null; 577 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 578 gsap.to($('.menuitem .submenu'), { height: 0, duration: 0.2, ease: "Power3.out" }); 579 } 580 setSearchClose(); 581 showDimWrapper(); 582 }); 583 584 $('.sitenav--dim-wrapper').on("click", (e) => { 585 dimWrapperClose(e); 586 }); 587 588 $('.sitenav--dim-wrapper').on('mouseover', (e) => { 589 if (!$("nav").hasClass("active")) { 590 dimWrapperClose(e); 591 } 592 }); 593 $('.sitenav-mobile-wrap .close').on("click", (e) => { 594 $("body").css({ position: "relative" }); 595 hideDimWrapper(); 596 $('nav').removeClass("active"); 597 menuExpanded = false; 598 $('.sitenav--menu-wrap.active').removeClass("active"); 599 $('.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu').css("right", "0%"); 600 $('.sitenav--menu .submenu.active').removeClass("active"); 601 $('.sitenav--menu-wrap .arrow').css('display', 'none'); 602 $('.sitenav--menu-wrap .sitenav--menu .menuitem.active').removeClass("active"); 603 $('.sitenav--menu-wrap .sitenav--menu .header-sub.active').removeClass("active"); 604 submenu = null; 605 if ($('.menuitem.search.active').length) { 606 setSearchClose(); 607 } 608 if (!$('.sitenav--inner-wrapper .account.active').length) { 609 gsap.to($('.menuitem.account .submenu'), { opacity: 0, delay: 0.2, ease: "Power3.out" }); 610 } 611 resetSubNav(); 612 initSearchNavigationMenu(); 613 }); 614 $('.sitenav-mobile-wrap .arrow').on("click", () => { 615 if (subMenuActive) { 616 $('.sitenav--inner-wrapper .submenu.active .header-sub.active').removeClass("active"); 617 $('.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu').css("right", "0%"); 618 $('.sitenav--menu .submenu.active').removeClass("active"); 619 $('.sitenav--menu-wrap .arrow').css('display', 'none'); 620 $('.sitenav--menu-wrap .sitenav--menu .menuitem.active').removeClass("active"); 621 } else if (subSubMenuActive) { 622 $('.sitenav--inner-wrapper .menuitem.active .submenu.active').css("right", "calc(-100% - 25px)"); 623 $('.sitenav--menu .submenu.active .sub-sub').removeClass("active"); 624 gsap.set($('.sitenav--menu .submenu'), { clearProps: "right" }); 625 subMenuActive = true; 626 } 627 }); 628 }, 629 dimWrapperClose = (e) => { 630 $('.sitenav--menu-wrap.active').removeClass("active"); 631 $('.sitenav--menu .submenu.active').removeClass("active"); 632 $('.sitenav--menu-wrap .arrow').css('display', 'none'); 633 $('.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu').css("right", "0%"); 634 $('.sitenav--menu-wrap .sitenav--menu .menuitem.active').removeClass("active"); 635 $('.sitenav--utility-wrap .menuitem.burger menuButton.active').removeClass("active"); 636 $('.sitenav--menu-wrap .sitenav--menu .header-sub.active').removeClass("active"); 637 $('.sitenav--inner-wrapper .search-bar .suggested-searches').css("display", "none"); 638 if (!checkIfMobile()) { 639 setRollOutEvents(e); 640 } 641 if (checkIfMobile() && !$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 642 submenu = null; 643 } 644 setSearchClose(); 645 initSearchNavigationMenu(); 646 resetSubNav(); 647 hideDimWrapper(); 648 }, 649 resetSubNav = () => { 650 $('.sitenav--inner-wrapper .menuitem.active .submenu.active').css("right", "calc(-100% - 25px)"); 651 $('.sitenav--menu .submenu.active .sub-sub').removeClass("active"); 652 gsap.set($('.sitenav--menu .submenu'), { clearProps: "right" }); 653 subMenuActive = false; 654 subSubMenuActive = false; 655 $("nav").removeClass("active"); 656 }, 657 initSubNavigationMenu = () => { 658 if (checkIfMobile) { 659 menuTop = 0; 660 } else { 661 menuTop = 58; 662 gsap.set($('.sitenav--inner-wrapper .menuitem .submenu'), { opacity: 0 }); 663 gsap.set($('.sitenav--inner-wrapper .menuitem.account .submenu'), { opacity: 0 }); 664 } 665 666 subsSection = document.querySelectorAll('.submenu .header-sub .sub-section'); 667 subsSection.forEach((button) => { 668 button.addEventListener("click", (e) => { 669 var target = e.currentTarget; 670 671 if (!checkIfMobile()) return; 672 673 if (target.parentElement.classList.contains("active")) { 674 gsap.to($('.sitenav--inner-wrapper .submenu.active .header-sub.active .pages'), { 675 height: 0, duration: 0.3, onComplete: () => { 676 gsap.set($('.sitenav--inner-wrapper .submenu.active .header-sub.active .pages'), { height: "unset", clearProps: "all" }); 677 $('.sitenav--inner-wrapper .submenu.active').removeClass("active"); 678 $('.sitenav--inner-wrapper .submenu .header-sub.active').removeClass("active"); 679 } 680 }); 681 return false; 682 } 683 e.preventDefault(); 684 gsap.to($('.sitenav--inner-wrapper .submenu.active .header-sub.active .pages'), { 685 height: 0, duration: 0.3, onComplete: () => { 686 gsap.set($('.sitenav--inner-wrapper .submenu.active .header-sub.active .pages'), { height: "unset", clearProps: "all" }); 687 $('.sitenav--inner-wrapper .submenu.active .header-sub.active').removeClass("active"); 688 if (checkIfMobile()) { 689 target.parentElement.classList.add("active"); 690 } 691 } 692 }); 693 }); 694 }); 695 }, 696 // Mobile Events 697 setMobileClickEvent = (event) => { 698 subMenuActive = true; 699 subSubMenuActive = false; 700 event.preventDefault(); 701 menuExpanded = true; 702 isAnimating = true; 703 target = event.target; 704 submenu = document.querySelector('.menuitem.active .submenu'); 705 if (checkIfMobile()) { 706 submenu.classList.add("active"); 707 $('.sitenav--menu').css("right", "calc(100% + 2em"); 708 } 709 $('.sitenav--menu-wrap .arrow').css('display', 'flex'); 710 isAnimating = false; 711 712 subSubmenus = submenu.querySelectorAll('.sub-sub'); 713
714 subSubmenus.forEach((button) => { 715 button.addEventListener("click", function (e) { 716 e.preventDefault(); 717 e.stopImmediatePropagation(); 718 }, true); 719 button.addEventListener('click', function (e) { 720 subMenuActive = false; 721 subSubMenuActive = true; 722 e.preventDefault(); 723 e.stopImmediatePropagation(); 724 button.classList.add("active"); 725 setMobileSubMenuClickEvent(e); 726 button.removeEventListener("click", setMobileSubMenuClickEvent); 727 }, true); 728 }); 729 }, 730 setMobileSubMenuClickEvent = (event) => { 731 event.preventDefault(); 732 event.stopImmediatePropagation(); 733 menuExpanded = true; 734 isAnimating = true; 735 target = event.target; 736 subsubmenu = document.querySelector('.menuitem.active .subsub-pages'); 737 if (checkIfMobile()) { 738 subsubmenu.classList.add("active"); 739 $('.sitenav--inner-wrapper .menuitem.active .submenu.active').css("right", "0"); 740 } 741 isAnimating = false; 742 }, 743 // Desktop Events 744 setRollOverEvents = async (event) => { 745 if (isAnimating) menuTl.play(); 746 747 menuTl = new gsap.timeline({ paused: true }); 748 749 $('nav').addClass("active"); 750 menuExpanded = true; 751 event.preventDefault(); 752 isAnimating = true; 753 //Check if current target is already open. 754 if (currentButton !== null && event.target === currentButton) return; 755 button = document.querySelector('.menuitem.active button'); 756 currentButton = button; 757 submenu = document.querySelector('.menuitem.active .submenu'); 758 subHeader = document.querySelectorAll('.menuitem.active .submenu .header'); 759 currentSubMenu = submenu; 760 if (submenu) { 761 submenu.style.opacity = '0'; 762 submenu.style.height = 'auto'; 763 submenuHeight = submenu.offsetHeight; 764 const computedStyle = window.getComputedStyle(submenu); 765 const paddingTop = parseFloat(computedStyle.paddingTop); 766 const paddingBottom = parseFloat(computedStyle.paddingBottom); 767 calculatedHeight = submenuHeight - paddingTop - paddingBottom; 768 // Reset the submenu to be hidden for the animation 769 submenu.style.height = 0; 770 submenu.style.visibility = 'visible'; 771 } 772 submenuLast = $(".menuitem.active .submenu .header:last-child"); 773 submenuWidth = $(".menuitem.active .submenu .header:last-child").width(); 774 775 //Set the width of the last submenu to correct roll over resizing. 776 gsap.set(submenuLast, { width: submenuWidth }); 777 778 gsap.set(submenu, { opacity: 1 }); 779 780 if (event.target.parentNode.classList.contains("search")) { 781 gsap.fromTo(submenu, { height: 0 }, { opacity: 1, height: calculatedHeight, duration: 0.05, ease: "Power3.out" }); 782 } else { 783 menuTl.fromTo(submenu, { height: 0 }, { opacity: 1, height: calculatedHeight, duration: 0.05, ease: "Power3.out" }); 784 } 785 786 menuTl.fromTo(subHeader, { top: -20, visibility: "hidden" }, { 787 top: 0, visibility: "visible", delay: 0, duration: 0.1, ease: "Power3.out", onComplete: () => { 788 isAnimating = false; 789 } 790 }, "<"); 791 if (event.target.parentNode.classList.contains("search")) return; 792 if (button != undefined) button.classList.add('active'); 793 menuTl.play(); 794 }, 795 setRollOutEvents = (event) => { 796 menuExpanded = false; 797 798 if (menuTl != undefined) { 799 isAnimating = true; 800 if (event.target.classList.contains('burger') 801 || event.target.classList.contains('search-bar') 802 || event.target.classList.contains('search-area') 803 ) { 804 return; 805 } else { 806 $('nav').removeClass("active"); 807 808 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 809 if (event.target.parentNode.classList.contains("search")) { 810 gsap.to(submenu, { 811 height: 0, duration: 0.1, ease: "Power3.out", onComplete: () => { 812 gsap.set(submenu, { opacity: 0, delay: 0.3 }); 813 } 814 }); 815 } else { 816 menuTl.to(submenu, { height: 0, duration: 0.1, ease: "Power3.out" }); 817 } 818 } 819 } 820 821 if (button.classList != null) button.classList.remove('active'); 822 currentButton = null; 823 currentSubMenu = null; 824 825 menuTl = new gsap.timeline({ paused: true });
826 if (event.relatedTarget && event.relatedTarget.classList.contains('menuitem') 827 || event.relatedTarget && event.relatedTarget.classList.contains('menuButton') 828 || event.relatedTarget && event.relatedTarget.classList.contains('search-bar') 829 || event.relatedTarget && event.relatedTarget.classList.contains('search-area') 830 ) { 831 return; 832 } else { 833 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 834 gsap.set($('.sitenav--inner-wrapper .menuitem .submenu'), { opacity: 0, delay: 0.2 }); 835 hideDimWrapper(); 836 } 837 isAnimating = false; 838 } 839 840 if (submenu != null) { 841 submenuHeight = submenu.offsetHeight; 842 } 843 } 844 845 isAnimating = false; 846 }, 847 setSearchClose = () => { 848 menuExpanded = false; 849 if (menuTl != undefined) { 850 isAnimating = true; 851 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 852 gsap.to($('.menuitem.search .submenu'), { 853 height: 0, duration: 0.2, ease: "Power3.out", onComplete: () => { 854 gsap.set($('.menuitem.search .submenu'), { opacity: 0, delay: 0.2 }); 855 } 856 }); 857 } 858 if (button.classList != null) button.classList.remove('active'); 859 currentButton = null; 860 currentSubMenu = null; 861 submenu = null; 862 menuTl = new gsap.timeline({ paused: true }); 863 $('.menuitem.search').removeClass('active'); 864 if (!$('.sitenav--inner-wrapper .menuitem .submenu.active').length) { 865 hideDimWrapper(); 866 } 867 } 868 869 initSearchNavigationMenu(); 870 $('.sitenav--menu .menuitem.search .menuButton').off("mousedown", searchClose); 871 }, 872 // Search functionality 873 search = () => { 874 const searchInput = document.getElementById('search-area'); 875 const searchResults = document.getElementById('search-results'); 876 searchBarHeight = $('#search-bar').outerHeight(); 877 let currentAbortController = null; 878 const fetchData = async (query, controller) => { 879 try { 880 const response = await fetch(`/getpages?search=${query}&limit=99`, { signal: controller.signal }); 881 if (!response.ok) { 882 throw new Error("Network reponse was not ok"); 883 } 884 const data = await response.json(); 885 displayResults(data, query); 886 } catch (error) { 887 if (error.name !== "AbortError") { 888 console.error("Fetch error ", error); 889 } 890 } 891 }; 892 let resultsHeight; 893 const displayResults = async (data, query) => { 894 searchResults.innerHTML = ""; 895 const animateBlock = () => { 896 $('#suggested-searches').css('display', 'block'); 897 resultsHeight = $('#suggested-searches').outerHeight(); 898 searchAdaptedHeight = searchBarHeight + resultsHeight; 899 gsap.to($('#search-bar'), { height: searchAdaptedHeight, duration: 0.3, ease: "Power3.out" }); 900 }; 901 if (data.length === 0) { 902 $(".sitenav--inner-wrapper .search-bar .suggested-searches .suggested-header").text(`No Results`); 903 animateBlock(); 904 } else { 905 data.forEach(item => { 906 path = item.Path.replace("/codex.online", 'https://codex.online'); 907 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>`; 908 searchResults.innerHTML += resultsDiv; 909 }); 910 $(".sitenav--inner-wrapper .search-bar .suggested-searches .suggested-header").text(`${data.length} Result${data.length > 1 ? "s" : ""}`); 911 animateBlock(); 912 } 913 if (query.length < 3) { 914 searchResults.innerHTML = ''; 915 gsap.to($('#search-bar'), { height: searchBarHeight, duration: 0.3, ease: "Power3.out" }); 916 $('#suggested-searches').css('display', 'none'); 917 return; 918 } 919 }; 920 const handleSearch = _.debounce((event) => { 921 const query = event.target.value; 922 if (query.length < 3) { 923 searchResults.innerHTML = ''; 924 gsap.to($('#search-bar'), { height: searchBarHeight, duration: 0.3, ease: "Power3.out" }); 925 $('#suggested-searches').css('display', 'none'); 926 return; 927 } 928 if (currentAbortController) { 929 currentAbortController.abort(); // Cancel the previous request 930 } 931 currentAbortController = new AbortController(); 932 fetchData(query, currentAbortController); 933 }, 50); 934 searchInput.addEventListener('input', handleSearch); 935 }, 936 checkIfMobile = () => { 937 return window.innerWidth <= 992; 938 }; 939 init(); 940 return { 941 menuHideTl: () => { return menuHideTl; }, 942 menuScrollTrigger: () => { return menuScrollTl; }, 943 hideMenu: () => { menuHideTl.play(); } 944 }; 945})(); 946 947 948var quickNav = (() => { 949 var init = () => { 950 window.addEventListener("load", (event) => { 951 initMenu(); 952 updateActiveNavigation(); 953 window.addEventListener('resize', _.throttle(handleResize, 250)); 954 }); 955 }, 956 config= 957 [ 958 { 959 label : "CFexpress Type A Excel", 960 url: "cfexpress-type-a-excel", 961 group :"cfexpress" 962 }, 963 { 964 label : "CFexpress Type A Elite", 965 url: "cfexpress-type-a-elite", 966 group :"cfexpress" 967 }, 968 { 969 label : "CFexpress Type B Excel", 970 url: "cfexpress-type-b-excel", 971 group :"cfexpress" 972 }, 973 { 974 label : "CFexpress Type B Elite", 975 url: "cfexpress-type-b-elite", 976 group :"cfexpress" 977 }, 978 { 979 label : "CFexpress Type B Reader", 980 url: "cfexpress-type-b-reader", 981 group :"cfexpress" 982 }, 983 { 984 label : "CompactDrive",
985 url: "compact-drive", 986 group :"arri" 987 }, 988 { 989 label : "CompactDrive Express", 990 url: "compact-drive-express", 991 group :"arri" 992 }, 993 { 994 label : "CompactDrive Reader TB3", 995 url: "compact-drive-reader-tb3", 996 group :"arri" 997 }, 998 { 999 label : "CompactDrive Reader USB-C", 1000 url: "compact-drive-reader-usb-c", 1001 group :"arri" 1002 }, 1003 { 1004 url: "cfexpress-type-a", 1005 group :"cfexpress" 1006 }, 1007 { 1008 url: "cfexpress-type-b", 1009 group :"cfexpress" 1010 }, 1011 { 1012 url: "arri-media", 1013 group :"arri" 1014 }, 1015 { 1016 url: "arri-media-readers", 1017 group :"arri" 1018 }, 1019 { 1020 url: "cfexpress-type-a-excel-copy", 1021 group :"cfexpress" 1022 } 1023 1024 ], 1025 quickNav, 1026 handleResize = () => { 1027 // set mobile navigation 1028 gsap.set($('.quick-nav ul'), { clearProps: 'all' }); 1029 if (checkIfMobile()) { 1030 $(".quick-nav--next").css('display', 'flex'); 1031 $(".quick-nav--prev").css('display', 'none'); 1032 } else { 1033 $(".quick-nav--next").css('display', 'none'); 1034 $(".quick-nav--prev").css('display', 'none'); 1035 } 1036 // Reset quicknav underline to correct position 1037 const rect = $('.quick-nav--section .active')[0].getBoundingClientRect(); 1038 $('.quick-nav--menu-bar').css({ 1039 'left': rect.left, 1040 'width': rect.width 1041 }); 1042 }, 1043 initMenu = () => { 1044 //Get all sections and create quick navigation 1045 const sections = document.querySelectorAll(".section-wrapper"); 1046 const linksUl = document.querySelector(".quick-nav--links ul"); 1047 let linkHtml = ""; 1048 sections.forEach((section, index) => { 1049 const sectionTitleElement = section.querySelector(".section-title"); 1050 if (sectionTitleElement) { 1051 const sectionTitle = sectionTitleElement.innerHTML; 1052 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>`; 1053 } 1054 }); 1055 1056 linksUl.innerHTML += linkHtml; 1057 1058 //Update quick navigation on scroll 1059 window.addEventListener("scroll", (event) => { 1060 updateActiveNavigation(); 1061 }); 1062 1063 $("#nav1").addClass("active"); 1064 quickNavActiveSet(); 1065 1066 //render quick nav dropdown 1067 var url=window.location.pathname.split("/").slice(-1); 1068 var group=config.find(e=>e.url==url).group; 1069 var items=config.filter(e=>e.group==group && e.url!=url && e.label!=undefined); 1070 items.forEach(e=>{ 1071 $(".quick-nav .dropdown").append(`<a href="/products/${e.url}"><div>${e.label}</div></a>`) 1072 }); 1073 1074 clickHandlers(); 1075 }, 1076 clickHandlers = () => { 1077 quickNav = $(".quick-nav").outerHeight(); 1078 1079 $(".quick-nav a[href^='#']").on('click', function (e) { 1080 e.preventDefault(); 1081 $('.quick-nav--section a').removeClass("active"); 1082 $(this).addClass("active"); 1083 $('html, body').animate({ 1084 scrollTop: $(this.hash).offset().top - quickNav + 2 1085 }, 1000); 1086 1087 quickNavActiveSet(); 1088 }); 1089 1090 $(".quick-nav--next").on('click', function (e) { 1091 $('.quick-nav ul').css("right", '2rem'); 1092 if (checkIfMobile()) { 1093 $(".quick-nav--prev").css('display', 'flex'); 1094 $(".quick-nav--next").css('display', 'none'); 1095 } 1096 quickNavActiveSet(); 1097 }); 1098 $(".quick-nav--prev").on('click', function (e) { 1099 gsap.set($('.quick-nav ul'), { clearProps: 'all' }); 1100 if (checkIfMobile()) { 1101 $(".quick-nav--next").css('display', 'flex'); 1102 $(".quick-nav--prev").css('display', 'none'); 1103 } 1104 quickNavActiveSet(); 1105 }); 1106 1107 $(".quick-nav .drop-menu").click(()=>{ 1108 $(".quick-nav .dropdown").slideToggle(); 1109 $(".quick-nav .drop-menu").toggleClass("active"); 1110 }) 1111 }, 1112 quickNavActiveSet = () => { 1113 const rect = $('.quick-nav--section .active')[0]?.getBoundingClientRect(); 1114 if(rect==undefined) return; 1115 $('.quick-nav--menu-bar').css({ 1116 'left': rect.left, 1117 'width': rect.width 1118 }); 1119 }, 1120 updateActiveNavigation = () => { //not using intersectionobservers. 1121 const sections = [...document.querySelectorAll('.section-wrapper')]; 1122 const navLinks = document.querySelectorAll('#quick-nav ul li a'); 1123 1124 sections.reverse().every(e => { 1125 if (e.getBoundingClientRect().top < 70) { 1126 const sectionId = e.id; 1127 const navId = `nav${sectionId.replace('section', '')}`; 1128 const navLink = document.getElementById(navId); 1129 navLinks.forEach(link => link.classList.remove('active')); 1130 if (navLink != null) { 1131 navLink.classList.add('active'); 1132 const rect = navLink.getBoundingClientRect(); 1133 $('.quick-nav--menu-bar').css({ 1134 'left': rect.left, 1135 'width': rect.width 1136 }); 1137 } 1138 return false; 1139 } 1140 return true; 1141 }); 1142 }, 1143 additionalMenuItems = (label, url) => { 1144 $('.quick-nav--links ul').append(`<li class="quick-nav--section"><a id="nav-${label}" href="${url}">${label}</a></li>`); 1145 }, 1146 checkIfMobile = () => { 1147 return window.innerWidth <= 992; 1148 }; 1149 init(); 1150 return { 1151 additionalMenuItems: (label, url) => { return additionalMenuItems(label, url); } 1152 }; 1153})(); 1154</script>
1154<style>body.embed #header{ 1155 display: none; 1156} 1157 1158* { 1159 padding: 0; 1160} 1161 1162html { 1163 font-size: 16px; 1164} 1165body{ 1166 position: relative; 1167} 1168pre { 1169 white-space: nowrap; 1170 word-wrap: break-word; 1171} 1172dl,menu,ol,ul{ 1173 margin:0; 1174 padding:0; 1175} 1176 1177span.slim { 1178 max-width: 36rem; 1179 display: inline-block; 1180} 1181 1182#quick-nav{ 1183 display: none; 1184} 1185 1186.quicknav #quick-nav{ 1187 display:block; 1188 pointer-events: all; 1189} 1190 1191.quicknav.hidequicknavlinks #quick-nav .quick-nav--links, 1192.quicknav.hidequicknavlinks #quick-nav .quick-nav--hr{ 1193 display:none; 1194} 1195 1196/* ///////// Navigation Menu /////////*/ 1197 1198#header { 1199 position: absolute; 1200 width: 100%; 1201 z-index: 9999; 1202 filter: drop-shadow(0px 0px 1px #555); 1203} 1204 1205.quicknav #header{ 1206 height: 100%; 1207 top: 0; 1208 pointer-events: none; 1209} 1210 1211nav{ 1212 height: 52px; 1213 width: 100vw; 1214 max-width: 100%; 1215 z-index: 15; 1216 background-color: #fff; 1217 position: relative; 1218 display: flex; 1219 justify-content: flex-start; 1220 flex-direction: column; 1221 font-family: var(--primary-font), var(--secondary-font), "Noto Sans", sans-serif; 1222 font-weight: 400; 1223 font-style: normal; 1224 transition: box-shadow 0.7s, background-color 0.3s, filter 0.3s; 1225 filter: invert(0); 1226 padding: 0.9em 0; 1227} 1228 1229.quicknav .sticky{ 1230 position: sticky; 1231 top: -5.1em; 1232 overflow: hidden; 1233 height: calc(100vh + 6em); 1234} 1235 1236.top nav{ 1237 background-color: transparent; 1238 filter: invert(1); 1239 box-shadow: 0 1px 0 0 #0000; 1240} 1241 1242nav:hover{ 1243 background-color: #fff; 1244 filter: invert(0); 1245} 1246 1247#header .menuitem.search, 1248#header .menuitem.cart, 1249#header .menuitem.account{ 1250 display: none; 1251} 1252 1253.top .sitenav--utility-wrap .menuitem.cart > button > div{ 1254 filter: invert(1); 1255} 1256 1257.top nav:hover .sitenav--utility-wrap .menuitem.cart > button > div{ 1258 filter: invert(0); 1259} 1260 1261nav.active{ 1262 filter: invert(0); 1263} 1264.sitenav--dim-wrapper{ 1265 background-color: #000; 1266 opacity: 0; 1267 visibility:hidden; 1268 display: block; 1269 width: 100%; 1270 height: calc(100vh); 1271 top: 0; 1272 position: fixed; 1273 z-index: 12; 1274 cursor:pointer; 1275 transition: visibility .4s cubic-bezier(0.6,0,0.4,1) .1s, opacity .4s cubic-bezier(0.6,0,0.4,1) .1s; 1276 pointer-events: all; 1277} 1278.sitenav--dim-wrapper.show{ 1279 opacity: 0.5; 1280 visibility:visible; 1281 transition: visibility .4s cubic-bezier(0.6,0,0.4,1) .1s, opacity .4s cubic-bezier(0.6,0,0.4,1) .1s; 1282} 1283 1284.sitenav--inner-wrapper{ 1285 display: flex; 1286 justify-content: space-between; 1287 align-items: center; 1288 height: 100%; 1289 padding-right: 4px; 1290 padding-top: 0.7em; 1291 box-sizing: border-box; 1292} 1293 1294.sitenav--utility-space{ 1295 width:100%; 1296 height:100%; 1297} 1298.sitenav--inner-wrapper .sitenav--utility-wrap{ 1299 display: flex; 1300 flex-direction: row; 1301 justify-content: center; 1302 align-items: center; 1303 height: 100%; 1304} 1305.sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu{ 1306 display: flex; 1307 flex-direction: row; 1308 justify-content: center; 1309 align-items: center; 1310 height: 100%; 1311} 1312.sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem, 1313.sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem:last-child{ 1314 margin-right:0px; 1315} 1316.sitenav--inner-wrapper .logo{ 1317 height: 14px; 1318 width: 85px; 1319 cursor: pointer; 1320} 1321 1322.sitenav--inner-wrapper .logo img{ 1323 width: auto; 1324 height: 100%; 1325} 1326 1327.sitenav--menu-wrap .logo, 1328.sitenav--menu-wrap .logo img{ 1329 display: none; 1330} 1331 1332.sitenav--utility-wrap .account .submenu{ 1333 display: none; 1334} 1335.sitenav--menu-wrap{ 1336 display: flex; 1337 flex-direction: column; 1338 position: absolute; 1339 left:0; 1340 top: 0; 1341 height: 100vh; 1342 width: calc(100% - 50px); 1343 background: #000; 1344 z-index: 20; 1345 max-height: 100vh; 1346 overflow-y: auto; 1347 overflow-x: hidden; 1348 padding: 20px 25px; 1349 transition: transform 0.3s ease-out; 1350 transform: translateX(100%); 1351} 1352.sitenav--menu-wrap.active{ 1353 right: 0; 1354 transform: translateX(0); 1355 pointer-events: all; 1356} 1357.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu{ 1358 width: 100%; 1359 display: flex; 1360 flex-direction: column; 1361 padding-top: 24px; 1362} 1363 1364.sitenav--inner-wrapper ul li{ 1365 list-style-type: none; 1366 position: relative; 1367 font-weight: 250; 1368 cursor:pointer; 1369} 1370.sitenav--inner-wrapper ul li a{ 1371 color: #fff; 1372 letter-spacing:-0.01rem; 1373} 1374.sitenav--inner-wrapper ul .menuitem{ 1375 list-style-type: none; 1376 position: static; 1377 font-weight: 300; 1378 height: 40px; 1379 display: flex;
1380 align-items: center; 1381 top: 0.8em; 1382} 1383.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu .menuitem:first-child{ 1384 padding-top:0px; 1385} 1386.sitenav--inner-wrapper ul .menuitem .button, 1387.sitenav--utility-wrap ul button{ 1388 background: transparent; 1389 color: #000; 1390 border: none; 1391 cursor: pointer; 1392} 1393 1394.sitenav--menu-wrap .menuitem button{ 1395 border: none; 1396 background: #000; 1397 color: #fff; 1398 cursor: pointer; 1399 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 1400 font-weight: 400; 1401 letter-spacing:-0.01rem; 1402 white-space: nowrap; 1403 text-decoration: none; 1404 padding-bottom: 0px; 1405 font-size: 1.3em; 1406} 1407 1408.sitenav--inner-wrapper .menuitem .submenu{ 1409 display: flex; 1410 flex-direction: column; 1411 position: absolute; 1412 right: calc(-200% - 50px); 1413 top: 0; 1414 height: auto; 1415 z-index: 10; 1416 background: #000; 1417 cursor: auto; 1418 padding: 38px 0 20px; 1419 box-sizing: border-box; 1420 width: 100%; 1421 transition: right 0.3s ease-out; 1422 color: #fff; 1423 font-size: 1.3em; 1424} 1425 1426.sitenav--inner-wrapper .menuitem .submenu i{ 1427 position: absolute; 1428 width: 100%; 1429 height: 1px; 1430 background: #0002; 1431 left: 0; 1432 transform: translateY(1px); 1433} 1434 1435.sitenav--inner-wrapper .menuitem.active .submenu{ 1436 right: calc(-100% - 1.5em); 1437 transition: all 0.3s ease-out; 1438} 1439.sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu{ 1440 position: relative; 1441 right: 0; 1442 transition: all 0.3s ease-out; 1443} 1444.sitenav--inner-wrapper .sitenav--menu-wrap .menuitem::after, 1445.sitenav--inner-wrapper .submenu .pages li::after{ 1446 content: ""; 1447 background-image: url(https://codex.online/asset/8624ca89-e54b-41a6-912e-49a26e97ac7e); 1448 width: 13px; 1449 min-height: 17px; 1450 background-size: contain; 1451 background-repeat: no-repeat; 1452 position: absolute; 1453 left: calc(100% - 25px); 1454} 1455 1456.sitenav--inner-wrapper .sitenav--menu-wrap .menuitem::after{ 1457 transform: translateX(1.3em); 1458} 1459 1460.sitenav--inner-wrapper .submenu a{ 1461 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 1462 font-weight: 400; 1463 white-space: nowrap; 1464 text-decoration: none; 1465 color: #fff; 1466 display:inline-block; 1467 padding-bottom: 26px; 1468} 1469.sitenav--inner-wrapper .header-mobile{ 1470 color: #999; 1471 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 1472 display:none; 1473 font-style: normal; 1474 font-weight: 400; 1475 padding-bottom:1.63rem; 1476 font-size: 1em; 1477 text-align: left; 1478} 1479.sitenav--inner-wrapper .cart .header-mobile, 1480.sitenav--inner-wrapper .search .header-mobile, 1481.sitenav--inner-wrapper .account .header-mobile{ 1482 display:none; 1483} 1484 1485.sitenav--inner-wrapper .submenu .sub-section{ 1486 padding-bottom: 1em; 1487} 1488 1489.sitenav--inner-wrapper .submenu .header-sub::after{ 1490 content: ""; 1491 background-image: url(https://codex.online/asset/8624ca89-e54b-41a6-912e-49a26e97ac7e); 1492 width: 13px; 1493 min-height: 17px; 1494 background-size: contain; 1495 background-repeat: no-repeat; 1496 position: absolute; 1497 left: calc(100% - 25px); 1498 top: 0; 1499 transform: rotate(0deg); 1500 transition: transform 0.4s; 1501} 1502.sitenav--inner-wrapper .submenu .header-sub.active::after{ 1503 transform:rotate(90deg); 1504} 1505.sitenav--inner-wrapper .submenu .header-sub.active a{ 1506 font-weight:500; 1507} 1508.sitenav--inner-wrapper .submenu .header-sub .pages li, 1509.sitenav--inner-wrapper .submenu .header-sub.active .pages li{ 1510 padding-left: 23px; 1511 font-weight: 250; 1512} 1513.sitenav--inner-wrapper .submenu .header-sub .pages li:after{ 1514 background-image:none; 1515} 1516 1517.sitenav--inner-wrapper .submenu .header-sub .pages{ 1518 height:0; 1519 max-height: 0; 1520 overflow: hidden; 1521 position:relative; 1522 padding-left:23px; 1523} 1524 1525.sitenav--inner-wrapper .submenu .header-sub .pages .sub{ 1526 cursor: default; 1527} 1528 1529.sitenav--inner-wrapper .submenu .header-sub .pages .sub span{ 1530 color: #fff; 1531 letter-spacing: -0.01em; 1532 font-size: 0.6em; 1533 margin: 0 0 0.5em; 1534 display: block; 1535} 1536 1537.sitenav--inner-wrapper .submenu .header-sub.active .pages{ 1538 max-height: 500px; 1539 height: 100%; 1540 position:relative; 1541 overflow:hidden; 1542 padding-left:23px; 1543 transition: max-height 1s,padding 1s; 1544} 1545.sitenav--inner-wrapper .submenu .header-sub.active .pages a{ 1546 font-weight: 400; 1547} 1548.sitenav--inner-wrapper .menuitem .submenu .subsub-pages{ 1549 display: flex; 1550 flex-direction: column; 1551 position: absolute; 1552 right: calc(-200% - 50px); 1553 top: -87px; 1554 height: auto; 1555 z-index: 10; 1556 background: #000; 1557 cursor: auto; 1558 padding: 38px 0 20px; 1559 box-sizing: border-box; 1560 width: 100%; 1561 transition: right 0.3s ease-out; 1562} 1563.sitenav--inner-wrapper .menuitem.active .submenu .subsub-pages{ 1564 right: calc(-100% - 25px); 1565 transition: all 0.3s ease-out; 1566} 1567 1568.sitenav--utility-wrap img{
1569 width: 20px; 1570} 1571 1572.sitenav--utility-wrap .menuitem > button{ 1573 padding:0 20px; 1574 cursor: pointer; 1575} 1576 1577.sitenav--utility-wrap .menuitem.account button{ 1578 background-image: url('https://codex.online/asset/bb3b9527-fd21-4d2e-9034-1e98fb3d44b6'); 1579 width: 100%; 1580 height: 100%; 1581 background-size: 0.6965rem 0.8125rem; 1582 background-repeat: no-repeat; 1583 background-position: center; 1584 cursor: pointer; 1585} 1586 1587.sitenav--utility-wrap .menuitem.cart > button{ 1588 background-image: url(/asset/763175ca-b021-41ab-b983-59fd65437d87); 1589 width: 100%; 1590 height: 100%; 1591 background-repeat: no-repeat; 1592 background-position: center; 1593 cursor: pointer; 1594 background-size: 1.8em; 1595 background-position: 50% 44%; 1596 position: relative; 1597} 1598 1599.sitenav--utility-wrap .menuitem.cart > button > div{ 1600 position: absolute; 1601 width: 1.1em; 1602 height: 1.1em; 1603 background: #0066FF; 1604 border-radius: 50%; 1605 color: #fff; 1606 top: 0.4em; 1607 left: 1.4em; 1608 display: none; 1609 align-items: center; 1610 justify-content: center; 1611 transition: filter 0.3s; 1612} 1613 1614.sitenav--utility-wrap .menuitem.cart > button > div > i{ 1615 font-style: normal; 1616 font-size: 0.7em; 1617 position: absolute; 1618 top: 0.25em; 1619 font-weight: 500; 1620} 1621 1622.sitenav--utility-wrap .menuitem.search button{ 1623 background-image: url('https://codex.online/asset/a7626059-ecef-4ef1-98b4-b8b27d5b55f9'); 1624 width: 100%; 1625 height: 100%; 1626 background-size: 1.0625rem 1.0625rem; 1627 background-repeat: no-repeat; 1628 background-position: center; 1629 cursor: pointer; 1630 animation-name: fadeSearchClose; 1631 animation-duration: 0.7s; 1632} 1633.sitenav--utility-wrap .menuitem.search button.active{ 1634 opacity: 0.2; 1635} 1636@keyframes fadeSearchClose { 1637 0% {opacity:0} 1638 100% {opacity:1} 1639} 1640.sitenav--utility-wrap .menuitem.burger{ 1641 display: flex; 1642 cursor: pointer; 1643} 1644.sitenav--utility-wrap .menuitem.burger button{ 1645 background-image: url('https://codex.online/asset/5aed46ee-b7e8-4b6d-b8a8-bb176c2d1d2a'); 1646 width: 100%; 1647 height: 100%; 1648 background-size: 1.9em; 1649 background-repeat: no-repeat; 1650 background-position: center; 1651 cursor: pointer; 1652 background-color: transparent; 1653} 1654.sitenav-mobile-wrap{ 1655 padding-bottom: 30px; 1656} 1657.sitenav--utility-wrap .sitenav--menu .menuitem.search{ 1658 position: unset; 1659 margin-top: 0; 1660} 1661 1662.sitenav--inner-wrapper #search-bar{ 1663 visibility: hidden; 1664 display: block; 1665 overflow: hidden; 1666 position: absolute; 1667 top: 4em; 1668 right:1px; 1669 padding: 0; 1670 background: #fff; 1671 border-radius: 0px 0px 6px 6px; 1672 width: 100%; 1673 max-width: 100vw; 1674 box-sizing: border-box; 1675 border-top: 1px solid #C4C3C3; 1676} 1677.sitenav--inner-wrapper .search-bar .suggested-searches .suggested-header{ 1678 padding: 0 4.1rem 23px; 1679 font-size: 15px; 1680} 1681.sitenav--inner-wrapper .search-bar .suggested-searches, 1682.sitenav--inner-wrapper .search-bar .suggested-searches p{ 1683 display: none; 1684 font-size: 0.8125rem; 1685 font-style: normal; 1686 font-weight: 500; 1687 line-height: normal; 1688 letter-spacing: -0.03rem; 1689 padding-bottom:1.94rem; 1690} 1691.sitenav--inner-wrapper .search-bar .suggested-searches p{ 1692 display:block; 1693} 1694.sitenav--inner-wrapper .search-bar.active{ 1695 display: block; 1696} 1697.sitenav--inner-wrapper .search-bar input{ 1698 box-sizing: border-box; 1699 background: #000; 1700 color: #fff; 1701 font-family: var(--primary-font); 1702 font-size: 1.25rem; 1703 font-weight: 500; 1704 width: calc(100% - 3.2rem); 1705 border: none; 1706 border-radius: 0.375rem; 1707 height: 47px; 1708 background-image: url(https://codex.online/asset/917cd3da-02b7-44d5-b879-aebd025fd1c2); 1709 background-position: 13px 50%; 1710 background-repeat: no-repeat; 1711 background-size: 20px; 1712 padding-left: 40px; 1713 margin: 1.94rem 1.6rem 30px; 1714 letter-spacing: -0.03em; 1715} 1716.sitenav--inner-wrapper .search-bar input:focus{ 1717 border: none; 1718 outline: none; 1719} 1720.sitenav--menu-wrap .close{ 1721 width: 2.3em; 1722 height: 2.3em; 1723 position: absolute; 1724 right: 0.5em; 1725 z-index: 10; 1726 cursor: pointer; 1727 display: block; 1728 background: url(/asset/5787723f-9262-4ba5-9167-61a6e686106c); 1729 background-size: cover; 1730 top: 1.4em; 1731 background-color: #fff; 1732 filter: invert(1); 1733} 1734.sitenav--menu-wrap .arrow{ 1735 display: none; 1736 width: 8px; 1737 height: 13px; 1738 position: absolute; 1739 left:25px; 1740 z-index: 11; 1741 cursor: pointer;
1742 align-items:center; 1743 top: 2.5em; 1744 border: none; 1745} 1746.sitenav--menu-wrap .arrow .menu-back{ 1747 padding-left:0.81rem; 1748 font-size: 0.9375rem; 1749 font-weight: 400; 1750 letter-spacing:-0.01rem; 1751 color:#FFF; 1752} 1753.sitenav--inner-wrapper .sitenav--utility-wrap .menuitem.account .submenu { 1754 background: #fff; 1755 color: #000; 1756 display: flex; 1757 flex-direction: row; 1758 position: absolute; 1759 top: 52px; 1760 width: auto; 1761 border-top: 1px solid #C4C3C3; 1762 border-bottom-left-radius: 10px; 1763 border-bottom-right-radius: 10px; 1764 right: 0; 1765 left: auto; 1766 padding:0 38px; 1767 transition: height 0.3s ease; 1768 visibility: hidden; 1769 overflow: hidden; 1770 text-align: left; 1771} 1772.sitenav--inner-wrapper .menuitem.account .submenu a { 1773 display: inline-block; 1774 font-size: 13px; 1775 font-weight: 250; 1776 line-height: 0; 1777 white-space: nowrap; 1778 text-decoration: none; 1779 color: #000; 1780 text-align: left; 1781 padding-bottom: 23px; 1782} 1783.sitenav--inner-wrapper .menuitem.account .submenu .pages li::after { 1784 content: ""; 1785 background-image: none; 1786} 1787.sitenav--inner-wrapper .menuitem.account .submenu .header{ 1788 margin-top: 15px; 1789 margin-bottom: 18px; 1790} 1791 1792.sitenav--inner-wrapper .submenu #search-results{ 1793 max-height: clamp(0vh, 53em, 60vh); 1794 overflow-y: auto; 1795 overscroll-behavior: contain; 1796} 1797 1798.sitenav--inner-wrapper .submenu #search-results section { 1799 display: flex; 1800 width: calc(100% - 7.2em); 1801 align-items: center; 1802 padding: 0.5rem 0rem; 1803 margin: 0rem 0 0 4rem; 1804} 1805 1806.sitenav--inner-wrapper .submenu #search-results section:hover { 1807 background: #ddd; 1808} 1809 1810.sitenav--inner-wrapper .submenu #search-results a{ 1811 color: #000; 1812 pointer-events: all; 1813 width: calc(100% - 5em); 1814 white-space: unset; 1815 line-height: normal; 1816 padding: 0; 1817 display: flex;
1818 align-items: center; 1819} 1820 1821.sitenav--inner-wrapper .submenu #search-results a > div{ 1822 width: calc(100% - 7em); 1823} 1824 1825.sitenav--inner-wrapper .submenu #search-results h2{ 1826 font-size: 1em; 1827 font-weight: 500; 1828 padding-left: 1em; 1829 display: inline-block; 1830 height: auto; 1831 line-height: 1em; 1832 width: 100%; 1833 letter-spacing: -0.03em; 1834} 1835 1836.sitenav--inner-wrapper .submenu #search-results h3{ 1837 font-size: 1em; 1838 font-weight: 300; 1839 padding: 1em 1em 0 1em; 1840 display: inline-block; 1841 height: auto; 1842 line-height: 1em; 1843 width: 100%; 1844 letter-spacing: -0.03em; 1845} 1846 1847.sitenav--inner-wrapper .submenu #search-results h3:empty{ 1848 display: none; 1849} 1850 1851.sitenav--inner-wrapper .submenu #search-results i{ 1852 width: 7em; 1853 display: inline-block; 1854 background-size: cover; 1855 background-repeat: no-repeat; 1856 height: 5em; 1857 border-radius: 0.3em; 1858 border: 1px solid #ccc; 1859 background-position: center; 1860} 1861 1862.sitenav--inner-wrapper .submenu #search-results i.default{ 1863 background-image: url(/asset/70207724-1058-4393-a008-57a90c32bd0f-320--70); 1864 background-size: 90%; 1865} 1866 1867.loggedout .sitenav--utility-wrap .logout{ 1868 display:none !important; 1869} 1870.sitenav--utility-wrap .log-in{ 1871 display:none !important; 1872} 1873.loggedout .sitenav--utility-wrap .log-in{ 1874 display:inline-block !important; 1875} 1876 1877.quicknav nav { 1878 border-bottom:1px solid rgba(0, 0, 0, 0.2); 1879 pointer-events: all; 1880} 1881 1882.quick-nav{ 1883 height:auto; 1884 width:100%; 1885 max-width:100vw; 1886 background:var(--color-white); 1887 position: relative; 1888 z-index: 10 !important; 1889} 1890 1891.quick-nav--header{ 1892 font-family: var(--primary-font); 1893 font-size: 0.875rem; 1894 font-weight: 500; 1895 line-height: normal; 1896 letter-spacing: -0.02625rem; 1897 text-align: left; 1898 background:var(--color-white); 1899 height:34px; 1900 color:#000; 1901 display:flex;
1902 align-items: center; 1903 padding-left: 1.125rem; 1904 padding-right: 1.125rem; 1905} 1906.quick-nav--hr{ 1907 height:1px; 1908 width:100%; 1909 border-bottom:1px solid rgba(0, 0, 0, 0.2); 1910} 1911.quick-nav--links{ 1912 font-family: var(--primary-font); 1913 font-size: 12px; 1914 font-weight: 400; 1915 line-height: 15px; 1916 letter-spacing: -0.12px; 1917 height:34px; 1918 width:100%; 1919 display:flex; 1920 align-items: center; 1921 padding-left: 1.125rem; 1922 padding-right: 1.125rem; 1923 position:relative; 1924} 1925.quick-nav ul{ 1926 width:100%; 1927 z-index:1 !important; 1928 background:var(--color-white); 1929 display:flex; 1930 flex-direction:row; 1931 padding: 0; 1932 position: absolute; 1933} 1934.quick-nav li{ 1935 z-index:1; 1936 list-style-type: none; 1937 font-family: Lato; 1938 font-size: 12px; 1939 font-weight: 400; 1940 line-height: 14px; 1941 text-align: left; 1942 color:#000; 1943 margin: 0; 1944 padding-right: 20px; 1945 width: auto; 1946 white-space: nowrap; 1947} 1948.quick-nav li a{ 1949 color:#000; 1950 text-decoration:none; 1951 letter-spacing: -0.02em; 1952 display: inline-block; 1953 font-weight:400; 1954} 1955.quick-nav li a:hover, 1956.quick-nav li a.active{ 1957 outline: none; 1958 text-decoration: none; 1959 letter-spacing: -0.02em; 1960} 1961a, a:active, a:focus { 1962 outline: none; 1963} 1964.quick-nav li a:before { 1965 display: block; 1966 content: attr(data-title); 1967 height: 0; 1968 visibility: hidden; 1969 overflow: hidden; 1970 user-select: none; 1971 pointer-events: none; 1972 font-weight: 500; 1973 letter-spacing: -0.02em; 1974} 1975.quick-nav--menu-bar{ 1976 background: #000000; 1977 position: absolute; 1978 height: 2px; 1979 width: 0; 1980 bottom: 0; 1981 z-index: 2; 1982 -webkit-transition: left 1s ease, width 1s ease; 1983 transition: left 1s ease, width 1s ease; 1984} 1985.quick-nav--mobile-arrows{ 1986 position: absolute; 1987 width: 100%; 1988 max-width: 100vw; 1989 height: 100%; 1990 left: 0; 1991 z-index: 2; 1992 pointer-events: none; 1993 display:block; 1994} 1995.quick-nav--prev,.quick-nav--next{ 1996 background-color:#fff; 1997 width:48px; 1998 height:100%; 1999 position:absolute; 2000 z-index:1; 2001 display: flex; 2002 justify-content: center; 2003 align-items: center; 2004 pointer-events: all; 2005} 2006.quick-nav--prev{ 2007 display:none; 2008 transform:rotate(180deg); 2009 left:0; 2010} 2011.quick-nav--next{ 2012 right:0; 2013} 2014 2015.quick-nav--prev img,.quick-nav--next img{ 2016 transform: scale(0.8); 2017} 2018 2019.quick-nav--header .label{ 2020 2021} 2022 2023.quick-nav .drop-menu{ 2024 display: flex; 2025 position: relative; 2026 cursor: pointer; 2027} 2028 2029.quick-nav .drop-menu .button{ 2030 background-image: url(/asset/f685455d-a500-4927-ae42-1af978ef4439); 2031 width: 1em; 2032 height: 1em; 2033 background-size: contain; 2034 background-repeat: no-repeat; 2035 background-position: center; 2036 margin-left: 0.7em; 2037 transform: translateY(1px) rotate(0deg); 2038 transition: transform 0.7s; 2039} 2040 2041.quick-nav .drop-menu.active .button{ 2042 transform: rotate(180deg); 2043} 2044 2045.quick-nav .drop-menu .dropdown{ 2046 position: absolute; 2047 background: #fff; 2048 z-index: 999; 2049 border: 1px solid #ccc; 2050 border-bottom-left-radius: 0.7em; 2051 border-bottom-right-radius: 0.7em; 2052 top: 1.8em; 2053 min-width: 100%; 2054 display: none; 2055 cursor: default; 2056} 2057 2058.quick-nav .drop-menu .dropdown a{ 2059 padding: 0.6em 2.2em; 2060 font-weight: 300; 2061 font-size: 15px; 2062 cursor: pointer; 2063 color: #000; 2064 transition: color 0.7s; 2065 display: block; 2066 white-space: nowrap; 2067 text-decoration: none; 2068} 2069 2070.quick-nav .drop-menu .dropdown a:first-of-type{ 2071 padding-top: 1.5em; 2072} 2073 2074.quick-nav .drop-menu .dropdown a:last-of-type{ 2075 padding-bottom: 1.5em; 2076} 2077 2078.quick-nav .drop-menu .dropdown a:hover { 2079 color: #777; 2080} 2081 2082.quick-nav .dropdown .bg{ 2083 position: fixed; 2084 top: 0; 2085 left: 0; 2086 width: 100%; 2087 height: 100vh; 2088 z-index: -1; 2089} 2090 2091/* hero image overrides */ 2092.hero-black.top #header{ 2093 filter: none; 2094} 2095 2096.hero-black.top nav { 2097 filter: invert(0); 2098} 2099 2100.hero-black.top .sitenav--utility-wrap .menuitem.cart > button > div{ 2101 filter: invert(0); 2102} 2103 2104 2105 2106@media screen and (min-width: 992px){ 2107 .quick-nav--header{ 2108 height:34px; 2109 font-size:0.875rem; 2110 } 2111 .quick-nav ul{ 2112 position: relative; 2113 } 2114 .quick-nav--links li{ 2115 font-size: 0.75rem; 2116 } 2117 .quick-nav--header, 2118 .quick-nav--links{ 2119 display:flex; 2120 padding-left: 5.75rem; 2121 padding-right: 2rem; 2122 position:unset; 2123 } 2124 .quick-nav--mobile-arrows, 2125 .quick-nav--prev,.quick-nav--next{ 2126 display:none !important; 2127 } 2128 2129 .sitenav--utility-wrap .menuitem.cart > button > div{ 2130 top: 0.8em; 2131 left: 2.4em; 2132 } 2133} 2134@media screen and (min-width: 1200px){ 2135 .quick-nav--header, 2136 .quick-nav--links{ 2137 padding-left: 5.75rem; 2138 } 2139 .quick-nav--mobile-arrows{ 2140 display:none !important; 2141 } 2142} 2143@media screen and (min-width: 1400px){ 2144 .quick-nav--header, 2145 .quick-nav--links{ 2146 max-width: var(--siteMaxWidth); 2147 margin: 0 auto; 2148 } 2149} 2150 2151@media only screen 2152 and (min-device-width: 320px) 2153 and (max-device-width: 480px) 2154 and (-webkit-min-device-pixel-ratio: 2) 2155 and (orientation: landscape), 2156 2157 (min-device-width: 320px) 2158 and (max-device-width: 568px) 2159 and (-webkit-min-device-pixel-ratio: 2) 2160 and (orientation: landscape), 2161 2162 (min-device-width: 375px) 2163 and (max-device-width: 667px) 2164 and (-webkit-min-device-pixel-ratio: 2) 2165 and (orientation: landscape), 2166 2167 (min-device-width: 414px) 2168 and (max-device-width: 736px) 2169 and (-webkit-min-device-pixel-ratio: 3) 2170 and (orientation: landscape), 2171 2172 (min-device-width: 375px) 2173 and (max-device-width: 812px) 2174 and (-webkit-min-device-pixel-ratio: 3) 2175 and (orientation: landscape) 2176 { 2177 .quick-nav--mobile-arrows{ 2178 display:none !important; 2179 } 2180} 2181 2182@media (max-width: 991.975px) { 2183 .sitenav-menu-wrap-container{ 2184 position: absolute; 2185 left: 0; 2186 top: 0; 2187 width: 100%; 2188 height: 100vh; 2189 pointer-events: none; 2190 overflow: hidden; 2191 } 2192 2193 .sitenav--inner-wrapper .search-bar input { 2194 margin: 0.84rem 1rem 0.6em; 2195 } 2196 2197 .sitenav--inner-wrapper .search-bar .suggested-searches .suggested-header { 2198 padding: 0 1.1rem 1em; 2199 font-size: 15px; 2200 } 2201 .sitenav--inner-wrapper .submenu #search-results section { 2202 width: calc(100% - 2.5em); 2203 padding: 0.5rem 0.5rem; 2204 margin: 0rem 0.5rem; 2205 } 2206 2207 .sitenav--inner-wrapper .submenu #search-results a { 2208 color: #000; 2209 pointer-events: all; 2210 width: 100%; 2211 padding: 0; 2212 flex-wrap: wrap; 2213 } 2214 2215 .sitenav--inner-wrapper .submenu #search-results a > div, 2216 .sitenav--inner-wrapper .submenu #search-results h2, 2217 .sitenav--inner-wrapper .submenu #search-results h3 { 2218 width: 100%; 2219 } 2220 2221 .sitenav--inner-wrapper .submenu #search-results h2, 2222 .sitenav--inner-wrapper .submenu #search-results h3 { 2223 padding: 1em 0 0 0; 2224 } 2225} 2226 2227@media (min-width: 992px) { 2228 nav{ 2229 height: 4em; 2230 width: auto; 2231 max-width: 100%; 2232 margin: 0 auto; 2233 padding: 0.2em 3.75rem 0; 2234 } 2235 .quicknav .sticky{ 2236 top: -4.2em; 2237 } 2238 2239 .sitenav-mobile-wrap{ 2240 display: none; 2241 } 2242 2243 .sitenav--inner-wrapper{ 2244 display: flex; 2245 flex-direction: row; 2246 justify-content: flex-start; 2247 align-items: center; 2248 height: 100%; 2249 width: 100%; 2250 box-sizing: border-box; 2251 max-width: var(--siteMaxWidth); 2252 margin: 0 auto; 2253 padding-right: 10px; 2254 position: relative; 2255 } 2256 .sitenav--inner-wrapper .logo{ 2257 height: 100%; 2258 width: 6rem; 2259 max-height: 18px; 2260 margin-right: 57px; 2261 cursor: pointer; 2262 } 2263 .sitenav--inner-wrapper .logo img{ 2264 width: auto; 2265 height: 100%; 2266 min-height: 18px; 2267 } 2268 2269 .sitenav--menu-wrap{ 2270 display: flex; 2271 right: 0; 2272 background: transparent; 2273 padding: 0; 2274 width: auto; 2275 overflow-y: unset; 2276 overflow-x: unset; 2277 transition: none; 2278 transform: translateX(0); 2279 position: relative; 2280 } 2281 .sitenav--menu-wrap.active{ 2282 transition: none; 2283 } 2284 2285 .sitenav--inner-wrapper .sitenav--menu-wrap, 2286 .sitenav--inner-wrapper .sitenav--utility-wrap{ 2287 height: 100%; 2288 } 2289 .sitenav--inner-wrapper .sitenav--utility-wrap{ 2290 display: flex; 2291 flex-direction: row; 2292 justify-content: flex-end; 2293 align-items: center; 2294 } 2295 .sitenav--inner-wrapper ul li{ 2296 cursor: pointer; 2297 } 2298 .sitenav--inner-wrapper .menu-list{ 2299 cursor: pointer; 2300 } 2301 .sitenav--inner-wrapper .sitenav--menu-wrap ul, 2302 .sitenav--inner-wrapper .sitenav--utility-wrap ul{ 2303 display: flex; 2304 flex-direction: row; 2305 justify-content: space-between; 2306 height: 100%; 2307 } 2308 .sitenav--inner-wrapper .sitenav--menu-wrap ul:first-child, 2309 .sitenav--inner-wrapper .sitenav--utility-wrap ul:first-child{ 2310 height: 100%; 2311 } 2312 .sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu{ 2313 flex-direction: row; 2314 padding-top: 0px; 2315 top: 0.2em; 2316 } 2317 .sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu .menuitem:last-child{ 2318 margin-right: 0; 2319 } 2320 .sitenav--inner-wrapper ul .menuitem{ 2321 position: relative; 2322 height: 100%; 2323 padding-top: 0;
2324 padding-bottom: 1.5em; 2325 } 2326 .sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem{ 2327 margin-right: 0; 2328 } 2329 .sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem:last-child, 2330 .sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem:nth-child(3){ 2331 margin-right: 0px; 2332 padding-right: 0; 2333 } 2334 .sitenav--inner-wrapper .sitenav--utility-wrap ul{ 2335 justify-content: flex-end; 2336 align-items: flex-start; 2337 } 2338 .sitenav--inner-wrapper .sitenav--utility-wrap ul .menuitem{ 2339 display: flex; 2340 justify-content: center; 2341 align-items: center; 2342 height: 100%; 2343 } 2344 .sitenav--inner-wrapper .sitenav--utility-wrap ul .pages{ 2345 flex-direction: column; 2346 gap: 0px; 2347 } 2348 .sitenav--inner-wrapper .sitenav--utility-wrap ul .menuitem.burger{ 2349 display: none; 2350 } 2351 .sitenav--utility-wrap{ 2352 flex-grow: 1; 2353 } 2354 .sitenav--utility-wrap .account{ 2355 display: flex; 2356 justify-content: flex-end; 2357 } 2358 2359 .sitenav--menu-wrap .menuitem button{ 2360 font-size: 15px; 2361 padding: 0 15px; 2362 font-weight: 300; 2363 line-height: 1rem; 2364 letter-spacing: -0.01em; 2365 background: transparent; 2366 color: #000; 2367 height: 100%; 2368 transition: color 0.2s; 2369 } 2370 .sitenav--menu-wrap .menuitem button:hover{ 2371 color: #777; 2372 } 2373 .sitenav--menu-wrap .menuitem.active button{ 2374 font-weight: 400; 2375 line-height: 1rem; 2376 letter-spacing: -0.01em; 2377 } 2378 .sitenav--inner-wrapper ul button, 2379 .sitenav--utility-wrap ul button{ 2380 background: transparent; 2381 color: #000; 2382 } 2383 .sitenav--utility-wrap .menuitem > button{ 2384 padding: 0 30px; 2385 } 2386 2387 .sitenav--inner-wrapper .sitenav--menu-wrap .nav-line{ 2388 position: absolute; 2389 height: 1px; 2390 width: 100%; 2391 top: -3px; 2392 left: 0; 2393 z-index: 5; 2394 } 2395 .sitenav--inner-wrapper .sitenav--utility-wrap .nav-line{ 2396 position: absolute; 2397 height: 1px; 2398 width: 100%; 2399 top: 74px; 2400 left: 0; 2401 z-index: 5; 2402 } 2403 2404 .sitenav--inner-wrapper .sitenav--menu-wrap .menuitem::after, 2405 .sitenav--inner-wrapper .submenu .pages li::after{ 2406 content: ""; 2407 background-image: none; 2408 } 2409 2410 .sitenav--inner-wrapper .menuitem .submenu{ 2411 background: #fff; 2412 display: flex; 2413 flex-direction: row; 2414 position: absolute; 2415 top: 63px; 2416 border-bottom-left-radius: 10px; 2417 border-bottom-right-radius: 10px; 2418 left: -24px; 2419 right: unset; 2420 width: auto; 2421 padding-left: 38px; 2422 padding-right: 38px; 2423 padding-top: 0; 2424 padding-bottom: 0; 2425 transition: height 0.3s ease; 2426 visibility: hidden; 2427 overflow: hidden; 2428 border-top: none; 2429 } 2430 .sitenav--inner-wrapper .menuitem.active .submenu{ 2431 right: auto; 2432 } 2433 .sitenav--inner-wrapper .menuitem .submenu .subsub-pages{ 2434 display: none; 2435 } 2436 .sitenav--inner-wrapper .header-mobile{ 2437 display: none; 2438 } 2439 2440 .sitenav--inner-wrapper .menuitem .submenu .pages{ 2441 height: auto; 2442 overflow: visible; 2443 max-height: 100%; 2444 } 2445 .sitenav--inner-wrapper .submenu .header{ 2446 font-weight: 400; 2447 margin-top: 18px; 2448 margin-bottom: 2em; 2449 visibility: hidden; 2450 padding-top: 0.4em; 2451 padding-right: 3em; 2452 } 2453 .sitenav--inner-wrapper .submenu .header:last-child{ 2454 width: auto; 2455 padding-right: 0; 2456 } 2457 .sitenav--inner-wrapper .submenu .sub-section{ 2458 display: inline-block; 2459 padding-bottom: 23px; 2460 font-weight: 500; 2461 font-size: 15px; 2462 line-height: 0; 2463 white-space: nowrap; 2464 text-decoration: none; 2465 color: #000; 2466 cursor: default; 2467 } 2468 .sitenav--inner-wrapper .submenu .sub-section:hover{ 2469 font-weight: 500 !important; 2470 } 2471 .sitenav--inner-wrapper .submenu .header-sub::after{ 2472 display: none; 2473 } 2474 .sitenav--inner-wrapper .submenu .header-sub .pages{ 2475 padding-left: 0px; 2476 } 2477 .sitenav--inner-wrapper .submenu .header-sub .pages li, 2478 .sitenav--inner-wrapper .submenu .header-sub.active .pages li{ 2479 padding-left: 0px; 2480 font-weight: 250; 2481 } 2482 .sitenav--inner-wrapper .menuitem .submenu .header:last-child .pages{ 2483 padding-right: 0px; 2484 } 2485 .sitenav--inner-wrapper .submenu .header-sub .pages .sub span{ 2486 color: #000; 2487 margin: 2.83em 0 -0.15em; 2488 } 2489 .sitenav--inner-wrapper .submenu .header-sub .pages .sub:first-of-type span{ 2490 margin: -0.17em 0 -0.15em; 2491 } 2492 .sitenav--inner-wrapper .submenu .pages li:last-child{ 2493 margin-bottom: 0px; 2494 } 2495 .sitenav--inner-wrapper ul .pages{ 2496 display: flex; 2497 flex-direction: column; 2498 justify-content: flex-start; 2499 } 2500 2501 .sitenav--inner-wrapper .submenu a{ 2502 display: inline-block; 2503 font-weight: 300; 2504 line-height: 0; 2505 white-space: nowrap; 2506 text-decoration: none; 2507 color: #000; 2508 text-align: left; 2509 padding-bottom: 1em; 2510 font-size: 15px; 2511 transition: color 0.2s; 2512 } 2513 .sitenav--inner-wrapper .submenu a:after{ 2514 display: block; 2515 content: attr(data-title); 2516 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 2517 height: 0; 2518 visibility: hidden; 2519 overflow: hidden; 2520 user-select: none; 2521 pointer-events: none; 2522 font-weight: 300; 2523 letter-spacing: -0.01rem; 2524 } 2525 .sitenav--inner-wrapper .submenu a:hover{ 2526 font-family: var(--primary-font), var(--secondary-font),"Noto Sans", sans-serif; 2527 color: #777; 2528 } 2529 2530 .sitenav--utility-wrap img{
2531 width: 20px; 2532 } 2533 .sitenav--utility-wrap .menuitem.account button{ 2534 width: 100%; 2535 height: 100%; 2536 background-size: 1.01794rem 1.1875rem; 2537 } 2538 .sitenav--utility-wrap .menuitem.cart > button{ 2539 width: 100%; 2540 height: 100%; 2541 background-size: 2.7em; 2542 background-position: 50% 44%; 2543 } 2544 .sitenav--utility-wrap .menuitem.search button{ 2545 width: 100%; 2546 height: 100%; 2547 background-size: 1.5625rem 1.5625rem; 2548 } 2549 .sitenav--utility-wrap .menuitem.burger button{ 2550 width: 100%; 2551 height: 100%; 2552 background-size: 1.10744rem 1.3125rem; 2553 } 2554 2555 .sitenav--inner-wrapper .sitenav--utility-wrap .sitenav--menu .menuitem.search{ 2556 position: unset; 2557 transition: height 0.3s ease; 2558 margin-top: 1.7em; 2559 } 2560 .sitenav--inner-wrapper .sitenav--utility-wrap .menuitem .submenu{ 2561 background: #fff; 2562 display: flex; 2563 flex-direction: row; 2564 position: absolute; 2565 top: 63px; 2566 border-top: 1px solid #C4C3C3; 2567 border-bottom-left-radius: 10px; 2568 border-bottom-right-radius: 10px; 2569 right: 0; 2570 left: auto; 2571 padding-left: 38px; 2572 padding-right: 38px; 2573 transition: height 0.3s ease; 2574 visibility: hidden; 2575 overflow: hidden; 2576 text-align: left; 2577 } 2578 .sitenav--inner-wrapper .sitenav--utility-wrap .menuitem.account .submenu{ 2579 top: 63px; 2580 } 2581 .sitenav--inner-wrapper .sitenav--utility-wrap .menuitem .submenu#search-bar, 2582 .sitenav--inner-wrapper #search-bar{ 2583 visibility: hidden; 2584 display: block; 2585 position: absolute; 2586 top: 63px; 2587 right: 1px; 2588 background: #fff; 2589 border-radius: 0px 0px 6px 6px; 2590 border-top: 1px solid #C4C3C3; 2591 } 2592 .sitenav--inner-wrapper .sitenav--utility-wrap .menuitem.search.active .submenu.search-bar{ 2593 display: block; 2594 } 2595 2596 .quicknav #content{ 2597 top: 0px; 2598 padding-top: 8.6em; 2599 } 2600 .quicknav.hidequicknavlinks #content{ 2601 padding-top: 6.4em; 2602 } 2603} 2604 2605.totop { 2606 position: fixed; 2607 z-index: 10; 2608 right: 1.125rem; 2609 bottom: 34px; 2610 display: flex; 2611 justify-content: center; 2612 align-items: center; 2613 opacity: 0; 2614 width: 1.2rem; 2615 height: 1.2rem; 2616 transform: rotate(180deg); 2617 border: solid 1px #8a8a8a; 2618 background: rgba(0,0,0,0.5); 2619 border-radius: 0.2em; 2620 padding: 0.5em; 2621 margin: 0; 2622 text-decoration: none; 2623 pointer-events: all; 2624 cursor: pointer; 2625} 2626.totop img { 2627 width: 1.2em; 2628 height: 1.2em; 2629} 2630 2631@media screen and (min-width: 1200px){ 2632 .totop img { 2633 width: 1em; 2634 height: 1em; 2635 } 2636} 2637 2638@media screen and (max-width: 991.995px){ 2639 .sitenav--inner-wrapper .sitenav--menu-wrap .sitenav--menu { 2640 padding: 1.5em; 2641 width: calc(100% - 1.6em); 2642 margin: 1.9em 0 0 -1.6em; 2643 } 2644 2645 .sitenav--dim-wrapper.show { 2646 opacity: 1; 2647 background: #fff; 2648 } 2649 2650 .sitenav--menu-wrap .menuitem button { 2651 background: transparent; 2652 } 2653 2654 .sitenav--menu-wrap .logo{ 2655 display: block; 2656 filter: invert(1); 2657 top: 1.2em; 2658 position: relative; 2659 left: -0.4em; 2660 } 2661} 2662</style></div> 2663 <div id="quicknav"></div> 2664 <div id="hero"></div> 2665 <div id="content"></div> 2666 <div id="category"><div class="b-offwhite"> 2667 <div class="outer"> 2668 <div class="collection"> 2669 <h1 class="collection-title">CFexpress 4.0 Type A</h1> 2670 <div class="collection-description"></div> 2671 <div class="products"> 2672 2673 2674 <div class="product"> 2675 <div class="product-description" data-custom-field-type="html" data-custom-field-group="Product 1"><p><meta charset="utf-8"><meta charset="utf-8"><span></span><span></span><span>The <strong>CFexpress 4.0 Type A Excel</strong> range supports VPG400.</span></p></div> 2676 <div class="variants"> 2677 2678 2679 <div class="variant sale " data-id="gid://shopify/ProductVariant/58588064186713"> 2680 <a class="link" data-custom-field-type="href" data-custom-field-group="Product 1" href="https://codex.online/us/products/cfexpress-type-a-excel#256GB"> 2681 <div class="image-frame"> 2682 <img class="image" data-custom-field-type="asset" data-custom-field-group="Product 1" src="https://cdn.shopify.com/s/files/1/1031/7188/3353/files/TypeAExcel256GB_245991a5-3110-4e99-9ef7-81ee8e36b9a1.jpg?v=1787654395"> 2683 </div> 2684 <div class="title-frame">
2685 <span class="title-product" data-custom-field-group="Product 1">CFexpress 4.0 Type A Excel</span> 2686 <span class="title-variant" data-custom-field-group="Product 1">256GB</span> 2687 </div> 2688 </a> 2689 <div class="price-row"> 2690 <button class="addtocart black">ADD TO CART</button> 2691 <button class="enquire">ENQUIRE</button> 2692 <div class="price-frame"><span class="price">$329.99</span></div> 2693 <div class="stock-label preorder">Out of stock<span>Available to pre-order</span></div> 2694 </div> 2695 </div><div class="variant sale " data-id="gid://shopify/ProductVariant/58588064088409"> 2696 <a class="link" data-custom-field-type="href" data-custom-field-group="Product 1" href="https://codex.online/us/products/cfexpress-type-a-excel#512GB"> 2697 <div class="image-frame"> 2698 <img class="image" data-custom-field-type="asset" data-custom-field-group="Product 1" src="https://cdn.shopify.com/s/files/1/1031/7188/3353/files/TypeAExcel512GB_10128c4a-4420-4233-b507-87d22fa48ade.jpg?v=1787654414"> 2699 </div> 2700 <div class="title-frame"> 2701 <span class="title-product" data-custom-field-group="Product 1">CFexpress 4.0 Type A Excel</span> 2702 <span class="title-variant" data-custom-field-group="Product 1">512GB</span> 2703 </div> 2704 </a> 2705 <div class="price-row"> 2706 <button class="addtocart black">ADD TO CART</button> 2707 <button class="enquire">ENQUIRE</button> 2708 <div class="price-frame"><span class="price">$474.99</span></div> 2709 <div class="stock-label preorder">Out of stock<span>Available to pre-order</span></div> 2710 </div> 2711 </div><div class="variant sale " data-id="gid://shopify/ProductVariant/58588064252249"> 2712 <a class="link" data-custom-field-type="href" data-custom-field-group="Product 1" href="https://codex.online/us/products/cfexpress-type-a-excel#1TB"> 2713 <div class="image-frame"> 2714 <img class="image" data-custom-field-type="asset" data-custom-field-group="Product 1" src="https://cdn.shopify.com/s/files/1/1031/7188/3353/files/TypeAExcel1TB_37c385e4-b6d4-45f6-83ad-4e84f405a9dd.jpg?v=1787654417"> 2715 </div> 2716 <div class="title-frame"> 2717 <span class="title-product" data-custom-field-group="Product 1">CFexpress 4.0 Type A Excel</span> 2718 <span class="title-variant" data-custom-field-group="Product 1">1TB</span> 2719 </div> 2720 </a> 2721 <div class="price-row"> 2722 <button class="addtocart black">ADD TO CART</button> 2723 <button class="enquire">ENQUIRE</button> 2724 <div class="price-frame"><span class="price">$734.99</span></div> 2725 <div class="stock-label preorder">Out of stock<span>Available to pre-order</span></div> 2726 </div> 2727 </div></div> 2728 </div><div class="product"> 2729 <div class="product-description" data-custom-field-type="html" data-custom-field-group="Product 1"><p><meta charset="utf-8"><meta charset="utf-8"><span></span><span></span><span>The <strong>CFexpress 4.0 Type A Elite</strong> range supports VPG400 and VPG800 with added endurance.</span></p></div> 2730 <div class="variants"> 2731 2732 2733 <div class="variant sale " data-id="gid://shopify/ProductVariant/59094772973913"> 2734 <a class="link" data-custom-field-type="href" data-custom-field-group="Product 1" href="https://codex.online/us/products/cfexpress-type-a-elite#256GB"> 2735 <div class="image-frame"> 2736 <img class="image" data-custom-field-type="asset" data-custom-field-group="Product 1" src="https://cdn.shopify.com/s/files/1/1031/7188/3353/files/TypeAElite256GB.jpg?v=1787654693"> 2737 </div> 2738 <div class="title-frame">
2739 <span class="title-product" data-custom-field-group="Product 1">CFexpress 4.0 Type A Elite</span> 2740 <span class="title-variant" data-custom-field-group="Product 1">256GB</span> 2741 </div> 2742 </a> 2743 <div class="price-row"> 2744 <button class="addtocart black">ADD TO CART</button> 2745 <button class="enquire">ENQUIRE</button> 2746 <div class="price-frame"><span class="price">$369.99</span></div> 2747 <div class="stock-label preorder">Out of stock<span>Available to pre-order</span></div> 2748 </div> 2749 </div><div class="variant sale " data-id="gid://shopify/ProductVariant/58588063957337"> 2750 <a class="link" data-custom-field-type="href" data-custom-field-group="Product 1" href="https://codex.online/us/products/cfexpress-type-a-elite#512GB"> 2751 <div class="image-frame"> 2752 <img class="image" data-custom-field-type="asset" data-custom-field-group="Product 1" src="https://cdn.shopify.com/s/files/1/1031/7188/3353/files/TypeAElite512GB.jpg?v=1787654695"> 2753 </div> 2754 <div class="title-frame"> 2755 <span class="title-product" data-custom-field-group="Product 1">CFexpress 4.0 Type A Elite</span> 2756 <span class="title-variant" data-custom-field-group="Product 1">512GB</span> 2757 </div> 2758 </a> 2759 <div class="price-row"> 2760 <button class="addtocart black">ADD TO CART</button> 2761 <button class="enquire">ENQUIRE</button> 2762 <div class="price-frame"><span class="price">$639.99</span></div> 2763 <div class="stock-label preorder">Out of stock<span>Available to pre-order</span></div> 2764 </div> 2765 </div><div class="variant sale " data-id="gid://shopify/ProductVariant/58588064022873"> 2766 <a class="link" data-custom-field-type="href" data-custom-field-group="Product 1" href="https://codex.online/us/products/cfexpress-type-a-elite#1TB"> 2767 <div class="image-frame"> 2768 <img class="image" data-custom-field-type="asset" data-custom-field-group="Product 1" src="https://cdn.shopify.com/s/files/1/1031/7188/3353/files/TypeAElite1TB.jpg?v=1787654698"> 2769 </div> 2770 <div class="title-frame"> 2771 <span class="title-product" data-custom-field-group="Product 1">CFexpress 4.0 Type A Elite</span> 2772 <span class="title-variant" data-custom-field-group="Product 1">1TB</span> 2773 </div> 2774 </a> 2775 <div class="price-row"> 2776 <button class="addtocart black">ADD TO CART</button> 2777 <button class="enquire">ENQUIRE</button> 2778 <div class="price-frame"><span class="price">$1,044.99</span></div> 2779 <div class="stock-label preorder">Out of stock<span>Available to pre-order</span></div> 2780 </div> 2781 </div></div> 2782 </div></div> 2783 </div> 2784 </div> 2785</div> 2786 2787<div style="display: none;" data-custom-field-name="Collection Name">cfexpress-type-a</div>
2788<script type="text/javascript">var app=(()=>{ 2789 var init=()=>{ 2790 $(()=>{ 2791 bindEvents(); 2792 }); 2793 }, 2794 bindEvents=()=>{ 2795 $("#category .addtocart").click(e=>{ 2796 var id=$(e.currentTarget).closest(".variant").data("id"); 2797 shop.addProduct(id); 2798 }); 2799 2800 $("#category .enquire").click(e=>{ 2801 var region = window.location.pathname.split("/")[1]; 2802 var context=$(e.currentTarget).closest(".variant")[0]; 2803 $(".title-frame",)[0]; 2804 document.location=`https://codex.online/${region}/lets-talk${context.classList.contains("ARRI") || isArri? "-arri" :""}?Message=Please send details on ${$(".title-frame",context)[0].innerText}`; 2805 }); 2806 2807 document.body.classList.add(window.location.pathname.split("/")[1]); 2808 } 2809 ; 2810 init(); 2811})(); 2812</script>
2812<style>#category{ 2813 letter-spacing: -0.03em; 2814} 2815 2816#category .outer{ 2817 max-width: var(--siteMaxWidth); 2818 margin: 0 auto; 2819 padding-left: 4em; 2820 padding-right: 4em; 2821} 2822 2823#category .collection{ 2824 padding: 2em 1.7em; 2825} 2826 2827#category h1{ 2828 font-size: 2.7em; 2829 margin-left: 0; 2830 padding-bottom: 0.5em; 2831} 2832 2833#category h2{ 2834 2835} 2836 2837#category .product{ 2838 margin-top: 2em; 2839 border-top: 1px solid #000; 2840 padding: 4.5em 0; 2841} 2842 2843#category .product:first-child{ 2844 border-top: none; 2845 margin-top: 0; 2846 padding: 0; 2847} 2848 2849#category .title{ 2850 2851} 2852 2853#category p{ 2854 margin-bottom: 1.5em; 2855 font-size: 1.4em; 2856 max-width: 31em; 2857} 2858 2859#category p strong{ 2860 font-weight: 500; 2861} 2862 2863 2864#category .variants{ 2865 display: flex; 2866 flex-wrap: wrap; 2867 column-gap: 3%; 2868 justify-content: flex-start; 2869} 2870 2871#category .variant{ 2872 width: 31.3%; 2873 position: relative; 2874 margin-bottom: 3em; 2875} 2876 2877#category .variant.sale .enquire{ 2878 display: none; 2879} 2880 2881 2882 2883#category .image-frame{ 2884 border: 1px solid #000; 2885 margin: 0; 2886 text-align: center; 2887 padding: 1em 0; 2888 background: #fff; 2889} 2890 2891#category .image{ 2892 background-color: #fff; 2893 width: calc(50% - 1px); 2894 margin: 0 auto; 2895 display: inline-block; 2896} 2897 2898#category .title-frame{ 2899 margin: 1em 0; 2900 font-size: 1.4em; 2901} 2902 2903#category .title-product{ 2904 font-weight: 500; 2905} 2906 2907#category .title-variant{ 2908 font-weight: 250; 2909} 2910 2911#category .stock-label{ 2912 margin-left: 2em; 2913 font-size: 1.1em; 2914 font-weight: 250; 2915} 2916 2917#category .stock-label:before { 2918 content: "\2022"; 2919 position: absolute; 2920 transform: translate(-0.35em, -0.32em); 2921 font-size: 2.3em; 2922} 2923 2924#category .stock-label.instock:before { 2925 color: #6FC300; 2926} 2927 2928#category .stock-label.outofstock:before{ 2929 color: #f00; 2930} 2931 2932#category .stock-label.preorder:before{ 2933 color: #FAC212; 2934} 2935 2936#category .stock-label span{ 2937 display:block; 2938} 2939 2940#category .addtocart{ 2941 display: none; 2942} 2943 2944#category .sale .addtocart{ 2945 display: block; 2946} 2947 2948 2949#category .variant.enquireonly .addtocart{ 2950 display: none; 2951} 2952 2953#category .price-row{ 2954 display: flex;
2955 align-items: center; 2956} 2957 2958#category .price-frame{ 2959 font-size: 1.4em; 2960 font-weight: 250; 2961 margin-left: 1em; 2962} 2963 2964#category .price > span{ 2965 display: none; 2966} 2967 2968.uk #category .price .GBP, 2969.us #category .price .USD, 2970.eu #category .price .EUR 2971{ 2972 display: inline; 2973} 2974 2975#category button{ 2976 border: 1px solid #000; 2977 padding: 0.8em 1em 0.8em 1em; 2978 font-family: 'Codec'; 2979 letter-spacing: 0.1em; 2980 min-width: 11em; 2981 cursor: pointer; 2982 color: #000; 2983 font-size: 0.85em; 2984 background: #fff; 2985} 2986 2987#category button.black{ 2988 background: #000; 2989 color: #fff; 2990} 2991 2992#category a{ 2993 text-decoration: none; 2994 color: #000; 2995} 2996 2997@media screen and (max-width: 991.955px) { 2998 #category .outer{ 2999 padding-left: 0; 3000 padding-right: 0; 3001 } 3002 3003 #category .collection{ 3004 padding: 9em 1em 5em; 3005 } 3006 3007 #category .variant { 3008 width: 48.5%; 3009 } 3010 3011 #category .title-frame{ 3012 font-size: 1.3em; 3013 } 3014 3015 #category .price-frame{ 3016 font-size: 1.3em; 3017 } 3018 3019 #category h1{ 3020 font-size: 1.8em; 3021 } 3022 3023 3024 #category h2{ 3025 3026 } 3027 3028 #category .price-row { 3029 flex-wrap: wrap; 3030 } 3031 3032 #category .stock-label { 3033 margin: 0.7em; 3034 width: 100%; 3035 } 3036} 3037 3038@media screen and (max-width: 767.955px) { 3039 #category .variant { 3040 width: 100%; 3041 } 3042 3043 3044} 3045 3046</style></div> 3047 <div id="panel3"></div> 3048 <div id="footer"><footer> 3049 <div class="inner"> 3050 <div class="panel"> 3051 <ul> 3052 <li><b>NEWSLETTER</b></li> 3053 <li></li> 3054 <li>Receive information about CODEX products and services. Your details will not be passed on to third parties.</li> 3055 <li><button class="button" onclick="return newsletter.showRegistration()">SUBSCRIBE</button></li> 3056 <li></li> 3057 <li></li> 3058 <li></li> 3059 <li><b>JOIN THE CONVERSATION</b></li> 3060 <li></li> 3061 <li> 3062 <ul class="social"> 3063 <a href="https://www.instagram.com/codexonline"><i class="instagram"></i></a> 3064 <a href="https://www.linkedin.com/company/627622"><i class="linkedin"></i></a> 3065 <a href="https://open.spotify.com/show/2xosctKgjcx9ijqXwg5Lh3?si=e49ba60bd60a441c&nd=1&dlsi=8bc7c7b6f3f14a6a"><i class="spotify"></i></a> 3066 </ul> 3067 </li> 3068 </ul> 3069 </div> 3070 <div class="panel"> 3071 <ul> 3072 <li><b>PRODUCT</b></li> 3073 <li></li> 3074 <li><b>CODEX Media & Readers</b></li> 3075 <li><a href="https://codex.online/us/products/cfexpress-type-a">CFexpress 4.0 Type A</a></li> 3076 <li><a href="https://codex.online/us/products/cfexpress-type-b">CFexpress 4.0 Type B</a></li> 3077 <li><a href="https://codex.online/us/products/cfexpress-type-b-reader">CFexpress Type B Reader 3078 <li></li> 3079 <li><b>ARRI Media & Readers</b></li> 3080 <li><a href="https://codex.online/us/products/arri-media">CompactDrive</a></li> 3081 <li><a href="https://codex.online/us/products/arri-media-readers">CompactDrive Readers</a></li> 3082 <li></li> 3083 </a></li></ul> 3084 </div> 3085 <div class="panel"> 3086 <ul> 3087 <li><b>SOLUTIONS</b></li> 3088 <li></li> 3089 <li><a href="https://codex.online/us/solutions/arri-workflow">ARRI Workflow</a></li> 3090 <li><a href="https://codex.online/us/solutions/integrations#">Integrations</a></li> 3091 <li><a href="https://codex.online/us/solutions/codex-hde">High Density Encoding [HDE]</a></li> 3092 <li><a href="https://codex.online/us/solutions/hde-partner-program">HDE Partner Program</a></li> 3093 </ul> 3094 </div> 3095 <div class="panel"> 3096 <ul> 3097 <li><b>SUPPORT</b></li> 3098 <li></li> 3099 <li><a href="https://help.codex.online/content/support">Contact Support</a></li> 3100 <li><a href="https://help.codex.online">Help Centre</a></li> 3101 <li><a href="https://help.codex.online/content/downloads/software">Software Downloads</a></li> 3102 <li><a href="https://help.codex.online/content/rma-request">Product Returns [RMA]</a></li> 3103 <li><a href="https://codex.online/us/support/office-locations">Office Locations</a></li> 3104 </ul> 3105 </div> 3106 <div class="panel"> 3107 <ul> 3108 <li><b>FOR THE MAKERS</b></li> 3109 <li></li> 3110 <li><a href="https://codex.online/us/the-codex-story">The CODEX Story</a></li> 3111 <li><a href="https://codex.online/us/captured-powered-cinema">Captured on CODEX</a></li> 3112 <li><a href="https://codex.online/us/case-studies">Case Studies</a></li> 3113 <li><a href="https://codex.online/us/dits-in-the-field">DIT Showcase</a></li> 3114 <li><a href="https://codex.online/us/news">News</a></li> 3115 </ul> 3116 </div> 3117 3118 </div> 3119 <div class="inner bottom"> 3120 Copyright © CODEX Tech Limited 2026. 3121 <ul> 3122 <li> 3123 <a href="https://codex.online/us/legal/terms-and-conditions">Terms & Conditions of Sale</a> 3124 </li> 3125 <li> 3126 <a href="https://codex.online/us/legal/returns-policy">Returns Policy</a> 3127 </li> 3128 <li> 3129 <a href="https://codex.online/us/legal/privacy-policy">Privacy Policy</a> 3130 </li> 3131 <li> 3132 <a href="https://codex.online/us/legal/warranty-cfexpress">CFexpress Warranty Policy</a> 3133 </li> 3134 <li> 3135 <a href="/us/#" onclick="return cookies.showPrivacy();">
3135Cookies Consent</a> 3136 </li> 3137 <li> 3138 <a href="https://codex.online/us/lets-talk">Contact Us</a> 3139 </li> 3140 </ul> 3141 </div> 3142</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> 3143 <div id="cookies"><div class="cookies"> 3144 <div class="inner"> 3145 <div> 3146 <div class="title"> 3147 Cookies Consent 3148 </div> 3149 <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> 3150 </div> 3151 <div> 3152 <button class="decline">DECLINE</button> 3153 </div> 3154 <div> 3155 <button class="accept">ACCEPT</button> 3156 </div> 3157 </div> 3158</div>
3159<script async="" src="https://www.googletagmanager.com/gtag/js"></script>
vendor: 2 bytes, line 3159
3159
3160<script> 3161 window.dataLayer = window.dataLayer || []; 3162 function gtag(){dataLayer.push(arguments);} 3163</script>
3163<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>
3163<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> 3164 <div id="slider" style="display: none;"></div> 3165 <div id="carousel" class="carousel" style="display:none"></div> 3166 <div id="script-player" class="dark"></div> 3167 <div id="reader"></div> 3168 <div id="powered-video-masonry-minimal"></div> 3169 <div id="shop"><div></div>
3170<script src="https://unpkg.com/@shopify/[email protected]/dist/umd/storefront-api-client.min.js"></script>
3170 3171<div class="shopify-config" style="display: none;">
3171<script>var _shopifyDomain="shop.codex.online",_shopifyToken="3f48b6a227644c0c54fa1454b49ca378";</script>
3171</div>
3172<script type="text/javascript">var shop=(()=>{var y=()=>{$(async()=>{p(),console.log(product)})},t,r,i,p=()=>{i=tt();r=ShopifyStorefrontAPIClient.createStorefrontApiClient({apiVersion:"2026-04",storeDomain:_shopifyDomain,publicAccessToken:_shopifyToken});var n=getCookie("cartId");n!=""?b(n):f()},w=async n=>{await e;var t=`query ProductVariants( 3173 $handle: String! 3174 $pageSize: Int = 50 3175 $cursor: String 3176 ) @inContext(country : ${i}) { 3177 product(handle: $handle) { 3178 id 3179 title 3180 variants(first: $pageSize, after: $cursor) { 3181 edges { 3182 cursor 3183 node { 3184 id 3185 title 3186 sku 3187 availableForSale 3188 quantityAvailable 3189 price { 3190 amount 3191 currencyCode 3192 } 3193 selectedOptions { 3194 name 3195 value 3196 } 3197 expected: metafield(key: "expected", namespace: "custom") { 3198 value 3199 } 3200 sellingPlanAllocations(first: 10) { 3201 nodes { 3202 sellingPlan { 3203 id 3204 name 3205 description 3206 checkoutCharge { 3207 type 3208 value { 3209 ... on SellingPlanCheckoutChargePercentageValue { 3210 percentage 3211 } 3212 ... on MoneyV2 { 3213 amount 3214 currencyCode 3215 } 3216 } 3217 } 3218 } 3219 checkoutChargeAmount { 3220 amount 3221 currencyCode 3222 } 3223 remainingBalanceChargeAmount { 3224 amount 3225 currencyCode 3226 } 3227 priceAdjustments { 3228 price { 3229 amount 3230 currencyCode 3231 } 3232 compareAtPrice { 3233 amount 3234 currencyCode 3235 } 3236 } 3237 } 3238 } 3239 } 3240 } 3241 pageInfo { 3242 hasNextPage 3243 } 3244 } 3245 } 3246 }`,u=await r.request(t,{variables:{handle:n}});return product},n=null,c=async(t,u)=>{var f,e;u==""&&(u=null);n==null?(f=`mutation CreateCartAndAddLine( 3247 $variantId: ID! 3248 $quantity: Int = 1 3249 $sellingPlanId: ID 3250 $countryCode: CountryCode!) 3251 @inContext(country : ${i}){ 3252 cartCreate( 3253 input: { 3254 lines: [ 3255 { 3256 quantity: $quantity 3257 merchandiseId: $variantId 3258 sellingPlanId: $sellingPlanId 3259 } 3260 ] 3261 buyerIdentity: { 3262 countryCode: $countryCode 3263 } 3264 } 3265 ) { 3266 cart { 3267 id 3268 checkoutUrl 3269 totalQuantity 3270 discountCodes { 3271 code 3272 applicable 3273 } 3274 discountAllocations { 3275 discountedAmount { amount currencyCode } 3276 ... on CartCodeDiscountAllocation { code } 3277 } 3278 cost { 3279 subtotalAmount { 3280 amount 3281 currencyCode 3282 } 3283 totalAmount { 3284 amount 3285 currencyCode 3286 } 3287 checkoutChargeAmount { 3288 amount 3289 currencyCode 3290 } 3291 } 3292 lines(first: 10) { 3293 edges { 3294 node { 3295 id 3296 quantity 3297 sellingPlanAllocation { 3298 sellingPlan { 3299 id 3300 name 3301 } 3302 checkoutChargeAmount { 3303 amount 3304 currencyCode 3305 } 3306 remainingBalanceChargeAmount { 3307 amount 3308 currencyCode 3309 } 3310 } 3311 merchandise { 3312 __typename 3313 ... on ProductVariant { 3314 id 3315 title 3316 sku 3317 selectedOptions{ 3318 name 3319 value 3320 } 3321 product { 3322 id 3323 title 3324 } 3325 image { 3326 url 3327 altText 3328 } 3329 price { 3330 amount 3331 currencyCode 3332 } 3333 } 3334 } 3335 } 3336 } 3337 } 3338 } 3339 userErrors { 3340 field 3341 message 3342 code 3343 } 3344 warnings { 3345 code 3346 message 3347 } 3348 } 3349 }`,e=await r.request(f,{variables:{variantId:t,quantity:1,countryCode:i,sellingPlanId:u??null}}),n=e.data.cartCreate.cart,console.log(n)):(f=`mutation AddLineToExistingCart( 3350 $cartId: ID! 3351 $variantId: ID! 3352 $quantity: Int = 1 3353 $sellingPlanId: ID 3354 ) @inContext(country : ${i}) { 3355 cartLinesAdd( 3356 cartId: $cartId 3357 lines: [ 3358 { 3359 quantity: $quantity 3360 merchandiseId: $variantId 3361 sellingPlanId: $sellingPlanId 3362 } 3363 ] 3364 ) { 3365 cart { 3366 id 3367 checkoutUrl 3368 totalQuantity 3369 discountCodes { 3370 code 3371 applicable 3372 } 3373 discountAllocations { 3374 discountedAmount { amount currencyCode } 3375 ... on CartCodeDiscountAllocation { code } 3376 } 3377 cost { 3378 subtotalAmount { 3379 amount 3380 currencyCode 3381 } 3382 totalAmount { 3383 amount 3384 currencyCode 3385 } 3386 checkoutChargeAmount { 3387 amount 3388 currencyCode 3389 } 3390 } 3391 lines(first: 10) { 3392 edges { 3393 node { 3394 id 3395 quantity 3396 sellingPlanAllocation { 3397 sellingPlan { 3398 id 3399 name 3400 } 3401 checkoutChargeAmount { 3402 amount 3403 currencyCode 3404 } 3405 remainingBalanceChargeAmount { 3406 amount 3407 currencyCode 3408 } 3409 } 3410 merchandise { 3411 __typename 3412 ... on ProductVariant { 3413 id 3414 title 3415 sku 3416 selectedOptions{ 3417 name 3418 value 3419 } 3420 product { 3421 id 3422 title 3423 } 3424 image { 3425 url 3426 altText 3427 } 3428 price { 3429 amount 3430 currencyCode 3431 } 3432 } 3433 } 3434 } 3435 } 3436 } 3437 } 3438 userErrors { 3439 field 3440 message 3441 code 3442 } 3443 warnings { 3444 code 3445 message 3446 } 3447 } 3448 }`,e=await r.request(f,{variables:{cartId:n.id,variantId:t,quantity:1,sellingPlanId:u??null}}),n=e.data.cartLinesAdd.cart,console.log(n));await o();setCookie("cartId",n.id);s();v()},l=async(t,u,f)=>{var e=`mutation UpdateCartLineQuantity( 3449 $cartId: ID! 3450 $lineId: ID! 3451 $quantity: Int! 3452 ) @inContext(country : ${i}) { 3453 cartLinesUpdate( 3454 cartId: $cartId 3455 lines: [ 3456 { 3457 id: $lineId 3458 quantity: $quantity 3459 } 3460 ] 3461 ) { 3462 cart { 3463 id 3464 checkoutUrl 3465 totalQuantity 3466 discountCodes { 3467 code 3468 applicable 3469 } 3470 discountAllocations { 3471 discountedAmount { amount currencyCode } 3472 ... on CartCodeDiscountAllocation { code } 3473 } 3474 cost { 3475 subtotalAmount { 3476 amount 3477 currencyCode 3478 } 3479 totalAmount { 3480 amount 3481 currencyCode 3482 } 3483 checkoutChargeAmount { 3484 amount 3485 currencyCode 3486 } 3487 } 3488 lines(first: 10) { 3489 edges { 3490 node { 3491 id 3492 quantity 3493 sellingPlanAllocation { 3494 sellingPlan { 3495 id 3496 name 3497 } 3498 checkoutChargeAmount { 3499 amount 3500 currencyCode 3501 } 3502 remainingBalanceChargeAmount { 3503 amount 3504 currencyCode 3505 } 3506 } 3507 merchandise { 3508 __typename 3509 ... on ProductVariant { 3510 id 3511 title 3512 sku 3513 selectedOptions{ 3514 name 3515 value 3516 } 3517 product { 3518 id 3519 title 3520 } 3521 image { 3522 url 3523 altText 3524 } 3525 price { 3526 amount 3527 currencyCode 3528 } 3529 } 3530 } 3531 } 3532 } 3533 } 3534 } 3535 userErrors { 3536 field 3537 message 3538 code 3539 } 3540 warnings { 3541 code 3542 message 3543 } 3544 } 3545 }`,h=await r.request(e,{variables:{cartId:t,lineId:u,quantity:f}});n=h.data.cartLinesUpdate.cart;console.log(n);await o();s()},u=null,f,e=new Promise(n=>{f=n}),b=async t=>{var u=`query GetCart($cartId: ID!) @inContext(country : ${i}) { 3546 cart(id: $cartId) { 3547 id 3548 createdAt 3549 updatedAt 3550 checkoutUrl 3551 totalQuantity 3552 discountCodes { 3553 code 3554 applicable 3555 } 3556 discountAllocations { 3557 discountedAmount { amount currencyCode } 3558 ... on CartCodeDiscountAllocation { code } 3559 } 3560 cost { 3561 subtotalAmount { 3562 amount 3563 currencyCode 3564 } 3565 totalAmount { 3566 amount 3567 currencyCode 3568 } 3569 checkoutChargeAmount { 3570 amount 3571 currencyCode 3572 } 3573 } 3574 lines(first: 50) { 3575 edges { 3576 node { 3577 id 3578 quantity 3579 sellingPlanAllocation { 3580 sellingPlan { 3581 id 3582 name 3583 } 3584 checkoutChargeAmount { 3585 amount 3586 currencyCode 3587 } 3588 remainingBalanceChargeAmount { 3589 amount 3590 currencyCode 3591 } 3592 } 3593 merchandise { 3594 __typename 3595 ... on ProductVariant { 3596 id 3597 title 3598 sku 3599 selectedOptions{ 3600 name 3601 value 3602 } 3603 product { 3604 id 3605 title 3606 } 3607 image { 3608 url 3609 altText 3610 } 3611 price { 3612 amount 3613 currencyCode 3614 } 3615 } 3616 } 3617 } 3618 } 3619 } 3620 } 3621 }`,e=await r.request(u,{variables:{cartId:t}});n=e.data.cart;console.log(n);await o();f()},k=async()=>(await e,n),o=async()=>
3621{if(n!=null&&n.totalQuantity>0){var t=` 3622 query CartWithRecommendations( 3623 $productId: ID! 3624 $intent: ProductRecommendationIntent = RELATED 3625 $pageSize: Int = 50 3626 $cursor: String 3627 ) @inContext(country : ${i}) { 3628 productRecommendations(productId: $productId, intent: $intent) { 3629 id 3630 title 3631 handle 3632 featuredImage { 3633 url 3634 altText 3635 } 3636 pageUrl: metafield(key: "product_url", namespace: "custom") { 3637 value 3638 } 3639 priceRange { 3640 minVariantPrice { 3641 amount 3642 currencyCode 3643 } 3644 maxVariantPrice { 3645 amount 3646 currencyCode 3647 } 3648 } 3649 variants(first: $pageSize, after: $cursor) { 3650 edges { 3651 cursor 3652 node { 3653 id 3654 title 3655 sku 3656 availableForSale 3657 quantityAvailable 3658 price { 3659 amount 3660 currencyCode 3661 } 3662 selectedOptions { 3663 name 3664 value 3665 } 3666 image { 3667 url 3668 altText 3669 } 3670 } 3671 } 3672 pageInfo { 3673 hasNextPage 3674 } 3675 } 3676 } 3677 }`,f=n.lines.edges.map(n=>r.request(t,{variables:{productId:n.node.merchandise.product.id,intent:"RELATED"}}));u=(await Promise.all(f)).map(n=>n.data.productRecommendations).flat(1);console.log(u)}},a,d=n=>(a=n,$(n).html(`<div class="shop-cart-bg"></div><div class="shop-cart-frame"><div class="shop-cart"></div></div>`),t=gsap.timeline().pause(),t.to(".shop-cart, .shop-cart-bg",{display:"block",duration:0}),t.to(".shop-cart-bg",{opacity:1,duration:.4}),t.to(".shop-cart",{y:0,duration:.4},"<"),$(".shop-cart-bg").click(()=>{h()}),s()),s=async()=>{var i,r,t;await e;i=`<div class="close"></div>`;r=[];n==null||n.totalQuantity==0?(i+=`Your Cart is Empty`,$(".sitenav--utility-wrap .menuitem.cart > button > div").hide()):(t=new Intl.NumberFormat("en-US",{style:"currency",currency:n.cost.subtotalAmount.currencyCode}),i+=`<div class="inner scroll"> 3678 <div class="items"><ul>${n.lines.edges.map(n=>` 3679 <li> 3680 <i style="background-image:url(${n.node.merchandise.image.url})"></i> 3681 <div> 3682 <div class="name">${n.node.merchandise.product.title}</div> 3683 <div class="variant">${n.node.merchandise.selectedOptions[0].name!="Title"?n.node.merchandise.selectedOptions[0].value:""}</div> 3684 ${n.node.sellingPlanAllocation!=null?`<div class="discount">${(n.node.sellingPlanAllocation.checkoutChargeAmount.amount/n.node.merchandise.price.amount*100).toFixed(0)}% Deposit</div>`:""} 3685 <div class="lower"> 3686 <div class="spinner" data-lineid="${n.node.id}" data-quantity="${n.node.quantity}"><div>-</div><div>${n.node.quantity}</div><div>+</div></div> 3687 <div class="price">${t.format(n.node.merchandise.price.amount)}</div> 3688 </div> 3689 </div> 3690 </li> 3691 `).join("")} 3692 </ul> 3693 </div> 3694 <div class="related">
3695 <span>RELATED PRODUCTS</span> 3696 <div class="frame"> 3697 <ul>${u.map(i=>i.variants.edges.map(u=>{if(n.lines.edges.filter(n=>n.node.merchandise.id==u.node.id).length==0&&r.filter(n=>n==u.node.id).length==0)return r.push(u.node.id),` 3698 <li> 3699 <i style="background-image:url(${u.node.image.url})"></i> 3700 <div class="name">${i.title}<div class="variant">${i.variants.edges.length>1?` ${u.node.title}`:""}</div></div> 3701 <div class="price">${t.format(u.node.price.amount)}</div> 3702 <div class="buttons"> 3703 <div class="add" data-id="${u.node.id}"></div> 3704 <a href="${i.pageUrl.value}"> 3705 <div class="nav"></div> 3706 </a> 3707 </div> 3708 </li>`}).join("")).join("")}</ul> 3709 </div> 3710 </div> 3711 </div> 3712 <div class="inner"> 3713 <div class="subtotal"><i>Subtotal</i><b>${t.format(n.cost.subtotalAmount.amount)}</b></div> 3714 ${n.cost.checkoutChargeAmount.amount!=n.cost.subtotalAmount.amount?`<div class="subtotal"><i>Payable today</i><b>${t.format(n.cost.checkoutChargeAmount.amount)}</b></div> 3715 <div class="duelater"><i>Amount due later</i>${t.format((parseFloat(n.cost.subtotalAmount.amount)-parseFloat(n.cost.checkoutChargeAmount.amount)).toFixed(2))}</div> 3716 <div class="duelater">You will be charged a deposit today and the remaining balance before delivery.</div>`:""} 3717 <div><br>Shipping, taxes, and discount codes calculated at checkout.<br><br></div> 3718 <a href="${g(n.checkoutUrl)}"><button class="btn">CHECK OUT</button></a> 3719 </div>`,$(".sitenav--utility-wrap .menuitem.cart > button > div").css({display:"flex"}),$(".sitenav--utility-wrap .menuitem.cart > button > div > i").text(n.totalQuantity),$(".menuitem.cart").show());$(".shop-cart",a).html(i);$(".shop-cart .spinner > div").click(async t=>{var r=t.currentTarget,i=t.currentTarget.parentElement;switch(Array.prototype.indexOf.call(i.childNodes,r)){case 0:await l(n.id,i.dataset.lineid,parseInt(i.dataset.quantity)-1);break;case 2:await l(n.id,i.dataset.lineid,parseInt(i.dataset.quantity)+1)}});$(".shop-cart .close").click(()=>{h()});$(".shop-cart .related .add").click(n=>{c(n.currentTarget.dataset.id)})},g=n=>{var t=new URL(n);return t.host="shop."+t.host,t.href},v=()=>{t.play()},h=()=>{t.reverse()},nt=()=>{t.time()==0?t.play():t.reverse()},tt=()=>{return{uk:"GB",us:"US",eu:"FR"}[window.location.pathname.split("/")[1]]};return y(),{getCart:()=>k(),getProduct:n=>w(n),addProduct:(n,t)=>c(n,t),initCart:n=>d(n),showCart:()=>{v()},hideCart:()=>{h()},toggleCart:()=>{nt()},getRelatedProducts:()=>u}})()</script>
3719<style>.shop-cart-frame{position:absolute;right:-1em;top:3em;z-index:9999999;overflow-y:auto}.shop-cart{background:#fff;border:1px solid #ccc;border-radius:.2em;padding:2.5em 0 2.5em 2em;font-weight:300;width:32em;display:flex;flex-wrap:wrap;cursor:default;letter-spacing:-.03em;display:none;transform:translateY(-100%)}.shop-cart .close{background-image:url(/asset/8fe66ce8-ed4d-4cb3-adc5-ef6bddcc3c77);position:absolute;right:1em;width:1.2em;height:1.2em;background-repeat:no-repeat;background-size:cover;top:1em;cursor:pointer}.shop-cart-bg{position:fixed;left:0;top:0;width:100%;height:100vh;background:#0008;cursor:default;display:none;opacity:0}.shop-cart .inner{padding-right:2em}.shop-cart .scroll{overflow-x:hidden;max-height:calc(100vh - 20em)}#header .shop-cart .items ul{list-style:none;flex-wrap:wrap;justify-content:flex-start;width:100%;height:auto}.shop-cart .items ul li{display:flex;padding:.5em 0;align-items:center;width:100%;margin-bottom:3em;cursor:default}.shop-cart .items li:after,.shop-cart .related:after{content:"";width:100%;position:absolute;left:0;height:1px;background:#ddd;bottom:-1.5em}.shop-cart .items li>i{width:7em;height:7em;display:inline-block;background-size:cover;border:1px solid #ddd;background-position:center;margin-right:1em}.shop-cart .items li>div{height:7em;width:calc(100% - 8em);cursor:default}.shop-cart .items li>div .name{font-weight:500;font-size:1.2em;margin-bottom:.2em}.shop-cart .items li>div .lower{display:flex;align-items:center;justify-content:space-between;position:absolute;bottom:.5em;width:calc(100% - 8em)}.shop-cart .items li>div .variant{margin-bottom:1.8em;font-size:1.2em}.shop-cart .items li>div .variant b{font-weight:500}.shop-cart .items li>div .discount{position:absolute;top:4em}.shop-cart .items li>div .price{font-weight:500;font-size:1.2em}.shop-cart .related{width:100%;display:flex;position:relative;margin-bottom:2em;align-content:flex-start;flex-direction:column}.shop-cart .related span{margin-bottom:1em}.shop-cart .related>.frame{overflow:hidden;overflow-x:auto}#header .shop-cart .related ul{width:fit-content;display:flex;justify-content:flex-start}.shop-cart .related li{width:9em;padding:1em;height:12em;background:#eee;margin-right:1.5em;cursor:default;margin-bottom:1em}.shop-cart .related li i{width:100%;display:block;aspect-ratio:1.3;background-size:75%;background-position:center;margin-bottom:1em;border:1px solid #bbb;background-repeat:no-repeat;background-color:#fff}.shop-cart .related li .name{display:inline-block}.shop-cart .related li .variant{font-weight:500;display:inline}.shop-cart .related li .price{font-weight:400;font-size:1.1em;margin:.5em 0;display:block;float:left}.shop-cart .related .buttons{display:flex;font-size:.7em;float:right;margin:.9em 0}.shop-cart .related li .add{width:1.3em;height:1.3em;display:flex;background:#000;color:#fff;border-radius:50%;position:relative;justify-content:center;align-items:center;margin-right:1em;cursor:pointer}.shop-cart .related li .add:after{content:"+";position:absolute;font-size:1.3em}.shop-cart .related li .nav{background-image:url(/asset/4b56236b-0f7d-4398-a3de-225ae631f860);width:1.5em;height:2em;background-size:contain;display:inline-block;background-repeat:no-repeat}.shop-cart .subtotal{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:1.2em;margin-top:1em}.shop-cart .subtotal i{font-style:normal}.shop-cart .subtotal b{font-weight:500}.shop-cart .duelater{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:1em;margin-top:1.3em}.shop-cart .duelater i{font-style:normal}.shop-cart .checkout{width:100%;background:#000;text-align:center;padding:.5em 1em;margin-top:1em}.shop-cart .spinner{display:flex;border:1px solid #ddd;width:5em;height:1.6em;user-select:none;font-weight:250}.shop-cart .spinner>div{width:1.8em;display:flex;align-items:center;justify-content:center}.shop-cart .spinner>div:nth-child(1){cursor:pointer}.shop-cart .spinner>div:nth-child(2){font-weight:500}.shop-cart .spinner>div:nth-child(3){cursor:pointer}.shop-cart .spinner>div:nth-child(1):hover,.shop-cart .spinner>div:nth-child(3):hover{background-color:#ddd}.shop-cart button.btn{border:1px solid #000;padding:.8em 1em .8em 1em;font-family:'Codec';letter-spacing:.1em;min-width:15em;cursor:pointer;color:#fff;font-size:.85em;background:#000}.shop-cart button.btn.white{color:#000;background:#fff}.shop-cart button.btn.small{font-size:.7em;padding:.4em 1em .4em 1em;min-width:10em}.right{float:right}@media screen and (max-width:991.955px){.shop-cart-frame{right:0;width:100%;overflow-y:auto;max-height:calc(100vh - 3em)}.shop-cart{padding:3em 1em;width:calc(100% - 2em)}.shop .variants ul{justify-content:center}}</style></div> 3720 <div id="productData"></div> 3721 <div id="newsletter"><div id="newsletter-dialog" style="display:none;"></div> 3722<div id="newsletter-popup"> 3723 <div class="newsletter"> 3724 <div class="inner"> 3725 <div class="close"></div> 3726 <div class="frame"> 3727 <div class="logo"></div> 3728 <div class="title"></div> 3729 <div class="caption"></div> 3730 <form class="form" method="post"> 3731 <input class="name" type="text" name="firstname" placeholder="First Name" required=""> 3732 <input class="name" type="text" name="lastname" placeholder="Last Name" required=""> 3733 <input class="email" type="email" name="email" placeholder="Email" required=""> 3734 <input class="password" type="password" name="password" placeholder="Password" disabled=""> 3735 <label class="checkbox"><span class="label"></span> 3736 <input class="privacy" type="checkbox" autocomplete="off"> 3737 <i></i> 3738 </label> 3739 <button class="subscribe"><span></span></button> 3740 <button class="reset" type="button"><span></span></button> 3741 </form> 3742 </div> 3743 <div id="newsletterCaptcha"></div> 3744 </div> 3745 </div> 3746 <div class="newsletter-button-frame"> 3747 <div class="newsletter-button"><div></div></div> 3748 </div> 3749</div> 3750<div style="display: none;"> 3751 <div class="config"> 3752 <div class="title">JOIN THE CODEX COMMUNITY</div> 3753 <div class="subTitle">Latest news and events directly into <span class="no-wrap">your inbox.</span></div> 3754 <div class="privacy">I agree to the CODEX <b><a href="https://codex.online/us/legal/privacy-policy/">Privacy Policy</a></b></div> 3755 <div class="success">Registration Successful.<br><br>Please check your inbox.</div> 3756 <div class="confirmed">Your Email is Confirmed.<br><br>Thank you for registering<br><br><button>
3756CLOSE</button></div> 3757 <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> 3758 <div class="passwordincorrect">Incorect Password<br><br>Please enter you password to update your marketing preferences.</div> 3759 <div class="passwordreset">Password reset sent.<br><br>Please check your inbox</div> 3760 <div class="agree">Please agree to our privacy policy.</div> 3761 <div class="subscribe">SUBSCRIBE</div> 3762 <div class="forgotpassword">FORGOT PASSWORD</div> 3763 <div class="marketingGroups">1</div> 3764 </div> 3765</div>
vendor: 67 bytes, lines 3765-3766
3765 3766<script src="https://www.google.com/recaptcha/api.js"></script>
3767test
3767<script type="text/javascript">var newsletter=(()=>{ 3768 var init=()=>{ 3769 $(function(){ 3770 initNewsletterPopup(); 3771 }); 3772 }, 3773 toggleNewsletterPopup=()=>{ 3774 var element = $("#newsletter-popup .newsletter"); 3775 if(element.hasClass("active")){ 3776 hideNewsletterPopup(); 3777 } 3778 else 3779 { 3780 showNewsletterPopup(); 3781 } 3782 3783 }, 3784 getSetting=(c)=>{ 3785 return $(".config ." + c).html(); 3786 }, 3787 showNewsletterPopup=()=>{ 3788 element = $("#newsletter-popup .newsletter"); 3789 gsap.set(element, {display: "block"}); 3790 gsap.to(element,{ opacity: 1, duration : 0.5 }); 3791 element.addClass("active"); 3792 $("#newsletter-popup .reset", element).click(resetPassword); 3793 }, 3794 hideNewsletterPopup=()=>{ 3795 element = $("#newsletter-popup .newsletter"); 3796 gsap.to(element, {display: "none", delay: 0.5, duration:0 }); 3797 gsap.to(element,{ opacity: 0, duration : 0.5 }); 3798 element.removeClass("active"); 3799 }, 3800 initNewsletterPopup=()=>{ 3801 $("#newsletter-popup .newsletter-button, #footer-newsletter-popup .button").click(function(){ 3802 toggleNewsletterPopup(); 3803 }); 3804 3805 $("#newsletter-popup .newsletter .close, #newsletter-popup .newsletter").click(function(){ 3806 hideNewsletterPopup(); 3807 }); 3808 3809 //prevent click event bubbling when form is clicked. 3810 $("#newsletter-popup .newsletter .inner").click(e=>{ 3811 e.stopPropagation(); 3812 }); 3813 3814 if(getCookie("newsletter") == "true"){ 3815 gsap.set($("#newsletter-popup .newsletter-button, #footer-newsletter-popup .button "), {opacity: 1}); 3816 } 3817 3818 form=$("#newsletter-popup .newsletter form")[0]; 3819 form.onsubmit=newsletterSubmitHandler; 3820 3821 $("#newsletter-popup .newsletter .title").html(getSetting("title")); 3822 $("#newsletter-popup .newsletter .caption").html(getSetting("subTitle")); 3823 $("#newsletter-popup .newsletter .checkbox .label").html(getSetting("privacy")); 3824 $("#newsletter-popup .newsletter .subscribe span").html(getSetting("subscribe")); 3825 $("#newsletter-popup .newsletter .reset span").html(getSetting("forgotpassword")); 3826 3827 if(window.location.hash=="#registered"){ 3828 newsletterPopupRegistrationConfirmed(); 3829 } 3830 }, 3831 form, 3832 newsletterSubmitHandler=()=>{ 3833 if($("#newsletter-popup .newsletter .privacy").is(":checked")){ 3834 newsletterPopupCaptcha(); 3835 //newsletterPopupPostRegistration("test"); 3836 } 3837 else{ 3838 alert(getSetting("agree")); 3839 } 3840 3841 return false; 3842 }, 3843 recaptcha, 3844 newsletterPopupCaptcha=()=>{ 3845 //$(dialogbox).html("<div id=\"newsletterCaptcha\"></div>"); 3846 //$(dialogbox).dialog("option", {width: 350, height : 100, autoResize : false}).dialog("open"); 3847 $("#newsletterCaptcha").show(); 3848 3849 if(recaptcha != undefined){ 3850 grecaptcha.reset(); 3851 } 3852 3853 try{ 3854 recaptcha = grecaptcha.render("newsletterCaptcha", { 3855 sitekey : "6LdDNAktAAAAAPjRhiTgKxSzWTNMVaqcrZxI25gs", 3856 theme : "dark", 3857 callback : newsletterPopupPostRegistration 3858 }); 3859 } 3860 catch(e) 3861 { 3862 3863 } 3864 }, 3865 newsletterPopupPostRegistration=(response)=>{ 3866 closeDialogbox(); 3867 var data = new FormData(form); 3868 data.append("g-recaptcha-response",response); 3869 //data.append("referer", "https://x2x.media/newsletter-sign-up-thankyou"); 3870 data.append("marketinggroups",getSetting("marketingGroups")); 3871 data.append("json","true"); 3872 var request = new XMLHttpRequest(); 3873 request.open("POST", "/?action=register"); 3874 request.onload = function(e){ 3875 try{ 3876 response = JSON.parse(e.currentTarget.response); 3877 $("#newsletterCaptcha").hide(); 3878 switch(response.RegistrationStatus){ 3879 case 0: 3880 newsletterPopupRegistrationSuccessfull(); 3881 break; 3882 case 1:
3883 newsletterPopupRegistrationExisting(); 3884 break; 3885 case 2: 3886 newsletterPopupRegistrationError(); 3887 break; 3888 case 3: 3889 newsletterPopupBadLogin(); 3890 break; 3891 3892 } 3893 } 3894 catch(error){ 3895 registrationError(); 3896 } 3897 } 3898 request.onerror = function(e){ 3899 registrationError(); 3900 } 3901 3902 request.send(data); 3903 }, 3904 newsletterPopupRegistrationSuccessfull=()=>{ 3905 $(".newsletter .caption").html(getSetting("success")); 3906 $(".newsletter form").remove(); 3907 setTimeout(hideNewsletter,10000); 3908 setRegistered(); 3909 }, 3910 newsletterPopupRegistrationConfirmed=()=>{ 3911 $("#newsletter-popup .newsletter .title").html(getSetting("title")); 3912 $(".newsletter .caption").html(getSetting("confirmed")); 3913 $("#newsletter-popup .newsletter button").click(function(){ 3914 hideNewsletterPopup(); 3915 }); 3916 $(".newsletter form").remove(); 3917 window.location.hash=""; 3918 showNewsletterPopup(); 3919 }, 3920 newsletterPopupRegistrationExisting=()=>{ 3921 $(".newsletter .caption").html(getSetting("alreadyregistered")); 3922 $(".newsletter form").addClass("password"); 3923 $(".newsletter form > .name").hide(); 3924 $(".newsletter form > .email").hide(); 3925 $(".newsletter form > input.password").removeAttr("disabled").focus(); 3926 //$(".newsletter form").remove(); 3927 setRegistered(); 3928 }, 3929 newsletterPopupBadLogin=()=>{ 3930 $(".newsletter .caption").html(getSetting("passwordincorrect")); 3931 }, 3932 resetPassword=()=>{ 3933 $.post("/?action=resetpasswordrequest", {email : $("#newsletter-popup .email").val(), json: "true" }).done(data=>{ 3934 if(data=="ok"){ 3935 $(".newsletter .caption").html(getSetting("passwordreset")); 3936 $(".newsletter form").hide(); 3937 } 3938 }); 3939 }, 3940 setRegistered = ()=>{ 3941 setCookie("registration","1",7); 3942 $("body").addClass("marketinggroup1"); 3943 }, 3944 isRegistered = ()=>{ 3945 return $("body").hasClass("marketinggroup1") && !getCookie("registered") == "1"; 3946 }, 3947 config=[ 3948 { 3949 domain : "codex.online", 3950 title : "JOIN THE CODEX COMMUNITY", 3951 subTitle : "Latest news and events directly into <span class=\"no-wrap\">your inbox.</span>", 3952 marketingGroups : "1" 3953 }, 3954 { 3955 domain : "pix.online", 3956 title : "JOIN THE PIX COMMUNITY", 3957 subTitle : "Latest news and events directly into <span class=\"no-wrap\">your inbox.</span>", 3958 marketingGroups : "5" 3959 }, 3960 { 3961 domain : "x2x.media", 3962 title : "JOIN THE X2X COMMUNITY", 3963 subTitle : "Latest news and events directly into <span class=\"no-wrap\">your inbox.</span>", 3964 marketingGroups : "1" 3965 } 3966 ] 3967 ; 3968 init(); 3969 return { 3970 showRegistration : showNewsletterPopup 3971 }; 3972 3973})();</script>
3973<style>#newsletter{ 3974 position: fixed; 3975 z-index: 1000; 3976} 3977 3978#newsletter-popup{ 3979 position: fixed; 3980 width: 100%; 3981 bottom: 0; 3982 z-index: 1; 3983} 3984 3985#newsletter-popup .newsletter{ 3986 position: fixed; 3987 width: 100%; 3988 height: 100%; 3989 top: 0; 3990 left: 0; 3991 font-size: 1.7em; 3992 display: none; 3993 opacity: 0; 3994 background: #000a; 3995} 3996 3997#newsletter-popup .newsletter .inner { 3998 background: #fff; 3999 padding: 3em; 4000 position: fixed; 4001 max-width: 21em; 4002 height: 23em; 4003 bottom: -17em; 4004 right: 0; 4005 z-index: 2; 4006 top: 50%; 4007 left: 50%; 4008 transform: translate(-50%, -50%); 4009 width: calc(100% - 4em); 4010 font-size: 16px; 4011 font-family: Codec; 4012 font-weight: 300; 4013 letter-spacing: -0.03em; 4014} 4015 4016#newsletter-popup .frame{ 4017 position: absolute; 4018 width: calc(100% - 4em); 4019 left: 0; 4020 top: 50%; 4021 transform: translateY(-50%); 4022 padding: 2em; 4023} 4024 4025#newsletter-popup .newsletter .bg{ 4026 4027} 4028 4029#newsletter-popup .newsletter .logo{ 4030 background-image: url(/?action=asset&id=BB25910A-BFDB-4BBC-8B9F-D02D14DD0B8C); 4031 width: 100%; 4032 height: 3em; 4033 background-size: 16em; 4034 background-position: top center; 4035 background-repeat: no-repeat; 4036 display: none; 4037} 4038 4039#newsletter-popup .newsletter .close{ 4040 position: absolute; 4041 right: 2em; 4042 background-image: url(/?action=asset&id=717892B3-5BA8-4525-AFC0-C2F9061E63EA); 4043 width: 1.3em; 4044 height: 1.3em; 4045 background-size: cover; 4046 top: 1.3em; 4047 cursor: pointer; 4048 z-index: 1; 4049 display: block; 4050} 4051 4052#newsletter-popup .newsletter .title{ 4053 color: #000; 4054 margin: 0; 4055 font-size: 2.1em; 4056 font-weight: 600; 4057 text-align: center; 4058 line-height: 1em; 4059 letter-spacing: -0.05em; 4060} 4061 4062#newsletter-popup .newsletter .caption{ 4063 color: #000; 4064 text-align: center; 4065 font-family: "Codec"; 4066 padding: 0.4em 0 0.9em; 4067 margin: 0.6em auto 0; 4068 line-height: 1em; 4069} 4070 4071#newsletter-popup .newsletter .caption a { 4072 color: #000; 4073} 4074 4075#newsletter-popup .newsletter button{ 4076 background: #000; 4077 color: #fff; 4078 border: none; 4079 padding: 0.9em 1em; 4080 margin: 0 auto; 4081 width: 100%; 4082 display: block; 4083} 4084 4085#newsletter-popup .newsletter button span{ 4086 font-family: 'Codec'; 4087 font-size: 0.8em; 4088 letter-spacing: 0.3em; 4089} 4090 4091#newsletter-popup .newsletter button.reset{ 4092 font-size: 0.6em; 4093 width: 50%; 4094 margin-top: 2em; 4095 display: none; 4096} 4097 4098#newsletter-popup .newsletter button.reset span{ 4099 4100} 4101 4102#newsletter-popup .newsletter .form{ 4103 margin-top: 1.4em; 4104} 4105 4106#newsletter-popup .newsletter input{ 4107 margin-bottom: 0.8em; 4108 border: 1px solid #888; 4109 font-family: 'Codec'; 4110 padding: 0.8em 0.2em 0.8em 1em; 4111 width: calc(100% - 1.4em); 4112 font-weight: 300; 4113 outline: none; 4114} 4115 4116#newsletter-popup .newsletter form > .password{ 4117 display: none; 4118} 4119 4120#newsletter-popup .newsletter form.password > .password{ 4121 display: block; 4122} 4123 4124#newsletter-popup .newsletter form.password > .name{ 4125 display: none; 4126} 4127 4128#newsletter-popup .newsletter-button-frame{ 4129 position: relative; 4130 width: 100%; 4131 margin: 0 auto; 4132} 4133 4134#newsletter-popup .newsletter-button > div{ 4135 background-image: url(/?action=asset&id=912be6ac-d792-4f88-9ae4-7bfea4854311); 4136 background-repeat: no-repeat; 4137 background-size: 3em; 4138 height: 3em; 4139 opacity: 0.6; 4140 transition: opacity 0.5s; 4141} 4142 4143#newsletter-popup .newsletter-button > div:hover{ 4144 opacity: 1; 4145} 4146 4147#newsletter-popup .newsletter-button{ 4148 position: absolute; 4149 bottom: 1em; 4150 right: 1em; 4151 z-index: 1; 4152 color: #000; 4153 width: 4em; 4154 height: 4em; 4155 cursor: pointer; 4156 display: none !important; 4157} 4158 4159.marketinggroup1 #newsletter-popup .newsletter-button{ 4160 display:none; 4161} 4162 4163#newsletterCaptcha{ 4164 position: fixed; 4165 top: 50%; 4166 left: 50%; 4167 transform: translate(-50%, -50%); 4168 display:none; 4169 z-index: 2; 4170} 4171 4172 4173#newsletter-popup .checkbox { 4174 display: block; 4175 position: relative; 4176 padding: 0.2em 0 0 2.5em; 4177 margin-bottom: 1.2em; 4178 cursor: pointer; 4179 -webkit-user-select: none; 4180 -moz-user-select: none;
4181 -ms-user-select: none; 4182 user-select: none; 4183 color: #000; 4184 font-size: 0.9em; 4185 text-align: left; 4186 min-height: 28px; 4187 display: flex; 4188 display: -moz-box; 4189 display: -webkit-flex; 4190 display: -ms-flexbox; 4191 align-items: center; 4192 -ms-align-items: center; 4193 -webkit-align-items: center; 4194} 4195 4196 4197#newsletter-popup .checkbox input { 4198 position: absolute; 4199 opacity: 0; 4200 cursor: pointer; 4201 height: 0; 4202 width: 0; 4203} 4204 4205#newsletter-popup .checkbox i { 4206 position: absolute; 4207 top: 0.4em; 4208 left: 0; 4209 height: 1.5em; 4210 width: 1.5em; 4211 background-color: #eee; 4212 border: 1px solid #555; 4213} 4214 4215#newsletter-popup .checkbox:hover input ~ .checkmark { 4216 background-color: #ccc; 4217} 4218 4219#newsletter-popup .checkbox input:checked ~ .checkmark { 4220 background-color: #2196F3; 4221} 4222 4223#newsletter-popup .checkbox i:after { 4224 content: ""; 4225 position: absolute; 4226 display: none; 4227} 4228 4229#newsletter-popup .checkbox input:checked ~ i:after { 4230 display: block; 4231} 4232 4233#newsletter-popup .checkbox i:after { 4234 left: 0.5em; 4235 top: 0.15em; 4236 width: 0.3em; 4237 height: 0.8em; 4238 border: solid #000; 4239 border-width: 0 3px 3px 0; 4240 -webkit-transform: rotate(45deg); 4241 -ms-transform: rotate(45deg); 4242 transform: rotate(45deg); 4243} 4244 4245#newsletter-popup .checkbox a{ 4246 color: #000; 4247 text-decoration: underline; 4248} 4249 4250#newsletter .no-wrap{ 4251 display: inline-block; 4252} 4253 4254/* pure-font-xs */ 4255@media screen and (max-width:35.438em) { 4256 #newsletter-popup .newsletter-button{ 4257 bottom: 0; 4258 right: 0; 4259 } 4260 4261 #newsletter-popup .newsletter-button > div { 4262 background-size: 3em; 4263 height: 3em; 4264 } 4265} 4266 4267/* pure-font-sm */ 4268@media screen and (min-width:35.5em) and (max-width:47.938em) { 4269 #newsletter-popup .newsletter-button{ 4270 bottom: 0; 4271 right: 0; 4272 } 4273 4274 #newsletter-popup .newsletter-button > div { 4275 background-size: 3em; 4276 height: 3em; 4277 } 4278} 4279/* pure-font-md */ 4280@media screen and (min-width:48em) and (max-width:63.938em) { 4281 4282} 4283/* pure-font-lg */ 4284@media screen and (min-width:64em) and (max-width:79.938em) { 4285 4286} 4287/* pure-font-xl */ 4288@media screen and (min-width:80em) { 4289 4290} 4291 4292 4293</style></div> 4294 </div> 4295 <style> 4296 body{ 4297 opacity:1; 4298 } 4299 </style> 4300</body> 4301</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.