https://sevensmarketing.com/products/codemint-case-study-website-design-development-sevens-marketing
1<!doctype html> 2<html class="no-js" lang="en"> 3 <head> 4<meta name="viewport" content="width=device-width, initial-scale=1"> 5 6<!-- Hyperspeed:317723 --> 7<!-- hs-shared_id:5d8bb69b --> 8 9 10<style id='hs-critical-css'>@charset "UTF-8";@font-face{font-family:SourceSerif4;src:url(https://global.sevensmarketing.com/cdn/shop/files/SourceSerif4.ttf?v=1722399517)}:root{--swiper-theme-color:#007aff}:root{--swiper-navigation-size:44px}[flex]{display:flex;display:-webkit-flex;display:-moz-flex;display:-ms-flex}@media screen and (min-width:990px){#MainContent{padding-top:4.5rem!important}}header{border-radius:14px;width:1650px;max-width:86%;margin:20px auto 0}header .el-tabs{display:flex}header .el-tabs .el-tabs__header{flex-grow:2;flex-basis:40%;height:auto!important;padding-bottom:10px}header .el-tabs .el-tabs__header .el-tabs__nav{height:100%;display:flex;flex-direction:column;justify-content:space-between}header [case_trigger]{display:flex;align-items:center}header [case_trigger] svg{margin-left:6px}header.bg-transparent{margin:0 auto}header.bg-transparent [talk_btn]{border:.5px solid #2343e8!important;background:#2343e8;color:#fff}header.bg-transparent [talk_btn] svg path{stroke:#fff!important}header [section_header_content]{display:flex!important;width:100%;gap:30px!important;justify-content:space-between}header [section_header_content] [left_block]{margin-top:0;align-items:center!important;display:flex}header [section_header_content] [left_block] img.site-title-logo-image{width:140px;max-width:140px}header [section_header_content] [left_block] nav ul li{margin:0 1.5vw}header [section_header_content] [right_block]{flex-shrink:0}header [section_header_content] [right_block] [top]{display:flex;align-items:flex-start;justify-content:space-between;gap:13px}header [section_header_content] [right_block] [nav_item]{padding:13px 21px;font-size:18px;line-height:1;border-radius:12px;border:.5px solid #fff;display:flex;align-items:center}header [section_header_content] [right_block] [nav_item] span[text]{display:inline-block;margin-left:13px}header [section_header_content] [right_block] [nav_item] svg{height:18px}header [section_header_content] [right_block] [nav_item] svg path{stroke:#fff}header [section_header_content] [right_block] [site_nav_pos]{width:67px;position:relative}header [section_header_content] [right_block] [site_nav_pos] [site_nav]{position:absolute;left:0;top:0;width:100%;padding:0;display:flex;flex-direction:column}header [section_header_content] [right_block] [site_nav_pos] [site_nav] [split]{width:70%;border-bottom:1px solid #fff;display:none}header [section_header_content] [right_block] [site_nav_pos] [site_nav] [extra_content]{display:none}header [section_header_content] [right_block] [site_nav_pos] [site_nav] [item]{padding:13px 21px}header [section_header_content] [right_block] [case_block] [content]{width:100%;padding:20px 0;display:none}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav-wrap:after{display:none}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__active-bar{display:none}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__header{margin-right:40px!important;height:auto!important}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item{border-radius:12px;padding:12px 20px;font-size:18px;color:#fff;border:none!important}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item.is-active span{font-weight:700}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item>a{display:flex;align-items:center}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item svg{margin-right:12px;height:18px}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item svg path{stroke:#fff}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item span{line-height:1;font-weight:400}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item.is-active{border:.5px solid #fff;background:#fff;box-shadow:0 4px 4px #0c29c0;font-weight:700;color:#2343e8}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item.is-active svg path{stroke:#2343e8}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content{flex-shrink:0;flex-basis:60%}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content .el-tab-pane{display:flex;flex-wrap:wrap;gap:4%}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card]{width:48%;max-width:48%;position:relative;border-radius:12px;overflow:hidden;filter:drop-shadow(0px 4px 4px #0C29C0);display:inline-block;text-align:center}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card] [bg_img]{width:100%}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card] [text_block]{position:absolute;padding:10px;left:0;bottom:0;width:100%;height:100%;display:flex;flex-direction:column}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card] [text_block] [list]{font-size:12px;line-height:1.3;text-align:left;bottom:20px;left:20px;position:absolute;color:#fff;font-weight:700}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card] [text_block] [list][blue]{color:#1e33e7}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [view_all_card]{width:100%;position:relative;border-radius:12px;overflow:hidden;filter:drop-shadow(0px 4px 4px #0C29C0);opacity:0}
10header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [view_all_card] [btn]{position:absolute;left:3%;bottom:14px;color:#fff;font-size:12px;display:flex;align-items:center}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [view_all_card] [btn] svg{margin-left:4px;width:20px}@media screen and (max-width:989px){#MainContent{padding-top:2.6rem!important}header{border-radius:8px;top:10px!important;width:96%!important;margin:0 auto;padding-top:10px!important;padding-bottom:10px!important}header .wrapper{padding:0 6%!important}header.bg-transparent{top:0!important}header [section_header_content]{display:flex!important;width:100%;gap:30px!important;justify-content:space-between}header [section_header_content] [mobile_humb_block]{position:absolute;right:0;top:0}header [section_header_content] div[left_block]{margin-top:0;padding:5px 0;display:flex}header [section_header_content] div[left_block] img.site-title-logo-image{width:70px!important}header [section_header_content] [right_block]{display:flex;align-items:flex-start;gap:18px;flex-shrink:0}header [section_header_content] [right_block] [nav_item]{padding:13px 21px;font-size:18px;line-height:1;border-radius:8px;border:.5px solid #fff;display:flex;align-items:center}header [section_header_content] [right_block] [nav_item] span[text]{display:inline-block;margin-left:13px}header [section_header_content] [right_block] [nav_item] svg{height:18px}header [section_header_content] [right_block] [nav_item] svg path{stroke:#fff!important}header [section_header_content] [right_block] [site_nav_pos]{width:50px;position:relative;margin-right:50px;transform:translateY(-2px);right:0;position:absolute}header [section_header_content] [right_block] [site_nav_pos] [site_nav]{position:absolute;left:0;top:0;width:100%;padding:0;display:flex;flex-direction:column}header [section_header_content] [right_block] [site_nav_pos] [site_nav] [split]{width:70%;border-bottom:1px solid #fff;display:none}header [section_header_content] [right_block] [site_nav_pos] [site_nav] [extra_content]{display:none}header [section_header_content] [right_block] [site_nav_pos] [site_nav] [item]{padding:6px 4px!important}header [section_header_content] [right_block] [talk_btn]{display:none!important;flex-shrink:0}header [section_header_content] [right_block] [collection_link]{display:none!important}header [section_header_content] [right_block] [case_block]{display:none!important}header [section_header_content] [right_block] [case_block] [content]{width:100%;padding:20px 0;display:none}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav-wrap:after{display:none}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__active-bar{display:none}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item{border-radius:12px;padding:12px 20px;font-size:18px;color:#fff;border:none!important}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item>a{display:flex;align-items:center}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item svg{margin-right:12px;height:18px}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item svg path{stroke:#fff!important}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item span{line-height:1}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item.is-active{border:.5px solid #fff;background:#fff;box-shadow:0 4px 4px #0c29c0;font-weight:700;color:#2343e8}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__nav .el-tabs__item.is-active svg path{stroke:#2343e8!important}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content .el-tab-pane{display:flex;flex-wrap:wrap;gap:4%}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card]{flex-basis:48%;position:relative;width:auto;display:inline-block;text-align:center}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card] [bg_img]{width:100%}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card] [text_block]{position:absolute;padding:10px;left:0;bottom:0;width:100%;height:100%;display:flex;flex-direction:column}header [section_header_content] [right_block] [case_block] [content] .el-tabs .el-tabs__content [card] [text_block] [list]{font-size:14px;text-align:left;bottom:20px;left:20px;position:absolute}}@media screen and (max-width:1750px){header .wrapper{padding:0 3%}header [left_block]{display:flex}
10header [left_block] nav ul li{margin:0 .5vw!important}}@media screen and (max-width:1550px){header{width:96%;max-width:96%}header .wrapper{padding:0 2%}header [left_block]{display:flex}header [left_block] img.site-title-logo-image{width:110px!important}header [left_block] nav ul li{margin:0 .5vw!important}header [right_block] [nav_item]{padding:13px 14px!important}header [right_block] [site_nav_pos] [site_nav]{padding:0!important}header [right_block] [site_nav_pos] [site_nav] [item]{padding:13px 14px!important}}@media screen and (min-width:990px) and (max-width:1250px){header{width:96%;max-width:96%}header .wrapper{padding:0 2%}header .el-tabs__header{flex-basis:35%!important}header .el-tabs__header .el-tabs__item{font-size:12px!important;padding:6px 12px!important;height:auto!important}header .el-tabs__content{flex-basis:62%!important}header [left_block]{display:flex}header [left_block] img.site-title-logo-image{width:90px!important}header [left_block] nav ul{font-size:12px!important}header [left_block] nav ul li{margin:0 .5vw!important}header [right_block] [list]{bottom:10px!important;left:10px!important}header [right_block] [nav_item]{padding:8px 10px!important;font-size:12px!important}header [right_block] [nav_item] span{margin-left:4px!important}header [right_block] [site_nav_pos] [site_nav]{padding:0!important}header [right_block] [site_nav_pos] [site_nav] [item]{padding:11px 14px!important}}#DrawerMenu{color:#fff;background:#2343e8!important;border-radius:14px 0 0 14px}#DrawerMenu [original_close_btn]{display:none}#DrawerMenu [menu_drawer_content]{align-items:center;padding-bottom:5%}#DrawerMenu [menu_drawer_content] [content_top]{width:100%;height:100%}#DrawerMenu [talk_btn_pos]{margin-top:60px;width:100%;padding-left:82px}#DrawerMenu [talk_btn]{width:240px;display:flex;align-items:center;justify-content:center;height:40px;font-size:18px;background:#fff;color:#1e33e7;font-weight:700;line-height:1;border-radius:12px;flex-shrink:0}#DrawerMenu [talk_btn] span[text]{display:inline-block;margin-left:13px}#DrawerMenu [talk_btn] svg{height:18px}#DrawerMenu [talk_btn] svg path{stroke:#1e33e7!important}#DrawerMenu nav{height:100%;margin-top:4px}#DrawerMenu nav [nav_top]{height:100%}#DrawerMenu nav [nav_item]{padding:9px 8px;font-size:14px;line-height:1;border-radius:12px;border:1px solid #fff;display:flex;align-items:center}#DrawerMenu nav [nav_item] span[text]{display:inline-block;margin-left:13px}#DrawerMenu nav [nav_item] svg{height:18px}#DrawerMenu nav [nav_item] svg path{stroke:#fff!important}#DrawerMenu [nav_top]{display:flex;justify-content:space-between}#DrawerMenu [nav_top] [logo]{margin-top:10px;width:72px;flex-shrink:0}#DrawerMenu [nav_top] [logo] img{width:70px}#DrawerMenu [nav_top] [top_content]{margin:0 10px;width:210px;flex-shrink:0;flex-grow:2}#DrawerMenu [nav_top] [top_content] [collection_link]{border:none;background:#041ada}#DrawerMenu [nav_top] [top_content] #Menu-menu{margin-top:22px}#DrawerMenu [nav_top] [top_content] [nav_wrapper]{position:relative}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content]{position:absolute;left:0;top:0;width:100%;height:110%;background:#2343e8;transform:translate(120%);opacity:0}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content]{width:120%}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content] a{display:flex;font-size:20px;position:relative}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content] a:after{content:"";width:200%;border-bottom:.5px solid #fff;position:absolute;left:0;bottom:0}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content] a:last-of-type span{border:none}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content] a span{padding:11px 0 16px;width:100%}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content] a svg{width:16px;display:block;flex-shrink:0;margin-top:15px;margin-right:20px}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content] a svg path{stroke:#fff!important}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content] [back_btn]{padding:15px 15px 15px 0;display:inline-block;transform:translate(-3px)}#DrawerMenu [nav_top] [top_content] [nav_wrapper] [case_content] [mobile_case_block_content] [back_btn] svg{width:24px;height:24px}#DrawerMenu [nav_top] [close_btn]{margin-top:7px}#DrawerMenu [nav_top] li.menu-link{padding:9px 0 23px;position:relative}#DrawerMenu [nav_top] li.menu-link:last-of-type:after{display:none}#DrawerMenu [nav_top] li.menu-link:after{content:"";position:absolute;
10left:0;bottom:0;width:200%;border-bottom:1px solid #fff}#DrawerMenu [nav_top] li.menu-link a{font-size:20px}#DrawerMenu [nav_top] [mobile_case_block] [case_trigger]{width:100%;display:flex;align-items:flex-end}#DrawerMenu [nav_top] [mobile_case_block] [case_trigger] svg{margin-left:5px;width:20px;transform:rotate(-90deg);height:20px}.tile-media-wrapper button span{z-index:1!important}*,:after,:before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}h1,h2{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}strong{font-weight:bolder}button{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button{text-transform:none}[type=button],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h1,h2,p{margin:0}ul{list-style:none;margin:0;padding:0}iframe,img,svg{display:block;vertical-align:middle}img{max-width:100%;height:auto}[hidden]{display:none}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}body,html{height:-moz-fit-content;height:fit-content;min-height:100%}body{font-family:var(--main-font-stack);font-weight:var(--main-font-weight);font-style:var(--main-font-style);line-height:var(--base-line-height);background:rgb(var(--color-scheme-background));color:rgb(var(--color-scheme-text));text-transform:var(--bopy-text-uppercase);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;display:flex;flex-direction:column}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.min-touch-target{position:relative}.min-touch-target:before{position:absolute;right:0;bottom:0;top:50%;left:50%;height:100%;width:100%;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content);min-height:44px;min-width:44px}.no-m-first>:first-child{margin-top:0}.flex>.break-words{min-width:40%}
10*{text-decoration-thickness:var(--underline-thickness)}.rte{--rte-spacing-unit:calc(var(--base-line-height) * 1rem);font-family:var(--main-font-stack);font-weight:var(--main-font-weight);font-style:var(--main-font-style)}.rte{overflow-wrap:break-word;--stack-space:var(--rte-spacing-unit);--stack-space:calc(1rem * var(--paragraph-spacing-adjust, 1))}button{text-transform:var(--button-text-transform)}.btn{position:relative}.btn:before{position:absolute;right:0;bottom:0;top:50%;left:50%;height:100%;width:100%;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content);min-height:44px;min-width:44px}.btn{display:inline-block;border-radius:var(--button-border-radius);border-width:1px;border-width:var(--border-thickness);border-color:currentColor;font-size:var(--font-size-base);line-height:var(--base-line-height);--button-border-color:currentColor}.btn{padding:var(--button-padding);text-transform:var(--button-text-transform)}.btn--solid{padding:var(--button-padding);position:relative}.btn--solid:before{position:absolute;right:0;bottom:0;top:50%;left:50%;height:100%;width:100%;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-content:"";content:var(--tw-content);min-height:44px;min-width:44px}.btn--solid{display:inline-block;font-size:var(--font-size-base);line-height:var(--base-line-height);--tw-bg-opacity:1;background-color:rgb(var(--color-scheme-solid-button-background) / var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(var(--color-scheme-solid-button-text) / var(--tw-text-opacity))}.btn--solid{border-width:var(--border-thickness);--tw-border-opacity:1;border-color:rgb(var(--color-scheme-solid-button-background) / var(--tw-border-opacity))}.btn--solid{--button-border-color:rgb(var(--color-scheme-solid-button-background))}.js img.track-loaded{position:relative;opacity:0}.js img.track-loaded.is-complete{opacity:1}.wrapper{margin-left:auto;margin-right:auto;max-width:var(--max-site-width);padding-left:var(--wrapper-left-and-right-margin);padding-right:var(--wrapper-left-and-right-margin)}.section-container{padding-left:var(--section-container-left-and-right-margin);padding-right:var(--section-container-left-and-right-margin)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-left-\[10000px\]{left:-10000px}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.top-auto{top:auto}.z-10{z-index:10}.z-110{z-index:110}.z-120{z-index:120}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.row-start-1{grid-row-start:1}.m-auto{margin:auto}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.-mx-wrapper-left-and-right-margin{margin-left:calc(var(--wrapper-left-and-right-margin) * -1);margin-right:calc(var(--wrapper-left-and-right-margin) * -1)}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.mt-spacer{margin-top:calc(var(--spacer) * var(--spacing-adjust,1))}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-css-var{aspect-ratio:var(--ratio)}.h-14{height:3.5rem}.h-16{height:4rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-\[90vh\]{height:90vh}.h-full{height:100%}.h-screen{height:100vh}.max-h-full{max-height:100%}.w-11\/12{width:91.666667%}.w-14{width:3.5rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[40\%\]{min-width:40%}.max-w-2xl{max-width:42rem}.max-w-\[90vw\]{max-width:90vw}.flex-auto{flex:1 1 auto}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
10.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-5{gap:1.25rem}.gap-theme{gap:var(--theme-gap)}.space-y-spacer>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(calc(var(--spacer) * var(--spacing-adjust,1)) * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(calc(var(--spacer) * var(--spacing-adjust,1)) * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.break-words{overflow-wrap:break-word}.rounded-full{border-radius:9999px}.rounded-media{border-radius:var(--media-border-radius)}.border-t-theme{border-top-width:var(--border-thickness)}.border-scheme-border{--tw-border-opacity:1;border-color:rgb(var(--color-scheme-border) / var(--tw-border-opacity))}.bg-scheme-accent{--tw-bg-opacity:1;background-color:rgb(var(--color-scheme-accent) / var(--tw-bg-opacity))}.bg-scheme-background{--tw-bg-opacity:1;background-color:rgb(var(--color-scheme-background) / var(--tw-bg-opacity))}.bg-scheme-text{--tw-bg-opacity:1;background-color:rgb(var(--color-scheme-text) / var(--tw-bg-opacity))}.bg-scheme-text\/40{background-color:rgb(var(--color-scheme-text) / .4)}.bg-transparent{background-color:transparent}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-scheme-background{--tw-gradient-from:rgb(var(--color-scheme-background) / 1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(var(--color-scheme-background) / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.box-decoration-clone{-webkit-box-decoration-break:clone;box-decoration-break:clone}.object-cover{object-fit:cover}.p-2{padding:.5rem}.p-8{padding:2rem}.p-wrapper-left-and-right-margin{padding:var(--wrapper-left-and-right-margin)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-16{padding-bottom:4rem}.pb-8{padding-bottom:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-heading-feature{font-size:var(--feature-heading-size);line-height:var(--heading-line-height)}.text-menu-drawer{font-size:var(--menu-drawer-heading-size);line-height:var(--base-line-height)}.text-scale-n0{font-size:var(--type-scale-n0);line-height:var(--base-line-height)}.text-text-overlay-on-hover{font-size:var(--text-overlay-text-size);line-height:var(--overlay-labels-line-height)}.text-scheme-text{--tw-text-opacity:1;color:rgb(var(--color-scheme-text) / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.backdrop-saturate-0{--tw-backdrop-saturate:saturate(0);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.theme-icon path{vector-effect:non-scaling-stroke;stroke:currentColor;stroke-width:var(--icon-thickness)}#MainContent .shopify-section:first-child{--full-screen-including-header:calc(100vh - var(--header-height, 0px));--full-screen-excluding-header-and-hero:calc( 100vh - var(--header-height, 0px) - var(--hero-height, 0px) )}@supports not (aspect-ratio:1 / 1){.aspect-css-var{--ratio-rounded-up:calc(var(--ratio) * 10);--padding-percentage:calc(10 / var(--ratio-rounded-up) * 100%);width:100%;padding-top:var(--padding-percentage)}}@media (max-width:989px){.max-lg\:wrapper{margin-left:auto;margin-right:auto;max-width:var(--max-site-width);padding-left:var(--wrapper-left-and-right-margin);padding-right:var(--wrapper-left-and-right-margin)}}.last\:border-b-theme:last-child{border-bottom-width:var(--border-thickness)}.empty\:hidden:empty{display:none}@media (min-width:990px){.lg\:sticky{position:sticky}.lg\:inset-0{top:0;right:0;bottom:0;left:0}.lg\:top-sticky-offset{top:var(--sticky-offset)}
10.lg\:col-span-item{grid-column:span var(--item-col-span)/span var(--item-col-span)}.lg\:col-end-\[-1\]{grid-column-end:-1}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:h-20{height:5rem}.lg\:h-full{height:100%}.lg\:w-20{width:5rem}.lg\:max-w-\[var\(--quick-view-max-width\)\]{max-width:var(--quick-view-max-width)}.lg\:max-w-sm{max-width:24rem}.lg\:grid-flow-dense{grid-auto-flow:dense}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:items-start{align-items:flex-start}.lg\:justify-start{justify-content:flex-start}.lg\:justify-between{justify-content:space-between}.lg\:gap-css-var{gap:var(--gap)}.lg\:p-24{padding:6rem}.lg\:p-4{padding:1rem}.lg\:px-4{padding-left:1rem;padding-right:1rem}.lg\:pb-bottom-section-vertical-spacing{padding-bottom:calc(var(--section-vertical-spacing) * var(--bottom-spacing-adjust,1))}.lg\:pt-top-section-vertical-spacing{padding-top:calc(var(--section-vertical-spacing) * var(--top-spacing-adjust,1))}.lg\:text-scale-n0{font-size:var(--type-scale-n0);line-height:var(--base-line-height)}.lg\:text-scale-n1{font-size:var(--type-scale-n1);line-height:var(--base-line-height)}.lg\:overflow-anchor-none{overflow-anchor:none}}@media (max-width:989px){.max-lg\:flex{display:flex}.max-lg\:grid{display:grid}.max-lg\:grid-flow-dense{grid-auto-flow:dense}.max-lg\:items-end{align-items:flex-end}.max-lg\:gap-css-var{gap:var(--gap)}.max-lg\:pb-bottom-section-vertical-spacing{padding-bottom:calc(var(--section-vertical-spacing) * var(--bottom-spacing-adjust,1))}.max-lg\:pt-top-section-vertical-spacing{padding-top:calc(var(--section-vertical-spacing) * var(--top-spacing-adjust,1))}}.\[\&\>div\:first-child\]\:mt-0>div:first-child{margin-top:0}.font-heading{font-family:SourceSerif4,sans-serif!important;font-weight:700}.rte{font-family:SourceSerif4,sans-serif!important}body{font-family:SourceSerif4,sans-serif;font-weight:400}@media (min-width:767px){:root{--fw-player-margin:8px 8px 8px 8px;--fw-player-width:108px;--fw-player-height:192px}}#DrawerMenu{background:#000}#DrawerMenu svg,#Menu-menu .menu-link span{color:#fff}.text-text-overlay-on-hover{font-size:44px!important}@media (min-width:0px) and (max-width:768px){:root{--fw-player-margin:8px 8px 8px 8px;--fw-player-width:90px;--fw-player-height:160px}}#MainContent{padding-top:calc(var(--section-vertical-spacing)* var(--spacing-adjust,1));background:#000}.el-tabs__header{padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:#409eff;z-index:1;list-style:none}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:#e4e7ed;z-index:1}.el-tabs__nav-scroll{overflow:hidden}.el-tabs__nav{white-space:nowrap;position:relative;float:left;z-index:2}.el-tabs__item{padding:0 20px;height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:40px;display:inline-block;list-style:none;font-size:14px;font-weight:500;color:#303133;position:relative}.el-tabs__item.is-active{color:#409eff}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--left{overflow:hidden}.el-tabs--left .el-tabs__header.is-left,.el-tabs--left .el-tabs__nav-scroll,.el-tabs--left .el-tabs__nav-wrap.is-left{height:100%}.el-tabs--left .el-tabs__active-bar.is-left{top:0;bottom:auto;width:2px;height:auto}.el-tabs--left .el-tabs__nav-wrap.is-left{margin-bottom:0}.el-tabs--left .el-tabs__active-bar.is-left,.el-tabs--left .el-tabs__nav-wrap.is-left::after{right:0;left:auto}.el-tabs--left .el-tabs__nav-wrap.is-left::after{height:100%;width:2px;bottom:auto;top:0}.el-tabs--left .el-tabs__nav.is-left{float:none}.el-tabs--left .el-tabs__item.is-left{display:block}.el-tabs--left .el-tabs__header.is-left{float:left;margin-bottom:0;margin-right:10px}.el-tabs--left .el-tabs__nav-wrap.is-left{margin-right:-1px}.el-tabs--left .el-tabs__item.is-left{text-align:right}</style> 11 12
13<script>window.HS_JS_OVERRIDES = [{"load_method":"ON_ACTION","match":"shopifycloud\/storefront-forms-hcaptcha"},{"load_method":"ON_ACTION","match":"static.klaviyo.com"},{"load_method":"ON_ACTION","match":"shopifycloud\/portable-wallets"},{"load_method":"ON_ACTION","match":"shopifycloud\/shopify\/assets\/storefront\/load_feature"},{"load_method":"ON_ACTION","match":"hcaptcha"},{"load_method":"ON_ACTION","match":"\/checkouts\/internal\/preloads.js"}];</script>
vendor: 1 bytes, line 13
13
14<script>!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(self,(()=>(()=>{"use strict";var e={};(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e);const t="hyperscript/defer-load",n="ON_ACTION",o=["window.Station.Apps.Tabs",".replace('no-js', 'js')","onLoadStylesheet()","window.onpageshow","spratlyThemeSettings","lazysizes","window.MinimogSettings","onloadt4relcss","asyncLoad","_bstrLocale"],r=window.HS_JS_OVERRIDES||[];function s(e,t){const n=!e||"string"!=typeof e,s=t&&t.hasAttribute("hs-ignore"),c=t&&t.innerHTML,i=c&&o.some((e=>t.innerHTML.includes(e)));if(!t&&n||s||i)return null;{const n=r.find((n=>e&&e.includes(n.match)||c&&t.innerHTML.includes(n.match)));return n?function(e,t){let n=t;if(e.cdn){n=`https://cdn.hyperspeed.me/script/${t.replace(/^(http:\/\/|https:\/\/|\/\/)/,"")}`}return{load_method:e.load_method||"default",src:n}}(n,e):null}}window.HS_LOAD_ON_ACTION_SCRIPTS=window.HS_LOAD_ON_ACTION_SCRIPTS||[];const c=document.createElement,i={src:Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype,"src"),t
14ype:Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype,"type")};function l(e,n){window.HS_LOAD_ON_ACTION_SCRIPTS.push([e,n]),e.type=t;const o=function(n){e.getAttribute("type")===t&&n.preventDefault(),e.removeEventListener("beforescriptexecute",o)};e.addEventListener("beforescriptexecute",o)}return document.createElement=function(...e){if("script"!==e[0].toLowerCase()||window.hsUnblocked)return c.bind(document)(...e);const o=c.bind(document)(...e);try{Object.defineProperties(o,{src:{...i.src,set(e){const o=s(e,null),r=o&&o.load_method===n,c=o?o.src:e;r&&i.type.set.call(this,t),i.src.set.call(this,c)}},type:{...i.type,set(e){const r=s(o.src,null);r&&r.load_method===n?i.type.set.call(this,t):i.type.set.call(this,e)}}}),o.setAttribute=function(e,t){"type"===e||"src"===e?o[e]=t:HTMLScriptElement.prototype.setAttribute.call(o,e,t)}}catch(e){console.warn("HyperScripts: unable to prevent script execution for script src ",o.src,".\n",'A likely cause would be because you are using a third-party browser extension that monkey patches the "document.createElement" function.')}return o},window.hsScriptObserver=new MutationObserver((e=>{for(let o=0;o<e.length;o++){const{addedNodes:r}=e[o];for(let e=0;e<r.length;e++){const o=r[e];if(1===o.nodeType&&"SCRIPT"===o.tagName)if(o.type===t)l(o,null);else{const e=s(o.src,o);e&&e.load_method===n&&l(o,o.type===t?null:o.type)}}}})),window.hsScriptObserver.observe(document.documentElement,{childList:!0,subtree:!0}),e})()));</script>
14 15 16 17<!-- Third party app optimization --> 18<!-- Is an app not updating? Just click Rebuild Cache in Hyperspeed. --> 19<!-- Or, stop deferring the app by clicking View Details on App Optimization in your Theme Optimization settings. -->
20<script hs-ignore>(function(){var hsUrls=[{"load_method":"ON_ACTION","original_url":"https:\/\/static.klaviyo.com\/onsite\/js\/QTQJrW\/klaviyo.js?company_id=QTQJrW\u0026shop=sevensmarketing.myshopify.com","pages":["HOME","COLLECTIONS","PRODUCT","CART","OTHER"]}];var insertBeforeBackup=Node.prototype.insertBefore;var currentPageType=getPageType();function getPageType(){var currentPage="product";if(currentPage==='index'){return'HOME';}else if(currentPage==='collection'){return'COLLECTIONS';}else if(currentPage==='product'){return'PRODUCT';}else if(currentPage==='cart'){return'CART';}else{return'OTHER';}} 21function isWhitelistedPage(script){return script.pages.includes(currentPageType);} 22function getCachedScriptUrl(url){var result=(hsUrls||[]).find(function(el){var compareUrl=el.original_url;if(url.substring(0,6)==="https:"&&el.original_url.substring(0,2)==="//"){compareUrl="https:"+el.original_url;} 23return url==compareUrl;});return result;} 24function loadScript(scriptInfo){if(isWhitelistedPage(scriptInfo)){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src=scriptInfo.original_url;var x=document.getElementsByTagName('script')[0];insertBeforeBackup.apply(x.parentNode,[s,x]);}} 25var userEvents={touch:["touchmove","touchend"],mouse:["mousemove","click","keydown","scroll"]};function isTouch(){var touchIdentifiers=" -webkit- -moz- -o- -ms- ".split(" ");if("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch){return true;} 26var query=["(",touchIdentifiers.join("touch-enabled),("),"hsterminal",")"].join("");return window.matchMedia(query).matches;} 27var actionEvents=isTouch()?userEvents.touch:userEvents.mouse;function loadOnUserAction(){(hsUrls||[]).filter(function(url){return url.load_method==='ON_ACTION';}).forEach(function(scriptInfo){loadScript(scriptInfo)}) 28actionEvents.forEach(function(userEvent){document.removeEventListener(userEvent,loadOnUserAction);});} 29Node.prototype.insertBefore=function(newNode,refNode){if(newNode.type!=="text/javascript"&&newNode.type!=="application/javascript"&&newNode.type!=="application/ecmascript"){return insertBeforeBackup.apply(this,arguments);} 30var scriptInfo=getCachedScriptUrl(newNode.src);if(!scriptInfo){return insertBeforeBackup.apply(this,arguments);} 31if(isWhitelistedPage(scriptInfo)&&scriptInfo.load_method!=='ON_ACTION'){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src=scriptInfo.original_url;insertBeforeBackup.apply(this,[s,refNode]);}} 32actionEvents.forEach(function(userEvent){document.addEventListener(userEvent,loadOnUserAction);});})();</script>
32 33 34<!-- instant.load -->
35<script defer src="//sevensmarketing.com/cdn/shop/t/9/assets/hs-instantload.min.js?v=106803949153345037901733369484"></script>
35 36 37<!-- defer JS until action -->
38<script async src="//sevensmarketing.com/cdn/shop/t/9/assets/hs-script-loader.min.js?v=39426699166184296931733369484"></script>
38 39<!-- Preload LCP Product Image --> 40<link 41 rel="preload" 42 as="image" 43 href="//sevensmarketing.com/cdn/shop/files/Mask_group_1920x.png?v=1733369453" 44 imagesizes="" 45 imagesrcset="//sevensmarketing.com/cdn/shop/files/Mask_group_1920x.png?v=1733369453 1920xw"/> 46 47 <meta charset="utf-8"> 48 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 49 50 <meta name="theme-color" content=""> 51 <link rel="canonical" href="https://global.sevensmarketing.com/products/codemint-case-study-website-design-development-sevens-marketing"> 52 <link rel="preconnect" href="https://cdn.shopify.com" crossorigin> 53 54<link 55 rel="stylesheet"id="None" 56 href="https://unpkg.com/swiper@8/swiper-bundle.min.css" 57 media="print" 58 onload="this.media='all'; this.onload = null"> 59<link 60 rel="icon" 61 type="image/png" 62 href="//sevensmarketing.com/cdn/shop/files/20240524-101927.png?crop=center&height=32&v=1733369497&width=32" 63 ><link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin><title> 64 Codemint | Case Study | Website Design & Development | SEVENS Marketing 65 66 – sevensmarketing</title> 67 68 69 70
70<script>window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.start');</script>
70<meta id="shopify-digital-wallet" name="shopify-digital-wallet" content="/85833908511/digital_wallets/dialog"> 71<link rel="ucp" href="/.well-known/ucp" version="2026-08-25"><link rel="buy" href="/cart/48075227824415:1?ucp/version=2026-08-25" payment="com.google.pay dev.shopify.card dev.shopify.shop_pay"><link rel="alternate" type="application/json+oembed" href="https://global.sevensmarketing.com/products/codemint-case-study-website-design-development-sevens-marketing.oembed">
72<script async="async" src="/checkouts/internal/preloads.js?locale=en-US"></script>
vendor: 1 bytes, line 72
72
73<script id="shopify-features" type="application/json">{"accessToken":"1f0d29cb78e038cd3964df97ee7d8db6","betas":["rich-media-storefront-analytics"],"domain":"sevensmarketing.com","predictiveSearch":true,"shopId":85833908511,"locale":"en"}</script>
vendor: 1 bytes, line 73
73
74<script>var Shopify = Shopify || {}; 75Shopify.shop = "sevensmarketing.myshopify.com"; 76Shopify.locale = "en"; 77Shopify.currency = {"active":"CNY","rate":"1.0"}; 78Shopify.country = "US"; 79Shopify.theme = {"name":"[Hyperspeed] Exhibit 0812","id":173202112799,"schema_name":"Exhibit","schema_version":"1.1.0","theme_store_id":null,"role":"main"}; 80Shopify.theme.handle = "null"; 81Shopify.theme.style = {"id":null,"handle":null}; 82Shopify.cdnHost = "sevensmarketing.com/cdn"; 83Shopify.routes = Shopify.routes || {}; 84Shopify.routes.root = "/"; 85Shopify.shopJsCdnBaseUrl = "https://cdn.shopify.com/shopifycloud/shop-js"; 86Shopify.SignInWithShop = Shopify.SignInWithShop || {}; 87Shopify.SignInWithShop.User = Shopify.SignInWithShop.User || {}; 88Shopify.SignInWithShop.User.recognized = false;</script>
vendor: 1 bytes, line 88
88
89<script type="module">!function(o){(o.Shopify=o.Shopify||{}).modules=!0}(window);</script>
vendor: 1 bytes, line 89
89
90<script>!function(o){function n(){var o=[];function n(){o.push(Array.prototype.slice.apply(arguments))}return n.q=o,n}var t=o.Shopify=o.Shopify||{};t.loadFeatures=n(),t.autoloadFeatures=n()}(window);</script>
vendor: 1 bytes, line 90
90
91<script> 92 window.Shopify = window.Shopify || {}; 93 window.Shopify.SignInWithShop = window.Shopify.SignInWithShop || {}; 94 window.Shopify.SignInWithShop.assetMetrics = { sampleRate: 0.25 }; 95 window.Shopify.SignInWithShop.eligible = true; 96</script>
vendor: 1 bytes, line 96
96
97<script id="shop-js-analytics" type="application/json">{"pageType":"product"}</script>
vendor: 1 bytes, line 97
97
98<script defer="defer" async type="module" src="https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"></script>
vendor: 1 bytes, line 98
98
99<script type="module"> 100 await import("https://cdn.shopify.com/shopifycloud/shop-js/modules/v2/loader.init-shop-cart-sync.en.esm.js"); 101 102 window.Shopify.SignInWithShop?.initShopCartSync?.({"fedCMEnabled":true,"windoidEnabled":true}); 103 104</script>
vendor: 1 bytes, line 104
104
105<script> 106 window.Shopify = window.Shopify || {}; 107 if (!window.Shopify.featureAssets) window.Shopify.featureAssets = {}; 108 window.Shopify.featureAssets['shop-js'] = {"avatar":["modules/v2/loader.avatar.en.esm.js"],"checkout-modal":["modules/v2/loader.checkout-modal.en.esm.js"],"init-customer-accounts-sign-up":["modules/v2/loader.init-customer-accounts-sign-up.en.esm.js"],"init-customer-accounts":["modules/v2/loader.init-customer-accounts.en.esm.js"],"init-fed-cm":["modules/v2/loader.init-fed-cm.en.esm.js"],"init-shop-cart-sync":["modules/v2/loader.init-shop-cart-sync.en.esm.js"],"init-shop-email-lookup-coordinator":["modules/v2/loader.init-shop-email-lookup-coordinator.en.esm.js"],"init-shop-for-new-customer-accounts":["modules/v2/loader.init-shop-for-new-customer-accounts.en.esm.js"],"init-shop-user-recognition":["modules/v2/loader.init-shop-user-recognition.en.esm.js"],"init-windoid":["modules/v2/loader.init-windoid.en.esm.js"],"lead-capture":["modules/v2/loader.lead-capture.en.esm.js"],"listener":["modules/v2/loader.listener.en.esm.js"],"pay-button":["modules/v2/loader.pay-button.en.esm.js"],"payment-terms":["modules/v2/loader.payment-terms.en.esm.js"],"shop-button":["modules/v2/loader.shop-button.en.esm.js"],"shop-cart-sync":["modules/v2/loader.shop-cart-sync.en.esm.js"],"shop-cash-offers":["modules/v2/loader.shop-cash-offers.en.esm.js"],"shop-follow-button":["modules/v2/loader.shop-follow-button.en.esm.js"],"shop-login-button":["modules/v2/loader.shop-login-button.en.esm.js"],"shop-login":["modules/v2/loader.shop-login.en.esm.js"],"shop-toast-manager":["modules/v2/loader.shop-toast-manager.en.esm.js"],"shop-user-recognition":["modules/v2/loader.shop-user-recognition.en.esm.js"]}; 109</script>
vendor: 1 bytes, line 109
109
110<script>(function() { 111 var isLoaded = false; 112 function asyncLoad() { 113 if (isLoaded) return; 114 isLoaded = true; 115 var urls = ["https:\/\/static.klaviyo.com\/onsite\/js\/QTQJrW\/klaviyo.js?company_id=QTQJrW\u0026shop=sevensmarketing.myshopify.com"]; 116 for (var i = 0; i < urls.length; i++) { 117 var s = document.createElement('script'); 118 s.type = 'text/javascript'; 119 s.async = true; 120 s.src = urls[i]; 121 var x = document.getElementsByTagName('script')[0]; 122 x.parentNode.insertBefore(s, x); 123 } 124 }; 125 if(window.attachEvent) { 126 window.attachEvent('onload', asyncLoad); 127 } else { 128 window.addEventListener('load', asyncLoad, false); 129 } 130})();</script>
vendor: 1 bytes, line 130
130
131<script id="__st">var __st={"a":85833908511,"offset":-14400,"reqid":"9bfaa043-8d16-4e92-8964-349aea8ca5c9-1791241406","pageurl":"sevensmarketing.com\/products\/codemint-case-study-website-design-development-sevens-marketing","u":"3549f36243bb","p":"product","rtyp":"product","rid":9033919660319};</script>
vendor: 1 bytes, line 131
131
132<script>window.ShopifyPaypalV4VisibilityTracking = true;</script>
vendor: 1 bytes, line 132
132
133<script id="captcha-bootstrap">!function(){'use strict';const t='contact',e='account',n='new_comment',o=[[t,t],['blogs',n],['comments',n],[t,'customer']],c=[[e,'customer_login'],[e,'guest_login'],[e,'recover_customer_password'],[e,'create_customer']],r=t=>t.map((([t,e])=>`form[action*='/${t}']:not([data-nocaptcha='true']) input[name='form_type'][value='${e}']`)).join(','),a=t=>()=>t?[...document.querySelectorAll(t)].map((t=>t.form)):[];function s(){const t=[...o],e=r(t);return a(e)}const i='password',u='form_key',d=['recaptcha-v3-token','g-recaptcha-response','h-captcha-response',i],f=()=>{try{return window.sessionStorage}catch{return}},m='__shopify_v',_=t=>t.elements[u];function p(t,e,n=!1){try{const o=window.sessionStorage,c=JSON.parse(o.getItem(e)),{data:r}=function(t){const{data:e,action:n}=t;return t[m]||n?{data:e,action:n}:{data:t,action:n}}(c);for(const[e,n]of Object.entries(r))t.elements[e]&&(t.elements[e].value=n);n&&o.removeItem(e)}catch(o){console.error('form repopulation failed',{error:o})}}const l='form_type',E='cptcha';function T(t){t.dataset[E]=!0}const w=window,h=w.document,L='Shopify',v='ce_forms',y='captcha';let A=!1;((t,e)=>{const n=(g='f06e6c50-85a8-45c8-87d0-21a2b65856fe',I='https://cdn.shopify.com/shopifycloud/storefront-forms-hcaptcha/ce_storefront_forms_captcha_hcaptcha.v1.5.3.iife.js',D={infoText:'Protected by hCaptcha',privacyText:'Privacy',termsText:'Terms'},(t,e,n)=>{const o=w[L][v],c=o.bindForm;if(c)return c(t,g,e,D).then(n);var r;o.q.push([[t,g,e,D],n]),r=I,A||(h.body.append(Object.assign(h.createElement('script'),{id:'captcha-provider',async:!0,src:r})),A=!0)});var g,I,D;w[L]=w[L]||{},w[L][v]=w[L][v]||{},w[L][v].q=[],w[L][y]=w[L][y]||{},w[L][y].protect=function(t,e){n(t,void 0,e),T(t)},Object.freeze(w[L][y]),function(t,e,n,w,h,L){const[v,y,A,g]=function(t,e,n){const i=e?o:[],u=t?c:[],d=[...i,...u],f=r(d),m=r(i),_=r(d.filter((([t,e])=>n.includes(e))));return[a(f),a(m),a(_),s()]}(w,h,L),I=t=>{const e=t.target;return e instanceof HTMLFormElement?e:e&&e.form},D=t=>v().includes(t);t.addEventListener('submit',(t=>{const e=I(t);if(!e)return;const n=D(e)&&!e.dataset.hcaptchaBound&&!e.dataset.recaptchaBound,o=_(e),c=g().includes(e)&&(!o||!o.value);(n||c)&&t.preventDefault(),c&&!n&&(function(t){try{if(!f())return;!function(t){const e=f();if(!e)return;const n=_(t);if(!n)return;const o=n.value;o&&e.removeItem(o)}(t);const e=Array.from(Array(32),(()=>Math.random().toString(36)[2])).join('');!function(t,e){_(t)||t.append(Object.assign(document.createElement('input'),{type:'hidden',name:u})),t.elements[u].value=e}(t,e),function(t,e){const n=f();if(!n)return;const o=[...t.querySelectorAll(`input[type='${i}']`)].map((({name:t})=>t)),c=[...d,...o],r={};for(const[a,s]of new FormData(t).entries())c.includes(a)||(r[a]=s);n.setItem(e,JSON.stringify({[m]:1,action:t.action,data:r}))}(t,e)}catch(e){console.error('failed to persist form',e)}}(e),e.submit())}));const S=(t,e)=>{t&&!t.dataset[E]&&(n(t,e.some((e=>e===t))),T(t))};for(const o of['focusin','change'])t.addEventListener(o,(t=>{const e=I(t);D(e)&&S(e,y())}));const B=e.get('form_key'),M=e.get(l),P=B&&M;t.addEventListener('DOMContentLoaded',(()=>{const t=y();if(P)for(const e of t)e.elements[l].value===M&&p(e,B);[...new Set([...A(),...v().filter((t=>'true'===t.dataset.shopifyCaptcha))])].forEach((e=>S(e,t)))}))}(h,new URLSearchParams(w.location.search),n,t,e,['guest_login'])})(!0,!0)}();</script>
vendor: 1 bytes, line 133
133
134<script integrity="sha256-JjoPp5ZfB1sSAs5SQaol1x1GgvveM+BgmRzyDexInEQ=" data-source-attribution="shopify.loadfeatures" defer="defer" src="//sevensmarketing.com/cdn/shopifycloud/storefront/assets/storefront/load_feature-1bd60354.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 134
134
135<script>(function () {var userAgent = navigator.userAgent;var platform = navigator.platform;var maxTouchPoints = navigator.maxTouchPoints || 0;var isIOS = /iPad|iPhone|iPod/.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1);var isMacSafari = platform.indexOf('Mac') === 0 && /Safari/.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android/.test(userAgent);var isAppleSafari = isIOS || isMacSafari;if (isAppleSafari) {fetch('/sf_private_access_tokens' + location.search).catch(function () {});}function browserMajorVersion(pattern) {var match = userAgent.match(pattern);return match ? parseInt(match[1], 10) : null;}function shouldLoadAutosizesPolyfill() {if (!window.PerformanceObserver?.supportedEntryTypes?.includes('paint')) {return false;}var chromeVersion = browserMajorVersion(/Chrome\/(\d+)/);if (chromeVersion !== null) {return chromeVersion < 126;}var firefoxVersion = browserMajorVersion(/Firefox\/(\d+)/);if (firefoxVersion !== null) {return firefoxVersion < 150;}var safariVersion = isAppleSafari ? browserMajorVersion(/Version\/(\d+).*Safari\//) : null;if (safariVersion !== null) {return safariVersion < 27;}return true;}if (shouldLoadAutosizesPolyfill()) {var autosizesScript = document.createElement('script');autosizesScript.async = true;autosizesScript.crossOrigin = 'anonymous';autosizesScript.src = "//sevensmarketing.com/cdn/shopifycloud/storefront/assets/storefront/autosizes-84416378.js";(document.head || document.documentElement).appendChild(autosizesScript);}window.ShopifyAnalytics = window.ShopifyAnalytics || {};window.ShopifyAnalytics.performance = window.ShopifyAnalytics.performance || {};(function () {var LONG_FRAME_THRESHOLD = 50;var longAnimationFrames = [];var activeRafId = null;function collectLongFrames() {var previousTime = null;function rafMonitor(now) {if (activeRafId === null) {return;}var delta = now - previousTime;if (delta > LONG_FRAME_THRESHOLD) {longAnimationFrames.push({startTime: previousTime,endTime: now,});}previousTime = now;activeRafId = requestAnimationFrame(rafMonitor);}previousTime = performance.now();activeRafId = requestAnimationFrame(rafMonitor);}if (!window.PerformanceObserver?.supportedEntryTypes?.includes('long-animation-frame')) {collectLongFrames();var timeoutId = setTimeout(function () {cancelAnimationFrame(activeRafId);}, 10000);window.ShopifyAnalytics.performance.getLongAnimationFrames = function (stopCollection) {if (stopCollection === undefined) {stopCollection = false;}if (stopCollection) {clearTimeout(timeoutId);cancelAnimationFrame(activeRafId);}return longAnimationFrames;};}})();})();</script>
135<script id="shopify-origin-trials" async="async" integrity="sha256-qJbe/jEZBHtr5W/BlA2cKAz3vkXu6vJQyLjgvgCC86g=" src="//cdn.shopify.com/shopifycloud/storefront/assets/storefront/origin_trials-318ab40a.js" crossorigin="anonymous" onload="window.__shopifyOriginTrialsDone = true" onerror="window.__shopifyOriginTrialsDone = true"></script>
vendor: 1 bytes, line 135
135
136<script> 137 window.Shopify = window.Shopify || {}; 138 window.Shopify.MCP = window.Shopify.MCP || {}; 139 window.Shopify.MCP.enabled = true; 140 window.Shopify.MCP.shop = "sevensmarketing.myshopify.com"; 141 window.Shopify.MCP.mcpEndpoint = "https:\/\/sevensmarketing.com\/api\/mcp"; 142 window.Shopify.MCP.tools = [{"name":"search_shop_policies_and_faqs","description":"Used to get facts about the stores policies, products, or services.\nSome examples of questions you can ask are:\n - What is your return policy?\n - What is your shipping policy?\n - What is your phone number?\n - What are your hours of operation?\"\nSet policy_types to also get the store's written policies (full text and URL).\n","inputSchema":{"$schema":"https:\/\/json-schema.org\/draft\/2020-12\/schema","type":"object","properties":{"query":{"type":"string","description":"A natural language query."},"context":{"type":"string","description":"Additional information about the request such as user demographics, mood, location, or other relevant details that could help in tailoring the response appropriately."},"policy_types":{"type":"array","items":{"type":"string","enum":["refund","shipping","privacy","terms_of_service","terms_of_sale","subscription","legal_notice","contact"]},"description":"Policy kinds to fetch, chosen from the user's question â e.g. [\"refund\"] for returns\/exchanges\/damaged items, [\"contact\"] for phone\/hours\/address. Include every kind the question touches. Omit it to get only FAQ answers."}},"required":["query"]}}]; 143</script>
vendor: 1 bytes, line 143
143
144<script>(()=>{var d="shopify:webmcp_adapter_loaded",n=Symbol.for("shopify.webmcp_adapter_loading");function s(c,a,{win:r=window,doc:o=document}={}){function p(){try{return r.localStorage.getItem(d)==="true"}catch{return!1}}function l(){try{r.localStorage.setItem(d,"true")}catch{}}function u(){return typeof(o.modelContext||r.navigator?.modelContext)?.registerTool=="function"}function f(){if(r[n]||!u())return;let t=o.head||o.getElementsByTagName("head")[0];if(!t)return;let e=o.createElement("script");e.type="module",e.crossOrigin="anonymous",a&&(e.integrity=a),e.src=c,e.addEventListener("load",l,{once:!0}),e.addEventListener("error",()=>{r[n]=!1},{once:!0}),t.appendChild(e),r[n]=!0}function _(t){let e=o.getElementById("shopify-origin-trials");if(!e||r.__shopifyOriginTrialsDone){t();return}e.addEventListener("load",t,{once:!0}),e.addEventListener("error",t,{once:!0})}function i(){_(()=>r.setTimeout(f,0))}function m(){o.addEventListener("DOMContentLoaded",i,{once:!0})}p()?i():m()}s("\/\/sevensmarketing.com\/cdn\/shopifycloud\/storefront\/assets\/storefront\/webmcp-c6b62ece.js","sha256-ke4DDuBjdvea3vxLWxHc9E9nq8zihuG4IfYEGbb77ys=");})(); 145</script>
vendor: 1 bytes, line 145
145
146<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton=Shopify.PaymentButton||{isStorefrontPortableWallets:!0,init:function(){window.Shopify.PaymentButton.init=function(){};var t=document.createElement("script");t.src="https://sevensmarketing.com/cdn/shopifycloud/portable-wallets/latest/portable-wallets.en.js",t.type="module",document.head.appendChild(t)}}; 147</script>
vendor: 1 bytes, line 147
147
148<script data-source-attribution="shopify.dynamic_checkout.buyer_consent"> 149 function portableWalletsHideBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.add("hidden"),t.setAttribute("aria-hidden","true"),n.removeEventListener("click",e))}function portableWalletsShowBuyerConsent(e){var t=document.getElementById("shopify-buyer-consent"),n=document.getElementById("shopify-subscription-policy-button");t&&n&&(t.classList.remove("hidden"),t.removeAttribute("aria-hidden"),n.addEventListener("click",e))}window.Shopify?.PaymentButton&&(window.Shopify.PaymentButton.hideBuyerConsent=portableWalletsHideBuyerConsent,window.Shopify.PaymentButton.showBuyerConsent=portableWalletsShowBuyerConsent); 150</script>
vendor: 1 bytes, line 150
150
151<script data-source-attribution="shopify.dynamic_checkout.cart.bootstrap">document.addEventListener("DOMContentLoaded",(function(){function t(){return document.querySelector("shopify-accelerated-checkout-cart, shopify-accelerated-checkout")}if(t())Shopify.PaymentButton.init();else{new MutationObserver((function(e,n){t()&&(Shopify.PaymentButton.init(),n.disconnect())})).observe(document.body,{childList:!0,subtree:!0})}})); 152</script>
152 153
154<script id="shopify-cfh-end">window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');</script>
154 155 156 157<meta property="og:site_name" content="sevensmarketing"> 158<meta property="og:url" content="https://global.sevensmarketing.com/products/codemint-case-study-website-design-development-sevens-marketing"> 159<meta property="og:title" content="Codemint | Case Study | Website Design & Development | SEVENS Marketing"> 160<meta property="og:type" content="product"> 161<meta property="og:description" content="SEVENS Marketing | Digital Marketing Agency | Your Value is Our Value!"><meta property="og:image" content="http://sevensmarketing.com/cdn/shop/files/Mask_group.png?v=1733369453"> 162 <meta property="og:image:secure_url" content="https://sevensmarketing.com/cdn/shop/files/Mask_group.png?v=1733369453"> 163 <meta property="og:image:width" content="1120"> 164 <meta property="og:image:height" content="1120"><meta property="og:price:amount" content="0.00"> 165 <meta property="og:price:currency" content="CNY"><meta name="twitter:card" content="summary_large_image"> 166<meta name="twitter:title" content="Codemint | Case Study | Website Design & Development | SEVENS Marketing"> 167<meta name="twitter:description" content="SEVENS Marketing | Digital Marketing Agency | Your Value is Our Value!">
168<script> 169 window.THEMENAME = 'SUBSTRUCT'; 170 window.THEMEVERSION = '0.1.0'; 171 172 document.documentElement.className = document.documentElement.className.replace('no-js', 'js'); 173 174 function debounce(fn, wait) { 175 let t; 176 return (...args) => { 177 clearTimeout(t); 178 t = setTimeout(() => fn.apply(this, args), wait); 179 }; 180 } 181 182 window.theme = { 183 strings: { 184 loading: "Loading", 185 itemCountOne: "{{ count }} item", 186 itemCountOther: "{{ count }} items", 187 addToCart: "Add to Cart", 188 soldOut: "Sold Out", 189 unavailable: "Unavailable", 190 regularPrice: "Regular price", 191 salePrice: "Sale price", 192 sale: "On Sale", 193 unitPrice: "Unit price", 194 unitPriceSeparator: "per", 195 cartEmpty: "Your cart is currently empty.", 196 cartCookies: "Enable cookies to use the shopping cart", 197 update: "Update Cart", 198 quantity: "Quantity", 199 discountedTotal: "Discounted total", 200 regularTotal: "Regular total", 201 priceColumn: "See Price column for discount details.", 202 addedToCart: "Added to Cart!", 203 cartError: "There was an error while updating your cart. Please try again.", 204 cartAddError: "All {{ title }} are in your cart." 205 }, 206 routes: { 207 root_url: "\/", 208 predictive_search_url: "\/search\/suggest", 209 cart_url: "\/cart", 210 cart_add_url: "\/cart\/add", 211 cart_change_url: "\/cart\/change", 212 cart_update_url: "\/cart\/update", 213 cart_clear_url: "\/cart\/clear", 214 }, 215 moneyFormat: "Â¥{{amount}}", 216 moneyWithCurrencyFormat: "Â¥{{amount}} CNY", 217 get defaultMoneyFormat() { 218 return this.moneyWithCurrencyFormat; 219 }, 220 cartItemCount: 0, 221 settings: { 222 cart_type: "drawer", 223 open_drawer_on_add_to_cart: true 224 }, 225 info: { 226 name: 'Substruct', 227 } 228 }; 229</script>
vendor: 1 bytes, line 229
229
230<script src="//sevensmarketing.com/cdn/shop/t/9/assets/utils.js?v=172123362488042381251733369484" defer></script>
230 231
231<script src="//sevensmarketing.com/cdn/shop/t/9/assets/polyfills-inert.bundle.min.js?v=9775187524458939151733369484" type="module"></script>
231 232
232<script src="//sevensmarketing.com/cdn/shop/t/9/assets/global.bundle.min.js?v=140088728663493413701733369484" type="module"></script>
232 233
233<script src="//sevensmarketing.com/cdn/shop/t/9/assets/quantity-stepper.js?v=100736204299696274221733369483" type="module"></script>
233 234 235 236 237
237<script src="//sevensmarketing.com/cdn/shop/t/9/assets/cart-items.js?v=50530010457349698261733369483" type="module"></script>
237 238
238<script src="//sevensmarketing.com/cdn/shop/t/9/assets/cart-footer.js?v=92483396784368349501733369483" type="module"></script>
238 239 240
240<script src="//sevensmarketing.com/cdn/shop/t/9/assets/cart-note.js?v=176790727134936207331733369484" type="module"></script>
240 241 242 243 244
244<script src="//sevensmarketing.com/cdn/shop/t/9/assets/section-group-resize-observer.js?v=166234636156006366751733369483" defer></script>
244 245 246 247 248 249
249<script src="//sevensmarketing.com/cdn/shop/t/9/assets/vendor-cart.bundle.min.js?v=15289088482190403031733369484" type="module"></script>
249 250 251 252 253 254
254<script> 255 window.onYouTubeIframeAPIReady = () => { 256 document.body.dispatchEvent(new CustomEvent('youtubeiframeapiready')); 257 }; 258 </script>
258<style id="generated-critical-css"> 259.flex>.break-words,.flex>.rte,.flex>.rte *{min-width:40%}.dynamic-payment-buttons .shopify-payment-button__button--hidden{display:none}.wrapper{max-width:var(--max-site-width)}.grid-wrapper,.wrapper{margin-left:auto;margin-right:auto;padding-left:var(--wrapper-left-and-right-margin);padding-right:var(--wrapper-left-and-right-margin)}.grid-wrapper{max-width:var(--max-grid-width)}.flex{display:flex}.hidden-if-no-content:has(.no-content){display:none}[data-shopify-xr-hidden]{display:none} 260</style> 261 262 263 264 265 <link 266 rel='preload' 267 as='font' 268 href='//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n7.e4ad9032e203f9a0977786c356573ced65a7419a.woff2' 269 type='font/woff2' 270 crossorigin 271 > 272 273 274 275 <link 276 rel='preload' 277 as='font' 278 href='//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n4.db86542ae5e1596dbdb28c279ae6c2086c4c5bfa.woff2' 279 type='font/woff2' 280 crossorigin 281 > 282 283 284 285<style data-shopify> 286 @font-face { 287 font-family: "Instrument Sans"; 288 font-weight: 400; 289 font-style: normal; 290 font-display: swap; 291 src: url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n4.db86542ae5e1596dbdb28c279ae6c2086c4c5bfa.woff2") format("woff2"), 292 url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n4.510f1b081e58d08c30978f465518799851ef6d8b.woff") format("woff"); 293} 294 295 @font-face { 296 font-family: "Instrument Sans"; 297 font-weight: 700; 298 font-style: normal; 299 font-display: swap; 300 src: url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n7.e4ad9032e203f9a0977786c356573ced65a7419a.woff2") format("woff2"), 301 url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n7.b9e40f166fb7639074ba34738101a9d2990bb41a.woff") format("woff"); 302} 303 304@font-face { 305 font-family: "Instrument Sans"; 306 font-weight: 700; 307 font-style: normal; 308 font-display: swap; 309 src: url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n7.e4ad9032e203f9a0977786c356573ced65a7419a.woff2") format("woff2"), 310 url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n7.b9e40f166fb7639074ba34738101a9d2990bb41a.woff") format("woff"); 311} 312@font-face { 313 font-family: "Instrument Sans"; 314 font-weight: 400; 315 font-style: italic; 316 font-display: swap; 317 src: url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_i4.028d3c3cd8d085648c808ceb20cd2fd1eb3560e5.woff2") format("woff2"), 318 url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_i4.7e90d82df8dee29a99237cd19cc529d2206706a2.woff") format("woff"); 319} 320@font-face { 321 font-family: "Instrument Sans"; 322 font-weight: 700; 323 font-style: italic; 324 font-display: swap; 325 src: url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_i7.d6063bb5d8f9cbf96eace9e8801697c54f363c6a.woff2") format("woff2"), 326 url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_i7.ce33afe63f8198a3ac4261b826b560103542cd36.woff") format("woff"); 327} 328@font-face { 329 font-family: "Instrument Sans"; 330 font-weight: 700; 331 font-style: normal; 332 font-display: swap; 333 src: url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n7.e4ad9032e203f9a0977786c356573ced65a7419a.woff2") format("woff2"), 334 url("//sevensmarketing.com/cdn/fonts/instrument_sans/instrumentsans_n7.b9e40f166fb7639074ba34738101a9d2990bb41a.woff") format("woff"); 335} 336 337</style> 338<style> 339 :root { 340 --payment-button-height: 48px; 341 --section-x-padding: 1.25rem; 342 --transparent: transparent; 343 --sidebar-width: 0px; 344 --main-section-column-start: 1; 345 --main-grid-layout: auto; 346 --icon-thickness: 1.4; 347 348 --theme-row-gap-mobile: 1.5rem; 349 --theme-col-gap-mobile: 1.5rem; 350 --theme-row-gap-desktop: 3.0rem; 351 --theme-col-gap-desktop: 3.0rem; 352 --theme-row-gap: var(--theme-row-gap-mobile); 353 --theme-col-gap: var(--theme-col-gap-mobile); 354 --theme-gap: var(--theme-row-gap-mobile) var(--theme-col-gap-mobile); 355 356 357 --media-grid-row-gap-mobile: 0.375rem; 358 --media-grid-col-gap-mobile: 0.375rem; 359 --media-grid-row-gap-desktop: 0.75rem; 360 --media-grid-col-gap-desktop: 0.75rem; 361 --media-grid-row-gap: var(--media-grid-row-gap-mobile); 362 --media-grid-col-gap: var(--media-grid-col-gap-mobile); 363 --media-grid-gap: var(--media-grid-row-gap-mobile) var(--media-grid-col-gap-mobile); 364 365 --section-vertical-spacing-desktop: 3.75rem; 366 --section-vertical-spacing-mobile: 42px; 367 --section-vertical-spacing: var(--section-vertical-spacing-mobile); 368 369 370 --spacer: 1rem; 371 372 373 --mobile-left-and-right-margin: 0.75rem; 374 --desktop-left-and-right-margin: 4.0rem; 375 --wrapper-left-and-right-margin: var(--mobile-left-and-right-margin); 376 377 --media-border-radius: 0;--section-title-col-span: 4; 378 --section-content-col-span: 6;--max-site-width: 100%; 379 --max-grid-width: 100%; 380 381 --section-container-left-and-right-margin: 0; 382 383 --main-font-stack: "Instrument Sans", sans-serif; 384 --main-font-weight: 400; 385 --main-font-style: normal; 386 387 --heading-font-stack: "Instrument Sans", sans-serif;
388 --heading-font-weight: 700; 389 --heading-font-style: normal; 390 --heading-line-height: 0.9; 391 --heading-text-transform: uppercase; 392 393 --heading-letterspacing: 0.0; 394 --heading-capitalize: none; 395 --heading-decoration: none; 396 397 --color-scheme-error: 245 0 0; 398 --color-scheme-success: 0 215 0; 399 400 font-size: 112.5%; 401 402 --base-font-size-from-settings: 18; 403 404 --space-1: 0.625rem; /* .py-2.5 */ 405 --space-2: 1.25rem; /* .py-5 */ 406 --space-3: 2.5rem; /* .py-10 */ 407 --space-4: 5rem; /* .py-20 */ 408 --space-5: 7rem; /* .py-28 */ 409 410 --font-size-ratio-xs: 0.563; /* 1 */ 411 --font-size-ratio-sm: 0.75; /* 2 */ 412 --font-size-ratio-base: 1; /* 3 */ 413 --font-size-ratio-md: 1.333; 414 --font-size-ratio-lg: 1.777; 415 --font-size-ratio-xl: 2.369; 416 --font-size-ratio-2xl: 3.157; 417 --font-size-ratio-3xl: 4.209; 418 --font-size-ratio-4xl: 5.61; 419 --font-size-ratio-5xl: 7.478; 420 --font-size-ratio-6xl: 9.969; 421 --font-size-ratio-7xl: 13.288; 422 --font-size-ratio-8xl: 17.713; 423 --font-size-ratio-9xl: 23.612; 424 425 --font-size-xs: calc(var(--font-size-ratio-xs) * 1rem); 426 --font-size-sm: calc(var(--font-size-ratio-sm) * 1rem); 427 --font-size-base: calc(var(--font-size-ratio-base) * 1rem); 428 --font-size-md: calc(var(--font-size-ratio-md) * 1rem); 429 --font-size-lg: calc(var(--font-size-ratio-lg) * 1rem); 430 --font-size-xl: calc(var(--font-size-ratio-xl) * 1rem); 431 --font-size-2xl: calc(var(--font-size-ratio-2xl) * 1rem); 432 --font-size-3xl: calc(var(--font-size-ratio-3xl) * 1rem); 433 --font-size-4xl: calc(var(--font-size-ratio-4xl) * 1rem); 434 --font-size-5xl: calc(var(--font-size-ratio-5xl) * 1rem); 435 --font-size-6xl: calc(var(--font-size-ratio-6xl) * 1rem); 436 --font-size-7xl: calc(var(--font-size-ratio-7xl) * 1rem); 437 --font-size-8xl: calc(var(--font-size-ratio-8xl) * 1rem); 438 --font-size-9xl: calc(var(--font-size-ratio-9xl) * 1rem); 439 440 --type-scale-ratio-xs: 0.563; /* 1 */ 441 --type-scale-ratio-sm: 0.75; /* 2 */ 442 --type-scale-ratio-base: 1; /* 3 */ 443 --type-scale-ratio-md: 1.333; 444 --type-scale-ratio-lg: 1.777; 445 --type-scale-ratio-xl: 2.369; 446 --type-scale-ratio-2xl: 3.157; 447 --type-scale-ratio-3xl: 4.209; 448 --type-scale-ratio-4xl: 5.61; 449 --type-scale-ratio-5xl: 7.478; 450 --type-scale-ratio-6xl: 9.969; 451 --type-scale-ratio-7xl: 13.288; 452 --type-scale-ratio-8xl: 17.713; 453 --type-scale-ratio-9xl: 23.612; 454 455 --type-scale-n-2: calc(var(--type-scale-ratio-xs) * 1rem); 456 --type-scale-n-1: calc(var(--type-scale-ratio-sm) * 1rem); 457 --type-scale-n0: calc(var(--type-scale-ratio-base) * 1rem); 458 --type-scale-n1: calc(var(--type-scale-ratio-md) * 1rem); 459 --type-scale-n2: calc(var(--type-scale-ratio-lg) * 1rem); 460 --type-scale-n3: calc(var(--type-scale-ratio-xl) * 1rem); 461 --type-scale-n4: calc(var(--type-scale-ratio-2xl) * 1rem); 462 --type-scale-n5: calc(var(--type-scale-ratio-3xl) * 1rem); 463 --type-scale-n6: calc(var(--type-scale-ratio-4xl) * 1rem); 464 --type-scale-n7: calc(var(--type-scale-ratio-5xl) * 1rem); 465 --type-scale-n8: calc(var(--type-scale-ratio-6xl) * 1rem); 466 --type-scale-n9: calc(var(--type-scale-ratio-7xl) * 1rem); 467 --type-scale-n10: calc(var(--type-scale-ratio-8xl) * 1rem); 468 --type-scale-n11: calc(var(--type-scale-ratio-9xl) * 1rem); 469 470 --base-line-height: 1.2; 471 --bopy-text-uppercase: none; 472 473 --font-size-heading: var(--font-size-3xl); 474 475 --hero-height: 0px; 476 --full-screen-including-header: 100vh; 477 --full-screen-excluding-header-and-hero: 100vh; 478 479 --tile-products-text-transform: none; 480 --button-text-transform: none; 481 --button-border-radius: 9999px; 482 --input-border-radius: 1rem; 483 484 --border-thickness: 1px; 485 --underline-thickness: 2px; 486 --outline-thickness: 0.1rem; 487 --paragraph-spacing-adjust: 1; 488 --paragraph-indent-adjust: 1; 489 490 --icon-svg-select: url(//sevensmarketing.com/cdn/shop/t/9/assets/icon-select.svg?v=3428); 491 --icon-svg-select-primary: url(//sevensmarketing.com/cdn/shop/t/9/assets/icon-select-primary.svg?v=3428); 492 --icon-svg-select-secondary: url(//sevensmarketing.com/cdn/shop/t/9/assets/icon-select-secondary.svg?v=3428); 493 --icon-svg-select-tertiary: url(//sevensmarketing.com/cdn/shop/t/9/assets/icon-select-tertiary.svg?v=3428); 494 495 --timing-func-energetic: cubic-bezier(1,0,0.4,1); 496 --timing-func-gentle: cubic-bezier(0.5,0,0.4,1); 497 --timing-func-neutral: cubic-bezier(0.46,0.03,0.52,0.96); 498 499 --main-grid-columns: minmax(0, 1fr); 500 --main-grid-rows: minmax(0,auto);--main-grid-areas: "ct";--sidebar-display: none; 501 --sticky-offset: 0px; 502 503 504 505 --standard-heading-size: var(--type-scale-n1); 506 --feature-heading-size: var(--type-scale-n2); 507 --secondary-heading-size: var(--type-scale-n0); 508 --menu-drawer-heading-size: var(--type-scale-n0); 509 510 --text-overlay-text-size: var(--type-scale-n7); 511 --follow-mouse-text-size: var(--type-scale-n4); 512 --overlay-labels-line-height: 1.4; 513 514 --quick-view-max-width: 24rem; 515 516 517 518 /* Buttons */--button-padding-y: 0.375rem; 519 --button-padding-x: 0.75rem; 520 --button-padding: var(--button-padding-y) var(--button-padding-x);--add-to-cart-button-height: 44px; 521 } 522 523 @media (min-width: 990px) { 524 :root { 525 --standard-heading-size: var(--type-scale-n2); 526 --feature-heading-size: var(--type-scale-n4); 527 --secondary-heading-size: var(--type-scale-n1); 528 --section-vertical-spacing: var(--section-vertical-spacing-desktop); 529 --wrapper-left-and-right-margin: var(--desktop-left-and-right-margin); 530 --theme-row-gap: var(--theme-row-gap-desktop); 531 --theme-col-gap: var(--theme-col-gap-desktop); 532 --theme-gap: var(--theme-row-gap-desktop) var(--theme-col-gap-desktop); 533 --media-grid-row-gap: var(--media-grid-row-gap-desktop); 534 --media-grid-col-gap: var(--media-grid-col-gap-desktop); 535 --media-grid-gap: var(--media-grid-row-gap-desktop) var(--media-grid-col-gap-desktop); 536 } 537 } 538 539 .main-site-grid--sidebar { 540 display: var(--sidebar-display); 541 } 542 543 544 @media (min-width: 990px) { 545 546 .main-site-grid { 547 display: grid; 548 grid-template-columns: var(--main-grid-columns); 549 grid-template-rows: var(--main-grid-rows); 550 grid-template-areas: var(--main-grid-areas); 551 } 552 553 .main-site-grid--container { 554 grid-area: ct; 555 } 556 557 .main-site-grid--header { 558 grid-area: hd; 559 } 560 561 .main-site-grid--hero { 562 grid-area: hr; 563 } 564 565 .main-site-grid--sidebar { 566 grid-area: sb; 567 } 568 569 .main-site-grid--main { 570 grid-area: mn; 571 } 572 573 .main-site-grid--footer { 574 grid-area: ft; 575 } 576 } 577 578 579 580 .font-heading { 581 font-family: var(--heading-font-stack);
582 font-weight: var(--heading-font-weight); 583 font-style: var(--heading-font-style); 584 text-transform: var(--heading-capitalize); 585 letter-spacing: var(--heading-letterspacing); 586 text-decoration: var(--heading-decoration); 587 } 588 589 .font-main { 590 font-family: var(--main-font-stack); 591 font-weight: var(--main-font-weight); 592 font-style: var(--main-font-style); 593 text-transform: var(--bopy-text-uppercase); 594 } 595 596 .font-accent { 597 font-family: var(--accent-font-stack); 598 font-weight: var(--accent-font-weight); 599 font-style: var(--accent-font-style); 600 } 601 602 @media (prefers-color-scheme: light) { 603 :root { 604 --color-os-background: 255, 255, 255; 605 } 606 } 607 608 @media (prefers-color-scheme: dark) { 609 :root { 610 --color-os-background: 0, 0, 0; 611 } 612 } 613 614 [data-color-scheme] { 615 --color-scheme-button-text-hover: var(--color-scheme-accent); 616 --color-scheme-button-background-hover: var(--color-scheme-background); 617 } 618 619 620 621 622 :root, 623 624 [data-color-scheme="scheme1"] { 625 --color-scheme-text: 0 0 0; 626 --color-scheme-background: 241 241 241; 627 --color-scheme-accent: 255 16 134; 628 --color-scheme-accent-contrast: 255 255 255; 629 --color-scheme-secondary: 0 0 0; 630 --color-scheme-border: 0 0 0; 631 --color-scheme-outline-color: var(--color-scheme-text); 632 633 634 --color-scheme-solid-button-background: var(--color-scheme-text); 635 --color-scheme-solid-button-text: var(--color-scheme-background); 636 --color-scheme-solid-button-background-hover: var(--color-scheme-accent); 637 --color-scheme-solid-button-text-hover: var(--color-scheme-accent-contrast);--arrow-left-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12L2.00004 12' vector-effect='non-scaling-stroke' stroke='%23000000' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M10.2353 3.76472L2.00001 12L10.2353 20.2353' stroke='%23000000' stroke-width='1.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E"); 638--arrow-right-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12H22' vector-effect='non-scaling-stroke' stroke='%23000000' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M13.7647 20.2353L22 12L13.7647 3.76472' stroke='%23000000' vector-effect='non-scaling-stroke' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 639--left-arrow-cursor: var(--arrow-left-svg) 0 24, pointer; 640--right-arrow-cursor: var(--arrow-right-svg) 48 24, pointer;} 641 642 643 644 [data-color-scheme="scheme2"] { 645 --color-scheme-text: 255 255 255; 646 --color-scheme-background: 0 0 0; 647 --color-scheme-accent: 0 26 255; 648 --color-scheme-accent-contrast: 0 0 0; 649 --color-scheme-secondary: 0 0 0; 650 --color-scheme-border: 64 64 64; 651 --color-scheme-outline-color: var(--color-scheme-text); 652 653 654 --color-scheme-solid-button-background: var(--color-scheme-text); 655 --color-scheme-solid-button-text: var(--color-scheme-background); 656 --color-scheme-solid-button-background-hover: var(--color-scheme-accent); 657 --color-scheme-solid-button-text-hover: var(--color-scheme-accent-contrast);--arrow-left-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12L2.00004 12' vector-effect='non-scaling-stroke' stroke='%23ffffff' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M10.2353 3.76472L2.00001 12L10.2353 20.2353' stroke='%23ffffff' stroke-width='1.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E"); 658--arrow-right-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12H22' vector-effect='non-scaling-stroke' stroke='%23ffffff' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M13.7647 20.2353L22 12L13.7647 3.76472' stroke='%23ffffff' vector-effect='non-scaling-stroke' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 659--left-arrow-cursor: var(--arrow-left-svg) 0 24, pointer; 660--right-arrow-cursor: var(--arrow-right-svg) 48 24, pointer;} 661 662 663 664 [data-color-scheme="scheme-df8f23d3-6c53-4911-955b-374d3d83eb6b"] { 665 --color-scheme-text: 255 255 255; 666 --color-scheme-background: 0 26 255; 667 --color-scheme-accent: 255 16 134; 668 --color-scheme-accent-contrast: 255 255 255; 669 --color-scheme-secondary: 255 255 255; 670 --color-scheme-border: 255 255 255; 671 --color-scheme-outline-color: var(--color-scheme-text); 672 673 674 --color-scheme-solid-button-background: var(--color-scheme-text); 675 --color-scheme-solid-button-text: var(--color-scheme-background); 676 --color-scheme-solid-button-background-hover: var(--color-scheme-accent); 677 --color-scheme-solid-button-text-hover: var(--color-scheme-accent-contrast);--arrow-left-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12L2.00004 12' vector-effect='non-scaling-stroke' stroke='%23ffffff' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M10.2353 3.76472L2.00001 12L10.2353 20.2353' stroke='%23ffffff' stroke-width='1.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E"); 678--arrow-right-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12H22' vector-effect='non-scaling-stroke' stroke='%23ffffff' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M13.7647 20.2353L22 12L13.7647 3.76472' stroke='%23ffffff' vector-effect='non-scaling-stroke' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 679--left-arrow-cursor: var(--arrow-left-svg) 0 24, pointer; 680--right-arrow-cursor: var(--arrow-right-svg) 48 24, pointer;} 681 682 683 684 [data-color-scheme="scheme-f2993c67-f9d4-4fdc-9d89-5dfde2833e86"] { 685 --color-scheme-text: 0 26 255; 686 --color-scheme-background: 241 241 241; 687 --color-scheme-accent: 0 26 255; 688 --color-scheme-accent-contrast: 255 255 255; 689 --color-scheme-secondary: 0 26 255; 690 --color-scheme-border: 0 0 0; 691 --color-scheme-outline-color: var(--color-scheme-text); 692 693 694 --color-scheme-solid-button-background: var(--color-scheme-text); 695 --color-scheme-solid-button-text: var(--color-scheme-background); 696 --color-scheme-solid-button-background-hover: var(--color-scheme-accent); 697 --color-scheme-solid-button-text-hover: var(--color-scheme-accent-contrast);--arrow-left-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12L2.00004 12' vector-effect='non-scaling-stroke' stroke='%23001aff' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M10.2353 3.76472L2.00001 12L10.2353 20.2353' stroke='%23001aff' stroke-width='1.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E"); 698--arrow-right-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12H22' vector-effect='non-scaling-stroke' stroke='%23001aff' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M13.7647 20.2353L22 12L13.7647 3.76472' stroke='%23001aff' vector-effect='non-scaling-stroke' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 699--left-arrow-cursor: var(--arrow-left-svg) 0 24, pointer; 700--right-arrow-cursor: var(--arrow-right-svg) 48 24, pointer;} 701 702 703 704 [data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a"] { 705 --color-scheme-text: 0 0 0; 706 --color-scheme-background: 255 255 255; 707 --color-scheme-accent: 0 26 255; 708 --color-scheme-accent-contrast: 255 255 255; 709 --color-scheme-secondary: 0 0 0; 710 --color-scheme-border: 0 0 0; 711 --color-scheme-outline-color: var(--color-scheme-text); 712 713 714 --color-scheme-solid-button-background: var(--color-scheme-text); 715 --color-scheme-solid-button-text: var(--color-scheme-background); 716 --color-scheme-solid-button-background-hover: var(--color-scheme-accent); 717 --color-scheme-solid-button-text-hover: var(--color-scheme-accent-contrast);--arrow-left-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12L2.00004 12' vector-effect='non-scaling-stroke' stroke='%23000000' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M10.2353 3.76472L2.00001 12L10.2353 20.2353' stroke='%23000000' stroke-width='1.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E"); 718--arrow-right-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12H22' vector-effect='non-scaling-stroke' stroke='%23000000' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M13.7647 20.2353L22 12L13.7647 3.76472' stroke='%23000000' vector-effect='non-scaling-stroke' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 719--left-arrow-cursor: var(--arrow-left-svg) 0 24, pointer; 720--right-arrow-cursor: var(--arrow-right-svg) 48 24, pointer;} 721 722 723 724 [data-color-scheme="scheme-1b30d7ab-ddf6-4727-bd27-c1f97b3231dc"] { 725 --color-scheme-text: 255 75 1; 726 --color-scheme-background: 255 255 255; 727 --color-scheme-accent: 255 255 255; 728 --color-scheme-accent-contrast: 0 26 255; 729 --color-scheme-secondary: 0 26 255; 730 --color-scheme-border: 0 0 0; 731 --color-scheme-outline-color: var(--color-scheme-text); 732 733 734 --color-scheme-solid-button-background: var(--color-scheme-text); 735 --color-scheme-solid-button-text: var(--color-scheme-background); 736 --color-scheme-solid-button-background-hover: var(--color-scheme-accent); 737 --color-scheme-solid-button-text-hover: var(--color-scheme-accent-contrast);--arrow-left-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12L2.00004 12' vector-effect='non-scaling-stroke' stroke='%23ff4b01' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M10.2353 3.76472L2.00001 12L10.2353 20.2353' stroke='%23ff4b01' stroke-width='1.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E"); 738--arrow-right-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12H22' vector-effect='non-scaling-stroke' stroke='%23ff4b01' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M13.7647 20.2353L22 12L13.7647 3.76472' stroke='%23ff4b01' vector-effect='non-scaling-stroke' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 739--left-arrow-cursor: var(--arrow-left-svg) 0 24, pointer; 740--right-arrow-cursor: var(--arrow-right-svg) 48 24, pointer;} 741 742 743 744 [data-color-scheme="scheme-96d8e78b-00d8-4a70-9e22-7ba79694c8a1"] { 745 --color-scheme-text: 0 0 0; 746 --color-scheme-background: 255 255 255; 747 --color-scheme-accent: 255 16 134; 748 --color-scheme-accent-contrast: 255 255 255; 749 --color-scheme-secondary: 0 0 0; 750 --color-scheme-border: 0 0 0; 751 --color-scheme-outline-color: var(--color-scheme-text); 752 753 754 --color-scheme-solid-button-background: var(--color-scheme-text); 755 --color-scheme-solid-button-text: var(--color-scheme-background); 756 --color-scheme-solid-button-background-hover: var(--color-scheme-accent); 757 --color-scheme-solid-button-text-hover: var(--color-scheme-accent-contrast);--arrow-left-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12L2.00004 12' vector-effect='non-scaling-stroke' stroke='%23000000' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M10.2353 3.76472L2.00001 12L10.2353 20.2353' stroke='%23000000' stroke-width='1.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E"); 758--arrow-right-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12H22' vector-effect='non-scaling-stroke' stroke='%23000000' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M13.7647 20.2353L22 12L13.7647 3.76472' stroke='%23000000' vector-effect='non-scaling-stroke' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 759--left-arrow-cursor: var(--arrow-left-svg) 0 24, pointer; 760--right-arrow-cursor: var(--arrow-right-svg) 48 24, pointer;} 761 762 763 764 [data-color-scheme="scheme-61e7c130-0c3c-4de7-8a4d-e9b21b9f104a"] { 765 --color-scheme-text: 255 75 1; 766 --color-scheme-background: 255 255 255; 767 --color-scheme-accent: 0 0 0; 768 --color-scheme-accent-contrast: 255 75 1; 769 --color-scheme-secondary: 0 0 0; 770 --color-scheme-border: 255 75 1; 771 --color-scheme-outline-color: var(--color-scheme-text); 772 773 774 --color-scheme-solid-button-background: var(--color-scheme-text); 775 --color-scheme-solid-button-text: var(--color-scheme-background); 776 --color-scheme-solid-button-background-hover: var(--color-scheme-accent); 777 --color-scheme-solid-button-text-hover: var(--color-scheme-accent-contrast);--arrow-left-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12L2.00004 12' vector-effect='non-scaling-stroke' stroke='%23ff4b01' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M10.2353 3.76472L2.00001 12L10.2353 20.2353' stroke='%23ff4b01' stroke-width='1.4' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E"); 778--arrow-right-svg: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12H22' vector-effect='non-scaling-stroke' stroke='%23ff4b01' stroke-width='1.4' stroke-miterlimit='10'/%3E%3Cpath d='M13.7647 20.2353L22 12L13.7647 3.76472' stroke='%23ff4b01' vector-effect='non-scaling-stroke' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); 779--left-arrow-cursor: var(--arrow-left-svg) 0 24, pointer; 780--right-arrow-cursor: var(--arrow-right-svg) 48 24, pointer;} 781 782 783@keyframes marquee { 784 0% { 785 transform: translateX(0); 786 -webkit-transform: translateX(0); 787 } 788 100% { 789 transform: translateX(-100%); 790 -webkit-transform: translateX(-100%); 791 } 792 } 793 794 [x-cloak] { 795 display: none; 796 } 797</style> 798 799<link 800 rel="stylesheet" 801 href="//sevensmarketing.com/cdn/shop/t/9/assets/global.css?v=3116160874382880161733369484" 802 media="print" 803 onload="this.media='all'; this.onload = null"> 804 805<link 806 rel="stylesheet" 807 href="//sevensmarketing.com/cdn/shop/t/9/assets/custom.scss.css?v=42757070414547231461733369483" 808 media="print" 809 onload="this.media='all'; this.onload = null"> 810 811<link 812 rel="stylesheet" 813 href="//sevensmarketing.com/cdn/shop/t/9/assets/base.bundle.css?v=71596789019158698261733369484" 814 media="print" 815 onload="this.media='all'; this.onload = null"> 816 817
817<script async branding="false" data-fwparam_chat_channel_id="wgkk0g" data-fwparam_live_helper_placement="BOTTOM_RIGHT" src="https://asset.fwcdn3.com/js/live-helper.js"></script>
817 818
818<script> 819 document.addEventListener("DOMContentLoaded", function() { 820 function showWidget() { 821 window._fwn.liveHelper.actions.showWidget() 822 } 823 if (window._fwn) { 824 // _fwn is available, use the API immediately 825 showWidget() 826 } else { 827 // Wait for fw:ready event 828 document.addEventListener('fw:ready', ()=>{ 829 showWidget() 830 }); 831 } 832 }); 833 </script>
833 834 835 836 837
837<script crossorigin="anonymous" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
837 838
838<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
838 839 840<link 841 rel="stylesheet"id="None" 842 href="http://www.bbsxiaomi.com/case/css/animate.min.css" 843 media="print" 844 onload="this.media='all'; this.onload = null"> 845
845<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>
845 846 847 848<link 849 rel="stylesheet"id="None" 850 href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" 851 media="print" 852 onload="this.media='all'; this.onload = null"> 853
853<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
853 854
854<script src="https://unpkg.com/element-ui/lib/index.js"></script>
854 855 856 <link href="https://monorail-edge.shopifysvc.com" rel="dns-prefetch">
857<script>(function(){if ("sendBeacon" in navigator && "performance" in window) {try {var session_token_from_headers = performance.getEntriesByType('navigation')[0].serverTiming.find(x => x.name == '_s').description;} catch {var session_token_from_headers = undefined;}var session_cookie_matches = document.cookie.match(/_shopify_s=([^;]*)/);var session_token_from_cookie = session_cookie_matches && session_cookie_matches.length === 2 ? session_cookie_matches[1] : "";var session_token = session_token_from_headers || session_token_from_cookie || "";function handle_abandonment_event(e) {var entries = performance.getEntries().filter(function(entry) {return /monorail-edge.shopifysvc.com/.test(entry.name);});if (!window.abandonment_tracked && entries.length === 0) {window.abandonment_tracked = true;var currentMs = Date.now();var navigation_start = performance.timing.navigationStart;var payload = {shop_id: 85833908511,url: window.location.href,navigation_start,duration: currentMs - navigation_start,session_token,page_type: "product"};window.navigator.sendBeacon("https://monorail-edge.shopifysvc.com/v1/produce", JSON.stringify({schema_id: "online_store_buyer_site_abandonment/1.1",payload: payload,metadata: {event_created_at_ms: currentMs,event_sent_at_ms: currentMs}}));}}window.addEventListener('pagehide', handle_abandonment_event);}}());</script>
vendor: 1 bytes, line 857
857
858<script> 859 window.__TREKKIE_SHIM_QUEUE = window.__TREKKIE_SHIM_QUEUE || []; 860</script>
vendor: 1 bytes, line 860
860
861<script>(function(){var wpmLoader=function(){"use strict";var e=/Googlebot|Storebot-Google|bingbot|Baiduspider|YandexBot|DuckDuckBot|Slurp|facebookexternalhit|Twitterbot|LinkedInBot|Applebot|AdsBot-Google|Mediapartners-Google|APIs-Google|PetalBot|SemrushBot|AhrefsBot|MJ12bot|DotBot|Acunetix|PerplexityBot|Perplexity-User/i,t=/bytedance/i;function i(){try{var e=document.cookie;if(!e||"string"!=typeof e)return;for(var t=0,i=e.split(";");t<i.length;t++){var n=i[t],r=n.indexOf("=");if(-1!==r){var o=n.slice(0,r).trim();if(o){var a=void 0;try{a=decodeURIComponent(o)}catch(e){a=o}if("_shopify_s"===a){var d=n.slice(r+1).trim();try{return decodeURIComponent(d)}catch(e){return d}}}}}return}catch(e){return}}function n(e){try{"undefined"!=typeof console&&"function"==typeof console.warn&&console.warn(e)}catch(e){}}function r(e,t){return"string"==typeof e&&e.length>0&&e.length<=t?e:void 0}function o(e){var t;switch(null==(t=null==e?void 0:e.navigation)?void 0:t.type){case 0:return"navigate";case 1:return"reload";case 2:return"back_forward";default:return}}function a(){var e,t,i;try{var n=null==(i=null==(t=null==(e=self.ShopifyAnalytics)?void 0:e.lib)?void 0:t.trekkie)?void 0:i.state;return"awaiting-consent"===n||"initialized"===n?n:void 0}catch(e){return}}return function(d,s,u,l){var c=arguments.length>4&&void 0!==arguments[4]?arguments[4]:{};try{var p=c.trekkieShim;!0!==p&&"true"!==p||null!=window.__TREKKIE_SHIM_QUEUE||(window.__TREKKIE_SHIM_QUEUE=[])}catch(e){}var f,v,h,y,g=(v=(f={modern:/Edge?\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Firefox\/(1{2}[4-9]|1[2-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Chrom(ium|e)\/(9{2}|\d{3,})\.\d+(\.\d+|)|(Maci|X1{2}).+ Version\/(15\.\d+|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(9{2}|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(15[._]\d+|(1[6-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|SamsungBrowser\/([2-9]\d|\d{3,})\.\d+/,legacy:/Edge?\/(1[6-9]|[2-9]\d|\d{3,})\.\d+(\.\d+|)|Firefox\/(5[4-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)|Chrom(ium|e)\/(5[1-9]|[6-9]\d|\d{3,})\.\d+(\.\d+|)([\d.]+$|.*Safari\/(?![\d.]+ Edge\/[\d.]+$))|(Maci|X1{2}).+ Version\/(10\.\d+|(1[1-9]|[2-9]\d|\d{3,})\.\d+)([,.]\d+|)( \(\w+\)|)( Mobile\/\w+|) Safari\/|Chrome.+OPR\/(3[89]|[4-9]\d|\d{3,})\.\d+\.\d+|(CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(10[._]\d+|(1[1-9]|[2-9]\d|\d{3,})[._]\d+)([._]\d+|)|Android:?[ /-](14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})(\.\d+|)(\.\d+|)|Mobile Safari.+OPR\/([89]\d|\d{3,})\.\d+\.\d+|Android.+Firefox\/(15\d|1[6-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+Chrom(ium|e)\/(14[89]|1[5-9]\d|[2-9]\d{2}|\d{4,})\.\d+(\.\d+|)|Android.+(UC? ?Browser|UCWEB|U3)[ /]?(15\.([5-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)\.\d+|SamsungBrowser\/(5\.\d+|([6-9]|\d{2,})\.\d+)|Android.+MQ{2}Browser\/(14(\.(9|\d{2,})|)|(1[5-9]|[2-9]\d|\d{3,})(\.\d+|))(\.\d+|)|K[Aa][Ii]OS\/(3\.\d+|([4-9]|\d{2,})\.\d+)(\.\d+|)/}).modern,h=f.legacy,(y=navigator.userAgent).match(e)?"bot":y.match(v)?"modern":y.match(h)?"legacy":y.match(t)?"bot":"unknown"),m=function(e){var t,i,n=r(e,128);try{var a=window.performance,d=null==(t=null==a?void 0:a.getEntriesByType)?void 0:t.call(a,"navigation")[0];if(!d)return{requestId:n,navigationType:o(a)};var s="type"in d?r(d.type,64):void 0,u="serverTiming"in d&&Array.isArray(d.serverTiming)?d.serverTiming:[];return{requestId:null!=n?n:r(null==(i=u.find(function(e){return"requestID"===e.name}))?void 0:i.description,128),navigationType:s}}catch(e){return{requestId:n}}}(c.requestId),w=function(e){var t=e.version,r=e.browserTarget,o=e.surface,a=e.shopId,d=e.monorailEndpoint,s=window.location.href;return{emit:function(e){var u=e.status,l=e.errorMsg,c=e.failureReason,p=e.useKeepaliveFallback,f=void 0!==p&&p,v=e.navigationType,h=e.pagehidePersisted,y=e.requestId,g=e.trekkieState;if(d){var m,w;try{var b=(new Date).getTime();m=JSON.stringify({metadata:{event_sent_at_ms:b},events:[{schema_id:"web_pixels_manager_load/3.3",payload:{version:t,bundle_target:r,page_url:s,status:u,surface:o,error_msg:l,failure_reason:c,navigation_type:v,pagehide_persisted:h,request_id:y,trekkie_state:g,shop_id:a,visit_token:i()},metadata:{event_created_at_ms:b}}]})}catch(e){return}try{if("function"==typeof window.navigator.sendBeacon&&-1===(w=window.navigator.userAgent).indexOf("iPhone; CPU iPhone OS 12_")&&-1===w.indexOf("iPad; CPU OS 12_")&&-1===w.indexOf("iPod touch; CPU iPhone OS 12_")&&window.navigator.sendBeacon.bind(window.navigator)(d,m))return}catch(e){}if(f)try{"function"==typeof window.fetch&&window.fetch(d,{method:"POST",headers:{"Content-Type":"text/plain"},body:m,keepalive:!0}
861).catch(function(){})}catch(e){}else try{var _=new XMLHttpRequest;_.open("POST",d,!0),_.setRequestHeader("Content-Type","text/plain"),_.send(m)}catch(e){n("[Web Pixels Manager] Got an unhandled error while logging to Monorail.")}}else n("[Web Pixels Manager] No Monorail endpoint provided, skipping logging.")}}}({version:u,browserTarget:g,surface:d.surface,shopId:d.shopId,monorailEndpoint:d.monorailEndpoint});if(Boolean(null==(_=null==(b=window.Shopify)?void 0:b.analytics)?void 0:_.replayQueue))w.emit({status:"setup-skipped",errorMsg:"replay queue already initialized."});else{var b,_;w.emit({status:"setup-started"}),window.Shopify=window.Shopify||{};var S=window.Shopify;S.analytics=S.analytics||{};var P=S.analytics;P.replayQueue=[],P.publish=function(e,t,i){return P.replayQueue.push([e,t,i]),!0};try{self.performance.mark("wpm:start")}catch(e){}var k,C="modern"===g?"modern":"legacy",E=(null!=l?l:{modern:"",legacy:""})[C],I=[(k={baseUrl:s,hashVersion:u,buildTarget:C}).baseUrl,"/wpm","/b",k.hashVersion,"modern"===k.buildTarget?"m":"l",".js"].join(""),O=!1,T=!1;try{c.browserTarget=g,function(){O=!0;try{window.addEventListener("pagehide",M)}catch(e){O=!1}}(),R(function(){try{R(x)}catch(e){D(e)}}),w.emit({status:"loading",requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()})}catch(e){D(e)}}function U(){var e;if(q(),!function(){var e,t;return Boolean(null==(t=null==(e=window.Shopify)?void 0:e.analytics)?void 0:t.initialized)}()){var t,i,n;try{if("function"!=typeof(null==(e=window.webPixelsManager)?void 0:e.init))return void A();if(!(null!==(n=i=t=window.webPixelsManager.init(d))&&"function"!=typeof n&&Object(n)===n&&"publish"in i&&"function"==typeof i.publish&&"publishCustomEvent"in i&&"function"==typeof i.publishCustomEvent&&"visitor"in i&&"function"==typeof i.visitor))return void A()}catch(e){return void A(e)}var r=window.Shopify.analytics;r.replayQueue.forEach(function(e){var i=e[0],n=e[1],r=e[2];t.publishCustomEvent(i,n,r)}),r.replayQueue=[],r.publish=t.publishCustomEvent,r.visitor=t.visitor,r.initialized=!0}}function A(e){B("manager_api_unavailable",void 0===e?void 0:Q(e))}function x(){B("script_load_failed","".concat(I," has failed to load"))}function B(e,t){T||(T=!0,q(),w.emit({status:"failed",errorMsg:t,failureReason:e,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function M(e){O&&(q(),w.emit({status:"pagehide-while-loading",useKeepaliveFallback:!0,pagehidePersisted:e.persisted,requestId:m.requestId,navigationType:m.navigationType,trekkieState:a()}))}function q(){O=!1;try{window.removeEventListener("pagehide",M)}catch(e){}}function R(e){var t;!function(e){var t=e.src,i=e.async,n=void 0===i||i,r=e.onload,o=e.onerror,a=e.sri,d=e.scriptDataAttributes,s=void 0===d?{}:d,u=document.createElement("script"),l=document.querySelector("head"),c=document.querySelector("body");if(u.async=n,u.src=t,a&&(u.integrity=a,u.crossOrigin="anonymous"),s)for(var p in s)if(Object.prototype.hasOwnProperty.call(s,p))try{u.dataset[p]=String(s[p])}catch(e){}if(r&&u.addEventListener("load",r),o&&u.addEventListener("error",o),l)l.appendChild(u);else{if(!c)throw new Error("Did not find a head or body element to append the script");c.appendChild(u)}}({src:I,async:!0,onload:U,onerror:e,sri:(t=E,"string"==typeof t&&/^sha384-[A-Za-z0-9+/=]+$/.test(t)?E:""),scriptDataAttributes:c})}function D(e){B("script_append_failed",Q(e))}function Q(e){return e instanceof Error?e.message:"Unknown error"}}}();wpmLoader({shopId: 85833908511,storefrontBaseUrl: "https://global.sevensmarketing.com",extensionsBaseUrl: "https://extensions.shopifycdn.com/cdn/shopifycloud/web-pixels-manager",monorailEndpoint: "https://sevensmarketing.com/.well-known/shopify/monorail/unstable/produce_batch",surface: "storefront-renderer",enabledBetaFlags: ["4c64608a","16072cab","8450a54b","7ee89bf1"],webPixelsConfigList: [{"id":"285835551","configuration":"{\"accountID\":\"1848772\"}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"c67c427e35bed2216d156eaeeacde779","type":"APP","apiClientId":4870017,"privacyPurposes":["ANALYTICS","MARKETING","SALE_OF_DATA"],"dataSharingAdjustments":{"protectedCustomerApprovalScopes":["read_customer_email","read_customer_personal_data"],"dataSharingControls":["share_all_events"]},"dataSharingState":"optimized"},{"id":"shopify-app-pixel","configuration":"{}","eventPayloadVersion":"v1","runtimeContext":"STRICT","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"APP","privacyPurposes":["ANALYTICS","MARKETING"]},{"id":"shopify-custom-pixel","eventPayloadVersion":"v1","runtimeContext":"LAX","scriptVersion":"0530","apiClientId":"shopify-pixel","type":"CUSTOM","privacyPurposes":["ANALYTICS","MARKETING"]}],isMerchantRequest: false,initData: {"shop":{"name":"sevensmarketing","paymentSettings":{"currencyCode":"CNY"},"myshopifyDomain":"sevensmarketing.myshopify.com","countryCode":"CN","storefrontUrl":"https:\/\/global.sevensmarketing.com"},"customer":null,"cart":null,"checkout":null,"productVariants":[{"price":{"amount":0.0,"currencyCode":"CNY"},"product":{"title":"CODEMINT - Website Design \u0026 Development","vendor":"sevensmarketing","id":"9033919660319","untranslatedTitle":"CODEMINT - Website Design \u0026 Development","url":"\/products\/codemint-case-study-website-design-development-sevens-marketing","type":""},"id":"48075227824415","image":{"src":"\/\/sevensmarketing.com\/cdn\/shop\/files\/Mask_group.png?v=1733369453"},"sku":"","title":"Default Title","untranslatedTitle":"Default Title"}],"products":[{"id":"9033919660319","handle":"codemint-case-study-website-design-development-sevens-marketing","isCollective":null,"title":"CODEMINT - Website Design \u0026 Development","type":null,"untranslatedTitle":"CODEMINT - Website Design \u0026 Development","url":"\/products\/codemint-case-study-website-design-development-sevens-marketing","vendor":"sevensmarketing","remoteShopId":null,"variants":[{"id":"48075227824415","image":{"src":"\/\/sevensmarketing.com\/cdn\/shop\/files\/Mask_group.png?v=1733369453"},"price":{"amount":0.0,"currencyCode":"CNY"},"sku":"","title":"Default Title","untranslatedTitle":"Default Title"}]},{"id":"9155418882335","handle":"rictor-case-study-website-design-development-sevens-marketing","isCollective":null,"title":"RICTOR - Website Design \u0026 Development","type":null,"untranslatedTitle":"RICTOR - Website Design \u0026 Development","url":"\/products\/rictor-case-study-website-design-development-sevens-marketing","vendor":"sevensmarketing","remoteShopId":null,"variants":[{"id":"48443221606687","image":{"src":"\/\/sevensmarketing.com\/cdn\/shop\/files\/Mask_group-15.png?v=1733369496"},"price":{"amount":0.0,"currencyCode":"CNY"},"sku":"","title":"Default Title","untranslatedTitle":"Default Title"}]},{"id":"9011477578015","handle":"oppo-case-study-creative-video-production-sevens-marketing","isCollective":null,"title":"OPPO - Creative Video Production","type":null,"untranslatedTitle":"OPPO - Creative Video Production","url":"\/products\/oppo-case-study-creative-video-production-sevens-marketing","vendor":"sevensmarketing","remoteShopId":null,"variants":[{"id":"47993928286495","image":{"src":"\/\/sevensmarketing.com\/cdn\/shop\/files\/Mask_group-11.png?v=1733369281"},"price":{"amount":0.0,"currencyCode":"CNY"},"sku":"","title":"Default Title","untranslatedTitle":"Default Title"}]},{"id":"8969729966367","handle":"tromox-case-study-creative-video-production-sevens-marketing","isCollective":null,"title":"Tromox - Creative Video Production","type":null,"untranslatedTitle":"Tromox - Creative Video Production","url":"\/products\/tromox-case-study-creative-video-production-sevens-marketing","vendor":"sevensmarketing","remoteShopId":null,"variants":[{"id":"47815490502943","image":{"src":"\/\/sevensmarketing.com\/cdn\/shop\/files\/Mask_group-2.png?v=1733369205"},"price":{"amount":0.0,"currencyCode":"CNY"},"sku":"","title":"Default Title","untranslatedTitle":"Default Title"}]}],"purchasingCompany":null},},"https://sevensmarketing.com/cdn","5982071ew7ea472e3p69b68784m2150dfea",{"modern":"","legacy":""},{"trekkieShim":true,"agentContext":true,"apiClientId":"580111","facebookCapiEnabled":"false","themeId":"173202112799","themePublished":"true","eventMetadataId":"8508ca3a-9f30-4943-825d-fe5f9026afae","pageType":"product","resourceId":"9033919660319","shopId":"85833908511","storefrontBaseUrl":"https:\/\/global.sevensmarketing.com","extensionBaseUrl":"https:\/\/extensions.shopifycdn.com\/cdn\/shopifycloud\/web-pixels-manager","surface":"storefront-renderer","enabledBetaFlags":"[\"4c64608a\", \"16072cab\", \"8450a54b\", \"7ee89bf1\"]","isMerchantRequest":"false","hashVersion":"5982071ew7ea472e3p69b68784m2150dfea","publish":"custom","events":"[[\"page_viewed\",{}],[\"product_viewed\",{\"productVariant\":{\"price\":{\"amount\":0.0,\"currencyCode\":\"CNY\"},\"product\":{\"title\":\"CODEMINT - Website Design \u0026 Development\",\"vendor\":\"sevensmarketing\",\"
861id\":\"9033919660319\",\"untranslatedTitle\":\"CODEMINT - Website Design \u0026 Development\",\"url\":\"\/products\/codemint-case-study-website-design-development-sevens-marketing\",\"type\":\"\"},\"id\":\"48075227824415\",\"image\":{\"src\":\"\/\/sevensmarketing.com\/cdn\/shop\/files\/Mask_group.png?v=1733369453\"},\"sku\":\"\",\"title\":\"Default Title\",\"untranslatedTitle\":\"Default Title\"}}]]"});})();</script>
861<script> 862 window.ShopifyAnalytics = window.ShopifyAnalytics || {}; 863 window.ShopifyAnalytics.meta = window.ShopifyAnalytics.meta || {}; 864 window.ShopifyAnalytics.meta.currency = 'CNY'; 865 var meta = {"product":{"id":9033919660319,"gid":"gid:\/\/shopify\/Product\/9033919660319","vendor":"sevensmarketing","type":"","handle":"codemint-case-study-website-design-development-sevens-marketing","variants":[{"id":48075227824415,"price":0,"name":"CODEMINT - Website Design \u0026 Development","public_title":null,"sku":""}],"remote":false},"page":{"pageType":"product","resourceType":"product","resourceId":9033919660319,"requestId":"9bfaa043-8d16-4e92-8964-349aea8ca5c9-1791241406"}}; 866 for (var attr in meta) { 867 window.ShopifyAnalytics.meta[attr] = meta[attr]; 868 } 869</script>
vendor: 1 bytes, line 869
869
870<script class="analytics"> 871 (function () { 872 var customDocumentWrite = function(content) { 873 var jquery = null; 874 875 if (window.jQuery) { 876 jquery = window.jQuery; 877 } else if (window.Checkout && window.Checkout.$) { 878 jquery = window.Checkout.$; 879 } 880 881 if (jquery) { 882 jquery('body').append(content); 883 } 884 }; 885 886 var hasLoggedConversion = function(token) { 887 if (token) { 888 return document.cookie.indexOf('loggedConversion=' + token) !== -1; 889 } 890 return false; 891 } 892 893 var setCookieIfConversion = function(token) { 894 if (token) { 895 var twoMonthsFromNow = new Date(Date.now()); 896 twoMonthsFromNow.setMonth(twoMonthsFromNow.getMonth() + 2); 897 898 document.cookie = 'loggedConversion=' + token + '; expires=' + twoMonthsFromNow; 899 } 900 } 901 902 var trekkie = window.ShopifyAnalytics.lib = window.trekkie = window.trekkie || []; 903 window.ShopifyAnalytics.lib.trekkie = window.trekkie; 904 if (trekkie.integrations) { 905 return; 906 } 907 trekkie.methods = [ 908 'identify', 909 'page', 910 'ready', 911 'track', 912 'trackForm', 913 'trackLink' 914 ]; 915 trekkie.factory = function(method) { 916 return function() { 917 var args = Array.prototype.slice.call(arguments); 918 args.unshift(method); 919 trekkie.push(args); 920 if (method == 'track' || method == 'page') { 921 var pageUrl; 922 try { 923 pageUrl = window.location.href; 924 } catch (e) {} 925 var pageReferrer; 926 try { 927 pageReferrer = document.referrer; 928 } catch (e) {} 929 try { 930 if (window.__TREKKIE_SHIM_QUEUE == null) { 931 window.__TREKKIE_SHIM_QUEUE = []; 932 } 933 window.__TREKKIE_SHIM_QUEUE.push({ 934 from: 'trekkie-stub', 935 method: method, 936 args: args.slice(1), 937 pageContext: { 938 url: pageUrl, 939 referrer: pageReferrer 940 } 941 }); 942 } catch (e) { 943 // no-op 944 } 945 } 946 return trekkie; 947 }; 948 }; 949 for (var i = 0; i < trekkie.methods.length; i++) { 950 var key = trekkie.methods[i]; 951 trekkie[key] = trekkie.factory(key); 952 } 953 trekkie.load = function(config) { 954 trekkie.config = config || {}; 955 trekkie.config.initialDocumentCookie = document.cookie; 956 var first = document.getElementsByTagName('script')[0]; 957var script = document.createElement('script'); 958script.type = 'text/javascript'; 959script.onerror = function(e) { 960 var scriptFallback = document.createElement('script'); 961 scriptFallback.type = 'text/javascript'; 962 scriptFallback.onerror = function(error) { 963 var Monorail = { 964 produce: function produce(monorailDomain, schemaId, payload) { 965 var currentMs = new Date().getTime(); 966 var event = { 967 schema_id: schemaId, 968 payload: payload, 969 metadata: { 970 event_created_at_ms: currentMs, 971 event_sent_at_ms: currentMs 972 } 973 }; 974 return Monorail.sendRequest("https://" + monorailDomain + "/v1/produce", JSON.stringify(event)); 975 }, 976 sendRequest: function sendRequest(endpointUrl, payload) { 977 // Try the sendBeacon API 978 if (window && window.navigator && typeof window.navigator.sendBeacon === 'function' && typeof window.Blob === 'function' && !Monorail.isIos12()) { 979 var blobData = new window.Blob([payload], { 980 type: 'text/plain' 981 }); 982 983 if (window.navigator.sendBeacon(endpointUrl, blobData)) { 984 return true; 985 } // sendBeacon was not successful 986 987 } // XHR beacon 988 989 var xhr = new XMLHttpRequest(); 990 991 try { 992 xhr.open('POST', endpointUrl); 993 xhr.setRequestHeader('Content-Type', 'text/plain'); 994 xhr.send(payload); 995 } catch (e) { 996 console.log(e); 997 } 998 999 return false; 1000 }, 1001 isIos12: function isIos12() { 1002 return window.navigator.userAgent.lastIndexOf('iPhone; CPU iPhone OS 12_') !== -1 || window.navigator.userAgent.lastIndexOf('iPad; CPU OS 12_') !== -1; 1003 } 1004 }; 1005 Monorail.produce('monorail-edge.shopifysvc.com', 1006 'trekkie_storefront_load_errors/1.1', 1007 {shop_id: 85833908511, 1008 theme_id: 173202112799, 1009 app_name: "storefront", 1010 context_url: window.location.href, 1011 source_url: "//sevensmarketing.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js"}); 1012 1013 }; 1014 scriptFallback.async = true; 1015 scriptFallback.src = '//sevensmarketing.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js'; 1016 first.parentNode.insertBefore(scriptFallback, first); 1017}; 1018script.async = true; 1019script.src = '//sevensmarketing.com/cdn/s/trekkie.storefront.2f6d7d7ede7d24234881a9cd5f47e679642fa1f6.min.js'; 1020first.parentNode.insertBefore(script, first); 1021 1022 }; 1023 trekkie.load( 1024 {"Trekkie":{"appName":"storefront","development":false,"defaultAttributes":{"shopId":85833908511,"isMerchantRequest":null,"themeId":173202112799,"themeCityHash":"16454681769750047418","contentLanguage":"en","currency":"CNY","eventMetadataId":"8508ca3a-9f30-4943-825d-fe5f9026afae"},"isServerSideCookieWritingEnabled":true,"monorailRegion":"shop_domain","enabledBetaFlags":["764d78cb","8450a54b","7ee89bf1","4c64608a"]},"Session Attribution":{},"S2S":{"facebookCapiEnabled":false,"source":"trekkie-storefront-renderer","apiClientId":580111}} 1025 ); 1026 1027 var loaded = false;
1028 trekkie.ready(function() { 1029 if (loaded) return; 1030 loaded = true; 1031 1032 window.ShopifyAnalytics.lib = window.trekkie; 1033 1034 var originalDocumentWrite = document.write; 1035 document.write = customDocumentWrite; 1036 try { window.ShopifyAnalytics.merchantGoogleAnalytics.call(this); } catch(error) {}; 1037 document.write = originalDocumentWrite; 1038 1039 var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/) 1040 var token = match? match[1]: undefined; 1041 if (!hasLoggedConversion(token)) { 1042 setCookieIfConversion(token); 1043 window.ShopifyAnalytics.lib.track("Viewed Product",{"currency":"CNY","variantId":48075227824415,"productId":9033919660319,"productGid":"gid:\/\/shopify\/Product\/9033919660319","name":"CODEMINT - Website Design \u0026 Development","price":"0.00","sku":"","brand":"sevensmarketing","variant":null,"category":"","nonInteraction":true,"remote":false,"available":true},undefined,undefined,{"shopifyEmitted":true}); 1044 } 1045 }); 1046 1047 window.ShopifyAnalytics.lib.page(null,{"pageType":"product","resourceType":"product","resourceId":9033919660319,"requestId":"9bfaa043-8d16-4e92-8964-349aea8ca5c9-1791241406","shopifyEmitted":true}); 1048 1049 var eventsListenerScript = document.createElement('script'); 1050 eventsListenerScript.async = true; 1051 eventsListenerScript.src = "//sevensmarketing.com/cdn/shopifycloud/storefront/assets/shop_events_listener-4e26a9ce.js"; 1052 document.getElementsByTagName('head')[0].appendChild(eventsListenerScript); 1053})();</script>
vendor: 1 bytes, line 1053
1053
1054<script 1055 defer 1056 src="https://sevensmarketing.com/cdn/shopifycloud/perf-kit/shopify-perf-kit-3.9.4.min.js" 1057 data-application="storefront-renderer" 1058 data-shop-id="85833908511" 1059 data-render-region="gcp-us-central1" 1060 data-page-type="product" 1061 data-theme-instance-id="173202112799" 1062 data-theme-name="Exhibit" 1063 data-theme-version="1.1.0" 1064 data-monorail-region="shop_domain" 1065 data-resource-timing-sampling-rate="10" 1066 data-shs="true" 1067 data-shs-beacon="true" 1068 data-shs-export-with-fetch="true" 1069 data-shs-logs-sample-rate="1" 1070 data-shs-beacon-endpoint="https://sevensmarketing.com/api/collect" 1071></script>
1071 1072<meta name="shopify-y" content="59c30791-6ee4-4bc3-a27e-0b9d53c3dfed" data-expiration="1822799006000"><meta name="shopify-s" content="5a93e03d-10f1-4696-a212-242f22f9fa2a" data-expiration="1791243206000"><meta name="new-cookie-storage-activated" content="t"> 1073</head> 1074 1075 <body><!-- BEGIN sections: header-group --> 1076<div id="shopify-section-sections--23677500948767__header" class="shopify-section shopify-section-group-header-group shopify-section-header"><style> 1077 #sections--23677500948767__header, 1078 #sections--23677500948767__header-logo { 1079 --spacing-adjust: 1; 1080 --padding: calc(var(--spacer) * var(--spacing-adjust, 1)); 1081 padding-top: var(--padding); 1082 padding-bottom: var(--padding); 1083 }.shopify-section-header { 1084 position: sticky; 1085 top: 0; 1086 z-index: 21; 1087 } 1088 1089 :root { 1090 --sticky-offset: 0; 1091 }</style><style> 1092 1093 1094 1095 1096 1097 1098</style> 1099 1100 1101 1102<header 1103 a_1108 1104 id="sections--23677500948767__header" 1105 x-data="{}" 1106 class="bg-transparent text-scheme-text absolute top-0 left-0 right-0 z-20 transition-colors duration-300 text-scale-n0 lg:text-scale-n0" 1107 data-css-variable="--header-height" 1108 data-color-scheme="scheme2" 1109 data-enable-sticky-header="true" 1110 data-enable-overlay-header="true" 1111 1112 data-overlay-color-classes="bg-transparent text-scheme-text" 1113 data-overlay-color-scheme="scheme2" 1114 1115 data-theme-header 1116> 1117 <div class="wrapper"> 1118 <div class="relative" section_header_content> 1119 1120 1121 <div 1122 left_block 1123 id="sections--23677500948767__header-main-grid" 1124 class="grid grid-cols-2 row-start-1 lg:grid-cols-12 w-full gap-theme items-center " 1125 > 1126 <div 1127 class="row-start-1 lg:col-span-item " 1128 style="--item-col-span: 2;" 1129 ><span class="font-heading break-words block"><a href="/" class=""><div class="" style="max-width: 145px"><img src="//sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&width=1000" alt="sevensmarketing" srcset="//sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&width=352 352w, //sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&width=832 832w" width="9356" loading="eager" class="site-title-logo-image logo-default" sizes="145px"> 1130</div></a></span></div><div 1131 class="hidden lg:block lg:col-span-item " 1132 style="--item-col-span: 10;" 1133 ><nav> 1134 <ul class="menu -mx-2 flex flex-wrap lg:justify-between"><li class="menu-link flex items-center px-2"><a href="#" case_trigger>Service <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"> 1135 <path d="M12.75 6.729L8.5 10.979L4.25 6.729" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1136</svg></a> 1137 </li><li class="menu-link flex items-center px-2"> 1138 <a href="/collections/case-study-sevens-marketing" >Work</a></li><li class="menu-link flex items-center px-2"> 1139 <a href="/pages/industry-reports-sevens-marketing" >Industry Reports</a></li><li class="menu-link flex items-center px-2"> 1140 <a href="/pages/about-us-sevens-marketing" >About Us</a></li><li class="menu-link flex items-baseline px-2" style="display:none;"> 1141 <div data-w-id="1afbd46e-6c9e-8ac4-901a-82766a0c8ce8" class="wg-element-wrapper sw3" style="opacity: 1;"> 1142 <a lang="en" data-w-id="1afbd46e-6c9e-8ac4-901a-82766a0c8ce9" href="#" class="wg-selector-2 s1 w-inline-block"> 1143 <div class="wg-selector-2-fill f1" style="transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;"></div> 1144 <div class="wg-selector2-text-lang1" style="transform: translate3d(0%, 3px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; color: rgb(255, 255, 255);">EN</div> 1145 </a> 1146 <a data-w-id="1afbd46e-6c9e-8ac4-901a-82766a0c8ced" href="https://www.sevensmarketing.cn/" class="wg-selector-2 s2 w-inline-block" target="_blank"> 1147 <div class="wg-selector-2-fill f2" style="transform: translate3d(-100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;"></div> 1148 <div class="wg-selector2-text-lang2" style="color: rgb(255, 255, 255); transform: translate3d(0%, 3px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">CN</div> 1149 </a> 1150 </div> 1151 </li> 1152 </ul> 1153</nav> 1154 1155<style> 1156 /* tab忢 */ 1157 .wg-element-wrapper.sw3{
1158 align-items: center; 1159 display: flex; 1160 position: relative; 1161 justify-content: center; 1162 } 1163 .wg-selector-2.s2, .wg-selector-2.s1 { 1164 color: #fff; 1165} 1166 .wg-selector-2 { 1167 color: #000; 1168 padding: 10px; 1169 font-weight: 400; 1170 text-decoration: none; 1171 transition: color .2s; 1172 position: relative; 1173 overflow: hidden; 1174} 1175 .w-inline-block { 1176 max-width: 100%; 1177 display: inline-block; 1178} 1179 .wg-selector2-text-lang1 { 1180 color: #fff; 1181 position: relative; 1182} 1183 .wg-selector-2-fill.f1 { 1184 color: #fff; 1185 background-color: #001aff; 1186 border-radius: 5px; 1187 width: 100%; 1188 height: 100%; 1189 position: absolute; 1190 top: 0%; 1191 bottom: auto; 1192 left: 0%; 1193 right: auto; 1194} 1195.wrapper-1 { 1196 max-width: var(--max-site-width); 1197 margin-left: var(--wrapper-left-and-right-margin); 1198 margin-right: var(--wrapper-left-and-right-margin); 1199 /* border: 0.5px solid #5A5A5A; */ 1200 padding: 2rem 3rem; 1201} 1202.wrapper-flex { 1203 display: flex; 1204 justify-content: space-between; 1205 border-radius: 5px; 1206} 1207 .maxWh { 1208 max-width: 66vw; 1209 } 1210.Dividing-line { 1211 width: 1px; 1212 min-height: 250px; 1213 background: #fff; 1214 margin: 1rem; 1215} 1216.childlink-box { 1217 display: flex; 1218 flex-direction: row; 1219 align-items: center; 1220 font-size: 16px; 1221} 1222 .childlink-icon { 1223 padding-right: 0.8rem; 1224 min-width: 60px; 1225 } 1226 .childlink-icon-img { 1227 width: 50px; 1228 } 1229.wrapper-right-box { 1230 min-width: 150px; 1231 display: flex; 1232 flex-direction: column; 1233 justify-content: space-evenly; 1234 align-items: flex-start; 1235 } 1236 .maxWidth { 1237 max-width: 240px; 1238 } 1239.title-h2 { 1240 /* font-family: Glancyr; */ 1241 font-size: 32px; 1242 font-weight: 700; 1243} 1244.wrapper-right-btn { 1245 background: #001aff; 1246 padding: 8px 18px; 1247 border-radius: 30px; 1248 font-size: 18px; 1249} 1250 1251</style></div><div 1252 mobile_humb_block 1253 class="row-start-1 lg:col-span-item lg:col-end-[-1] lg:hidden" 1254 style="--item-col-span: 2" 1255 > 1256 <div class="flex flex-wrap justify-end items-top gap-5"><button 1257 class=" js-enabled block lg:hidden" 1258 type="button" 1259 @click="$store.modals.open('menu-drawer')" 1260 > 1261 <span class="sr-only">Menu</span> 1262 <div class="w-6 h-6"> 1263 1264 <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"> 1265 <path d="M4.96857 7.46875H24.9686" stroke="white" stroke-linecap="square"/> 1266 <path d="M4.96857 14.9688H24.9686" stroke="white" stroke-linecap="square"/> 1267 <path d="M4.96857 22.4688H24.9686" stroke="white" stroke-linecap="square"/> 1268</svg> 1269 </div> 1270 </button><a href="https://global.sevensmarketing.com/customer_authentication/redirect?locale=en®ion_country=US" class="hidden lg:block"> 1271 <span class="sr-only">Log in</span> 1272 <div class="w-6 h-6"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 1273 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.333 6.667a4.667 4.667 0 1 0 9.334 0 4.667 4.667 0 0 0-9.334 0ZM3.333 22a8.667 8.667 0 0 1 17.334 0"/> 1274</svg> 1275</div> 1276 </a><button 1277 class=" hidden lg:hidden" 1278 @click.prevent="$store.modals.open('cart')" 1279 > 1280 <span class="sr-only">Cart</span> 1281<div class="w-6 h-6"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 1282 <path stroke="currentColor" stroke-width="1.5" d="M4.5 21.5 2 10.5h20l-2.5 11h-15Zm.5-11 4-8m10 8-4-8"/> 1283</svg> 1284</div> 1285 </button></div> 1286 </div> 1287 </div> 1288 <div right_block> 1289 1290 <template v-for="item in test_ary"> 1291 <div :key="item" test_block style="display:none;" v-if="flag_true">{@ test_str @} </div> 1292 </template> 1293 1294 1295 1296 <div top> 1297 <a href="/collections/case-study-sevens-marketing" collection_link nav_item flex> 1298 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 1299 <path d="M7.91667 4.58301H15.4167V12.083" stroke="white" stroke-width="0.833333"/> 1300 <path d="M4.80995 15.1896L15.4165 4.58301" stroke="white" stroke-width="0.833333"/> 1301</svg>
1302 <span text>Dive into Our Success</span> 1303 </a> 1304 <a href="/pages/contact-us-sevens-marketing" nav_item talk_btn flex> 1305 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 1306 <path d="M14.6667 7.99967C14.6667 11.6816 11.6819 14.6663 8.00001 14.6663C6.00884 14.6663 1.33334 14.6663 1.33334 14.6663C1.33334 14.6663 1.33334 9.69041 1.33334 7.99967C1.33334 4.31777 4.31811 1.33301 8.00001 1.33301C11.6819 1.33301 14.6667 4.31777 14.6667 7.99967Z" stroke="#1E33E7" stroke-width="0.833333"/> 1307 <path d="M4.66663 8.66634L6.66666 10.6663L11 6.33301" stroke="#1E33E7" stroke-width="0.833333"/> 1308</svg> 1309 <span text>Ready to Talk</span> 1310 </a> 1311 <div site_nav_pos> 1312 <div site_nav nav_item flex> 1313 <div item>EN</div> 1314 <div split></div> 1315 <div extra_content> 1316 1317 <a item href="https://www.sevensmarketing.cn/">CN</a> 1318 </div> 1319 </div> 1320 </div> 1321 </div> 1322 <div bottom> 1323 <div case_block> 1324 <div content> 1325 1326 <el-tabs tab-position="left" style="height: 100%" v-model="active_tab_name"> 1327 1328 1329 1330 1331 <el-tab-pane name="website-design-development-services-sevens-marketing1"> 1332 <a slot="label" @mouseenter="on_tab_mouse_enter('website-design-development-services-sevens-marketing1')" href="/pages/website-design-development-services-sevens-marketing"> 1333 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 1334 <path d="M7.66658 1.3335H1.33325V8.66683H7.66658V1.3335Z" stroke="white" stroke-width="0.75"/> 1335 <path d="M14.6666 11.3335H1.33325V14.3335H14.6666V11.3335Z" stroke="white" stroke-width="0.75"/> 1336 <path d="M14.6666 1.3335H10.3333V4.00016H14.6666V1.3335Z" stroke="white" stroke-width="0.75"/> 1337 <path d="M14.6666 6H10.3333V8.66667H14.6666V6Z" stroke="white" stroke-width="0.75"/> 1338</svg> 1339 <span>Website Design & Development</span> 1340 </a> 1341 1342 1343 1344 <a card href="/products/codemint-case-study-website-design-development-sevens-marketing"> 1345 <img bg_img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/7_3_1_1.png?v=1722838851"> 1346 <div text_block> 1347 <div list 1348 1349 1350 blue 1351 1352 1353 1354 1355 1356 1357 1358 1359 > 1360 1361 1362 1363 1364 <div item>· Brand Visual Design</div> 1365 1366 1367 1368 <div item>· Website Framework Construction</div> 1369 1370 1371 1372 <div item>· Photo & Video Content</div> 1373 1374 1375 </div> 1376 </div> 1377 </a> 1378 1379 1380 1381 <a card href="/products/rictor-case-study-website-design-development-sevens-marketing"> 1382 <img bg_img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/20240805-121714_1_1.png?v=1722838851"> 1383 <div text_block> 1384 <div list 1385 1386 1387 1388 1389 1390 1391 1392 > 1393 1394 1395 <div item>· 3D Rendering</div> 1396 1397 1398 1399 <div item>· Website Framework Construction </div> 1400 1401 1402 1403 <div item>· Localization of Copywriting</div> 1404 1405 1406 </div> 1407 </div> 1408 </a> 1409 1410 1411 1412 </el-tab-pane> 1413 1414 1415 1416 1417 <el-tab-pane name="creative-video-production-services-sevens-marketing2"> 1418 <a slot="label" @mouseenter="on_tab_mouse_enter('creative-video-production-services-sevens-marketing2')" href="/pages/creative-video-production-services-sevens-marketing"> 1419 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
1419ox="0 0 16 16" fill="none"> 1420 <path d="M11.9999 3.3335H1.33325V12.6668H11.9999V3.3335Z" stroke="#1E33E7" stroke-width="0.75"/> 1421 <path fill-rule="evenodd" clip-rule="evenodd" d="M14.6667 4.6665L12 6.9165V9.08317L14.6667 11.3332V4.6665Z" stroke="#1E33E7" stroke-width="0.75" stroke-linecap="square"/> 1422 <path d="M5.66675 6.3335L7.66675 8.00016L5.66675 9.66683" stroke="#1E33E7" stroke-width="0.75" stroke-linecap="square"/> 1423</svg> 1424 <span>Creative Video Production</span> 1425 </a> 1426 1427 1428 1429 <a card href="/products/oppo-case-study-creative-video-production-sevens-marketing"> 1430 <img bg_img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/oppo_1722832551262_1_1.png?v=1722838850"> 1431 <div text_block> 1432 <div list 1433 1434 1435 1436 1437 1438 1439 1440 > 1441 1442 1443 <div item>· Shooting Plan Formulation</div> 1444 1445 1446 1447 <div item>· Post-production Editing</div> 1448 1449 1450 1451 <div item>· Creative Material Mixing</div> 1452 1453 1454 </div> 1455 </div> 1456 </a> 1457 1458 1459 1460 <a card href="/products/tromox-case-study-creative-video-production-sevens-marketing"> 1461 <img bg_img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/20240805-122654_1_1.png?v=1722838851"> 1462 <div text_block> 1463 <div list 1464 1465 1466 1467 1468 1469 1470 1471 > 1472 1473 1474 <div item>· Shooting Plan Formulation</div> 1475 1476 1477 1478 <div item>· On-site Shooting</div> 1479 1480 1481 1482 <div item> · Model/Location Selection</div> 1483 1484 1485 </div> 1486 </div> 1487 </a> 1488 1489 1490 1491 </el-tab-pane> 1492 1493 1494 1495 1496 <el-tab-pane name="social-media-operations-services-sevens-marketing3"> 1497 <a slot="label" @mouseenter="on_tab_mouse_enter('social-media-operations-services-sevens-marketing3')" href="/pages/social-media-operations-services-sevens-marketing"> 1498 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 1499 <path d="M3.61938 3.28613C2.41294 4.49256 1.66675 6.15922 1.66675 8.00019C1.66675 9.84112 2.41294 11.5078 3.61938 12.7142" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1500 <path d="M13.0474 12.7142C14.2538 11.5078 15 9.84112 15 8.00019C15 6.15922 14.2538 4.49256 13.0474 3.28613" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1501 <path d="M11.6331 11.2999C12.4776 10.4554 12.9999 9.2887 12.9999 8.00003C12.9999 6.71136 12.4776 5.5447 11.6331 4.7002" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1502 <path d="M5.03358 4.7002C4.18908 5.5447 3.66675 6.71136 3.66675 8.00003C3.66675 9.2887 4.18908 10.4554 5.03358 11.2999" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1503 <path d="M9.39393 6.6665C10.0968 6.6665 10.6667 7.20377 10.6667 7.8665C10.6667 8.72924 9.81817 9.4665 9.39393 9.8665C9.1111 10.1332 8.75757 10.3998 8.33333 10.6665C7.9091 10.3998 7.55557 10.1332 7.27273 9.8665C6.8485 9.4665 6 8.72924 6 7.8665C6 7.20377 6.56983 6.6665 7.27273 6.6665C7.71543 6.6665 8.10533 6.8796 8.33333 7.20294C8.56133 6.8796 8.95123 6.6665 9.39393 6.6665Z" stroke="white" stroke-width="0.75"/> 1504</svg>
1505 <span>Social Media Operations</span> 1506 </a> 1507 1508 1509 <div view_all_card> 1510 <a href="/collections/case-study-sevens-marketing"> 1511 <img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/Mask_group_8.png?v=1722849194"> 1512 </a> 1513 1514 <a href="/collections/case-study-sevens-marketing" btn> 1515 View All 1516 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 1517 <path d="M17.5 10H2.5" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1518 <path d="M12.5 5L17.5 10L12.5 15" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1519</svg> 1520 </a> 1521 1522 </div> 1523 1524 1525 </el-tab-pane> 1526 1527 1528 1529 1530 <el-tab-pane name="influencer-marketing-services-sevens-marketing4"> 1531 <a slot="label" @mouseenter="on_tab_mouse_enter('influencer-marketing-services-sevens-marketing4')" href="/pages/influencer-marketing-services-sevens-marketing"> 1532 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 1533 <path d="M8.00008 6.00016C9.28875 6.00016 10.3334 4.95549 10.3334 3.66683C10.3334 2.37816 9.28875 1.3335 8.00008 1.3335C6.71142 1.3335 5.66675 2.37816 5.66675 3.66683C5.66675 4.95549 6.71142 6.00016 8.00008 6.00016Z" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1534 <path d="M1.33325 13.6668C1.33325 10.7213 4.01955 8.3335 7.33325 8.3335" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1535 <path d="M10.6166 9.3335C9.90782 9.3335 9.33325 10.003 9.33325 10.829C9.33325 12.3244 10.8499 13.6839 11.6666 14.0002C12.4833 13.6839 13.9999 12.3244 13.9999 10.829C13.9999 10.003 13.4254 9.3335 12.7166 9.3335C12.2826 9.3335 11.8988 9.5846 11.6666 9.9689C11.4344 9.5846 11.0506 9.3335 10.6166 9.3335Z" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1536</svg> 1537 <span>Influencer Marketing</span> 1538 </a> 1539 1540 1541 <div view_all_card> 1542 <a href="/collections/case-study-sevens-marketing"> 1543 <img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/Mask_group_8.png?v=1722849194"> 1544 </a> 1545 1546 <a href="/collections/case-study-sevens-marketing" btn> 1547 View All 1548 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 1549 <path d="M17.5 10H2.5" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1550 <path d="M12.5 5L17.5 10L12.5 15" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1551</svg> 1552 </a> 1553 1554 </div> 1555 1556 1557 </el-tab-pane> 1558 1559 1560 1561 1562 <el-tab-pane name="advertising-media-buying-services-sevens-marketing5"> 1563 <a slot="label" @mouseenter="on_tab_mouse_enter('advertising-media-buying-services-sevens-marketing5')" href="/pages/advertising-media-buying-services-sevens-marketing"> 1564 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 1565 <path d="M1.66675 2.3335C1.66675 1.78121 2.11446 1.3335 2.66675 1.3335H10.6667C11.219 1.3335 11.6667 1.78121 11.6667 2.3335V14.6668H2.66675C2.11446 14.6668 1.66675 14.2191 1.66675 13.6668V2.3335Z" stroke="white" stroke-width="0.75"/> 1566 <path d="M11.6667 8.00016C11.6667 7.63196 11.9652 7.3335 12.3334 7.3335H13.6667C14.0349 7.3335 14.3334 7.63196 14.3334 8.00016V13.6668C14.3334 14.2191 13.8857 14.6668 13.3334 14.6668H11.6667V8.00016Z" stroke="white" stroke-width="0.75"/> 1567 <path d="M3.66675 4H6.33341" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1568 <path d="M3.66675 6.3335H7.66675" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1569</svg>
1570 <span>Advertising & Media Buying</span> 1571 </a> 1572 1573 1574 <div view_all_card> 1575 <a href="/collections/case-study-sevens-marketing"> 1576 <img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/Mask_group_8.png?v=1722849194"> 1577 </a> 1578 1579 <a href="/collections/case-study-sevens-marketing" btn> 1580 View All 1581 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 1582 <path d="M17.5 10H2.5" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1583 <path d="M12.5 5L17.5 10L12.5 15" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1584</svg> 1585 </a> 1586 1587 </div> 1588 1589 1590 </el-tab-pane> 1591 1592 1593 1594 1595 <el-tab-pane name="dtc-brand-consulting-services-sevens-marketing6"> 1596 <a slot="label" @mouseenter="on_tab_mouse_enter('dtc-brand-consulting-services-sevens-marketing6')" href="/pages/dtc-brand-consulting-services-sevens-marketing"> 1597 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 1598 <path d="M14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99993 14.6668C6.00876 14.6668 1.33325 14.6668 1.33325 14.6668C1.33325 14.6668 1.33325 9.6909 1.33325 8.00016C1.33325 4.31826 4.31803 1.3335 7.99993 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016Z" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1599 <path d="M4.66675 6H10.6667" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1600 <path d="M4.66675 8.6665H10.6667" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1601 <path d="M4.66675 11.3335H8.00008" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1602</svg> 1603 <span>DTC Brand Consulting</span> 1604 </a> 1605 1606 1607 <div view_all_card> 1608 <a href="/collections/case-study-sevens-marketing"> 1609 <img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/Mask_group_8.png?v=1722849194"> 1610 </a> 1611 1612 <a href="/collections/case-study-sevens-marketing" btn> 1613 View All 1614 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 1615 <path d="M17.5 10H2.5" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1616 <path d="M12.5 5L17.5 10L12.5 15" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1617</svg> 1618 </a> 1619 1620 </div> 1621 1622 1623 </el-tab-pane> 1624 1625 1626 1627 1628 <el-tab-pane name="full-service-brand-management-services-sevens-marketing7"> 1629 <a slot="label" @mouseenter="on_tab_mouse_enter('full-service-brand-management-services-sevens-marketing7')" href="/pages/full-service-brand-management-services-sevens-marketing"> 1630 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 1631 <path d="M6.66659 10.9998L8.66659 11.6665C8.66659 11.6665 13.6666 10.6665 14.3333 10.6665C14.9999 10.6665 14.9999 11.3332 14.3333 11.9998C13.6666 12.6665 11.3333 14.6665 9.33325 14.6665C7.33325 14.6665 5.99992 13.6665 4.66659 13.6665C3.33325 13.6665 1.33325 13.6665 1.33325 13.6665" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1632 <path d="M1.33325 9.66667C1.99992 9 3.33325 8 4.66659 8C5.99992 8 9.16659 9.33333 9.66659 10C10.1666 10.6667 8.66659 11.6667 8.66659 11.6667" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1633 <path d="M13.0001 5H9.66675C9.11446 5 8.66675 5.44772 8.66675 6C8.66675 6.55228 9.11446 7 9.66675 7H13.0001C13.5524 7 14.0001 6.55228 14.0001 6C14.0001 5.44772 13.5524 5 13.0001 5Z" stroke="white" stroke-width="0.75"/> 1634 <path d="M8.66675 3H14.0001" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 1635</svg>
1636 <span>Full-Service Brand Management</span> 1637 </a> 1638 1639 1640 <div view_all_card> 1641 <a href="/collections/case-study-sevens-marketing"> 1642 <img src="https://cdn.shopify.com/s/files/1/0858/3390/8511/files/Mask_group_8.png?v=1722849194"> 1643 </a> 1644 1645 <a href="/collections/case-study-sevens-marketing" btn> 1646 View All 1647 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 1648 <path d="M17.5 10H2.5" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1649 <path d="M12.5 5L17.5 10L12.5 15" stroke="white" stroke-width="0.416667" stroke-linecap="square"/> 1650</svg> 1651 </a> 1652 1653 </div> 1654 1655 1656 </el-tab-pane> 1657 1658 </el-tabs> 1659 </div> 1660 </div> 1661 </div> 1662 1663 </div> 1664 1665 </div> 1666 </div> 1667</header> 1668 1669 1670 1671
1672<script> 1673 let vm_header = new Vue({ 1674 el:"#sections--23677500948767__header [right_block]", 1675 delimiters: ['{@', '@}'], 1676 data:function(){ 1677 return{ 1678 1679 flag_false:false, 1680 flag_true:true, 1681 test_ary:[1,2,3], 1682 test_str:"abc", 1683 active_tab_name:"website-design-development-services-sevens-marketing1", 1684 } 1685 }, 1686 methods:{ 1687 on_tab_mouse_enter:function(name){ 1688 1689 //e.target.click(); 1690 this.active_tab_name = name; 1691 } 1692 }, 1693 mounted:function(){ 1694 let header = document.querySelector("#sections--23677500948767__header"); 1695 let tab_trigger_list = header.querySelectorAll(".el-tabs__item"); 1696 for(let tab of tab_trigger_list){ 1697 console.log(tab); 1698 tab.addEventListener("mouseenter",()=>{ 1699 console.log("mouseenter"); 1700 tab.click(); 1701 }) 1702 } 1703 } 1704 }) 1705 1706 function init_header(){ 1707 let header = document.querySelector("#sections--23677500948767__header"); 1708 1709 window.addEventListener("click",(event)=>{ 1710 1711 let rect = header.getBoundingClientRect(); 1712 1713 const in_header = ( 1714 event.clientX >= rect.left && 1715 event.clientX <= rect.right && 1716 event.clientY >= rect.top && 1717 event.clientY <= rect.bottom 1718 ); 1719 if(!in_header){ 1720 header.removeAttribute("case_block_active"); 1721 } 1722 }) 1723 1724 document.querySelector("[case_trigger]").addEventListener("click",(e)=>{ 1725 e.preventDefault(); 1726 e.stopPropagation(); 1727 if(header.getAttribute("case_block_active")){ 1728 1729 }else{ 1730 header.setAttribute("case_block_active",true); 1731 } 1732 }) 1733 1734 1735 } 1736 1737 if(document.body.clientWidth > 989){ 1738 init_header(); 1739 } 1740 (function(){ 1741 let header = document.querySelector("#sections--23677500948767__header"); 1742 header.querySelector("[site_nav] [item]").addEventListener("click",()=>{ 1743 header.querySelector("[site_nav]").toggleAttribute("active"); 1744 }) 1745 })(); 1746 1747</script>
1747 1748 1749
1750<script> 1751 window.getHeaderWrapperEl = 1752 () => document.getElementById("sections--23677500948767__header"); 1753 window.stickyHeaderEnter = () => {}; 1754 window.stickyHeaderLeave = () => {}; 1755 1756 window.setUpStickyAndOverlayHeaderFunctions = () => { 1757 const headerWrapperEl = getHeaderWrapperEl(); 1758 1759 const enableStickyHeader = 1760 headerWrapperEl.dataset.enableStickyHeader === 'true'; 1761 const enableOverlayHeader = 1762 headerWrapperEl.dataset.enableOverlayHeader === 'true'; 1763 1764 if (enableStickyHeader && enableOverlayHeader) { 1765 const overlayColorClasses = 1766 headerWrapperEl.dataset.overlayColorClasses.split(' '); 1767 const overlayColorScheme = headerWrapperEl.dataset.overlayColorScheme; 1768 1769 window.stickyHeaderLeave = (e) => { 1770 headerWrapperEl.classList.remove(...overlayColorClasses); 1771 headerWrapperEl.classList.add('text-scheme-text', 'bg-scheme-background'); 1772 headerWrapperEl.dataset.colorScheme = "scheme2"; 1773 } 1774 1775 window.stickyHeaderEnter = (e) => { 1776 headerWrapperEl.classList.remove('text-scheme-text', 'bg-scheme-background'); 1777 headerWrapperEl.classList.add(...overlayColorClasses); 1778 headerWrapperEl.dataset.colorScheme = overlayColorScheme; 1779 } 1780 } 1781 1782 window.updateStickyOffset = () => { 1783 const value = enableStickyHeader ? headerWrapperEl.getBoundingClientRect().height : 0; 1784 1785 document.documentElement.style.setProperty( 1786 '--sticky-offset', 1787 `${value}px` 1788 ); 1789 } 1790 1791 window.debouncedUpdateStickyOffset = 1792 debounce(window.updateStickyOffset, 150); 1793 1794 window.updateStickyOffset(); 1795 1796 if (enableStickyHeader) { 1797 window.addEventListener('resize', window.debouncedUpdateStickyOffset); 1798 } else { 1799 window.removeEventListener('resize', window.debouncedUpdateStickyOffset); 1800 } 1801 } 1802 1803 setUpStickyAndOverlayHeaderFunctions(); 1804 1805 1806</script>
1806 1807 1808 1809 <div 1810 x-data 1811 1812 x-init="document.body.insertBefore($root.firstElementChild, document.getElementById('shopify-section-sections--23677500948767__header')); $root.remove();" 1813 1814 > 1815 <div 1816 id="HeaderSentinel" 1817 x-data="{}" 1818 x-intersect:leave="stickyHeaderLeave()" 1819 x-intersect:enter="stickyHeaderEnter()" 1820 ></div> 1821 </div> 1822 1823 1824 1825 1826
1826<script src="//sevensmarketing.com/cdn/shop/t/9/assets/cart-count.js?v=66150155982647825591733369484" type="module"></script>
1826 1827 1828
1828<script src="//sevensmarketing.com/cdn/shop/t/9/assets/predictive-search.js?v=82226763232895514491733369484" type="module"></script>
1828 1829 1830
1830<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
1830 1831 1832 1833
1834<script type="application/ld+json"> 1835 { 1836 "@context": "http://schema.org", 1837 "@type": "Organization", 1838 "name": "sevensmarketing", 1839 1840 "logo": "https:\/\/sevensmarketing.com\/cdn\/shop\/files\/logo.png?v=1711617218\u0026width=500", 1841 1842 "sameAs": [ 1843 "", 1844 "", 1845 "", 1846 "", 1847 1848 "", 1849 "", 1850 "", 1851 "", 1852 "" 1853 ], 1854 "url": "https:\/\/sevensmarketing.com\/pages\/full-service-brand-management-services-sevens-marketing" 1855 } 1856</script>
1856 1857 1858
1859<script> 1860function throttle(func, limit) { 1861 let lastFunc; 1862 let lastRan; 1863 return function() { 1864 const context = this; 1865 const args = arguments; 1866 if (!lastRan) { 1867 func.apply(context, args); 1868 lastRan = Date.now(); 1869 } else { 1870 clearTimeout(lastFunc); 1871 lastFunc = setTimeout(function() { 1872 if ((Date.now() - lastRan) >= limit) { 1873 func.apply(context, args); 1874 lastRan = Date.now(); 1875 } 1876 }, limit - (Date.now() - lastRan)); 1877 } 1878 } 1879} 1880 1881 let lastScrollTop = 0; 1882 let lastScrollLeft = 0; 1883 1884 function update_scroll_info(){ 1885 const scrollTop = window.scrollY || document.documentElement.scrollTop; 1886 const scrollLeft = window.scrollX || document.documentElement.scrollLeft; 1887 1888 if(window.scrollY >100){ 1889 document.body.setAttribute("on_scroll",true); 1890 } else{ 1891 document.body.removeAttribute("on_scroll"); 1892 } 1893 1894 1895 // åç´æ»å¨æ¹å 1896 if (scrollTop > lastScrollTop) { 1897 console.log('å䏿»å¨'); 1898 } else { 1899 console.log('å䏿»å¨'); 1900 } 1901 1902 // æ°´å¹³æ»å¨æ¹å 1903 if (scrollLeft > lastScrollLeft) { 1904 console.log('å峿»å¨'); 1905 } else { 1906 console.log('åå·¦æ»å¨'); 1907 } 1908 1909 1910 1911 // æå°æ»å¨è·ç¦» 1912 console.log(`åç´æ»å¨è·ç¦»: ${scrollTop}`); 1913 console.log(`æ°´å¹³æ»å¨è·ç¦»: ${scrollLeft}`); 1914 let header = document.querySelector("header"); 1915 if (scrollTop > lastScrollTop && scrollTop > 200) { 1916 console.log('å䏿»å¨'); 1917 header.setAttribute("hidden_header",true); 1918 }else if(scrollTop < lastScrollTop){ 1919 header.removeAttribute("hidden_header"); 1920 } 1921 1922 // æ´æ°ä¸ä¸æ¬¡çæ»å¨ä½ç½® 1923 lastScrollTop = scrollTop; 1924 lastScrollLeft = scrollLeft; 1925 1926 } 1927 if(document.body.clientWidth > 989){ 1928 window.addEventListener('scroll',throttle(update_scroll_info,100) ); 1929 } 1930 1931 1932 1933</script>
1933 1934 1935 1936 1937<style> #shopify-section-sections--23677500948767__header .maxWh {gap: 0;} #shopify-section-sections--23677500948767__header .maxWidth {max-width: 180px;} </style></div> 1938<!-- END sections: header-group --> 1939 <main 1940 id="MainContent" 1941 class="main-site-grid--container" 1942 role="main" 1943 tabindex="-1" 1944 > 1945 <div> 1946 <div id="shopify-section-template--23677499736351__feature_text_EKRpnh" class="shopify-section"><section class="section-container" data-color-scheme="scheme2" style="--top-spacing-adjust: 2; --bottom-spacing-adjust: 1;"> 1947 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"> 1948 <div class="wrapper"><div class="grid lg:grid-cols-12 gap-theme"> 1949 1950 <div class="lg:col-span-item text-left" style="--item-col-span: 6;--col-start: auto;"> 1951 1952 <div class="font-heading text-scale-n2 lg:text-scale-n6 break-words"> 1953 <p>CODEMINT</p> 1954 </div> 1955 </div> 1956 1957 </div> 1958 </div> 1959 </div> 1960</section> 1961<style> 1962 #shopify-section-template--23677499736351__feature_text_EKRpnh .gap-theme{ 1963 position: relative; 1964 } 1965 #shopify-section-template--23677499736351__feature_text_EKRpnh .mt-8{ 1966 position: absolute; 1967 right: 0; 1968 top: 0; 1969 margin-top: 0; 1970 } 1971 @media (min-width: 0px) and (max-width: 768px){ 1972 #shopify-section-template--23677499736351__feature_text_EKRpnh .mt-8{ 1973 position: unset; 1974 margin-top: 2rem; 1975 } 1976 } 1977</style> 1978</div><div id="shopify-section-template--23677499736351__faq_G6X7q9" class="shopify-section"><section class="section-container" data-color-scheme="scheme2" style="--top-spacing-adjust: 1; --bottom-spacing-adjust: 1;"> 1979 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"> 1980 <div class="wrapper"><div class="grid lg:grid-cols-12 gap-theme"><div class="lg:col-span-section-title min-w-0"> 1981 <div> 1982 <h2 class="font-heading text-heading-standard empty:hidden break-words"> 1983 Challenges 1984 </h2> 1985 </div> 1986 </div><div class="lg:col-span-section-content lg:col-end-[-1] min-w-0"> 1987 <div> 1988 1989 1990 1991 1992 <div > 1993 <div 1994 x-data="{ expanded: true }" 1995 1996 class=" 1997 border-b 1998 1999 border-b-theme border-scheme-border 2000 2001 " 2002 > 2003 <h2 class="font-heading text-secondary break-words"> 2004 <button 2005 type="button" 2006 @click="expanded = ! expanded" 2007 aria-controls="answer-template--23677499736351__faq_G6X7q9-question_reNWtE" 2008 :aria-expanded="expanded ? true : 'false'" 2009 class="text-left cursor-pointer flex justify-between items-center w-full py-4 break-words" 2010 > 2011 <span class="break-words">Value Proposition Refinement</span> 2012 <span 2013 class="w-5 h-5 shrink-0 inline-block transition-transform ease-gentle duration-[280ms]" 2014 x-cloak 2015 ><span class="block rotate-180" x-show="expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2016 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2017</svg> 2018</span> 2019 <span x-show="!expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2020 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2021</svg> 2022</span></span> 2023 </button> 2024 </h2> 2025 <div 2026 id="answer-template--23677499736351__faq_G6X7q9-question_reNWtE" 2027 x-show="expanded" 2028 x-collapse 2029 x-cloak 2030 > 2031 <div class="rte richtext text-base break-words pb-half-section-vertical-spacing"> 2032 <p>Analyzingunique selling points of the brand to ensure alignment with audie
2032nce expectations and message resonance.</p> 2033 </div> 2034 </div> 2035 </div> 2036 </div> 2037 2038 2039 2040 2041 <div > 2042 <div 2043 x-data="{ expanded: false }" 2044 2045 class=" 2046 border-b 2047 2048 border-b-transparent 2049 2050 " 2051 > 2052 <h2 class="font-heading text-secondary break-words"> 2053 <button 2054 type="button" 2055 @click="expanded = ! expanded" 2056 aria-controls="answer-template--23677499736351__faq_G6X7q9-question_ANURwc" 2057 :aria-expanded="expanded ? true : 'false'" 2058 class="text-left cursor-pointer flex justify-between items-center w-full py-4 break-words" 2059 > 2060 <span class="break-words">Visual Impact Review</span> 2061 <span 2062 class="w-5 h-5 shrink-0 inline-block transition-transform ease-gentle duration-[280ms]" 2063 x-cloak 2064 ><span class="block rotate-180" x-show="expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2065 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2066</svg> 2067</span> 2068 <span x-show="!expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2069 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2070</svg> 2071</span></span> 2072 </button> 2073 </h2> 2074 <div 2075 id="answer-template--23677499736351__faq_G6X7q9-question_ANURwc" 2076 x-show="expanded" 2077 x-collapse 2078 x-cloak 2079 > 2080 <div class="rte richtext text-base break-words pb-half-section-vertical-spacing"> 2081 <p>Evaluating the effectiveness of visuals in communicating eco-friendliness.</p> 2082 </div> 2083 </div> 2084 </div> 2085 </div> 2086 2087 </div> 2088 </div> 2089 2090 </div> 2091 2092 2093 </div> 2094 </div> 2095</section> 2096 2097</div><div id="shopify-section-template--23677499736351__faq_UExFBV" class="shopify-section"><section class="section-container" data-color-scheme="scheme2" style="--top-spacing-adjust: 0; --bottom-spacing-adjust: 1;"> 2098 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"> 2099 <div class="wrapper"><div class="grid lg:grid-cols-12 gap-theme"><div class="lg:col-span-section-title min-w-0"> 2100 <div> 2101 <h2 class="font-heading text-heading-standard empty:hidden break-words"> 2102 Solutions 2103 </h2> 2104 </div> 2105 </div><div class="lg:col-span-section-content lg:col-end-[-1] min-w-0"> 2106 <div> 2107 2108 2109 2110 2111 <div > 2112 <div 2113 x-data="{ expanded: true }" 2114 2115 class=" 2116 border-b 2117 2118 border-b-theme border-scheme-border 2119 2120 " 2121 > 2122 <h2 class="font-heading text-secondary break-words"> 2123 <button 2124 type="button" 2125 @click="expanded = ! expanded" 2126 aria-controls="answer-template--23677499736351__faq_UExFBV-question_xbiLcC" 2127 :aria-expanded="expanded ? true : 'false'" 2128 class="text-left cursor-pointer flex justify-between items-center w-full py-4 break-words" 2129 > 2130 <span class="break-words">Foundation with Video Banners</span> 2131 <span 2132 class="w-5 h-5 shrink-0 inline-block transition-transform ease-gentle duration-[280ms]" 2133 x-cloak 2134 ><span class="block rotate-180" x-show="expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2135 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2136</svg> 2137</span>
2138 <span x-show="!expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2139 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2140</svg> 2141</span></span> 2142 </button> 2143 </h2> 2144 <div 2145 id="answer-template--23677499736351__faq_UExFBV-question_xbiLcC" 2146 x-show="expanded" 2147 x-collapse 2148 x-cloak 2149 > 2150 <div class="rte richtext text-base break-words pb-half-section-vertical-spacing"> 2151 <p>Merging product showcases within hotel environments to lay the groundwork for site content.</p> 2152 </div> 2153 </div> 2154 </div> 2155 </div> 2156 2157 2158 2159 2160 <div > 2161 <div 2162 x-data="{ expanded: false }" 2163 2164 class=" 2165 border-b 2166 2167 border-b-theme border-scheme-border 2168 2169 " 2170 > 2171 <h2 class="font-heading text-secondary break-words"> 2172 <button 2173 type="button" 2174 @click="expanded = ! expanded" 2175 aria-controls="answer-template--23677499736351__faq_UExFBV-question_F9Wcne" 2176 :aria-expanded="expanded ? true : 'false'" 2177 class="text-left cursor-pointer flex justify-between items-center w-full py-4 break-words" 2178 > 2179 <span class="break-words">Quadrant of Values</span> 2180 <span 2181 class="w-5 h-5 shrink-0 inline-block transition-transform ease-gentle duration-[280ms]" 2182 x-cloak 2183 ><span class="block rotate-180" x-show="expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2184 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2185</svg> 2186</span> 2187 <span x-show="!expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2188 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2189</svg> 2190</span></span> 2191 </button> 2192 </h2> 2193 <div 2194 id="answer-template--23677499736351__faq_UExFBV-question_F9Wcne" 2195 x-show="expanded" 2196 x-collapse 2197 x-cloak 2198 > 2199 <div class="rte richtext text-base break-words pb-half-section-vertical-spacing"> 2200 <p>Utilizing abstract and expressive pictures to present four core brand values to communicate an eco-friendly ethos.</p> 2201 </div> 2202 </div> 2203 </div> 2204 </div> 2205 2206 2207 2208 2209 <div > 2210 <div 2211 x-data="{ expanded: false }" 2212 2213 class=" 2214 border-b 2215 2216 border-b-transparent 2217 2218 " 2219 > 2220 <h2 class="font-heading text-secondary break-words"> 2221 <button 2222 type="button" 2223 @click="expanded = ! expanded" 2224 aria-controls="answer-template--23677499736351__faq_UExFBV-question_c3wXba" 2225 :aria-expanded="expanded ? true : 'false'" 2226 class="text-left cursor-pointer flex justify-between items-center w-full py-4 break-words" 2227 > 2228 <span class="break-words">Element Extraction</span> 2229 <span 2230 class="w-5 h-5 shrink-0 inline-block transition-transform ease-gentle duration-[280ms]" 2231 x-cloak 2232 ><span class="block rotate-180" x-show="expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2233 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2234</svg> 2235</span>
2236 <span x-show="!expanded"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2237 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 6.444 10 11.112L22 6.444"/> 2238</svg> 2239</span></span> 2240 </button> 2241 </h2> 2242 <div 2243 id="answer-template--23677499736351__faq_UExFBV-question_c3wXba" 2244 x-show="expanded" 2245 x-collapse 2246 x-cloak 2247 > 2248 <div class="rte richtext text-base break-words pb-half-section-vertical-spacing"> 2249 <p>We distill elements from hotel concept imagery to infuse into our scenes, using a signature product as a transitional piece to strengthen brand connectivity.</p> 2250 </div> 2251 </div> 2252 </div> 2253 </div> 2254 2255 </div> 2256 </div> 2257 2258 </div> 2259 2260 2261 </div> 2262 </div> 2263</section> 2264 2265</div><div id="shopify-section-template--23677499736351__video_slideshow_N6kfJU" class="shopify-section"><section 2266 id="section-template--23677499736351__video_slideshow_N6kfJU" 2267 x-data="{ labelContent: '', focusVisible: false }" 2268 class="section-container" 2269 data-color-scheme="scheme2" 2270 style="--top-spacing-adjust: ; --bottom-spacing-adjust: ;" 2271> 2272 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__video_slideshow_N6kfJU .gallery-item { 2273 aspect-ratio: var(--ratio); 2274 } 2275 2276 @media (min-width: 990px) { 2277 #section-template--23677499736351__video_slideshow_N6kfJU .gallery-item { 2278 max-width: calc(60vw - var(--sidebar-width)); 2279 } 2280 }</style><div 2281 x-data='ThemeModule_Carousel("template--23677499736351__video_slideshow_N6kfJU", false, 5, "horizontal")' 2282 x-init="mounted()" 2283 class="gallery-slideshow slide-wrapper w-full flex flex-col relative h-screen lg:h-screen-adaptive" 2284 role="region" 2285 aria-roledescription="carousel" 2286 @mouseenter="is_mouse_over = true" 2287 @mouseleave="is_mouse_over = false" 2288 > 2289 2290 <div class="carousel-container grow relative overflow-hidden"><ul id="CarouselTrack-template--23677499736351__video_slideshow_N6kfJU" x-ref="carousel-track" class="carousel-track flex items-center overflow-x-scroll scroll-smooth snap-x snap-mandatory w-full h-full relative z-0" :aria-live="is_auto_playing ? 'off' : 'polite' " aria-atomic="true"><li 2291 role="group" 2292 aria-roledescription="slide" 2293 :aria-label="`Slide 1 of ${total_slides}`" 2294 class="carousel-item shrink-0 w-full snap-always snap-start overflow-hidden z-20 relative h-full" 2295 :aria-hidden="current_slide !== 1 ? true : false" 2296 2297 > 2298 <div class="absolute inset-0 h-full w-full item-wrapper p-8"> 2299 <div 2300 class="gallery-item ml-auto mr-auto relative top-1/2 -translate-y-1/2 max-w-full max-h-full pointer-events-auto" 2301 style="--ratio:1.775;"> 2302 <div 2303 2304 class="relative group h-full w-full" 2305 2306 x-data='ThemeTile()' 2307> 2308 2309 2310 <div class="tile-media-wrapper rounded-media relative overflow-hidden w-full h-full aspect-css-var" style="--ratio: 1.775;"><div 2311 id="template--23677499736351__video_slideshow_N6kfJU-43719816347935" 2312 class="w-full h-full" 2313 x-data='Theme_Video("inline", "autoplay")' 2314 x-intersect:enter="play(true)" 2315 x-intersect:leave="pause" 2316 > 2317 <div 2318 class="relative w-full h-full" 2319 > 2320 <div 2321 class="html-video-wrapper" 2322 x-data="HTMLVideo" 2323 @play="play" 2324 @pause="pause" 2325 ><video playsinline="playsinline" loop="loop" preload="none" class="tile-media track-loaded html-video-object w-full slideshow-gallery-image h-full w-full object-cover absolute inset-0 w-full h-full object-cover" muted="muted" x-ref="video" poster="//sevensmarketing.com/cdn/shop/files/preview_images/ebcb35e243ab4952aa5d58471c570af6.thumbnail.0000000000_2048x.jpg?v=1712116574" loading="lazy"><source src="//sevensmarketing.com/cdn/shop/videos/c/vp/ebcb35e243ab4952aa5d58471c570af6/ebcb35e243ab4952aa5d58471c570af6.HD-1080p-7.2Mbps-26681365.mp4?v=0" type="video/mp4"><img src="//sevensmarketing.com/cdn/shop/files/preview_images/ebcb35e243ab4952aa5d58471c570af6.thumbnail.0000000000_2048x.jpg?v=1712116574"></video> 2326</div> 2327 </div> 2328 </div></div> 2329
2329<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
2329 2330
2330<script src="//sevensmarketing.com/cdn/shop/t/9/assets/video.js?v=85996568644424112851733369484" type="module"></script>
2330 2331 2332
2332<script src="//sevensmarketing.com/cdn/shop/t/9/assets/html5-video.js?v=172641717689876782661733369483" type="module"></script>
2332 2333 2334 2335 2336</div> 2337 2338 </div> 2339 </div> 2340 </li></ul></div><div class="shrink-0"> 2341 <div class="grid grid-cols-12 items-center lg:grid grid-flow-dense gap-2 wrapper py-5 "><div class="col-span-6 text-left "> 2342 <div id="Section-template--23677499736351__video_slideshow_N6kfJU-CaptionContainer"> 2343 </div> 2344 </div> 2345 <div class="col-span-6 lg:col-end-13 text-right"> 2346 <div class="flex flex-wrap gap-4 justify-end"><div class="flex items-center justify-end gap-2"> 2347 <button aria-controls="CarouselTrack-template--23677499736351__video_slideshow_N6kfJU" :aria-label="current_slide === 1 ? 'Go to last slide' : 'Previous slide'" role="button" @click="prevSlide" class="flex items-center justify-center min-touch-target"> 2348 <span class="inline-block w-6 h-6"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2349 <path stroke="currentColor" stroke-miterlimit="10" stroke-width="1.5" d="M22 12H2"/> 2350 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M10.235 3.765 2 12l8.235 8.235"/> 2351</svg></span> 2352 </button> 2353 <button aria-controls="CarouselTrack-template--23677499736351__video_slideshow_N6kfJU" :aria-label="current_slide === total_slides ? 'Go to first slide' : 'Next slide'" role="button" @click="nextSlide" class="flex items-center justify-center min-touch-target"> 2354 <span class="inline-block w-6 h-6"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2355 <path stroke="currentColor" stroke-miterlimit="10" stroke-width="1.5" d="M2 12h20"/> 2356 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M13.765 20.235 22 12l-8.235-8.235"/> 2357</svg></span> 2358 </button> 2359 </div></div> 2360 </div></div> 2361 </div><style data-shopify>@supports not (aspect-ratio: 1 / 1) { 2362 .slideshow-cursor-button { 2363 z-index: 20; 2364 top: 50%; 2365 width: auto; 2366 height: auto; 2367 transform: translateY(-50%); 2368 cursor: pointer; 2369 } 2370 2371 .slideshow-cursor-button .icon { 2372 display: block; 2373 } 2374 2375 .gallery-item { 2376 position: absolute; 2377 inset: 0; 2378 transform: translateY(0); 2379 } 2380 2381 .gallery-slideshow .tile-media, 2382 .gallery-slideshow .html-video-object { 2383 object-fit: contain; 2384 } 2385 2386 .html-video-object.gallery-item, 2387 .html-video-wrapper { 2388 position: absolute; 2389 inset: 0; 2390 width: 100%; 2391 height: 100%; 2392 } 2393 2394 .gallery-slideshow .tile-placeholder-svg { 2395 position: absolute; 2396 inset: 0; 2397 width: 80vmin; 2398 height: 80vmin; 2399 margin-left: auto; 2400 margin-right: auto; 2401 } 2402 }</style> 2403
2403<script src="//sevensmarketing.com/cdn/shop/t/9/assets/modules-carousel.bundle.min.js?v=77424193968972759701733369484" type="module"></script>
2403 2404 2405</div></section> 2406 2407 2408<style> #shopify-section-template--23677499736351__video_slideshow_N6kfJU .flex.flex-wrap.gap-4.justify-end {display: none;} #shopify-section-template--23677499736351__video_slideshow_N6kfJU .lg\:grid {display: none;} #shopify-section-template--23677499736351__video_slideshow_N6kfJU .absolute.inset-0.h-full.w-full.item-wrapper.p-8 {background-image: url(https://cdn.shopify.com/s/files/1/0858/3390/8511/files/1_269d9961-e804-4ea7-816f-3f017ca260a8.png?v=1713946089); background-size: 100% 100%; background-repeat: no-repeat;} </style></div><div id="shopify-section-template--23677499736351__image_gallery_iHBLEa" class="shopify-section"><style data-shopify>#section-template--23677499736351__image_gallery_iHBLEa .grid-wrapper { 2409 --number-of-columns: 1; 2410 --number-of-gutters: calc(var(--number-of-columns) - 1); 2411 --total-gutter-size: calc(var(--media-grid-col-gap) * var(--number-of-gutters)); 2412 2413 2414 }</style><section 2415 id="section-template--23677499736351__image_gallery_iHBLEa" 2416 x-data="{ labelContent: '', focusVisible: false }" 2417 class="section-container" 2418 data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a" 2419 style="--section-grid-cols-mobile: 1; --section-grid-cols-desktop: 1; --top-spacing-adjust: 1; --bottom-spacing-adjust: 1;" 2420> 2421 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__image_gallery_iHBLEa .grid-wrapper { 2422 2423 2424 }</style><ul class="grid grid-cols-section-mobile lg:grid-cols-section-desktop grid-wrapper gap-media-grid items-start"><li 2425 2426 class="relative group " 2427 2428 x-data='ThemeTile()' 2429> 2430 <a 2431 aria-labelledby="Section-template--23677499736351__image_gallery_iHBLEa-Image-43720291713311-label" 2432 2433 class="tile-link absolute inset-0 z-10 group" 2434 2435 2436 2437 ><span class="sr-only"></span></a> 2438 2439 <div class="tile-media-wrapper rounded-media overflow-hidden relative " > 2440 <img src="//sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&width=352 352w, //sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&width=832 832w, //sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&width=1200 1200w, //sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&width=1920 1920w, //sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&width=2000 2000w" width="2000" height="1188" loading="lazy" class="tile-media track-loaded" sizes="(min-width: 990px) calc(100vw / 1), 100vw"> 2441 </div> 2442
2442<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
2442 2443 2444 2445</li> 2446</ul> 2447</div></section> 2448 2449</div><div id="shopify-section-template--23677499736351__media_with_text_overlay_UbUp8B" class="shopify-section"><style data-shopify> 2450 #template--23677499736351__media_with_text_overlay_UbUp8B { 2451 --total-gutter-size: calc(var(--theme-col-gap-desktop) * 11); 2452 --column-size: calc((100% - var(--total-gutter-size)) / 12); 2453 --content-size: calc(var(--column-size) * 4 + var(--theme-col-gap-desktop) * 3); 2454 } 2455 2456 #template--23677499736351__media_with_text_overlay_UbUp8B .media-overlay-container {height: 100vh; 2457 }</style> 2458 2459<section id="template--23677499736351__media_with_text_overlay_UbUp8B" class="section-container text-scheme-text bg-scheme-background " data-color-scheme="scheme1"><div class="media-overlay-container relative w-full"><img class="track-loaded absolute inset-0 object-cover w-full h-full track-loaded absolute inset-0 object-cover w-full h-full hs-lazyload hs-id-ff4d2757" loading="lazy" src="//sevensmarketing.com/cdn/shop/files/3_7f2f322a-c103-430d-a60a-3361cbf0aeaa.png?v=1712117100&width=2000"/><div class="overflow-hidden content inset-0 absolute w-full h-full text-center"> 2460 <div class="p-wrapper-left-and-right-margin h-full w-full"> 2461 <div class="h-full w-full flex min-w-0 break-words justify-center items-center"> 2462 <div class="overlay-content no-m-first min-w-0"> 2463 2464 2465 2466 </div> 2467 </div> 2468 </div> 2469 </div> 2470</div></section> 2471<div id="follow-div"> 2472 <strong class="">POLYTOPE</strong> interconnected <p>digital marketing strategies.</p> 2473<p><strong class="">AT SEVENS</strong>, we believe that every business has a unique path to growth.</p> 2474<strong class="">GLITCH</strong> we are data-driven, riding the boom of marketing technologies. 2475 2476</div>
2477<script> 2478 document.addEventListener("DOMContentLoaded", function() { 2479 const video = document.getElementById("placeholder"); 2480 const observer = new IntersectionObserver((entries) => { 2481 entries.forEach(entry => { 2482 if (entry.isIntersecting) { 2483 video.play(); // å¼å§ææ¾è§é¢ 2484 observer.unobserve(video); // 忢è§å¯ 2485 } 2486 }); 2487 }); 2488 observer.observe(video); 2489}); 2490 2491</script>
2491 2492<style> 2493 #template--23677499736351__media_with_text_overlay_UbUp8B .overlay-content{ 2494 margin-top:100px; 2495 } 2496 #follow-div { 2497 /* width: 216px; */ 2498 position: absolute; 2499 width: 230px; 2500 top: 0; 2501 left: 0; 2502 font-size: 16px; 2503 translate: -100% -100%; 2504 display: none; 2505 background-color: #001AFF; 2506 padding: 10px; 2507 color: white; 2508 z-index: 2; 2509 } 2510 #follow-div p{ 2511 margin-bottom:10px; 2512 } 2513 #template--23677499736351__media_with_text_overlay_UbUp8B{ 2514 position: relative; 2515 } 2516 #template--23677499736351__media_with_text_overlay_UbUp8B::before{ 2517 content: ''; 2518 position: absolute; 2519 top: 0; 2520 left: 0; 2521 background: transparent; 2522 width:100%; 2523 height:100%; 2524 z-index:3; 2525 } 2526 @media (max-width: 768px) { 2527 #template--23677499736351__media_with_text_overlay_UbUp8B::before{ 2528 display:none; 2529 } 2530 #template--23677499736351__media_with_text_overlay_UbUp8B .min-w-0{ 2531 align-items: center; 2532 } 2533 #template--23677499736351__media_with_text_overlay_UbUp8B .overlay-content{ 2534 margin-top:0; 2535 } 2536 #follow-div{ 2537 display:none !important; 2538 } 2539 } 2540</style> 2541
2542<script> 2543 2544 2545const throttle = (func, wait) => { 2546 let inThrottle = false; 2547 return (...args) => { 2548 if (!inThrottle) { 2549 func(...args); 2550 inThrottle = true; 2551 setTimeout(() => inThrottle = false, wait); 2552 } 2553 }; 2554}; 2555 2556const banner = document.querySelector('#template--23677499736351__media_with_text_overlay_UbUp8B'); 2557const followDiv = document.getElementById('follow-div'); 2558 2559const throttledUpdatePosition = throttle((mouseX, mouseY) => { 2560 let width = followDiv.offsetWidth; 2561 let height = followDiv.offsetHeight; 2562 // followDiv.style.left = mouseX + 'px'; 2563 // followDiv.style.top = mouseY + 'px'; 2564 followDiv.style.transform = `translate(${mouseX}px,${mouseY}px)`; 2565 2566}, 26); // æ¯ç§æå¤æ´æ° 60 次ï¼1000ms / 16msï¼ 2567 2568banner.addEventListener('mousemove', (event) => { 2569 const bannerWidth = banner.offsetWidth; 2570 const bannerHeight = banner.offsetHeight; 2571 2572 const mouseX = event.pageX; 2573 const mouseY = event.pageY; 2574 const isMouseInTargetArea = mouseX >= bannerWidth - bannerWidth/3 && mouseY >= bannerHeight - 500; 2575 2576 if (isMouseInTargetArea) { 2577 followDiv.style.display = 'block'; 2578 throttledUpdatePosition(mouseX, mouseY); 2579 } else { 2580 followDiv.style.display = 'none'; 2581 } 2582}); 2583 2584banner.addEventListener('pointerleave', () => { 2585 followDiv.style.display = 'none'; 2586}); 2587 2588</script>
2588 2589 2590 2591</div><div id="shopify-section-template--23677499736351__video_slideshow_abPDQh" class="shopify-section"><section 2592 id="section-template--23677499736351__video_slideshow_abPDQh" 2593 x-data="{ labelContent: '', focusVisible: false }" 2594 class="section-container" 2595 data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a" 2596 style="--top-spacing-adjust: ; --bottom-spacing-adjust: ;" 2597> 2598 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__video_slideshow_abPDQh .gallery-item { 2599 aspect-ratio: var(--ratio); 2600 } 2601 2602 @media (min-width: 990px) { 2603 #section-template--23677499736351__video_slideshow_abPDQh .gallery-item { 2604 max-width: calc(80vw - var(--sidebar-width)); 2605 } 2606 }</style><div 2607 x-data='ThemeModule_Carousel("template--23677499736351__video_slideshow_abPDQh", false, 5, "horizontal")' 2608 x-init="mounted()" 2609 class="gallery-slideshow slide-wrapper w-full flex flex-col relative h-screen-80 lg:h-screen-80" 2610 role="region" 2611 aria-roledescription="carousel" 2612 @mouseenter="is_mouse_over = true" 2613 @mouseleave="is_mouse_over = false" 2614 > 2615 2616 <div class="carousel-container grow relative overflow-hidden"><ul id="CarouselTrack-template--23677499736351__video_slideshow_abPDQh" x-ref="carousel-track" class="carousel-track flex items-center overflow-x-scroll scroll-smooth snap-x snap-mandatory w-full h-full relative z-0" :aria-live="is_auto_playing ? 'off' : 'polite' " aria-atomic="true"><li 2617 role="group" 2618 aria-roledescription="slide" 2619 :aria-label="`Slide 1 of ${total_slides}`" 2620 class="carousel-item shrink-0 w-full snap-always snap-start overflow-hidden z-20 relative h-full" 2621 :aria-hidden="current_slide !== 1 ? true : false" 2622 2623 > 2624 <div class="absolute inset-0 h-full w-full item-wrapper p-8"> 2625 <div 2626 class="gallery-item ml-auto mr-auto relative top-1/2 -translate-y-1/2 max-w-full max-h-full pointer-events-auto" 2627 style="--ratio:1.775;"> 2628 <div 2629 2630 class="relative group h-full w-full" 2631 2632 x-data='ThemeTile()' 2633> 2634 2635 2636 <div class="tile-media-wrapper rounded-media relative overflow-hidden w-full h-full aspect-css-var" style="--ratio: 1.775;"><div 2637 id="template--23677499736351__video_slideshow_abPDQh-43720904081695" 2638 class="w-full h-full" 2639 x-data='Theme_Video("inline", "autoplay")' 2640 x-intersect:enter="play(true)" 2641 x-intersect:leave="pause" 2642 > 2643 <div 2644 class="relative w-full h-full" 2645 > 2646 <div 2647 class="html-video-wrapper" 2648 x-data="HTMLVideo" 2649 @play="play" 2650 @pause="pause" 2651 ><video playsinline="playsinline" loop="loop" preload="none" class="tile-media track-loaded html-video-object w-full slideshow-gallery-image h-full w-full object-cover absolute inset-0 w-full h-full object-cover" muted="muted" x-ref="video" poster="//sevensmarketing.com/cdn/shop/files/preview_images/1b51ebb840de4e2ca7f1531ed5040cdf.thumbnail.0000000000_2048x.jpg?v=1712117713" loading="lazy"><source src="//sevensmarketing.com/cdn/shop/videos/c/vp/1b51ebb840de4e2ca7f1531ed5040cdf/1b51ebb840de4e2ca7f1531ed5040cdf.HD-1080p-2.5Mbps-26681819.mp4?v=0" type="video/mp4"><img src="//sevensmarketing.com/cdn/shop/files/preview_images/1b51ebb840de4e2ca7f1531ed5040cdf.thumbnail.0000000000_2048x.jpg?v=1712117713"></video> 2652</div> 2653 </div> 2654 </div></div> 2655
2655<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
2655 2656
2656<script src="//sevensmarketing.com/cdn/shop/t/9/assets/video.js?v=85996568644424112851733369484" type="module"></script>
2656 2657 2658
2658<script src="//sevensmarketing.com/cdn/shop/t/9/assets/html5-video.js?v=172641717689876782661733369483" type="module"></script>
2658 2659 2660 2661 2662</div> 2663 2664 </div> 2665 </div> 2666 </li></ul></div><div class="shrink-0"> 2667 <div class="grid grid-cols-12 items-center lg:grid grid-flow-dense gap-2 wrapper py-5 "><div class="col-span-6 text-left "> 2668 <div id="Section-template--23677499736351__video_slideshow_abPDQh-CaptionContainer"> 2669 </div> 2670 </div> 2671 <div class="col-span-6 lg:col-end-13 text-right"> 2672 <div class="flex flex-wrap gap-4 justify-end"><div class="flex items-center justify-end gap-2"> 2673 <button aria-controls="CarouselTrack-template--23677499736351__video_slideshow_abPDQh" :aria-label="current_slide === 1 ? 'Go to last slide' : 'Previous slide'" role="button" @click="prevSlide" class="flex items-center justify-center min-touch-target"> 2674 <span class="inline-block w-6 h-6"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2675 <path stroke="currentColor" stroke-miterlimit="10" stroke-width="1.5" d="M22 12H2"/> 2676 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M10.235 3.765 2 12l8.235 8.235"/> 2677</svg></span> 2678 </button> 2679 <button aria-controls="CarouselTrack-template--23677499736351__video_slideshow_abPDQh" :aria-label="current_slide === total_slides ? 'Go to first slide' : 'Next slide'" role="button" @click="nextSlide" class="flex items-center justify-center min-touch-target"> 2680 <span class="inline-block w-6 h-6"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2681 <path stroke="currentColor" stroke-miterlimit="10" stroke-width="1.5" d="M2 12h20"/> 2682 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M13.765 20.235 22 12l-8.235-8.235"/> 2683</svg></span> 2684 </button> 2685 </div></div> 2686 </div></div> 2687 </div><style data-shopify>@supports not (aspect-ratio: 1 / 1) { 2688 .slideshow-cursor-button { 2689 z-index: 20; 2690 top: 50%; 2691 width: auto; 2692 height: auto; 2693 transform: translateY(-50%); 2694 cursor: pointer; 2695 } 2696 2697 .slideshow-cursor-button .icon { 2698 display: block; 2699 } 2700 2701 .gallery-item { 2702 position: absolute; 2703 inset: 0; 2704 transform: translateY(0); 2705 } 2706 2707 .gallery-slideshow .tile-media, 2708 .gallery-slideshow .html-video-object { 2709 object-fit: contain; 2710 } 2711 2712 .html-video-object.gallery-item, 2713 .html-video-wrapper { 2714 position: absolute; 2715 inset: 0; 2716 width: 100%; 2717 height: 100%; 2718 } 2719 2720 .gallery-slideshow .tile-placeholder-svg { 2721 position: absolute; 2722 inset: 0; 2723 width: 80vmin; 2724 height: 80vmin; 2725 margin-left: auto; 2726 margin-right: auto; 2727 } 2728 }</style> 2729
2729<script src="//sevensmarketing.com/cdn/shop/t/9/assets/modules-carousel.bundle.min.js?v=77424193968972759701733369484" type="module"></script>
2729 2730 2731</div></section> 2732 2733 2734<style> #shopify-section-template--23677499736351__video_slideshow_abPDQh .flex.flex-wrap.gap-4.justify-end {display: none;} #shopify-section-template--23677499736351__video_slideshow_abPDQh .lg\:grid {display: none;} </style></div><div id="shopify-section-template--23677499736351__image_gallery_gxdHbQ" class="shopify-section"><style data-shopify>#section-template--23677499736351__image_gallery_gxdHbQ .grid-wrapper { 2735 --number-of-columns: 2; 2736 --number-of-gutters: calc(var(--number-of-columns) - 1); 2737 --total-gutter-size: calc(var(--media-grid-col-gap) * var(--number-of-gutters)); 2738 2739 2740 }</style><section 2741 id="section-template--23677499736351__image_gallery_gxdHbQ" 2742 x-data="{ labelContent: '', focusVisible: false }" 2743 class="section-container" 2744 data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a" 2745 style="--section-grid-cols-mobile: 2; --section-grid-cols-desktop: 2; --top-spacing-adjust: 1; --bottom-spacing-adjust: 1;" 2746> 2747 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__image_gallery_gxdHbQ .grid-wrapper { 2748 2749 2750 }</style><ul class="grid grid-cols-section-mobile lg:grid-cols-section-desktop grid-wrapper gap-media-grid items-start"><li 2751 2752 class="relative group " 2753 2754 x-data='ThemeTile()' 2755> 2756 <a 2757 aria-labelledby="Section-template--23677499736351__image_gallery_gxdHbQ-Image-43721013723423-label" 2758 2759 class="tile-link absolute inset-0 z-10 group" 2760 2761 2762 2763 ><span class="sr-only"></span></a> 2764 2765 <div class="tile-media-wrapper rounded-media overflow-hidden relative " > 2766 <img src="//sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&width=352 352w, //sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&width=832 832w, //sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&width=1200 1200w, //sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&width=1920 1920w, //sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&width=2000 2000w" width="2000" height="2000" loading="lazy" class="tile-media track-loaded" sizes="(min-width: 990px) calc(100vw / 2), 50vw"> 2767 </div> 2768
2768<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
2768 2769 2770 2771</li> 2772<li 2773 2774 class="relative group " 2775 2776 x-data='ThemeTile()' 2777> 2778 <a 2779 aria-labelledby="Section-template--23677499736351__image_gallery_gxdHbQ-Image-43721016279327-label" 2780 2781 class="tile-link absolute inset-0 z-10 group" 2782 2783 2784 2785 ><span class="sr-only"></span></a> 2786 2787 <div class="tile-media-wrapper rounded-media overflow-hidden relative " > 2788 <img src="//sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&width=352 352w, //sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&width=832 832w, //sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&width=1200 1200w, //sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&width=1920 1920w, //sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&width=2000 2000w" width="2000" height="2000" loading="lazy" class="tile-media track-loaded" sizes="(min-width: 990px) calc(100vw / 2), 50vw"> 2789 </div> 2790
2790<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
2790 2791 2792 2793</li> 2794</ul> 2795</div></section> 2796 2797</div><div id="shopify-section-template--23677499736351__image_gallery_azHR6i" class="shopify-section"><style data-shopify>#section-template--23677499736351__image_gallery_azHR6i .grid-wrapper { 2798 --number-of-columns: 1; 2799 --number-of-gutters: calc(var(--number-of-columns) - 1); 2800 --total-gutter-size: calc(var(--media-grid-col-gap) * var(--number-of-gutters)); 2801 2802 2803 }</style><section 2804 id="section-template--23677499736351__image_gallery_azHR6i" 2805 x-data="{ labelContent: '', focusVisible: false }" 2806 class="section-container" 2807 data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a" 2808 style="--section-grid-cols-mobile: 1; --section-grid-cols-desktop: 1; --top-spacing-adjust: 1; --bottom-spacing-adjust: 2;" 2809> 2810 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__image_gallery_azHR6i .grid-wrapper { 2811 2812 2813 }</style><ul class="grid grid-cols-section-mobile lg:grid-cols-section-desktop grid-wrapper gap-media-grid items-start"><li 2814 2815 class="relative group " 2816 2817 x-data='ThemeTile()' 2818> 2819 <a 2820 aria-labelledby="Section-template--23677499736351__image_gallery_azHR6i-Image-43721163178271-label" 2821 2822 class="tile-link absolute inset-0 z-10 group" 2823 2824 2825 2826 ><span class="sr-only"></span></a> 2827 2828 <div class="tile-media-wrapper rounded-media overflow-hidden relative " > 2829 <img src="//sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&width=352 352w, //sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&width=832 832w, //sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&width=1200 1200w, //sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&width=1920 1920w, //sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&width=2000 2000w" width="2000" height="1188" loading="lazy" class="tile-media track-loaded" sizes="(min-width: 990px) calc(100vw / 1), 100vw"> 2830 </div> 2831
2831<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
2831 2832 2833 2834</li> 2835</ul> 2836</div></section> 2837 2838</div><div id="shopify-section-template--23677499736351__image_gallery_mpH8je" class="shopify-section"><style data-shopify>#section-template--23677499736351__image_gallery_mpH8je .grid-wrapper { 2839 --number-of-columns: 1; 2840 --number-of-gutters: calc(var(--number-of-columns) - 1); 2841 --total-gutter-size: calc(var(--media-grid-col-gap) * var(--number-of-gutters)); 2842 2843 2844 }</style><section 2845 id="section-template--23677499736351__image_gallery_mpH8je" 2846 x-data="{ labelContent: '', focusVisible: false }" 2847 class="section-container" 2848 data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a" 2849 style="--section-grid-cols-mobile: 1; --section-grid-cols-desktop: 1; --top-spacing-adjust: 1; --bottom-spacing-adjust: 2;" 2850> 2851 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__image_gallery_mpH8je .grid-wrapper { 2852 2853 2854 }</style><ul class="grid grid-cols-section-mobile lg:grid-cols-section-desktop grid-wrapper gap-media-grid items-start"><li 2855 2856 class="relative group " 2857 2858 x-data='ThemeTile()' 2859> 2860 <a 2861 aria-labelledby="Section-template--23677499736351__image_gallery_mpH8je-Image-43721258696991-label" 2862 2863 class="tile-link absolute inset-0 z-10 group" 2864 2865 2866 2867 ><span class="sr-only"></span></a> 2868 2869 <div class="tile-media-wrapper rounded-media overflow-hidden relative " > 2870 <img src="//sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&width=352 352w, //sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&width=832 832w, //sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&width=1200 1200w, //sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&width=1920 1920w, //sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&width=2000 2000w" width="2000" height="2000" loading="lazy" class="tile-media track-loaded" sizes="(min-width: 990px) calc(100vw / 1), 100vw"> 2871 </div> 2872
2872<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
2872 2873 2874 2875</li> 2876</ul> 2877</div></section> 2878 2879</div><div id="shopify-section-template--23677499736351__video_slideshow_C4H64U" class="shopify-section"><section 2880 id="section-template--23677499736351__video_slideshow_C4H64U" 2881 x-data="{ labelContent: '', focusVisible: false }" 2882 class="section-container" 2883 data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a" 2884 style="--top-spacing-adjust: ; --bottom-spacing-adjust: ;" 2885> 2886 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__video_slideshow_C4H64U .gallery-item { 2887 aspect-ratio: var(--ratio); 2888 } 2889 2890 @media (min-width: 990px) { 2891 #section-template--23677499736351__video_slideshow_C4H64U .gallery-item { 2892 max-width: calc(80vw - var(--sidebar-width)); 2893 } 2894 }</style><div 2895 x-data='ThemeModule_Carousel("template--23677499736351__video_slideshow_C4H64U", false, 5, "horizontal")' 2896 x-init="mounted()" 2897 class="gallery-slideshow slide-wrapper w-full flex flex-col relative h-screen-80 lg:h-screen-80" 2898 role="region" 2899 aria-roledescription="carousel" 2900 @mouseenter="is_mouse_over = true" 2901 @mouseleave="is_mouse_over = false" 2902 > 2903 2904 <div class="carousel-container grow relative overflow-hidden"><ul id="CarouselTrack-template--23677499736351__video_slideshow_C4H64U" x-ref="carousel-track" class="carousel-track flex items-center overflow-x-scroll scroll-smooth snap-x snap-mandatory w-full h-full relative z-0" :aria-live="is_auto_playing ? 'off' : 'polite' " aria-atomic="true"><li 2905 role="group" 2906 aria-roledescription="slide" 2907 :aria-label="`Slide 1 of ${total_slides}`" 2908 class="carousel-item shrink-0 w-full snap-always snap-start overflow-hidden z-20 relative h-full" 2909 :aria-hidden="current_slide !== 1 ? true : false" 2910 2911 > 2912 <div class="absolute inset-0 h-full w-full item-wrapper p-8"> 2913 <div 2914 class="gallery-item ml-auto mr-auto relative top-1/2 -translate-y-1/2 max-w-full max-h-full pointer-events-auto" 2915 style="--ratio:1.775;"> 2916 <div 2917 2918 class="relative group h-full w-full" 2919 2920 x-data='ThemeTile()' 2921> 2922 2923 2924 <div class="tile-media-wrapper rounded-media relative overflow-hidden w-full h-full aspect-css-var" style="--ratio: 1.775;"><div 2925 id="template--23677499736351__video_slideshow_C4H64U-43721279996191" 2926 class="w-full h-full" 2927 x-data='Theme_Video("inline", "autoplay")' 2928 x-intersect:enter="play(true)" 2929 x-intersect:leave="pause" 2930 > 2931 <div 2932 class="relative w-full h-full" 2933 > 2934 <div 2935 class="html-video-wrapper" 2936 x-data="HTMLVideo" 2937 @play="play" 2938 @pause="pause" 2939 ><video playsinline="playsinline" loop="loop" preload="none" class="tile-media track-loaded html-video-object w-full slideshow-gallery-image h-full w-full object-cover absolute inset-0 w-full h-full object-cover" muted="muted" x-ref="video" poster="//sevensmarketing.com/cdn/shop/files/preview_images/c59963058d7c4d6381e6646197fe7490.thumbnail.0000000000_2048x.jpg?v=1712118289" loading="lazy"><source src="//sevensmarketing.com/cdn/shop/videos/c/vp/c59963058d7c4d6381e6646197fe7490/c59963058d7c4d6381e6646197fe7490.HD-1080p-2.5Mbps-26682025.mp4?v=0" type="video/mp4"><img src="//sevensmarketing.com/cdn/shop/files/preview_images/c59963058d7c4d6381e6646197fe7490.thumbnail.0000000000_2048x.jpg?v=1712118289"></video> 2940</div> 2941 </div> 2942 </div></div> 2943
2943<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
2943 2944
2944<script src="//sevensmarketing.com/cdn/shop/t/9/assets/video.js?v=85996568644424112851733369484" type="module"></script>
2944 2945 2946
2946<script src="//sevensmarketing.com/cdn/shop/t/9/assets/html5-video.js?v=172641717689876782661733369483" type="module"></script>
2946 2947 2948 2949 2950</div> 2951 2952 </div> 2953 </div> 2954 </li></ul></div><div class="shrink-0"> 2955 <div class="grid grid-cols-12 items-center lg:grid grid-flow-dense gap-2 wrapper py-5 "><div class="col-span-6 text-left "> 2956 <div id="Section-template--23677499736351__video_slideshow_C4H64U-CaptionContainer"> 2957 </div> 2958 </div> 2959 <div class="col-span-6 lg:col-end-13 text-right"> 2960 <div class="flex flex-wrap gap-4 justify-end"><div class="flex items-center justify-end gap-2"> 2961 <button aria-controls="CarouselTrack-template--23677499736351__video_slideshow_C4H64U" :aria-label="current_slide === 1 ? 'Go to last slide' : 'Previous slide'" role="button" @click="prevSlide" class="flex items-center justify-center min-touch-target"> 2962 <span class="inline-block w-6 h-6"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2963 <path stroke="currentColor" stroke-miterlimit="10" stroke-width="1.5" d="M22 12H2"/> 2964 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M10.235 3.765 2 12l8.235 8.235"/> 2965</svg></span> 2966 </button> 2967 <button aria-controls="CarouselTrack-template--23677499736351__video_slideshow_C4H64U" :aria-label="current_slide === total_slides ? 'Go to first slide' : 'Next slide'" role="button" @click="nextSlide" class="flex items-center justify-center min-touch-target"> 2968 <span class="inline-block w-6 h-6"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 2969 <path stroke="currentColor" stroke-miterlimit="10" stroke-width="1.5" d="M2 12h20"/> 2970 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="M13.765 20.235 22 12l-8.235-8.235"/> 2971</svg></span> 2972 </button> 2973 </div></div> 2974 </div></div> 2975 </div><style data-shopify>@supports not (aspect-ratio: 1 / 1) { 2976 .slideshow-cursor-button { 2977 z-index: 20; 2978 top: 50%; 2979 width: auto; 2980 height: auto; 2981 transform: translateY(-50%); 2982 cursor: pointer; 2983 } 2984 2985 .slideshow-cursor-button .icon { 2986 display: block; 2987 } 2988 2989 .gallery-item { 2990 position: absolute; 2991 inset: 0; 2992 transform: translateY(0); 2993 } 2994 2995 .gallery-slideshow .tile-media, 2996 .gallery-slideshow .html-video-object { 2997 object-fit: contain; 2998 } 2999 3000 .html-video-object.gallery-item, 3001 .html-video-wrapper { 3002 position: absolute; 3003 inset: 0; 3004 width: 100%; 3005 height: 100%; 3006 } 3007 3008 .gallery-slideshow .tile-placeholder-svg { 3009 position: absolute; 3010 inset: 0; 3011 width: 80vmin; 3012 height: 80vmin; 3013 margin-left: auto; 3014 margin-right: auto; 3015 } 3016 }</style> 3017
3017<script src="//sevensmarketing.com/cdn/shop/t/9/assets/modules-carousel.bundle.min.js?v=77424193968972759701733369484" type="module"></script>
3017 3018 3019</div></section> 3020 3021 3022<style> #shopify-section-template--23677499736351__video_slideshow_C4H64U .flex.flex-wrap.gap-4.justify-end {display: none;} #shopify-section-template--23677499736351__video_slideshow_C4H64U .lg\:grid {display: none;} </style></div><div id="shopify-section-template--23677499736351__media_with_text_overlay_Fze9P6" class="shopify-section"><style data-shopify> 3023 #template--23677499736351__media_with_text_overlay_Fze9P6 { 3024 --total-gutter-size: calc(var(--theme-col-gap-desktop) * 11); 3025 --column-size: calc((100% - var(--total-gutter-size)) / 12); 3026 --content-size: calc(var(--column-size) * 4 + var(--theme-col-gap-desktop) * 3); 3027 } 3028 3029 #template--23677499736351__media_with_text_overlay_Fze9P6 .media-overlay-container {height: 100vh; 3030 }</style> 3031 3032<section id="template--23677499736351__media_with_text_overlay_Fze9P6" class="section-container text-scheme-text bg-scheme-background " data-color-scheme="scheme1"><div class="media-overlay-container relative w-full"><img class="track-loaded absolute inset-0 object-cover w-full h-full track-loaded absolute inset-0 object-cover w-full h-full hs-lazyload hs-id-ff4d2757" loading="lazy" src="//sevensmarketing.com/cdn/shop/files/9_528ac271-fed2-48c2-9eaa-29c619956119.png?v=1713946968&width=2000"/><div class="overflow-hidden content inset-0 absolute w-full h-full text-center"> 3033 <div class="p-wrapper-left-and-right-margin h-full w-full"> 3034 <div class="h-full w-full flex min-w-0 break-words justify-center items-center"> 3035 <div class="overlay-content no-m-first min-w-0"> 3036 3037 3038 3039 </div> 3040 </div> 3041 </div> 3042 </div> 3043</div></section> 3044<div id="follow-div"> 3045 <strong class="">POLYTOPE</strong> interconnected <p>digital marketing strategies.</p> 3046<p><strong class="">AT SEVENS</strong>, we believe that every business has a unique path to growth.</p> 3047<strong class="">GLITCH</strong> we are data-driven, riding the boom of marketing technologies. 3048 3049</div>
3050<script> 3051 document.addEventListener("DOMContentLoaded", function() { 3052 const video = document.getElementById("placeholder"); 3053 const observer = new IntersectionObserver((entries) => { 3054 entries.forEach(entry => { 3055 if (entry.isIntersecting) { 3056 video.play(); // å¼å§ææ¾è§é¢ 3057 observer.unobserve(video); // 忢è§å¯ 3058 } 3059 }); 3060 }); 3061 observer.observe(video); 3062}); 3063 3064</script>
3064 3065<style> 3066 #template--23677499736351__media_with_text_overlay_Fze9P6 .overlay-content{ 3067 margin-top:100px; 3068 } 3069 #follow-div { 3070 /* width: 216px; */ 3071 position: absolute; 3072 width: 230px; 3073 top: 0; 3074 left: 0; 3075 font-size: 16px; 3076 translate: -100% -100%; 3077 display: none; 3078 background-color: #001AFF; 3079 padding: 10px; 3080 color: white; 3081 z-index: 2; 3082 } 3083 #follow-div p{ 3084 margin-bottom:10px; 3085 } 3086 #template--23677499736351__media_with_text_overlay_Fze9P6{ 3087 position: relative; 3088 } 3089 #template--23677499736351__media_with_text_overlay_Fze9P6::before{ 3090 content: ''; 3091 position: absolute; 3092 top: 0; 3093 left: 0; 3094 background: transparent; 3095 width:100%; 3096 height:100%; 3097 z-index:3; 3098 } 3099 @media (max-width: 768px) { 3100 #template--23677499736351__media_with_text_overlay_Fze9P6::before{ 3101 display:none; 3102 } 3103 #template--23677499736351__media_with_text_overlay_Fze9P6 .min-w-0{ 3104 align-items: center; 3105 } 3106 #template--23677499736351__media_with_text_overlay_Fze9P6 .overlay-content{ 3107 margin-top:0; 3108 } 3109 #follow-div{ 3110 display:none !important; 3111 } 3112 } 3113</style> 3114
3115<script> 3116 3117 3118const throttle = (func, wait) => { 3119 let inThrottle = false; 3120 return (...args) => { 3121 if (!inThrottle) { 3122 func(...args); 3123 inThrottle = true; 3124 setTimeout(() => inThrottle = false, wait); 3125 } 3126 }; 3127}; 3128 3129const banner = document.querySelector('#template--23677499736351__media_with_text_overlay_Fze9P6'); 3130const followDiv = document.getElementById('follow-div'); 3131 3132const throttledUpdatePosition = throttle((mouseX, mouseY) => { 3133 let width = followDiv.offsetWidth; 3134 let height = followDiv.offsetHeight; 3135 // followDiv.style.left = mouseX + 'px'; 3136 // followDiv.style.top = mouseY + 'px'; 3137 followDiv.style.transform = `translate(${mouseX}px,${mouseY}px)`; 3138 3139}, 26); // æ¯ç§æå¤æ´æ° 60 次ï¼1000ms / 16msï¼ 3140 3141banner.addEventListener('mousemove', (event) => { 3142 const bannerWidth = banner.offsetWidth; 3143 const bannerHeight = banner.offsetHeight; 3144 3145 const mouseX = event.pageX; 3146 const mouseY = event.pageY; 3147 const isMouseInTargetArea = mouseX >= bannerWidth - bannerWidth/3 && mouseY >= bannerHeight - 500; 3148 3149 if (isMouseInTargetArea) { 3150 followDiv.style.display = 'block'; 3151 throttledUpdatePosition(mouseX, mouseY); 3152 } else { 3153 followDiv.style.display = 'none'; 3154 } 3155}); 3156 3157banner.addEventListener('pointerleave', () => { 3158 followDiv.style.display = 'none'; 3159}); 3160 3161</script>
3161 3162 3163 3164</div><div id="shopify-section-template--23677499736351__image_gallery_J6HEWa" class="shopify-section"><style data-shopify>#section-template--23677499736351__image_gallery_J6HEWa .grid-wrapper { 3165 --number-of-columns: 2; 3166 --number-of-gutters: calc(var(--number-of-columns) - 1); 3167 --total-gutter-size: calc(var(--media-grid-col-gap) * var(--number-of-gutters)); 3168 3169 3170 }</style><section 3171 id="section-template--23677499736351__image_gallery_J6HEWa" 3172 x-data="{ labelContent: '', focusVisible: false }" 3173 class="section-container" 3174 data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a" 3175 style="--section-grid-cols-mobile: 2; --section-grid-cols-desktop: 2; --top-spacing-adjust: 1; --bottom-spacing-adjust: 1;" 3176> 3177 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__image_gallery_J6HEWa .grid-wrapper { 3178 3179 3180 }</style><ul class="grid grid-cols-section-mobile lg:grid-cols-section-desktop grid-wrapper gap-media-grid items-start"><li 3181 3182 class="relative group " 3183 3184 x-data='ThemeTile()' 3185> 3186 <a 3187 aria-labelledby="Section-template--23677499736351__image_gallery_J6HEWa-Image-45443810099487-label" 3188 3189 class="tile-link absolute inset-0 z-10 group" 3190 3191 3192 3193 ><span class="sr-only"></span></a> 3194 3195 <div class="tile-media-wrapper rounded-media overflow-hidden relative " > 3196 <img src="//sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&width=352 352w, //sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&width=832 832w, //sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&width=1200 1200w, //sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&width=1920 1920w, //sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&width=2000 2000w" width="2000" height="2000" loading="lazy" class="tile-media track-loaded" sizes="(min-width: 990px) calc(100vw / 2), 50vw"> 3197 </div> 3198
3198<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
3198 3199 3200 3201</li> 3202<li 3203 3204 class="relative group " 3205 3206 x-data='ThemeTile()' 3207> 3208 <a 3209 aria-labelledby="Section-template--23677499736351__image_gallery_J6HEWa-Image-45443817734431-label" 3210 3211 class="tile-link absolute inset-0 z-10 group" 3212 3213 3214 3215 ><span class="sr-only"></span></a> 3216 3217 <div class="tile-media-wrapper rounded-media overflow-hidden relative " > 3218 <img src="//sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&width=352 352w, //sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&width=832 832w, //sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&width=1200 1200w, //sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&width=1920 1920w, //sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&width=2000 2000w" width="2000" height="2000" loading="lazy" class="tile-media track-loaded" sizes="(min-width: 990px) calc(100vw / 2), 50vw"> 3219 </div> 3220
3220<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
3220 3221 3222 3223</li> 3224</ul> 3225</div></section> 3226 3227</div><div id="shopify-section-template--23677499736351__image_gallery_9YPTwp" class="shopify-section"><style data-shopify>#section-template--23677499736351__image_gallery_9YPTwp .grid-wrapper { 3228 --number-of-columns: 1; 3229 --number-of-gutters: calc(var(--number-of-columns) - 1); 3230 --total-gutter-size: calc(var(--media-grid-col-gap) * var(--number-of-gutters)); 3231 3232 3233 }</style><section 3234 id="section-template--23677499736351__image_gallery_9YPTwp" 3235 x-data="{ labelContent: '', focusVisible: false }" 3236 class="section-container" 3237 data-color-scheme="scheme-cfe0c89f-dc06-4dac-a0f5-2e07d5deb98a" 3238 style="--section-grid-cols-mobile: 1; --section-grid-cols-desktop: 1; --top-spacing-adjust: 1; --bottom-spacing-adjust: 2;" 3239> 3240 <div class="text-scheme-text bg-scheme-background pt-top-section-vertical-spacing pb-bottom-section-vertical-spacing"><style data-shopify>#section-template--23677499736351__image_gallery_9YPTwp .grid-wrapper { 3241 3242 3243 }</style><ul class="grid grid-cols-section-mobile lg:grid-cols-section-desktop grid-wrapper gap-media-grid items-start"><li 3244 3245 class="relative group " 3246 3247 x-data='ThemeTile()' 3248> 3249 <a 3250 aria-labelledby="Section-template--23677499736351__image_gallery_9YPTwp-Image-45443829793055-label" 3251 3252 class="tile-link absolute inset-0 z-10 group" 3253 3254 3255 3256 ><span class="sr-only"></span></a> 3257 3258 <div class="tile-media-wrapper rounded-media overflow-hidden relative " > 3259 <img src="//sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&width=352 352w, //sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&width=832 832w, //sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&width=1200 1200w, //sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&width=1920 1920w, //sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&width=2000 2000w" width="2000" height="1000" loading="lazy" class="tile-media track-loaded" sizes="(min-width: 990px) calc(100vw / 1), 100vw"> 3260 </div> 3261
3261<script src="//sevensmarketing.com/cdn/shop/t/9/assets/tile.js?v=170646438460912807401733369483" type="module"></script>
3261 3262 3263 3264</li> 3265</ul> 3266</div></section> 3267 3268</div> 3269 </div> 3270 </main><!-- BEGIN sections: footer-group --> 3271<div id="shopify-section-sections--23677500850463__sevens_footer_new_gXcDrF" class="shopify-section shopify-section-group-footer-group"><div class="sevens-footer"> 3272 3273 <div class="wrapper posi" footer_content> 3274 <div top> 3275 <div section_title>empowering your <br>global journey</div> 3276 <a btn href="/pages/contact-us-sevens-marketing">GET IN TOUCH</a> 3277 </div> 3278 <div class="sevens-footer-body"> 3279 <div class="sevens-footer-body-item"> 3280 <div class="title">Shenzhen Headquarters</div> 3281 <div class="dl" text>1701, East Tower, Office Building, North Area, Phase 1, Zhongzhou Bay, Shatou Street, Futian District, Shenzhen (Headquarters)</div> 3282 <div class="dl" bottom>0755-23964304</div> 3283 </div> 3284 <div class="sevens-footer-body-item"> 3285 <div class="title">Chengdu Office</div> 3286 <div class="dl" text>No. 06, 25th Floor, Building A, Jiayu Financial Technology Center, 166 Mingdu Road, Gaoxin District, Chengdu City, Sichuan Province (Branch Office)</div> 3287 <div class="dl" bottom>[email protected]</div> 3288 </div> 3289 <div class="sevens-footer-body-item"> 3290 <div class="title">Shanghai Office</div> 3291 <div class="dl" text>Room 02-404, WeWork China (Weihai Road Community Store), 696 Weihai Road, Jing'an District, Shanghai (Branch Office)</div> 3292 <div class="dl" bottom>021-52831839</div> 3293 </div> 3294 <div class="sevens-footer-body-item"> 3295 <div class="title">US Office</div> 3296 <div class="dl" text>Worth Technology Limited 6547 N Academy Blvd 2266 Colorado Springs, CO80918 </div> 3297 <div class="dl" bottom>[email protected]</div> 3298 </div> 3299 </div> 3300 <div class="sevens-footer-down"> 3301 <div class="lt"> 3302 <i>© 2026 <a href="#">sevensmarketing</a></i> 3303 </div> 3304 <div class="rt"> 3305 <i><a href="https://sevensmarketing.com/pages/privacy-policy-sevens-marketing">Privacy Policy</a></i> 3306 <i><a href="https://sevensmarketing.com/pages/terms-of-use-sevens-marketing">Terms of Use</a></i> 3307 </div> 3308 </div> 3309 </div> 3310</div> 3311 3312 3313<style> 3314 .sevens-footer{ 3315 background-image:url("//sevensmarketing.com/cdn/shop/files/03-1-_2_2_1920x.png?v=1722937925"); 3316 background-size:cover; 3317 } 3318 @media screen and (max-width:989px){ 3319 .sevens-footer{ 3320 background-image:url("//sevensmarketing.com/cdn/shop/files/Mask_group_1_1000x.png?v=1720598877"); 3321 background-size:cover; 3322 } 3323 3324 } 3325</style> 3326 3327 3328 3329 3330 3331 3332<style> 3333 3334 3335</style> 3336</div> 3337<!-- END sections: footer-group --><!-- BEGIN sections: overlay-group --> 3338<div id="shopify-section-sections--23677500981535__menu" class="shopify-section shopify-section-group-overlay-group"> 3339<style data-shopify>#DrawerMenu { 3340 --blocks-vertical-spacing-desktop: 0.0625rem; 3341 --blocks-vertical-spacing-mobile: 1px; 3342 --blocks-vertical-spacing: var(--blocks-vertical-spacing-mobile); 3343} 3344 3345@media (min-width: 990px) { 3346 #DrawerMenu { 3347 --blocks-vertical-spacing: var(--blocks-vertical-spacing-desktop); 3348 } 3349}</style>
3349<script> 3350 window.theme.menuDrawer = window.theme.menuDrawerPosition || {}; 3351 window.theme.menuDrawer.position = "rightDrawer"; 3352</script>
3352 3353<section data-menu-drawer-section x-data='ThemeSection_MenuDrawer("rightDrawer")' data-position='rightDrawer'> 3354 <template data-should-teleport="#right-drawer-slot"> 3355 3356 <div 3357 id='DrawerMenu' 3358 x-show="$store.modals.rightDrawer.contents === 'menu-drawer'" 3359 :data-modal-label=" 3360 ($store.modals.rightDrawer.contents === 'menu-drawer') 3361 ? 3362 '' 3363 : false" 3364 class="menu-drawer text-menu-drawer max-h-full flex flex-col h-screen text-scale-n0 lg:text-scale-n1" 3365 > 3366 3367 <div class="p-2 lg:p-4 w-full shrink-0 overflow-hidden" original_close_btn> 3368 <div class="relative flex items-center justify-end"> 3369 <button @click.prevent="$store.modals.close('menu-drawer')" class="block top-0 min-touch-target"> 3370 <span class="sr-only">Close (esc)</span> 3371 <span class="inline-block w-4 h-4"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 3372 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 2 20 20m0-20L2 22"/> 3373</svg> 3374</span> 3375 </button> 3376 </div> 3377 </div> 3378 3379 <div class="flex-auto flex flex-col overflow-hidden overflow-y-auto p-2 lg:p-4 pb-8" menu_drawer_content> 3380 <div class="space-y-spacer" style="--spacing-adjust: 1" content_top><style> 3381 @media screen and (max-width:989px){ 3382 body { 3383 --fw-live-helper-bottom: 100px; 3384 } 3385 } 3386 3387 3388 3389 @media screen and (max-width:989px){ 3390 .cy-focustrap{ 3391 &>.notranslate { 3392 left: 50px; 3393 bottom: 50px; 3394 width: 50px; 3395 } 3396 } 3397 } 3398 3399 3400 3401 #right-drawer-slot{ 3402 background: transparent; 3403 width: calc(100% - 10px) !important; 3404 } 3405 3406 div[role='dialog']{ 3407 } 3408 3409</style> 3410 3411 3412<nav 3413 3414> 3415 3416 3417 3418 3419 3420 <div nav_top> 3421 <div logo><span class="font-heading break-words block"><div class="" style="max-width: 120px"><img src="//sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&width=1000" alt="sevensmarketing" srcset="//sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&width=352 352w, //sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&width=832 832w" width="9356" loading="eager" class="site-title-logo-image logo-default" sizes="120px"> 3422</div></span></div> 3423 <div top_content> 3424 <a href="/collections/case-study-sevens-marketing" collection_link nav_item> 3425 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> 3426 <path d="M7.91667 4.58301H15.4167V12.083" stroke="white" stroke-width="0.833333"/> 3427 <path d="M4.80995 15.1896L15.4165 4.58301" stroke="white" stroke-width="0.833333"/> 3428</svg> 3429 <span text>Dive into Our Success</span> 3430 </a> 3431 <div nav_wrapper> 3432 3433 <ul id="Menu-menu" class="menu min-w-[40%] break-words"> 3434<li class="menu-link menu-item-0" case_trigger_li ><div mobile_case_block> 3435 <a href="#" case_trigger> 3436 Service 3437 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"> 3438 <path d="M12.75 6.729L8.5 10.979L4.25 6.729" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3439</svg> 3440 </a> 3441 3442 </div></li> 3443<li class="menu-link menu-item-1" ><a href="/collections/case-study-sevens-marketing" class="block flex justify-between hover:underline py-1"> 3444 <span>Work</span> 3445 </a> 3446</li> 3447<li class="menu-link menu-item-2" ><a href="/pages/industry-reports-sevens-marketing" class="block flex justify-between hover:underline py-1"> 3448 <span>Industry Reports</span> 3449 </a> 3450</li> 3451<li class="menu-link menu-item-3" ><a href="/pages/about-us-sevens-marketing" class="block flex justify-between hover:underline py-1"> 3452 <span>About Us</span> 3453 </a> 3454</li></ul> 3455 3456 <div case_content><div mobile_case_block_content> 3457 3458 3459 3460 3461 3462 3463 <a href="/pages/website-design-development-services-sevens-marketing"> 3464 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
3464ox="0 0 16 16" fill="none"> 3465 <path d="M7.66658 1.3335H1.33325V8.66683H7.66658V1.3335Z" stroke="white" stroke-width="0.75"/> 3466 <path d="M14.6666 11.3335H1.33325V14.3335H14.6666V11.3335Z" stroke="white" stroke-width="0.75"/> 3467 <path d="M14.6666 1.3335H10.3333V4.00016H14.6666V1.3335Z" stroke="white" stroke-width="0.75"/> 3468 <path d="M14.6666 6H10.3333V8.66667H14.6666V6Z" stroke="white" stroke-width="0.75"/> 3469</svg> 3470 <span>Website Design & Development</span> 3471 </a> 3472 3473 3474 3475 3476 <a href="/pages/creative-video-production-services-sevens-marketing"> 3477 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 3478 <path d="M11.9999 3.3335H1.33325V12.6668H11.9999V3.3335Z" stroke="#1E33E7" stroke-width="0.75"/> 3479 <path fill-rule="evenodd" clip-rule="evenodd" d="M14.6667 4.6665L12 6.9165V9.08317L14.6667 11.3332V4.6665Z" stroke="#1E33E7" stroke-width="0.75" stroke-linecap="square"/> 3480 <path d="M5.66675 6.3335L7.66675 8.00016L5.66675 9.66683" stroke="#1E33E7" stroke-width="0.75" stroke-linecap="square"/> 3481</svg> 3482 <span>Creative Video Production</span> 3483 </a> 3484 3485 3486 3487 3488 <a href="/pages/social-media-operations-services-sevens-marketing"> 3489 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 3490 <path d="M3.61938 3.28613C2.41294 4.49256 1.66675 6.15922 1.66675 8.00019C1.66675 9.84112 2.41294 11.5078 3.61938 12.7142" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3491 <path d="M13.0474 12.7142C14.2538 11.5078 15 9.84112 15 8.00019C15 6.15922 14.2538 4.49256 13.0474 3.28613" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3492 <path d="M11.6331 11.2999C12.4776 10.4554 12.9999 9.2887 12.9999 8.00003C12.9999 6.71136 12.4776 5.5447 11.6331 4.7002" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3493 <path d="M5.03358 4.7002C4.18908 5.5447 3.66675 6.71136 3.66675 8.00003C3.66675 9.2887 4.18908 10.4554 5.03358 11.2999" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3494 <path d="M9.39393 6.6665C10.0968 6.6665 10.6667 7.20377 10.6667 7.8665C10.6667 8.72924 9.81817 9.4665 9.39393 9.8665C9.1111 10.1332 8.75757 10.3998 8.33333 10.6665C7.9091 10.3998 7.55557 10.1332 7.27273 9.8665C6.8485 9.4665 6 8.72924 6 7.8665C6 7.20377 6.56983 6.6665 7.27273 6.6665C7.71543 6.6665 8.10533 6.8796 8.33333 7.20294C8.56133 6.8796 8.95123 6.6665 9.39393 6.6665Z" stroke="white" stroke-width="0.75"/> 3495</svg> 3496 <span>Social Media Operations</span> 3497 </a> 3498 3499 3500 3501 3502 <a href="/pages/influencer-marketing-services-sevens-marketing"> 3503 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 3504 <path d="M8.00008 6.00016C9.28875 6.00016 10.3334 4.95549 10.3334 3.66683C10.3334 2.37816 9.28875 1.3335 8.00008 1.3335C6.71142 1.3335 5.66675 2.37816 5.66675 3.66683C5.66675 4.95549 6.71142 6.00016 8.00008 6.00016Z" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3505 <path d="M1.33325 13.6668C1.33325 10.7213 4.01955 8.3335 7.33325 8.3335" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3506 <path d="M10.6166 9.3335C9.90782 9.3335 9.33325 10.003 9.33325 10.829C9.33325 12.3244 10.8499 13.6839 11.6666 14.0002C12.4833 13.6839 13.9999 12.3244 13.9999 10.829C13.9999 10.003 13.4254 9.3335 12.7166 9.3335C12.2826 9.3335 11.8988 9.5846 11.6666 9.9689C11.4344 9.5846 11.0506 9.3335 10.6166 9.3335Z" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3507</svg> 3508 <span>Influencer Marketing</span> 3509 </a> 3510 3511 3512 3513 3514 <a href="/pages/advertising-media-buying-services-sevens-marketing"> 3515 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
3515ox="0 0 16 16" fill="none"> 3516 <path d="M1.66675 2.3335C1.66675 1.78121 2.11446 1.3335 2.66675 1.3335H10.6667C11.219 1.3335 11.6667 1.78121 11.6667 2.3335V14.6668H2.66675C2.11446 14.6668 1.66675 14.2191 1.66675 13.6668V2.3335Z" stroke="white" stroke-width="0.75"/> 3517 <path d="M11.6667 8.00016C11.6667 7.63196 11.9652 7.3335 12.3334 7.3335H13.6667C14.0349 7.3335 14.3334 7.63196 14.3334 8.00016V13.6668C14.3334 14.2191 13.8857 14.6668 13.3334 14.6668H11.6667V8.00016Z" stroke="white" stroke-width="0.75"/> 3518 <path d="M3.66675 4H6.33341" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3519 <path d="M3.66675 6.3335H7.66675" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3520</svg> 3521 <span>Advertising & Media Buying</span> 3522 </a> 3523 3524 3525 3526 3527 <a href="/pages/dtc-brand-consulting-services-sevens-marketing"> 3528 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 3529 <path d="M14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99993 14.6668C6.00876 14.6668 1.33325 14.6668 1.33325 14.6668C1.33325 14.6668 1.33325 9.6909 1.33325 8.00016C1.33325 4.31826 4.31803 1.3335 7.99993 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016Z" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3530 <path d="M4.66675 6H10.6667" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3531 <path d="M4.66675 8.6665H10.6667" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3532 <path d="M4.66675 11.3335H8.00008" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3533</svg> 3534 <span>DTC Brand Consulting</span> 3535 </a> 3536 3537 3538 3539 3540 <a href="/pages/full-service-brand-management-services-sevens-marketing"> 3541 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 3542 <path d="M6.66659 10.9998L8.66659 11.6665C8.66659 11.6665 13.6666 10.6665 14.3333 10.6665C14.9999 10.6665 14.9999 11.3332 14.3333 11.9998C13.6666 12.6665 11.3333 14.6665 9.33325 14.6665C7.33325 14.6665 5.99992 13.6665 4.66659 13.6665C3.33325 13.6665 1.33325 13.6665 1.33325 13.6665" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3543 <path d="M1.33325 9.66667C1.99992 9 3.33325 8 4.66659 8C5.99992 8 9.16659 9.33333 9.66659 10C10.1666 10.6667 8.66659 11.6667 8.66659 11.6667" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3544 <path d="M13.0001 5H9.66675C9.11446 5 8.66675 5.44772 8.66675 6C8.66675 6.55228 9.11446 7 9.66675 7H13.0001C13.5524 7 14.0001 6.55228 14.0001 6C14.0001 5.44772 13.5524 5 13.0001 5Z" stroke="white" stroke-width="0.75"/> 3545 <path d="M8.66675 3H14.0001" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3546</svg> 3547 <span>Full-Service Brand Management</span> 3548 </a> 3549 3550 <div back_btn><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"> 3551 <path d="M10.2709 12.75L6.02087 8.5L10.2709 4.25" stroke="white" stroke-width="0.75" stroke-linecap="square"/> 3552</svg></div> 3553 </div> 3554 3555 3556 3557 3558 3559 </div> 3560 </div> 3561 3562 </div> 3563 <div close_btn> 3564 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> 3565 <path d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z" stroke="white"/> 3566 <path d="M14.8282 9.17139L9.17139 14.8282" stroke="white" stroke-linecap="square"/> 3567 <path d="M9.17163 9.17139L14.8285 14.8282" stroke="white" stroke-linecap="square"/> 3568</svg> 3569 </div> 3570 </div> 3571 3572</nav> 3573
3574<script> 3575 function init_mobile_case_block(){ 3576 let block = document.querySelector("[mobile_case_block]"); 3577 let trigger = block.querySelector("[case_trigger]"); 3578 trigger.addEventListener("click",(e)=>{ 3579 e.stopPropagation(); 3580 3581 document.querySelector("[menu_drawer_content] [top_content]").setAttribute("active",true); 3582 }) 3583 let close_btn = document.querySelector("[nav_top] [close_btn]"); 3584 let original_close_btn = document.querySelector("[original_close_btn] button"); 3585 3586 close_btn.addEventListener("click",()=>{ 3587 original_close_btn.click(); 3588 }); 3589 document.querySelector("[menu_drawer_content] [mobile_case_block_content] [back_btn]").addEventListener("click",(event)=>{ 3590 document.querySelector("[menu_drawer_content] [top_content]").removeAttribute("active"); 3591 }); 3592 document.querySelector("[menu_drawer_content]").addEventListener("click",(event)=>{ 3593 console.log(event); 3594 let rect = document.querySelector("[menu_drawer_content] [mobile_case_block_content]").getBoundingClientRect(); 3595 3596 const in_area = ( 3597 event.clientX >= rect.left && 3598 event.clientX <= rect.right && 3599 event.clientY >= rect.top && 3600 event.clientY <= rect.bottom 3601 ); 3602 console.log(in_area); 3603 if(!in_area){ 3604 document.querySelector("[menu_drawer_content] [top_content]").removeAttribute("active"); 3605 } 3606 }) 3607 3608 3609 } 3610 init_mobile_case_block(); 3611</script>
3611</div><div class="mt-8"> 3612 <a href="https://global.sevensmarketing.com/customer_authentication/redirect?locale=en®ion_country=US" class="">Log in</a> 3613 </div><!-- 3614 <div data-w-id="1afbd46e-6c9e-8ac4-901a-82766a0c8ce8" class="wg-element-wrapper sw3 mt-10" style="opacity: 1;"> 3615 <a lang="en" data-w-id="1afbd46e-6c9e-8ac4-901a-82766a0c8ce9" href="#" class="wg-selector-2 s1 w-inline-block" > 3616 <div class="wg-selector-2-fill f1" style="transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;"></div> 3617 <div class="wg-selector2-text-lang1" style="line-height: 18px; 3618 margin-top: 5px;transform: translate3d(0%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; color: rgb(255, 255, 255);">EN</div> 3619 </a> 3620 <a data-w-id="1afbd46e-6c9e-8ac4-901a-82766a0c8ced" href="https://www.sevensmarketing.cn/" class="wg-selector-2 s2 w-inline-block" target="_blank"> 3621 <div class="wg-selector-2-fill f2" style="transform: translate3d(-100%, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;"></div> 3622 <div class="wg-selector2-text-lang2" style="color: rgb(255, 255, 255); transform: translate3d(0%, 3px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;">CN</div> 3623 </a> 3624 </div> 3625 --> 3626 <div talk_btn_pos> 3627 <a href="/pages/contact-us-sevens-marketing" nav_item talk_btn> 3628 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> 3629 <path d="M14.6667 7.99967C14.6667 11.6816 11.6819 14.6663 8.00001 14.6663C6.00884 14.6663 1.33334 14.6663 1.33334 14.6663C1.33334 14.6663 1.33334 9.69041 1.33334 7.99967C1.33334 4.31777 4.31811 1.33301 8.00001 1.33301C11.6819 1.33301 14.6667 4.31777 14.6667 7.99967Z" stroke="#1E33E7" stroke-width="0.833333"/> 3630 <path d="M4.66663 8.66634L6.66666 10.6663L11 6.33301" stroke="#1E33E7" stroke-width="0.833333"/> 3631</svg> 3632 <span text>Ready to Talk</span> 3633 </a> 3634 </div> 3635 </div> 3636 3637 </div> 3638 3639 </template> 3640</section> 3641
3642<script src="//sevensmarketing.com/cdn/shop/t/9/assets/menu-drawer.js?v=114646274431037805451733369483" type="module"></script>
3642 3643 3644 3645</div> 3646<!-- END sections: overlay-group --><div 3647 id="screenreader-announce" 3648 class="sr-only" 3649 aria-live="polite" 3650 role="status" 3651 ></div> 3652 3653 <ul hidden> 3654 <li id="a11y-refresh-page-message"> 3655 Choosing a selection results in a full page refresh. 3656 </li> 3657 <li id="a11y-selection-message"> 3658 Press the space key then arrow keys to make a selection. 3659 </li> 3660 </ul> 3661 3662 3663 <aside x-data> 3664 <template x-teleport="body"> 3665 <div 3666 x-show="$store.modals.leftDrawer.open" 3667 @keydown.escape.prevent.stop="$store.modals.close('leftDrawer')" 3668 @click="$store.modals.close('leftDrawer')" 3669 class="fixed inset-0 z-110" 3670 data-color-scheme="scheme1" 3671 id="modals-leftDrawer" 3672 @left-drawer-is-open.window="setTimeout(() => { $focus.first() }, 120)" 3673 > 3674 <div 3675 x-show="$store.modals.leftDrawer.open" 3676 x-transition.opacity.duration.500ms 3677 class='fixed inset-0 bg-scheme-text backdrop-saturate-0' 3678 style="--tw-bg-opacity: 0.85;"><!-- Overlay --></div> 3679 <div 3680 @click.stop 3681 x-show="$store.modals.leftDrawer.open" 3682 x-transition:enter="transition ease-energetic duration-[350ms]" 3683 x-transition:enter-start="-translate-x-full" 3684 x-transition:enter-end="translate-x-0" 3685 x-transition:leave="transition ease-energetic duration-[350ms]" 3686 x-transition:leave-start="translate-x-0" 3687 x-transition:leave-end="-translate-x-full" 3688 x-trap.noscroll.inert="$store.modals.leftDrawer.open" 3689 class="relative w-11/12 lg:max-w-sm h-full bg-scheme-background text-scheme-text mr-auto drawer-transition-host" 3690 id="left-drawer-slot" 3691 role="dialog" 3692 aria-modal="true" 3693 :aria-label="getModalLabel('leftDrawer', $el)" 3694 tabindex="-1" 3695 > 3696 <!-- Modal content is teleported here --> 3697 </div> 3698 </div> 3699 </template> 3700</aside> 3701<aside x-data> 3702 <template x-teleport='body'> 3703 <div 3704 x-show='$store.modals.rightDrawer.open' 3705 @keydown.escape.prevent.stop="$store.modals.close('rightDrawer')" 3706 @click="$store.modals.close('rightDrawer')" 3707 class='fixed inset-0 z-120' 3708 data-color-scheme='scheme1' 3709 id='modals-rightDrawer' 3710 @right-drawer-is-open.window='setTimeout(() => { $focus.first() }, 120)' 3711 > 3712 <div 3713 x-show='$store.modals.rightDrawer.open' 3714 class='fixed inset-0 bg-scheme-text backdrop-saturate-0' 3715 style="--tw-bg-opacity: 0.85;" 3716 x-transition.opacity.duration.500ms 3717 > 3718 <!-- Overlay --> 3719 </div> 3720 <div 3721 @click.stop 3722 x-show='$store.modals.rightDrawer.open' 3723 x-transition:enter='transition ease-energetic duration-[350ms]' 3724 x-transition:enter-start='translate-x-full' 3725 x-transition:enter-end='translate-x-0' 3726 x-transition:leave='transition ease-energetic duration-[350ms]' 3727 x-transition:leave-start='translate-x-0' 3728 x-transition:leave-end='translate-x-full' 3729 x-trap.noscroll.inert='$store.modals.rightDrawer.open' 3730 class='relative w-11/12 lg:max-w-sm h-full bg-scheme-background text-scheme-text ml-auto' 3731 id='right-drawer-slot' 3732 role='dialog' 3733 aria-modal='true' 3734 :aria-label="getModalLabel('rightDrawer', $el)" 3735 tabindex='-1' 3736 > 3737 <!-- Modal content is teleported here --> 3738 </div> 3739 </div> 3740 </template> 3741</aside> 3742<aside 3743 x-data 3744> 3745 <template x-teleport="body"> 3746 <div 3747 x-show="$store.modals.quickViewDrawer.open" 3748 @keydown.escape.prevent.stop="$store.modals.close('quickViewDrawer')" 3749 @click="$store.modals.close('quickViewDrawer')" 3750 class="fixed left-0 top-0 right-0 bottom-0 lg:inset-0 z-110 max-lg:flex max-lg:items-end" 3751 data-color-scheme="scheme1" 3752 id="modals-quickViewDrawer" 3753 @quick-view-drawer-is-open.window="setTimeout(() => { $focus.first() }, 120)" 3754 > 3755 <div 3756 x-show="$store.modals.quickViewDrawer.open" 3757 class='fixed inset-0 bg-scheme-text backdrop-saturate-0' 3758 style="--tw-bg-opacity: 0.85;" 3759 x-transition.opacity.duration.500ms 3760 > 3761 <!-- Overlay --> 3762 </div> 3763 <div 3764 @click.stop 3765 x-show="$store.modals.quickViewDrawer.open" 3766 x-transition:enter="transition ease-energetic duration-[350ms]" 3767 x-transition:enter-start="max-lg:translate-y-full lg:translate-x-full" 3768 x-transition:enter-end="max-lg:translate-y-0 lg:translate-x-0" 3769 x-transition:leave="transition ease-energetic duration-[350ms]" 3770 x-transition:leave-start="max-lg:translate-y-0 lg:translate-x-0" 3771 x-transition:leave-end="max-lg:translate-y-full lg:translate-x-full" 3772 x-trap.noscroll.inert="$store.modals.quickViewDrawer.open" 3773 class="relative w-full h-[90vh] lg:max-w-[var(--quick-view-max-width)] lg:h-full bg-scheme-background text-scheme-text ml-auto overflow-hidden" 3774 id="quick-view-drawer-slot" 3775 role="dialog" 3776 aria-modal="true" 3777 :aria-label="getModalLabel('quickViewDrawer', $el)" 3778 tabindex="-1" 3779 ></div> 3780 </div> 3781 </template> 3782</aside> 3783<div x-data> 3784 <template x-teleport="body"> 3785 <div 3786 x-show="$store.modals.popup.open" 3787 @keydown.escape.prevent.stop="$store.modals.close('popup')" 3788 @click="$store.modals.close('popup')" 3789 class="fixed inset-0 z-110 p-8 lg:p-24" 3790 data-color-scheme="scheme2" 3791 id="modals-popup" 3792 @popup-is-open.window="setTimeout(() => { $focus.first() }, 120)" 3793 > 3794 <div 3795 x-show="$store.modals.popup.open" 3796 class="fixed inset-0 bg-scheme-text/40" 3797 > 3798 <!-- Overlay --> 3799 </div> 3800 <div 3801 x-show="$store.modals.popup.open" 3802 class="h-full w-full flex" 3803 > 3804 <div 3805 @click.stop 3806 x-show="$store.modals.popup.open" 3807 x-trap.noscroll.inert="$store.modals.popup.open" 3808 class="relative w-full max-w-2xl max-h-full px-2 lg:px-4 py-theme border-gr
3808idline border-gridline-color bg-scheme-background text-scheme-text m-auto overflow-y-auto" 3809 id="popup-slot" 3810 role="dialog" 3811 aria-modal="true" 3812 :aria-label="getModalLabel('popup', $el)" 3813 tabindex="-1" 3814 > 3815 <!-- Modal content is teleported here --> 3816 </div> 3817 </div> 3818 </div> 3819 </template> 3820</div> 3821<div x-data> 3822 <template x-teleport="body"> 3823 <div 3824 x-show="$store.modals.modal.open" 3825 @keydown.escape.prevent.stop="$store.modals.close('modal')" 3826 @click="$store.modals.close('modal')" 3827 class="fixed inset-0 z-110" 3828 data-color-scheme="scheme2" 3829 id="modals-modal" 3830 @modal-is-open.window="setTimeout(() => { $focus.first() }, 120)" 3831 > 3832 <div 3833 x-show="$store.modals.modal.open" 3834 class="h-full w-full flex" 3835 > 3836 <div 3837 @click.stop 3838 x-show="$store.modals.modal.open" 3839 x-transition:enter='transition ease-energetic duration-[380ms]' 3840 x-transition:enter-start='opacity-0' 3841 x-transition:enter-end='opacity-100' 3842 x-transition:leave='transition ease-energetic duration-[380ms]' 3843 x-transition:leave-start='opacity-100' 3844 x-transition:leave-end='opacity-0' 3845 x-trap.noscroll.inert="$store.modals.modal.open" 3846 class="relative w-full h-full bg-scheme-background text-scheme-text m-auto overflow-y-auto" 3847 id="modal-slot" 3848 role="dialog" 3849 aria-modal="true" 3850 :aria-label="getModalLabel('modal', $el)" 3851 tabindex="-1" 3852 > 3853 <!-- Modal content is teleported here --> 3854 </div> 3855 </div> 3856 </div> 3857 </template> 3858</div><div 3859 x-data 3860> 3861 <template x-teleport="body"> 3862 <div 3863 x-show="$store.modals.promo.open" 3864 class="fixed inset-0 z-110 pointer-events-none" 3865 data-color-scheme="scheme2" 3866 id="modals-promo" 3867 > 3868 <div 3869 x-show="$store.modals.promo.open" 3870 class="h-full w-full" 3871 > 3872 <div 3873 x-show="$store.modals.promo.open" 3874 x-transition:enter="transition ease-energetic duration-[300ms] delay-75" 3875 x-transition:enter-start="translate-y-full" 3876 x-transition:enter-end="translate-y-0" 3877 x-transition:leave="transition ease-energetic duration-[300ms]" 3878 x-transition:leave-start="translate-y-0" 3879 x-transition:leave-end="translate-y-full" 3880 class="absolute top-auto mt-auto right-0 bottom-0 left-0 bg-scheme-background text-scheme-text overflow-y-auto pointer-events-auto" 3881 id="promo-slot" 3882 role="dialog" 3883 aria-modal="true" 3884 :aria-label="getModalLabel('promo', $el)" 3885 tabindex="-1" 3886 > 3887 <!-- Modal content is teleported here --> 3888 </div> 3889 </div> 3890 </div> 3891 </template> 3892</div> 3893<div 3894 x-data 3895 x-init="initTeleport($root); $store.modals.register('productQuickView', 'quickViewDrawer')" 3896> 3897 <template data-should-teleport="#quick-view-drawer-slot"> 3898 <template x-if="$store.quickview"> 3899 3900 3901 <div class="max-h-full flex flex-col h-screen"> 3902 3903 <div 3904 class="h-full flex items-center justify-center" 3905 x-show="!$store.quickview.product_loaded" 3906 > 3907 <div role="status"> 3908 <svg 3909 aria-hidden="true" 3910 class="w-8 h-8 mr-2 text-scheme-text/10 animate-spin fill-scheme-text"
3911 viewBox="0 0 100 101" 3912 fill="none" 3913 xmlns="http://www.w3.org/2000/svg" 3914 > 3915 <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/> 3916 <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/> 3917 </svg> 3918 <span class="sr-only">Loading</span> 3919 </div> 3920 </div> 3921 3922 <div 3923 x-transition 3924 x-show="$store.quickview.product_loaded" 3925 x-ref="quick-view-drawer-header" 3926 class="p-2 lg:p-4 w-full overflow-hidden shrink-0"> 3927 <div class="relative flex items-center justify-between"> 3928 <a :href="$store.quickview.current_product_url"> 3929 <span class="sr-only">Open in full view</span> 3930 <span class="inline-block w-4 h-4"><svg class="theme-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 3931<path d="M10.2333 10.2333L2 2.00002" stroke="black" stroke-width="1.5" stroke-linejoin="round"/> 3932<path d="M7.13455 2.00002H2V7.13457" stroke="black" stroke-width="1.5" stroke-linejoin="round"/> 3933<path d="M13.7994 13.7993L22 22" stroke="black" stroke-width="1.5" stroke-linejoin="round"/> 3934<path d="M16.8654 21.9999H21.9999V16.8653" stroke="black" stroke-width="1.5" stroke-linejoin="round"/> 3935</svg> 3936 </span> 3937 </a> 3938 <button @click.prevent="$store.modals.close('quickViewDrawer')" class="block top-0 min-touch-target"> 3939 <span class="sr-only">Close (esc)</span> 3940 <span class="inline-block w-4 h-4"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 3941 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 2 20 20m0-20L2 22"/> 3942</svg> 3943</span> 3944 </button> 3945 </div> 3946 </div> 3947 3948 <div 3949 x-transition 3950 x-show="$store.quickview.product_loaded" 3951 id="product-quickview-content" 3952 class="flex overflow-hidden" 3953 > 3954 3955 </div> 3956 3957 </div> 3958 </template> 3959 </template> 3960</div> 3961<div class="absolute -left-[10000px]" aria-hidden> 3962 <div class="btn inline-block" id="buttonSizer"> 3963 Add to Cart 3964 </div> 3965</div>
3966<script> 3967//get height of buttonSizer 3968var buttonSizer = document.getElementById('buttonSizer'); 3969var buttonSizerHeight = buttonSizer.offsetHeight; 3970document.documentElement.style.setProperty( 3971 '--add-to-cart-button-height', 3972 `${buttonSizerHeight}px` 3973); 3974</script>
3974 3975 3976 3977 <!-- 1:1 VIDEO CHAT --> 3978 <fw-live-helper style="z-index:9007199254740991; position:fixed" ></fw-live-helper> 3979 3980
3980<script src="//sevensmarketing.com/cdn/shop/t/9/assets/modals.js?v=58277170109567868791733369483" type="module"></script>
3980 3981 3982 3983 <div x-data="ThemeModule_CartDrawer({openOnAddToCart: true})" x-cloak> 3984 <div> 3985 <template x-teleport="#right-drawer-slot"> 3986 <div class="max-h-full flex flex-col h-screen" :data-modal-label="`Your cart - ${$store.cart_count.countWithText()}`" x-show="$store.modals.rightDrawer.contents === 'cart'"> 3987 3988 3989 <div class="p-2 lg:p-4 w-full overflow-hidden"> 3990 <div class="relative flex items-center justify-between"> 3991 <h2 tabindex="-1"> 3992 Your cart 3993 </h2> 3994 <button @click.prevent="$store.modals.close('cart')" class="block top-0 min-touch-target"> 3995 <span class="sr-only">Close (esc)</span> 3996 <span class="inline-block w-4 h-4"><svg class="theme-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> 3997 <path stroke="currentColor" stroke-linejoin="round" stroke-width="1.5" d="m2 2 20 20m0-20L2 22"/> 3998</svg> 3999</span> 4000 </button> 4001 </div> 4002 </div> 4003 4004 <div class="flex-auto flex flex-col overflow-hidden px-2 lg:px-4"> 4005 <div 4006 x-data="ThemeModule_CartItems('drawer')" 4007 data-cart-items 4008 class="flex-auto flex flex-col overflow-hidden overflow-y-auto pb-16" 4009> 4010 4011 <div class="text-center h-full flex items-center"> 4012 <div class="w-full"> 4013 <h2 class="">Your cart is currently empty.</h2> 4014 <a href="/collections/all" class="btn btn--solid mt-4"> 4015 Continue shopping 4016 </a> 4017 </div> 4018 </div> 4019 4020</div> 4021<p class="sr-only" id="cart-live-region-text" aria-live="polite" role="status" aria-hidden="true">New subtotal: ¥0.00 CNY</p> 4022 4023 <div class="relative"> 4024 <div class="-translate-y-full h-16 w-full bg-gradient-to-t from-scheme-background to-transparent absolute top-0 left-0 right-0 pointer-events-none"></div> 4025 <div 4026 x-data="ThemeModule_CartFooter('drawer')" 4027 data-cart-footer 4028> 4029 4030</div> 4031 4032 </div> 4033 </div> 4034 4035 </div> 4036 </template> 4037 </div> 4038</div>
4039<script src="//sevensmarketing.com/cdn/shop/t/9/assets/cart-drawer.js?v=101425494924518863321733369484" type="module"></script>
4039 4040 4041 4042
4042<script src="//sevensmarketing.com/cdn/shop/t/9/assets/alpine.bundle.min.js?v=88126505145170464381733369484" type="module"></script>
4042 4043 4044
4044<script src="//sevensmarketing.com/cdn/shop/t/9/assets/load-images.js?v=121927016805282061711733369484" type="module"></script>
4044 4045
4045<script 4046 > 4047 new WOW().init(); 4048 </script>
4048 4049 4050
4050<script src="https://cdn.shopify.com/storefront/standard-actions.js" type="module" data-source-attribution="shopify.standard_actions"></script>
4050 4051</body> 4052</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.