UNPKG

@amplience/dynamic-content-accelerators

Version:
1,030 lines (890 loc) 19.6 kB
.amp-dc-banner { position: relative; overflow: hidden; white-space: nowrap; } .amp-dc-banner * { margin: 0; padding: 0; } .amp-dc-banner .amp-dc-hide { display: none; } .amp-dc-banner .amp-dc-banner-info { font-size: 22px; text-align: center; background: #fff; color: #000; padding: 15px; min-width: 200px; } .amp-dc-banner .amp-dc-banner-pic { max-width: 100%; display: block; } .amp-dc-banner .amp-dc-banner-pic img { width: 100%; } .amp-dc-banner .amp-dc-banner-img { width: 100%; display: block; } .amp-dc-banner .amp-dc-banner-info-wrap { color: #fff; width: 33.3%; height: 100%; position: absolute; top: 0; white-space: normal; } .amp-dc-banner .amp-dc-banner-info-wrap[data-align='left'] { left: 65px; } .amp-dc-banner .amp-dc-banner-info-wrap[data-align='right'] { right: 65px; } .amp-dc-banner .amp-dc-banner-info { display: inline-block; vertical-align: middle; } .amp-dc-banner .amp-dc-banner-header { font-size: 32px; } .amp-dc-banner .amp-dc-banner-description, .amp-dc-banner .amp-dc-banner-subheader { font-size: 16px; margin-top: 15px; } .amp-dc-banner .amp-dc-banner-button { font-size: 20px; margin-top: 15px; display: inline-block; min-width: 40%; padding: 17px 15px; background: #fff; text-decoration: none; font-weight: bold; -webkit-box-sizing: border-box; box-sizing: border-box; } .amp-dc-banner .amp-dc-banner-button.black { background: #000; color: #fff; } .amp-dc-banner .amp-dc-banner-button.white { background: #fff; color: #000; } @media screen and (max-width: 768px) { .amp-dc-banner .amp-dc-banner-info-wrap { width: 40%; } .amp-dc-banner .amp-dc-banner-info-wrap[data-align='left'] { left: 35px; } .amp-dc-banner .amp-dc-banner-info-wrap[data-align='right'] { right: 35px; } .amp-dc-banner .amp-dc-banner-info-wrap.amp-dc-info-bottom { position: relative; top: 0 !important; left: 0 !important; right: auto; display: block; width: 100%; text-align: center; padding: 0 15px 10px 15px; -webkit-box-sizing: border-box; box-sizing: border-box; } .amp-dc-banner .amp-dc-banner-info-wrap.amp-dc-info-bottom .amp-dc-banner-info { display: block; } } @media screen and (max-width: 480px) { .amp-dc-banner .amp-dc-banner-info-wrap { width: 50%; } .amp-dc-banner .amp-dc-banner-info-wrap[data-align='left'] { left: 20px; } .amp-dc-banner .amp-dc-banner-info-wrap[data-align='right'] { right: 20px; } .amp-dc-banner .amp-dc-banner-info-wrap.amp-dc-info-bottom { width: 100%; } .amp-dc-banner .amp-dc-banner-info-wrap.amp-dc-info-bottom[data-align='left'] { left: 0; } .amp-dc-banner .amp-dc-banner-info-wrap.amp-dc-info-bottom[data-align='right'] { right: 0; } } .amp-dc-blog { overflow: hidden; margin: 40px auto; max-width: 980px; padding: 0 20px; } .amp-dc-blog .amp-dc-block-wrap { margin-top: 50px; } .amp-dc-blog .amp-dc-blog-title { font-size: 2em; text-align: center; } .amp-dc-blog .amp-dc-blog-content { margin-top: 20px; } .amp-dc-snippet .amp-dc-image { position: relative; overflow: hidden; white-space: nowrap; width: 100%; display: block; } .amp-dc-snippet .amp-dc-image img { width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .amp-dc-snippet .amp-dc-title { text-transform: uppercase; font-size: 2em; margin: 20px; } .amp-dc-snippet .amp-dc-description { padding: 20px; } .amp-dc-snippet .amp-dc-link { margin: 20px; font-weight: bold; } .amp-dc-external-block .test { padding: 20px; background: #efefef; border-radius: 5px; margin: 20px; min-width: 360px; -webkit-box-sizing: border-box; box-sizing: border-box; } .amp-dc-external-block .test > div { padding: 20px; background: #bff2b5; border-radius: 5px; margin: 20px; } .amp-dc-image { margin: 0; padding: 0; position: relative; overflow: hidden; white-space: nowrap; width: 100%; display: block; } .amp-dc-image .amp-dc-image-pic { display: block; } .amp-dc-image img { width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .amp-dc-poi-image [data-type="poi-hotspot"] { cursor: pointer; z-index: 3; width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; text-align: center; -webkit-transition: -webkit-transform .2s ease-in-out; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; } .amp-dc-poi-image [data-type="poi-hotspot"]:hover { -webkit-transition: -webkit-transform .2s ease-in-out; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out; transform: rotate(90deg); -webkit-transform: rotate(90deg); } .amp-dc-poi-image [data-type="poi-hotspot"]:active { opacity: 0.5; cursor: default; } .amp-dc-poi-image [data-type="poi-hotspot"]:after { content: ''; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: url("https://dev-solutions.s3.amazonaws.com/poi-js-lib/svg/target.svg") no-repeat 0 0; } .amp-dc-poi-image [data-type="poi-hotspot"]:before { content: ''; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; width: 27px; height: 27px; background: #fff; position: absolute; z-index: 1; top: 50%; left: 50%; margin-left: -13px; margin-top: -13px; } .amp-dc-poi-image svg { z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .amp-dc-poi-image svg g polygon { fill: transparent; opacity: 1; stroke: #000000; stroke-width: 3px; stroke-dasharray: 15; stroke-linecap: round; cursor: pointer; } @-webkit-keyframes square-anim { 25% { stroke-dasharray: 15; opacity: .5; } 50% { stroke-dasharray: 10; opacity: .7; } 75% { stroke-dasharray: 6; opacity: .8; } 100% { stroke-dasharray: 0; opacity: 1; } } .amp-dc-poi-image svg g:hover polygon { -webkit-animation: square-anim .1s 1 ease-out; animation: square-anim .1s 1 ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .amp-dc-homepage { overflow: hidden; max-width: 1600px; margin: 0 auto; } .amp-dc-homepage .amp-dc-block-wrap { margin-top: 50px; } .amp-dc-homepage .amp-dc-text { margin: 0 25px; } .amp-dc-homepage .amp-dc-splitBlock { overflow: hidden; } .amp-dc-homepage .amp-dc-splitBlock { overflow: hidden; } .amp-dc-homepage .amp-dc-promo-banner-wrap { margin: 20px 0; } .amp-dc-homepage .amp-dc-promo-banner { margin: -70px -5px 0 -5px; } .header-wrap ul { list-style: none; } .header-wrap .header-content { margin: 10px 50px; overflow: hidden; height: 40px; } .header-wrap .logo { float: left; width: 220px; height: 100%; display: inline-block; } .header-wrap .logo-image { height: 100%; } .header-wrap .top-menu { overflow: hidden; text-align: center; margin: 10px 0; } .header-wrap .top-menu > li { display: inline-block; vertical-align: top; margin-right: 23px; } .header-wrap .top-menu > li:last-child { margin-right: 0; } .header-wrap .top-menu > li > a { color: #000; text-decoration: none; font-weight: bold; font-size: 12px; text-transform: uppercase; } .header-wrap .top-menu > li > a:hover { text-decoration: underline; } .header-wrap .customer-menu { float: right; height: 40px; margin: 0; padding: 0; } .header-wrap .customer-menu > li { display: inline-block; vertical-align: top; padding: 0 24px; } .header-wrap .customer-menu > li > a { text-decoration: none; color: #000; font-size: 36px; height: 40px; line-height: 40px; } .header-wrap .header-promotion { background-color: #000; color: #fff; padding: 5px 7px; text-align: center; font-size: 12.8px; text-transform: uppercase; } @media screen and (max-width: 979px) { .header-wrap .logo { width: auto; } .header-wrap .top-menu { display: none; } } @media screen and (max-width: 499px) { .header-wrap .customer-menu .first-nav, .header-wrap .customer-menu .second-nav { display: none; } } .amp-dc-slider { position: relative; overflow: hidden; white-space: nowrap; } .amp-dc-slider * { margin: 0; padding: 0; } .amp-dc-slider .amp-dc-slider-frame { padding-bottom: 50px; position: relative; overflow: hidden; white-space: nowrap; width: 100%; } .amp-dc-slider .amp-dc-slider-slides { font-size: 0; } .amp-dc-slider .amp-dc-slider-slides > li { display: inline-block; overflow: hidden; vertical-align: middle; width: 100%; text-align: center; font-size: 22px; position: relative; line-height: 1; } .amp-dc-slider .amp-dc-slider-next, .amp-dc-slider .amp-dc-slider-prev { position: absolute; top: 50%; margin-top: -25px; display: block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .amp-dc-slider .amp-dc-slider-next svg, .amp-dc-slider .amp-dc-slider-prev svg { cursor: pointer; width: 40px; height: 40px; fill: #fff; background: rgba(0, 0, 0, 0.5); } .amp-dc-slider .amp-dc-slider-next.ctrl-disabled, .amp-dc-slider .amp-dc-slider-prev.ctrl-disabled { opacity: 0.3; -webkit-tap-highlight-color: transparent; cursor: default; } .amp-dc-slider .amp-dc-slider-next.ctrl-disabled svg, .amp-dc-slider .amp-dc-slider-prev.ctrl-disabled svg { cursor: default; } .amp-dc-slider .amp-dc-slider-next { right: 0; } .amp-dc-slider .amp-dc-slider-prev { left: 0; } .amp-dc-slider .amp-dc-dots { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 10px 0 0 0; padding: 0; text-align: center; position: absolute; width: 100%; -webkit-tap-highlight-color: transparent; } .amp-dc-slider .amp-dc-dots > li { border: 1px solid #666; border-radius: 50%; -webkit-box-shadow: inset 1px 1px 1px #888; box-shadow: inset 1px 1px 1px #888; display: inline-block; height: 25px; width: 25px; margin: 0 5px; cursor: pointer; } .amp-dc-slider .amp-dc-dots > li.active { background-color: #41ABE5; } .amp-dc-image { min-width: 0; } .amp-dc-card-title { font-size: 2em; text-align: center; } .amp-dc-card-list .amp-dc-card-list-wrap { font-size: 0; margin-top: 20px; margin-left: -50px; } .amp-dc-card-list .amp-dc-card { display: inline-block; vertical-align: top; } .amp-dc-card-list .amp-dc-card-wrap { margin: 0 0 50px 51px; } .amp-dc-card-list .amp-dc-card-wrap .amp-dc-card-img { max-height: 250px; } .amp-dc-prod-5-rows .amp-dc-card { width: 20%; } .amp-dc-prod-4-rows .amp-dc-card { width: 25%; } .amp-dc-prod-3-rows .amp-dc-card { width: 33.33%; } .amp-dc-prod-2-rows .amp-dc-card { width: 50%; } .amp-dc-prod-1-rows .amp-dc-card { width: 100%; } @media screen and (max-width: 768px) { .amp-dc-prod-5-rows .amp-dc-card { width: 50%; } .amp-dc-prod-4-rows .amp-dc-card { width: 50%; } .amp-dc-prod-3-rows .amp-dc-card { width: 50%; } .amp-dc-prod-2-rows .amp-dc-card { width: 50%; } .amp-dc-prod-1-rows .amp-dc-card { width: 100%; } } @media screen and (max-width: 480px) { .amp-dc-prod-5-rows .amp-dc-card { width: 100%; } .amp-dc-prod-4-rows .amp-dc-card { width: 100%; } .amp-dc-prod-3-rows .amp-dc-card { width: 100%; } .amp-dc-prod-2-rows .amp-dc-card { width: 100%; } .amp-dc-prod-1-rows .amp-dc-card { width: 100%; } } .amp-dc-promo-banner { margin-left: auto; margin-right: auto; white-space: normal; overflow: hidden; } .amp-dc-promo-banner * { margin: 0; padding: 0; } .amp-dc-promo-banner .amp-dc-promo-banner-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 100%; height: 100%; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .amp-dc-promo-banner .amp-dc-promo-banner-wrap div { width: 100%; } .amp-dc-promo-banner .amp-dc-promo-banner-wrap .dc-width-2 { width: 50%; } .amp-dc-promo-banner .amp-dc-promo-banner-wrap .dc-width-3 { width: 33.3%; } .amp-dc-promo-banner .amp-dc-promo-text-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .amp-dc-promo-banner .amp-dc-promo-block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: visible; border: 4px solid transparent; } .amp-dc-promo-banner .amp-dc-promo-wrap { height: 100%; } .amp-dc-promo-banner .amp-dc-promo-wrap > a { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; overflow: hidden; border: 1px solid #eeeeee; text-decoration: none; padding: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .amp-dc-promo-banner .amp-dc-promo-wrap > a :hover * { opacity: 0.8; } .amp-dc-promo-banner .amp-dc-promo-text-wrap { overflow: hidden; } .amp-dc-promo-banner .amp-dc-promo-ico { margin-right: 15px; min-height: 40px; background-size: cover; background-repeat: no-repeat; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .amp-dc-promo-banner .amp-dc-promo-ico > img { display: block; } .amp-dc-promo-banner .amp-dc-promo-head-text { font-weight: bold; font-size: 16px; color: #424242; } .amp-dc-promo-banner .amp-dc-promo-content-text { font-size: 14px; color: #9b9b9b; margin-top: 3px; } .amp-dc-promo-banner .amp-dc-image-img { width: 100%; font-size: 14px; display: block; } .amp-dc-promo-banner .amp-dc-promo-center { text-align: center; } @media screen and (max-width: 768px) { .amp-dc-promo-banner { white-space: normal; } .amp-dc-promo-banner .amp-dc-promo-banner-wrap { position: relative; display: block; } .amp-dc-promo-banner .amp-dc-promo-block { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; display: block; position: absolute; width: 100%; top: 0; left: 0; overflow: hidden; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; opacity: 0; } .amp-dc-promo-banner .amp-dc-promo-block.dc-fade-in { position: relative; -webkit-transition: opacity 1.5s ease-in-out; -moz-transition: opacity 1.5s ease-in-out; -ms-transition: opacity 1.5s ease-in-out; -o-transition: opacity 1.5s ease-in-out; animation-delay: 0.5s; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; opacity: 1; } .amp-dc-promo-banner .amp-dc-promo-head-text { font-size: 15px; } .amp-dc-promo-banner .amp-dc-promo-content-text { font-size: 13px; } .amp-dc-promo-banner .amp-dc-promo-ico { min-height: 35px; } } .amp-dc-text { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; color: #565656; } .amp-dc-text li { list-style-position: outside; } .amp-dc-splitBlock { margin: 0; padding: 0; } .amp-dc-splitBlock:after { content: ""; display: table; clear: both; } .amp-dc-splitBlock .amp-dc-split-part { float: left; -webkit-box-sizing: border-box; box-sizing: border-box; } .amp-dc-splitBlock .amp-dc-split-part .amp-dc-text { min-width: 100px; } .amp-dc-splitBlock .amp-dc-split-part .amp-dc-video { min-width: 300px; } .amp-dc-splitBlock .amp-dc-split-part .amp-dc-image { min-width: 100px; } .amp-dc-splitBlock .amp-dc-split-part.amp-dc-size-50 { width: 50%; } .amp-dc-splitBlock .amp-dc-split-part.amp-dc-size-70 { width: 70%; } .amp-dc-splitBlock .amp-dc-split-part.amp-dc-size-30 { width: 30%; } .amp-dc-splitBlock .amp-dc-split-part .amp-dc-split-part-wrap { padding-left: 20px; } .amp-dc-splitBlock .amp-dc-split-part:first-child .amp-dc-split-part-wrap { padding-left: 0; padding-right: 20px; } @media screen and (max-width: 768px) { .amp-dc-splitBlock .amp-dc-split-part { float: none; } .amp-dc-splitBlock .amp-dc-split-part.amp-dc-size-50 { width: 100%; } .amp-dc-splitBlock .amp-dc-split-part.amp-dc-size-70 { width: 100%; } .amp-dc-splitBlock .amp-dc-split-part.amp-dc-size-30 { width: 100%; } .amp-dc-splitBlock .amp-dc-split-part:first-child { padding: 0 0 30px 0; } .amp-dc-splitBlock .amp-dc-split-part .amp-dc-split-part-wrap { padding-left: 0; } .amp-dc-splitBlock .amp-dc-split-part:first-child .amp-dc-split-part-wrap { padding-left: 0; padding-right: 0; } } .inactive-video { position: relative; z-index: 100; } .inactive-video.no-overlay { display: none; } .amp-dc-video-wrap { position: relative; margin: 0; padding: 0; } .amp-dc-video-wrap .amp-dc-video { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0 auto; display: block; width: 100%; } .amp-dc-video-wrap .pause-button { cursor: pointer; position: absolute; z-index: 50; top: 50%; left: 50%; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; -webkit-tap-highlight-color: transparent; } .amp-dc-video-wrap .pause-button:before { content: ''; display: block; height: 100%; width: 100%; border-radius: 50%; -webkit-box-shadow: inset 0 0 500px rgba(196, 215, 182, 0.5); box-shadow: inset 0 0 500px rgba(196, 215, 182, 0.5); position: absolute; z-index: 100; } .amp-dc-video-wrap .pause-button:after { content: ''; display: block; border-left: 43px solid #3f433a; border-top: 25px solid transparent; border-bottom: 25px solid transparent; position: absolute; border-radius: 6px; z-index: 200; margin-top: 15px; margin-left: 24px; } .amp-dc-video-wrap .pause-button.inactive { display: none; } .amp-dc-card { width: 100%; display: inline-block; vertical-align: top; } .amp-dc-card * { margin: 0; padding: 0; } .amp-dc-card .amp-dc-hide { display: none; } .amp-dc-card .amp-dc-card-text-wrap { padding: 10px 0; text-align: center; background-color: #fff; } .amp-dc-card a.amp-dc-card-wrap { display: block; text-decoration: none; } .amp-dc-card a.amp-dc-card-wrap:hover .amp-dc-card-link { text-decoration: underline; } .amp-dc-card .amp-dc-card-name { font-size: 21px; color: #000; margin-bottom: 5px; } .amp-dc-card .amp-dc-card-description { font-size: 14px; color: #8F8F8F; display: inline-block; } .amp-dc-card .amp-dc-card-link { margin-top: 7px; color: #8F8F8F; font-size: 16px; font-weight: bold; white-space: nowrap; }