PageSourceSearch

https://sevensmarketing.com/products/codemint-case-study-website-design-development-sevens-marketing

html sevensmarketing.com collected 2026-10-05 23:03:27 UTC 249,675 bytes, 4,052 lines download raw bytes

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 &amp; Development | SEVENS Marketing
65
66        &ndash; 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 &amp; 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 &amp; 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&amp;width=1000" alt="sevensmarketing" srcset="//sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&amp;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&region_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&amp;width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&amp;width=832 832w, //sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&amp;width=1200 1200w, //sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&amp;width=1920 1920w, //sevensmarketing.com/cdn/shop/files/2_dbce19e7-535a-4f43-8960-f7e35d92ca2a.png?v=1712116881&amp;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&amp;width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&amp;width=832 832w, //sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&amp;width=1200 1200w, //sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&amp;width=1920 1920w, //sevensmarketing.com/cdn/shop/files/5_3748b129-b74e-4bc8-b659-a5664497727d.png?v=1712117823&amp;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&amp;width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&amp;width=832 832w, //sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&amp;width=1200 1200w, //sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&amp;width=1920 1920w, //sevensmarketing.com/cdn/shop/files/5-1.png?v=1712117832&amp;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&amp;width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&amp;width=832 832w, //sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&amp;width=1200 1200w, //sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&amp;width=1920 1920w, //sevensmarketing.com/cdn/shop/files/6_3bbb21c7-9154-41ab-9116-dc9e2944ce62.png?v=1712118063&amp;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&amp;width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&amp;width=832 832w, //sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&amp;width=1200 1200w, //sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&amp;width=1920 1920w, //sevensmarketing.com/cdn/shop/files/7_3955d917-7147-40c8-8e50-78d0543f41e3.png?v=1712118211&amp;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&amp;width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&amp;width=832 832w, //sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&amp;width=1200 1200w, //sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&amp;width=1920 1920w, //sevensmarketing.com/cdn/shop/files/10_3ed41849-cb43-4e3e-860b-d9ec18c1e293.png?v=1713947000&amp;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&amp;width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&amp;width=832 832w, //sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&amp;width=1200 1200w, //sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&amp;width=1920 1920w, //sevensmarketing.com/cdn/shop/files/10-1.png?v=1713947012&amp;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&amp;width=2000" alt="" srcset="//sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&amp;width=832 832w, //sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&amp;width=1200 1200w, //sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&amp;width=1920 1920w, //sevensmarketing.com/cdn/shop/files/11_0fb1aefc-717c-47d1-bc56-2ae5762b5f60.png?v=1713947032&amp;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&amp;width=1000" alt="sevensmarketing" srcset="//sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&amp;width=352 352w, //sevensmarketing.com/cdn/shop/files/logo.png?v=1711617218&amp;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&region_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.