COVID-19 Informative Banners
Informative banners give your customers reassurance and quick links for further information on how you conduct your business during the pandemic.
Banner previews
The package includes the following banners:
Top of the page banners
Informative Banners
FAQ link banner
Importing the package
In order to import the package, copy the following JSON code into a text file and import it following the guide in the Initiatives article.
{"files":[],"initiative":{"archived":false,"cloned_from_id":"5e74c9466172a7f89654ea3c","color":"rgb(25, 186, 238)","description":"","name":"COVID-19 Informative Banners","pinned":false,"prevent_archivation":false},"items":[{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e7a7e32c5dd0ae7bdb45177","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}\n","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"COVID-19 FAQ link banner","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<div class=\"exponea-banner exponea-action\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<div class=\"exponea-img\"></div>\n\t<div class=\"exponea-wrap\">\n\t\t<div class=\"exponea-title\">[[ titleText ]]</div>\n\t\t<span class=\"exponea-text\">[[ bodyText ]]</span>\n\t\t<div class=\"exponea-button\" exp-action><a href=\"[[ bannerLink ]]\">[[ buttonText ]]</a></div>\n\t</div>\n</div>","id":0,"name":"Variant A","parametrized_parts":{"html":"<div class=\"exponea-banner exponea-action\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<div class=\"exponea-img\"></div>\n\t<div class=\"exponea-wrap\">\n\t\t<div class=\"exponea-title\">We've made some changes</div>\n\t\t<span class=\"exponea-text\">We've taken steps to protect your health during the COVID-19 outbreak. We're looking out for you.</span>\n\t\t<div class=\"exponea-button\" exp-action><a href=\"https://www.exponea.com\">SEE ACTION PLAN</a></div>\n\t</div>\n</div>","script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-action\").forEach(a=>a.parentNode.removeChild(a))}};","sdk_object_name":"exponea","style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'left' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'center' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '20px' %}\n {%- set offsetVertical = '20px' %}\n {%- set bannerHeight = '350px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '300px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n \n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '#ffef0c' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '5px' %}\n {%- set bannerPadding = '0 0 0 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Title variables #}\n {%- set titleColor = '#000000' %}\n {%- set titleFontSize = '1.5em' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleMargin = '0.5em auto 0.3em auto' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.5em 2em 2em 2em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'center' %}\n {%- set textColor = '#1c1733' %}\n {%- set textLineHeight = 'normal' %}\n\n {#- Image variables #}\n {%- set imgURL = 'https://cdn.exponea.com/exponea-delivery-team/f/56168a8d11b75486f97f5446e60ddc3c1d72e06c00064d77cb099281325a8934' %}\n {%- set imgMargin = '0px' %}\n {%- set imgHeight = '220px' %}\n {%- set imgWidth = '100%' %}\n \n {#- Button variables #}\n {%- set buttonWidth = '12em' %}\n {%- set buttonRadius = bannerBorderRadius %}\n {%- set buttonBorder = 'none' %}\n {%- set buttonTextColor = '#ffffff' %}\n {%- set buttonFontSize = '1em' %}\n {%- set buttonBackgroundColor = '#1c1733' %}\n {%- set buttonPadding = '0.8em 1em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '#000000' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Form variables #}\n {%- set formInputBorderRadius = bannerBorderRadius %}\n {%- set formInputBorderWidth = '1px' %}\n {%- set formCheckboxSize = '15px' %}\n \n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '500px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '10px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '10px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n {#- Content flex alignment evaluation #}\n {%- if textAlign in (\"left\", \"start\") %}\n {%- set flexAlign = \"flex-start\" %}\n {%- elif textAlign in (\"right\", \"end\") %}\n {%- set flexAlign = \"flex-end\" %}\n {%- else %}\n {%- set flexAlign = textAlign %}\n {%- endif %}\n\n {#- Copy textAlign onto form #}\n {%- if textAlign in (\"left\", \"start\") %}\n {%- set formMarginAlignLeft = \"0\" %}\n {%- set formMarginAlignRight = \"auto\" %}\n {%- elif textAlign in (\"right\", \"end\" ) %}\n {%- set formMarginAlignLeft = \"auto\" %}\n {%- set formMarginAlignRight = \"0\" %}\n {%- else %}\n {%- set formMarginAlignLeft = \"auto\" %}\n {%- set formMarginAlignRight = \"auto\" %}\n {%- endif %}\n \n {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\t max-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\t height: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n \n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-direction attribute #}\n {%- macro printFlexDirection(flexDirectionValue) %}\n {%- set orientation = '' %}\n {%- set direction = '' %}\n {%- if flexDirectionValue == 'column' or flexDirectionValue == 'column-reverse' %}\n {%- set orientation = 'vertical' %}\n {%- elif flexDirectionValue == 'row' or flexDirectionValue == 'row-reverse' %}\n {%- set orientation = 'horizontal' %}\n {%- endif %}\n {%- if flexDirectionValue == 'row-reverse' or flexDirectionValue == 'column-reverse' %}\n {%- set direction = 'reverse' %}\n {%- elif flexDirectionValue == 'row' or flexDirectionValue == 'column' %}\n {%- set direction = 'normal' %}\n {%- endif %}\n -webkit-box-orient: {{ orientation }};\n -webkit-box-direction: {{ direction }};\n -webkit-flex-direction: {{ flexDirectionValue }};\n -moz-box-orient: {{ orientation }};\n -moz-box-direction: {{ direction }};\n -ms-flex-direction: {{ flexDirectionValue }};\n flex-direction: {{ flexDirectionValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n {{- printDisplayFlex() }}\n {{- printFlexDirection('column') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n \tdisplay: block;\n width: 100%;\n max-height: 500px;\n height: auto;\n padding: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n {{- printTransition(['height', 'max-height'], transitionSpeed, 'ease-in') }}\n \t{{- printFlex('1', '0', 'auto')}}\n {{- printAlignSelf('flex-end') }}\n {{- printBoxSizing('border-box') }}\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a {\n text-decoration: {{ textDecoration }};\n text-align: center;\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin}};\n padding-left: 10px;\n padding-right: 10px;\n {{- printTransition(['margin'], transitionSpeed, '') }}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n text-align: {{ textAlign }};\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n margin-bottom: 0.5em;\n list-style-type: none;\n }\n {#- Image = Div whose background is image #}\n.exponea-banner .exponea-img {\n {{- printAttributeWithCalc('max-height', imgHeight ) }}\n {{- printAttributeWithCalc('max-width', imgWidth ) }}\n width: 100%;\n {{- printFlex('0', '1', imgHeight) }}\n {{- printBoxSizing('border-box') }}\n margin: {{ imgMargin }};\n background: url('{{- imgURL }}');\n {{- printBackgroundSize('contain') }}\n background-repeat: no-repeat;\n background-position: center;\n border-top-right-radius: {{ bannerBorderRadius }};\n border-top-left-radius: {{ bannerBorderRadius }};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- FORM - BUTTON STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Buttons on the banner #}\n{#- Main button definition #}\n .exponea-banner .exponea-button {\n position: relative;\n cursor: pointer;\n max-width: {{ buttonWidth }};\n width: 100%;\n {{- printBoxSizing('border-box') }}\n overflow-wrap: normal;\n word-wrap: normal;\n margin: auto;\n padding: {{ buttonPadding }};\n color: {{ buttonTextColor }};\n background-color: {{ buttonBackgroundColor }};\n {{- printBorderRadius(buttonRadius) }}\n border: {{ buttonBorder }};\n font-size: {{ buttonFontSize }};\n text-decoration: {{ textDecoration }}; \n}\n{#- Links within the button #}\n.exponea-banner .exponea-button a,\n.exponea-banner .exponea-button span {\n display: block;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n color: {{ buttonTextColor }};\n text-align: center;\n text-decoration: {{ textDecoration }};\n {{- printBoxSizing('border-box') }}\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .exponea-img {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, '2'], 'printOperationOnSameUnit', '/' ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}"},"params":{"1BodyText":"Click here to get 50% discount for first three months.","1HeaderText":"MyNews.com","2BodyText":"Subscribe now and get 50% discount for first three months.","2ButtonText":"Get the discount","3BannerLink":"#","3ButtonText":"Subscribe","4BannerLink":"https://www.sportobchod.cz/in-line#exponea-mr","BannerDelayInMs":"2000","ButtonColor":"#ffffff","ButtonTextColor":"#ffffff","backgroundColor":"#ffef0c","bannerLink":"https://www.exponea.com","bannerShowDelayInMilliseconds":"0","bodyText":"We've taken steps to protect your health during the COVID-19 outbreak. We're looking out for you.","bodyTextColor":"#1c1733","buttonBackgroundColor":"#1c1733","buttonColor":"#1c1733","buttonText":"SEE ACTION PLAN","buttonTextColor":"#ffffff","closeButtonColor":"#000000","headerText":"MyNews.com","headerTextColor":"#1c1733","imageUrl":"https://cdn.exponea.com/exponea-delivery-team/f/56168a8d11b75486f97f5446e60ddc3c1d72e06c00064d77cb099281325a8934","strongColor":"#ffffff","titleText":"We've made some changes","titleTextColor":"#000000"},"percentage":100,"script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-action\").forEach(a=>a.parentNode.removeChild(a))}};","source_mode":true,"style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'left' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'center' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '20px' %}\n {%- set offsetVertical = '20px' %}\n {%- set bannerHeight = '350px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '300px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n \n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '[[ backgroundColor ]]' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '5px' %}\n {%- set bannerPadding = '0 0 0 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Title variables #}\n {%- set titleColor = '[[ titleTextColor ]]' %}\n {%- set titleFontSize = '1.5em' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleMargin = '0.5em auto 0.3em auto' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.5em 2em 2em 2em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'center' %}\n {%- set textColor = '[[ bodyTextColor ]]' %}\n {%- set textLineHeight = 'normal' %}\n\n {#- Image variables #}\n {%- set imgURL = '[[ imageUrl ]]' %}\n {%- set imgMargin = '0px' %}\n {%- set imgHeight = '220px' %}\n {%- set imgWidth = '100%' %}\n \n {#- Button variables #}\n {%- set buttonWidth = '12em' %}\n {%- set buttonRadius = bannerBorderRadius %}\n {%- set buttonBorder = 'none' %}\n {%- set buttonTextColor = '[[buttonTextColor]]' %}\n {%- set buttonFontSize = '1em' %}\n {%- set buttonBackgroundColor = '[[buttonColor]]' %}\n {%- set buttonPadding = '0.8em 1em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '[[closeButtonColor]]' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Form variables #}\n {%- set formInputBorderRadius = bannerBorderRadius %}\n {%- set formInputBorderWidth = '1px' %}\n {%- set formCheckboxSize = '15px' %}\n \n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '500px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '10px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '10px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n {#- Content flex alignment evaluation #}\n {%- if textAlign in (\"left\", \"start\") %}\n {%- set flexAlign = \"flex-start\" %}\n {%- elif textAlign in (\"right\", \"end\") %}\n {%- set flexAlign = \"flex-end\" %}\n {%- else %}\n {%- set flexAlign = textAlign %}\n {%- endif %}\n\n {#- Copy textAlign onto form #}\n {%- if textAlign in (\"left\", \"start\") %}\n {%- set formMarginAlignLeft = \"0\" %}\n {%- set formMarginAlignRight = \"auto\" %}\n {%- elif textAlign in (\"right\", \"end\" ) %}\n {%- set formMarginAlignLeft = \"auto\" %}\n {%- set formMarginAlignRight = \"0\" %}\n {%- else %}\n {%- set formMarginAlignLeft = \"auto\" %}\n {%- set formMarginAlignRight = \"auto\" %}\n {%- endif %}\n \n {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\t max-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\t height: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n \n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-direction attribute #}\n {%- macro printFlexDirection(flexDirectionValue) %}\n {%- set orientation = '' %}\n {%- set direction = '' %}\n {%- if flexDirectionValue == 'column' or flexDirectionValue == 'column-reverse' %}\n {%- set orientation = 'vertical' %}\n {%- elif flexDirectionValue == 'row' or flexDirectionValue == 'row-reverse' %}\n {%- set orientation = 'horizontal' %}\n {%- endif %}\n {%- if flexDirectionValue == 'row-reverse' or flexDirectionValue == 'column-reverse' %}\n {%- set direction = 'reverse' %}\n {%- elif flexDirectionValue == 'row' or flexDirectionValue == 'column' %}\n {%- set direction = 'normal' %}\n {%- endif %}\n -webkit-box-orient: {{ orientation }};\n -webkit-box-direction: {{ direction }};\n -webkit-flex-direction: {{ flexDirectionValue }};\n -moz-box-orient: {{ orientation }};\n -moz-box-direction: {{ direction }};\n -ms-flex-direction: {{ flexDirectionValue }};\n flex-direction: {{ flexDirectionValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n {{- printDisplayFlex() }}\n {{- printFlexDirection('column') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n \tdisplay: block;\n width: 100%;\n max-height: 500px;\n height: auto;\n padding: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n {{- printTransition(['height', 'max-height'], transitionSpeed, 'ease-in') }}\n \t{{- printFlex('1', '0', 'auto')}}\n {{- printAlignSelf('flex-end') }}\n {{- printBoxSizing('border-box') }}\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a {\n text-decoration: {{ textDecoration }};\n text-align: center;\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin}};\n padding-left: 10px;\n padding-right: 10px;\n {{- printTransition(['margin'], transitionSpeed, '') }}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n text-align: {{ textAlign }};\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n margin-bottom: 0.5em;\n list-style-type: none;\n }\n {#- Image = Div whose background is image #}\n.exponea-banner .exponea-img {\n {{- printAttributeWithCalc('max-height', imgHeight ) }}\n {{- printAttributeWithCalc('max-width', imgWidth ) }}\n width: 100%;\n {{- printFlex('0', '1', imgHeight) }}\n {{- printBoxSizing('border-box') }}\n margin: {{ imgMargin }};\n background: url('{{- imgURL }}');\n {{- printBackgroundSize('contain') }}\n background-repeat: no-repeat;\n background-position: center;\n border-top-right-radius: {{ bannerBorderRadius }};\n border-top-left-radius: {{ bannerBorderRadius }};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- FORM - BUTTON STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Buttons on the banner #}\n{#- Main button definition #}\n .exponea-banner .exponea-button {\n position: relative;\n cursor: pointer;\n max-width: {{ buttonWidth }};\n width: 100%;\n {{- printBoxSizing('border-box') }}\n overflow-wrap: normal;\n word-wrap: normal;\n margin: auto;\n padding: {{ buttonPadding }};\n color: {{ buttonTextColor }};\n background-color: {{ buttonBackgroundColor }};\n {{- printBorderRadius(buttonRadius) }}\n border: {{ buttonBorder }};\n font-size: {{ buttonFontSize }};\n text-decoration: {{ textDecoration }}; \n}\n{#- Links within the button #}\n.exponea-banner .exponea-button a,\n.exponea-banner .exponea-button span {\n display: block;\n height: 100%;\n width: 100%;\n left: 0;\n top: 0;\n color: {{ buttonTextColor }};\n text-align: center;\n text-decoration: {{ textDecoration }};\n {{- printBoxSizing('border-box') }}\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .exponea-img {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, '2'], 'printOperationOnSameUnit', '/' ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b491e5a9d18682282986b","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e79055b6da5cd2554c1aee4","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}\n","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"COVID-19 Informative Banner - 1","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<div class=\"exponea-banner exponea-notification\">\n\t<span class=\"jinja-hidden\">\n\t{% set mainTitle %}[[ mainTitle ]]{% endset %}\n\t{% set mainLink %}[[ mainLink ]]{% endset %}\n\t{% if mainLink and not 'http' in mainLink %}\n\t\t{% set mainLink = 'http://' ~ mainLink %}\n\t{% endif %}\n\t\n\t{% set title1 %}[[ title1 ]]{% endset %}\n\t{% set body1 %}[[ body1 ]]{% endset %}\n\t{% set image1 %}[[ image1 ]]{% endset %}\n\t{% set link1 %}[[ link1 ]]{% endset %}\n\t{% if link1 and not 'http' in link1 %}\n\t\t{% set link1 = 'http://' ~ link1 %}\n\t{% endif %}\n\t\n\t{% set title2 %}[[ title2 ]]{% endset %}\n\t{% set body2 %}[[ body2 ]]{% endset %}\n\t{% set image2 %}[[ image2 ]]{% endset %}\n\t{% set link2 %}[[ link2 ]]{% endset %}\n\t{% if link2 and not 'http' in link2 %}\n\t\t{% set link2 = 'http://' ~ link2 %}\n\t{% endif %}\n\t\n\t{% set title3 %}[[ title3 ]]{% endset %}\n\t{% set body3 %}[[ body3 ]]{% endset %}\n\t{% set image3 %}[[ image3 ]]{% endset %}\n\t{% set link3 %}[[ link3 ]]{% endset %}\n\t{% if link3 and not 'http' in link3 %}\n\t\t{% set link3 = 'http://' ~ link3 %}\n\t{% endif %}\n\t\n\t{% set title4 %}[[ title4 ]]{% endset %}\n\t{% set body4 %}[[ body4 ]]{% endset %}\n\t{% set image4 %}[[ image4 ]]{% endset %}\n\t{% set link4 %}[[ link4 ]]{% endset %}\n\t{% if link4 and not 'http' in link4 %}\n\t\t{% set link4 = 'http://' ~ link4 %}\n\t{% endif %}\n\t\n\t{% set title5 %}[[ title5 ]]{% endset %}\n\t{% set body5 %}[[ body5 ]]{% endset %}\n\t{% set image5 %}[[ image5 ]]{% endset %}\n\t{% set link5 %}[[ link5 ]]{% endset %}\n\t{% if link5 and not 'http' in link5 %}\n\t\t{% set link5 = 'http://' ~ link5 %}\n\t{% endif %}\n\t\n\t{% set title6 %}[[ title6 ]]{% endset %}\n\t{% set body6 %}[[ body6 ]]{% endset %}\n\t{% set image6 %}[[ image6 ]]{% endset %}\n\t{% set link6 %}[[ link6 ]]{% endset %}\n\t{% if link6 and not 'http' in link6 %}\n\t\t{% set link6 = 'http://' ~ link6 %}\n\t{% endif %}\n\t\n\t{% set title7 %}[[ title7 ]]{% endset %}\n\t{% set body7 %}[[ body7 ]]{% endset %}\n\t{% set image7 %}[[ image7 ]]{% endset %}\n\t{% set link7 %}[[ link7 ]]{% endset %}\n\t{% if link7 and not 'http' in link7 %}\n\t\t{% set link7 = 'http://' ~ link7 %}\n\t{% endif %}\n\t\n\t{% set title8 %}[[ title8 ]]{% endset %}\n\t{% set body8 %}[[ body8 ]]{% endset %}\n\t{% set image8 %}[[ image8 ]]{% endset %}\n\t{% set link8 %}[[ link8 ]]{% endset %}\n\t{% if link8 and not 'http' in link8 %}\n\t\t{% set link8 = 'http://' ~ link8 %}\n\t{% endif %}\n\t</span>\n\t\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional link\">{% if mainLink %}</span><a href=\"{{ mainLink }}\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t<div class=\"exponea-wrap\">\n\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t<span class=\"exponea-title\" exp-action>[[ mainTitle ]]</span>\n\t\t\t</div>\n\t\t</div>\n\t<span class=\"jinja-hidden\">{% if mainLink %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 1\">{% if title1!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link1 %}</span><a href=\"{{ link1 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image1]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title1 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body1 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link1 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 2\">{% if title2!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link2 %}</span><a href=\"{{ link2 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image2]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title2 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body2 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link2 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\n\t<span class=\"jinja-condition\" title=\"optional block 3\">{% if title3!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link3 %}</span><a href=\"{{ link3 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image3]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title3 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body3 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link3 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 4\">{% if title4!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link4 %}</span><a href=\"{{ link4 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image4]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title4 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body4 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link4 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 5\">{% if title5!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link5 %}</span><a href=\"{{ link5 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image5]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title5 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body5 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link5 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 6\">{% if title6!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link6 %}</span><a href=\"{{ link6 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image6]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title6 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body6 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link6 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 7\">{% if title7!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link7 %}</span><a href=\"{{ link7 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image7]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title7 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body7 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link7 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 8\">{% if title8!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link8 %}</span><a href=\"{{ link8 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image8]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title8 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body8 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link8 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n</div>","id":0,"name":"Variant A","parametrized_parts":{"html":"<div class=\"exponea-banner exponea-notification\">\n\t<span class=\"jinja-hidden\">\n\t{% set mainTitle %}We're here for you{% endset %}\n\t{% set mainLink %}www.exponea.com{% endset %}\n\t{% if mainLink and not 'http' in mainLink %}\n\t\t{% set mainLink = 'http://' ~ mainLink %}\n\t{% endif %}\n\t\n\t{% set title1 %}How to keep yourself safe{% endset %}\n\t{% set body1 %}Wash your hands thoroughly, avoid touching your face, practice social distancing{% endset %}\n\t{% set image1 %}https://cdn.exponea.com/exponea-delivery-team/f/2ce46a462513ba80a79f2be0b90775e510761de9ca0224a5e90f5bb568f89af0{% endset %}\n\t{% set link1 %}www.exponea.com{% endset %}\n\t{% if link1 and not 'http' in link1 %}\n\t\t{% set link1 = 'http://' ~ link1 %}\n\t{% endif %}\n\t\n\t{% set title2 %}Stay informed{% endset %}\n\t{% set body2 %}Click here to read up-to-date information on COVID-19{% endset %}\n\t{% set image2 %}https://cdn.exponea.com/exponea-delivery-team/f/12309ae7f30b0d0ffaad429add14bc7b5f1e302e6b092a75659ef2d4954cd3de{% endset %}\n\t{% set link2 %}www.exponea.com{% endset %}\n\t{% if link2 and not 'http' in link2 %}\n\t\t{% set link2 = 'http://' ~ link2 %}\n\t{% endif %}\n\t\n\t{% set title3 %}How are we protecting our employees?{% endset %}\n\t{% set body3 %}All employees that can do so are working from home. All other employees have received PPE and training on best practices.{% endset %}\n\t{% set image3 %}https://cdn.exponea.com/exponea-delivery-team/f/4192f66c371cff195bb22c8cbd41cb169d5bb4551256187e574b08d33cad5cf3{% endset %}\n\t{% set link3 %}www.exponea.com{% endset %}\n\t{% if link3 and not 'http' in link3 %}\n\t\t{% set link3 = 'http://' ~ link3 %}\n\t{% endif %}\n\t\n\t{% set title4 %}How are we delivering products?{% endset %}\n\t{% set body4 %}We've adopted a contact-free delivery policy to reduce chances of virus transmission{% endset %}\n\t{% set image4 %}https://cdn.exponea.com/exponea-delivery-team/f/49be28212c0970350bf6f1cc6b119b4b49ec8bcf4a1cdb4090ad8dd8713f0222{% endset %}\n\t{% set link4 %}www.exponea.com{% endset %}\n\t{% if link4 and not 'http' in link4 %}\n\t\t{% set link4 = 'http://' ~ link4 %}\n\t{% endif %}\n\t\n\t{% set title5 %}Will products be delivered on time?{% endset %}\n\t{% set body5 %}Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible.{% endset %}\n\t{% set image5 %}https://cdn.exponea.com/exponea-delivery-team/f/98300455f9fe5034573c7e85f341bb698dbc65110c76d41caed9cbd171d1e3ed{% endset %}\n\t{% set link5 %}www.exponea.com{% endset %}\n\t{% if link5 and not 'http' in link5 %}\n\t\t{% set link5 = 'http://' ~ link5 %}\n\t{% endif %}\n\t\n\t{% set title6 %}Relaxed return policy{% endset %}\n\t{% set body6 %}We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days.{% endset %}\n\t{% set image6 %}https://cdn.exponea.com/exponea-delivery-team/f/45af28f6666e01abf9b4503f863b9790d23a2ba869d2008bb9cde4341fcd55e4{% endset %}\n\t{% set link6 %}www.exponea.com{% endset %}\n\t{% if link6 and not 'http' in link6 %}\n\t\t{% set link6 = 'http://' ~ link6 %}\n\t{% endif %}\n\t\n\t{% set title7 %}Managing returned products{% endset %}\n\t{% set body7 %}All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them.{% endset %}\n\t{% set image7 %}https://cdn.exponea.com/exponea-delivery-team/f/b748d41b9bfb250eec2bf0934e19fde6a49aafdf3b8d3388ca842fc284f37a97{% endset %}\n\t{% set link7 %}www.exponea.com{% endset %}\n\t{% if link7 and not 'http' in link7 %}\n\t\t{% set link7 = 'http://' ~ link7 %}\n\t{% endif %}\n\t\n\t{% set title8 %}We are supporting our community{% endset %}\n\t{% set body8 %}We are donating 10% of all revenue to a COVID-19 medical research fund. {% endset %}\n\t{% set image8 %}https://cdn.exponea.com/exponea-delivery-team/f/0747b5e137aeb6a8b049dc0f186cd984deb60baa010b4793f9ec7239d9a5ec4c{% endset %}\n\t{% set link8 %}www.exponea.com{% endset %}\n\t{% if link8 and not 'http' in link8 %}\n\t\t{% set link8 = 'http://' ~ link8 %}\n\t{% endif %}\n\t</span>\n\t\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional link\">{% if mainLink %}</span><a href=\"{{ mainLink }}\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t<div class=\"exponea-wrap\">\n\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t<span class=\"exponea-title\" exp-action>We're here for you</span>\n\t\t\t</div>\n\t\t</div>\n\t<span class=\"jinja-hidden\">{% if mainLink %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 1\">{% if title1!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link1 %}</span><a href=\"{{ link1 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/2ce46a462513ba80a79f2be0b90775e510761de9ca0224a5e90f5bb568f89af0')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How to keep yourself safe</span>\n\t\t\t\t\t<span class=\"exponea-text\">Wash your hands thoroughly, avoid touching your face, practice social distancing <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link1 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 2\">{% if title2!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link2 %}</span><a href=\"{{ link2 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/12309ae7f30b0d0ffaad429add14bc7b5f1e302e6b092a75659ef2d4954cd3de')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Stay informed</span>\n\t\t\t\t\t<span class=\"exponea-text\">Click here to read up-to-date information on COVID-19 <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link2 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\n\t<span class=\"jinja-condition\" title=\"optional block 3\">{% if title3!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link3 %}</span><a href=\"{{ link3 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/4192f66c371cff195bb22c8cbd41cb169d5bb4551256187e574b08d33cad5cf3')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How are we protecting our employees?</span>\n\t\t\t\t\t<span class=\"exponea-text\">All employees that can do so are working from home. All other employees have received PPE and training on best practices. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link3 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 4\">{% if title4!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link4 %}</span><a href=\"{{ link4 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/49be28212c0970350bf6f1cc6b119b4b49ec8bcf4a1cdb4090ad8dd8713f0222')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How are we delivering products?</span>\n\t\t\t\t\t<span class=\"exponea-text\">We've adopted a contact-free delivery policy to reduce chances of virus transmission <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link4 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 5\">{% if title5!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link5 %}</span><a href=\"{{ link5 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/98300455f9fe5034573c7e85f341bb698dbc65110c76d41caed9cbd171d1e3ed')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Will products be delivered on time?</span>\n\t\t\t\t\t<span class=\"exponea-text\">Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link5 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 6\">{% if title6!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link6 %}</span><a href=\"{{ link6 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/45af28f6666e01abf9b4503f863b9790d23a2ba869d2008bb9cde4341fcd55e4')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Relaxed return policy</span>\n\t\t\t\t\t<span class=\"exponea-text\">We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link6 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 7\">{% if title7!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link7 %}</span><a href=\"{{ link7 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/b748d41b9bfb250eec2bf0934e19fde6a49aafdf3b8d3388ca842fc284f37a97')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Managing returned products</span>\n\t\t\t\t\t<span class=\"exponea-text\">All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link7 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 8\">{% if title8!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link8 %}</span><a href=\"{{ link8 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/0747b5e137aeb6a8b049dc0f186cd984deb60baa010b4793f9ec7239d9a5ec4c')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>We are supporting our community</span>\n\t\t\t\t\t<span class=\"exponea-text\">We are donating 10% of all revenue to a COVID-19 medical research fund. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link8 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n</div>","script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 2000\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-notification\").forEach(a=>a.parentNode.removeChild(a))}};","sdk_object_name":"exponea","style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'right' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '10px' %}\n {%- set offsetVertical = '10px' %}\n {%- set bannerHeight = '80px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '520px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '#eeeeee' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '5px' %}\n {%- set bannerPadding = '0 0 0 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'horizontal' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '0.9em' %}\n {%- set fontWeight = '600' %}\n \n {#- Text variables #}\n {%- set textMargin = '1.1em 1.7em 1em 1.4em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '#1c1733' %}\n {%- set textLineHeight = '1.2' %}\n\n {#- Title variables #}\n {%- set titleColor = '#1c1733' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleMargin = '0 0 5px 0' %}\n\n {#- Image variables #}\n {%- set imgURL = 'https://cdn3.vectorstock.com/i/1000x1000/66/82/please-wash-your-hands-vector-18606682.jpg' %}\n {%- set imgMargin = 'auto 15px auto 0' %}\n {%- set imgHeight = '50px' %}\n {%- set imgWidth = '50px' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '#1c1733' %}\n {%- set closeLeftRight = 'right' %} {#- Optional: 'left', 'right' or '' #}\n \n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '400px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '150px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '10px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '10px' %} \n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\t max-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\t height: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n {{- printDisplayFlex() }}\n }\n .exponea-banner.exponea-action .exponea-wrap .exponea-text-wrap {\n {{- printAttributeWithCalc('width', '100% - ( ' ~ imgWidth ~ ' + 10px ) ' ) }}\n }\n {#- Links #}\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n display: block;\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin}};\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n text-align: {{ textAlign }};\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Div whose background will be the image #}\n.exponea-banner .exponea-img {\n {{- printAttributeWithCalc('max-height', imgHeight ) }}\n {{- printAttributeWithCalc('max-width', imgWidth ) }}\n height: 100px;\n width: 100%;\n margin: {{ imgMargin }};\n background: url('{{- imgURL }}');\n {{- printBackgroundSize('cover') }}\n background-repeat: no-repeat;\n background-position: center top;\n background-size: 80% auto;\n margin-top: -4px;\n vertical-align: middle;\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .exponea-img {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\nmargin-left: 0;\nmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n\n.exponea-more-link {\n\tcolor: #BB0000;\n\tfont-weight: normal;\n\ttext-decoration: underline;\n\tdisplay: none;\n}\n\n.exponea-link .exponea-more-link {\n\tdisplay: inline-block;\n}\n\n.jinja-hidden {\n\tdisplay: none;\n}\n\n.jinja-condition:not(:empty) {\n\tcolor: transparent;\n\tfont-size: 0;\n\theight: 0;\n\tposition: relative;\n\tdisplay: block;\n\tmargin: 0;\n}\n.jinja-condition:not(:empty)::before {\n\tcontent: attr(title);\n\tfont-size: 10px;\n\tbackground: black;\n\tcolor: white;\n\tpadding: 1px 4px;\n\tfont-weight: normal;\n\topacity: 0.25;\n\tposition: absolute;\n\ttop: 0;\n\twhite-space: nowrap;\n}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}"},"params":{"backgroundColor":"#eeeeee","bannerLink":"https://www.exponea.com","bannerShowDelayInMilliseconds":"0","body1":"Wash your hands thoroughly, avoid touching your face, practice social distancing","body2":"Click here to read up-to-date information on COVID-19","body3":"All employees that can do so are working from home. All other employees have received PPE and training on best practices.","body4":"We've adopted a contact-free delivery policy to reduce chances of virus transmission","body5":"Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible.","body6":"We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days.","body7":"All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them.","body8":"We are donating 10% of all revenue to a COVID-19 medical research fund. ","bodyText":"Subscribe now and get 50% discount for first three months.","bodyTextColor":"#1c1733","buttonBackgroundColor":"#1c1733","buttonText":"Subscribe","buttonTextColor":"#ffffff","closeButtonColor":"#1c1733","headerText":"MyNews.com","headerTextColor":"#1c1733","image1":"https://cdn.exponea.com/exponea-delivery-team/f/2ce46a462513ba80a79f2be0b90775e510761de9ca0224a5e90f5bb568f89af0","image2":"https://cdn.exponea.com/exponea-delivery-team/f/12309ae7f30b0d0ffaad429add14bc7b5f1e302e6b092a75659ef2d4954cd3de","image3":"https://cdn.exponea.com/exponea-delivery-team/f/4192f66c371cff195bb22c8cbd41cb169d5bb4551256187e574b08d33cad5cf3","image4":"https://cdn.exponea.com/exponea-delivery-team/f/49be28212c0970350bf6f1cc6b119b4b49ec8bcf4a1cdb4090ad8dd8713f0222","image5":"https://cdn.exponea.com/exponea-delivery-team/f/98300455f9fe5034573c7e85f341bb698dbc65110c76d41caed9cbd171d1e3ed","image6":"https://cdn.exponea.com/exponea-delivery-team/f/45af28f6666e01abf9b4503f863b9790d23a2ba869d2008bb9cde4341fcd55e4","image7":"https://cdn.exponea.com/exponea-delivery-team/f/b748d41b9bfb250eec2bf0934e19fde6a49aafdf3b8d3388ca842fc284f37a97","image8":"https://cdn.exponea.com/exponea-delivery-team/f/0747b5e137aeb6a8b049dc0f186cd984deb60baa010b4793f9ec7239d9a5ec4c","imageUrl":"https://cdn3.vectorstock.com/i/1000x1000/66/82/please-wash-your-hands-vector-18606682.jpg","link1":"www.exponea.com","link2":"www.exponea.com","link3":"www.exponea.com","link4":"www.exponea.com","link5":"www.exponea.com","link6":"www.exponea.com","link7":"www.exponea.com","link8":"www.exponea.com","linkColor":"#BB0000","mainLink":"www.exponea.com","mainTitle":"We're here for you","moreLinkText":"More...","notificationText":"Enjoy our selection of discounted products!","notificationTextColor":"#ffffff","secondaryColor":"#ffffff","title1":"How to keep yourself safe","title2":"Stay informed","title3":"How are we protecting our employees?","title4":"How are we delivering products?","title5":"Will products be delivered on time?","title6":"Relaxed return policy","title7":"Managing returned products","title8":"We are supporting our community","titleText":"Happy Shopping!","titleTextColor":"#1c1733"},"percentage":100,"script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 2000\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-notification\").forEach(a=>a.parentNode.removeChild(a))}};","source_mode":true,"style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'right' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '10px' %}\n {%- set offsetVertical = '10px' %}\n {%- set bannerHeight = '80px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '520px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '[[ backgroundColor ]]' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '5px' %}\n {%- set bannerPadding = '0 0 0 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'horizontal' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '0.9em' %}\n {%- set fontWeight = '600' %}\n \n {#- Text variables #}\n {%- set textMargin = '1.1em 1.7em 1em 1.4em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '[[ bodyTextColor ]]' %}\n {%- set textLineHeight = '1.2' %}\n\n {#- Title variables #}\n {%- set titleColor = '[[ titleTextColor ]]' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleMargin = '0 0 5px 0' %}\n\n {#- Image variables #}\n {%- set imgURL = '[[ imageUrl ]]' %}\n {%- set imgMargin = 'auto 15px auto 0' %}\n {%- set imgHeight = '50px' %}\n {%- set imgWidth = '50px' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '[[closeButtonColor]]' %}\n {%- set closeLeftRight = 'right' %} {#- Optional: 'left', 'right' or '' #}\n \n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '400px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '150px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '10px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '10px' %} \n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\t max-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\t height: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n {{- printDisplayFlex() }}\n }\n .exponea-banner.exponea-action .exponea-wrap .exponea-text-wrap {\n {{- printAttributeWithCalc('width', '100% - ( ' ~ imgWidth ~ ' + 10px ) ' ) }}\n }\n {#- Links #}\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n display: block;\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin}};\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n text-align: {{ textAlign }};\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Div whose background will be the image #}\n.exponea-banner .exponea-img {\n {{- printAttributeWithCalc('max-height', imgHeight ) }}\n {{- printAttributeWithCalc('max-width', imgWidth ) }}\n height: 100px;\n width: 100%;\n margin: {{ imgMargin }};\n background: url('{{- imgURL }}');\n {{- printBackgroundSize('cover') }}\n background-repeat: no-repeat;\n background-position: center top;\n background-size: 80% auto;\n margin-top: -4px;\n vertical-align: middle;\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .exponea-img {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\nmargin-left: 0;\nmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n\n.exponea-more-link {\n\tcolor: [[ linkColor ]];\n\tfont-weight: normal;\n\ttext-decoration: underline;\n\tdisplay: none;\n}\n\n.exponea-link .exponea-more-link {\n\tdisplay: inline-block;\n}\n\n.jinja-hidden {\n\tdisplay: none;\n}\n\n.jinja-condition:not(:empty) {\n\tcolor: transparent;\n\tfont-size: 0;\n\theight: 0;\n\tposition: relative;\n\tdisplay: block;\n\tmargin: 0;\n}\n.jinja-condition:not(:empty)::before {\n\tcontent: attr(title);\n\tfont-size: 10px;\n\tbackground: black;\n\tcolor: white;\n\tpadding: 1px 4px;\n\tfont-weight: normal;\n\topacity: 0.25;\n\tposition: absolute;\n\ttop: 0;\n\twhite-space: nowrap;\n}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b491e5a9d186822829857","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e790a041f90ea1f66950cbf","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}\n","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"COVID-19 Informative Banner - 2","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<div class=\"exponea-banner exponea-notification\">\n\t<span class=\"jinja-hidden\">\n\t{% set mainTitle %}[[ mainTitle ]]{% endset %}\n\t{% set mainLink %}[[ mainLink ]]{% endset %}\n\t{% if mainLink and not 'http' in mainLink %}\n\t\t{% set mainLink = 'http://' ~ mainLink %}\n\t{% endif %}\n\t\n\t{% set title1 %}[[ title1 ]]{% endset %}\n\t{% set body1 %}[[ body1 ]]{% endset %}\n\t{% set image1 %}[[ image1 ]]{% endset %}\n\t{% set link1 %}[[ link1 ]]{% endset %}\n\t{% if link1 and not 'http' in link1 %}\n\t\t{% set link1 = 'http://' ~ link1 %}\n\t{% endif %}\n\t\n\t{% set title2 %}[[ title2 ]]{% endset %}\n\t{% set body2 %}[[ body2 ]]{% endset %}\n\t{% set image2 %}[[ image2 ]]{% endset %}\n\t{% set link2 %}[[ link2 ]]{% endset %}\n\t{% if link2 and not 'http' in link2 %}\n\t\t{% set link2 = 'http://' ~ link2 %}\n\t{% endif %}\n\t\n\t{% set title3 %}[[ title3 ]]{% endset %}\n\t{% set body3 %}[[ body3 ]]{% endset %}\n\t{% set image3 %}[[ image3 ]]{% endset %}\n\t{% set link3 %}[[ link3 ]]{% endset %}\n\t{% if link3 and not 'http' in link3 %}\n\t\t{% set link3 = 'http://' ~ link3 %}\n\t{% endif %}\n\t\n\t{% set title4 %}[[ title4 ]]{% endset %}\n\t{% set body4 %}[[ body4 ]]{% endset %}\n\t{% set image4 %}[[ image4 ]]{% endset %}\n\t{% set link4 %}[[ link4 ]]{% endset %}\n\t{% if link4 and not 'http' in link4 %}\n\t\t{% set link4 = 'http://' ~ link4 %}\n\t{% endif %}\n\t\n\t{% set title5 %}[[ title5 ]]{% endset %}\n\t{% set body5 %}[[ body5 ]]{% endset %}\n\t{% set image5 %}[[ image5 ]]{% endset %}\n\t{% set link5 %}[[ link5 ]]{% endset %}\n\t{% if link5 and not 'http' in link5 %}\n\t\t{% set link5 = 'http://' ~ link5 %}\n\t{% endif %}\n\t\n\t{% set title6 %}[[ title6 ]]{% endset %}\n\t{% set body6 %}[[ body6 ]]{% endset %}\n\t{% set image6 %}[[ image6 ]]{% endset %}\n\t{% set link6 %}[[ link6 ]]{% endset %}\n\t{% if link6 and not 'http' in link6 %}\n\t\t{% set link6 = 'http://' ~ link6 %}\n\t{% endif %}\n\t\n\t{% set title7 %}[[ title7 ]]{% endset %}\n\t{% set body7 %}[[ body7 ]]{% endset %}\n\t{% set image7 %}[[ image7 ]]{% endset %}\n\t{% set link7 %}[[ link7 ]]{% endset %}\n\t{% if link7 and not 'http' in link7 %}\n\t\t{% set link7 = 'http://' ~ link7 %}\n\t{% endif %}\n\t\n\t{% set title8 %}[[ title8 ]]{% endset %}\n\t{% set body8 %}[[ body8 ]]{% endset %}\n\t{% set image8 %}[[ image8 ]]{% endset %}\n\t{% set link8 %}[[ link8 ]]{% endset %}\n\t{% if link8 and not 'http' in link8 %}\n\t\t{% set link8 = 'http://' ~ link8 %}\n\t{% endif %}\n\t</span>\n\t\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional link\">{% if mainLink %}</span><a href=\"{{ mainLink }}\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t<div class=\"exponea-wrap\">\n\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t<span class=\"exponea-title\" exp-action>[[ mainTitle ]]</span>\n\t\t\t</div>\n\t\t</div>\n\t<span class=\"jinja-hidden\">{% if mainLink %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 1\">{% if title1!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link1 %}</span><a href=\"{{ link1 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image1]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title1 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body1 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link1 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 2\">{% if title2!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link2 %}</span><a href=\"{{ link2 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image2]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title2 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body2 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link2 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\n\t<span class=\"jinja-condition\" title=\"optional block 3\">{% if title3!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link3 %}</span><a href=\"{{ link3 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image3]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title3 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body3 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link3 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 4\">{% if title4!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link4 %}</span><a href=\"{{ link4 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image4]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title4 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body4 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link4 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 5\">{% if title5!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link5 %}</span><a href=\"{{ link5 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image5]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title5 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body5 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link5 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 6\">{% if title6!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link6 %}</span><a href=\"{{ link6 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image6]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title6 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body6 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link6 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 7\">{% if title7!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link7 %}</span><a href=\"{{ link7 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image7]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title7 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body7 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link7 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 8\">{% if title8!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link8 %}</span><a href=\"{{ link8 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image8]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title8 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body8 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link8 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n</div>","id":0,"name":"Variant A","parametrized_parts":{"html":"<div class=\"exponea-banner exponea-notification\">\n\t<span class=\"jinja-hidden\">\n\t{% set mainTitle %}We're here for you{% endset %}\n\t{% set mainLink %}www.exponea.com{% endset %}\n\t{% if mainLink and not 'http' in mainLink %}\n\t\t{% set mainLink = 'http://' ~ mainLink %}\n\t{% endif %}\n\t\n\t{% set title1 %}How to keep yourself safe{% endset %}\n\t{% set body1 %}Wash your hands thoroughly, avoid touching your face, practice social distancing{% endset %}\n\t{% set image1 %}https://cdn.exponea.com/exponea-delivery-team/f/cad8383e55bf590b94cef5c2fde9f4a3f659823c11a28802429c40fae1398f97{% endset %}\n\t{% set link1 %}www.exponea.com{% endset %}\n\t{% if link1 and not 'http' in link1 %}\n\t\t{% set link1 = 'http://' ~ link1 %}\n\t{% endif %}\n\t\n\t{% set title2 %}Stay informed{% endset %}\n\t{% set body2 %}Click here to read up-to-date information on COVID-19{% endset %}\n\t{% set image2 %}https://cdn.exponea.com/exponea-delivery-team/f/5cb8fa7aad9e3b0a6fc57bb16cd8cbc344109d1013b0c8152c2ad3825c2cea60{% endset %}\n\t{% set link2 %}www.exponea.com{% endset %}\n\t{% if link2 and not 'http' in link2 %}\n\t\t{% set link2 = 'http://' ~ link2 %}\n\t{% endif %}\n\t\n\t{% set title3 %}How are we protecting our employees?{% endset %}\n\t{% set body3 %}All employees that can do so are working from home. All other employees have received PPE and training on best practices.{% endset %}\n\t{% set image3 %}https://cdn.exponea.com/exponea-delivery-team/f/d2c48c81d6e5cebedb29237e8f6906431b25c17102291182f84f690d9bae033e{% endset %}\n\t{% set link3 %}www.exponea.com{% endset %}\n\t{% if link3 and not 'http' in link3 %}\n\t\t{% set link3 = 'http://' ~ link3 %}\n\t{% endif %}\n\t\n\t{% set title4 %}How are we delivering products?{% endset %}\n\t{% set body4 %}We've adopted a contact-free delivery policy to reduce chances of virus transmission{% endset %}\n\t{% set image4 %}https://cdn.exponea.com/exponea-delivery-team/f/c24d4eb072c6a5cb618671b4108a46eab9df1d9f5d23296f1f96ed1af9b03465{% endset %}\n\t{% set link4 %}www.exponea.com{% endset %}\n\t{% if link4 and not 'http' in link4 %}\n\t\t{% set link4 = 'http://' ~ link4 %}\n\t{% endif %}\n\t\n\t{% set title5 %}Will products be delivered on time?{% endset %}\n\t{% set body5 %}Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible.{% endset %}\n\t{% set image5 %}https://cdn.exponea.com/exponea-delivery-team/f/ab2e637f8e2b9c94865cb8f3468fc75689ab83572b58f448b51a3cbfe417c40d{% endset %}\n\t{% set link5 %}www.exponea.com{% endset %}\n\t{% if link5 and not 'http' in link5 %}\n\t\t{% set link5 = 'http://' ~ link5 %}\n\t{% endif %}\n\t\n\t{% set title6 %}Relaxed return policy{% endset %}\n\t{% set body6 %}We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days.{% endset %}\n\t{% set image6 %}https://cdn.exponea.com/exponea-delivery-team/f/0bf8be3a720e1270f1f1ee3bf32e0b19309fadbb3e6963134995eb848599f8b4{% endset %}\n\t{% set link6 %}www.exponea.com{% endset %}\n\t{% if link6 and not 'http' in link6 %}\n\t\t{% set link6 = 'http://' ~ link6 %}\n\t{% endif %}\n\t\n\t{% set title7 %}Managing returned products{% endset %}\n\t{% set body7 %}All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them.{% endset %}\n\t{% set image7 %}https://cdn.exponea.com/exponea-delivery-team/f/0755edb1e997b25125ffbae6b7ef897fb306a9d2a6f7a7a24cd1231e0e352d96{% endset %}\n\t{% set link7 %}www.exponea.com{% endset %}\n\t{% if link7 and not 'http' in link7 %}\n\t\t{% set link7 = 'http://' ~ link7 %}\n\t{% endif %}\n\t\n\t{% set title8 %}We are supporting our community{% endset %}\n\t{% set body8 %}We are donating 10% of all revenue to a COVID-19 medical research fund. {% endset %}\n\t{% set image8 %}https://cdn.exponea.com/exponea-delivery-team/f/4c13dad470f78e29e3c8374028db1671d5f42345780123c51bbbeb6d205c7da6{% endset %}\n\t{% set link8 %}www.exponea.com{% endset %}\n\t{% if link8 and not 'http' in link8 %}\n\t\t{% set link8 = 'http://' ~ link8 %}\n\t{% endif %}\n\t</span>\n\t\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional link\">{% if mainLink %}</span><a href=\"{{ mainLink }}\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t<div class=\"exponea-wrap\">\n\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t<span class=\"exponea-title\" exp-action>We're here for you</span>\n\t\t\t</div>\n\t\t</div>\n\t<span class=\"jinja-hidden\">{% if mainLink %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 1\">{% if title1!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link1 %}</span><a href=\"{{ link1 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/cad8383e55bf590b94cef5c2fde9f4a3f659823c11a28802429c40fae1398f97')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How to keep yourself safe</span>\n\t\t\t\t\t<span class=\"exponea-text\">Wash your hands thoroughly, avoid touching your face, practice social distancing <span class=\"exponea-more-link\"></span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link1 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 2\">{% if title2!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link2 %}</span><a href=\"{{ link2 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/5cb8fa7aad9e3b0a6fc57bb16cd8cbc344109d1013b0c8152c2ad3825c2cea60')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Stay informed</span>\n\t\t\t\t\t<span class=\"exponea-text\">Click here to read up-to-date information on COVID-19 <span class=\"exponea-more-link\"></span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link2 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\n\t<span class=\"jinja-condition\" title=\"optional block 3\">{% if title3!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link3 %}</span><a href=\"{{ link3 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/d2c48c81d6e5cebedb29237e8f6906431b25c17102291182f84f690d9bae033e')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How are we protecting our employees?</span>\n\t\t\t\t\t<span class=\"exponea-text\">All employees that can do so are working from home. All other employees have received PPE and training on best practices. <span class=\"exponea-more-link\"></span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link3 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 4\">{% if title4!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link4 %}</span><a href=\"{{ link4 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/c24d4eb072c6a5cb618671b4108a46eab9df1d9f5d23296f1f96ed1af9b03465')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How are we delivering products?</span>\n\t\t\t\t\t<span class=\"exponea-text\">We've adopted a contact-free delivery policy to reduce chances of virus transmission <span class=\"exponea-more-link\"></span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link4 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 5\">{% if title5!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link5 %}</span><a href=\"{{ link5 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/ab2e637f8e2b9c94865cb8f3468fc75689ab83572b58f448b51a3cbfe417c40d')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Will products be delivered on time?</span>\n\t\t\t\t\t<span class=\"exponea-text\">Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible. <span class=\"exponea-more-link\"></span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link5 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 6\">{% if title6!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link6 %}</span><a href=\"{{ link6 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/0bf8be3a720e1270f1f1ee3bf32e0b19309fadbb3e6963134995eb848599f8b4')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Relaxed return policy</span>\n\t\t\t\t\t<span class=\"exponea-text\">We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days. <span class=\"exponea-more-link\"></span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link6 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 7\">{% if title7!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link7 %}</span><a href=\"{{ link7 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/0755edb1e997b25125ffbae6b7ef897fb306a9d2a6f7a7a24cd1231e0e352d96')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Managing returned products</span>\n\t\t\t\t\t<span class=\"exponea-text\">All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them. <span class=\"exponea-more-link\"></span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link7 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 8\">{% if title8!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link8 %}</span><a href=\"{{ link8 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://cdn.exponea.com/exponea-delivery-team/f/4c13dad470f78e29e3c8374028db1671d5f42345780123c51bbbeb6d205c7da6')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>We are supporting our community</span>\n\t\t\t\t\t<span class=\"exponea-text\">We are donating 10% of all revenue to a COVID-19 medical research fund. <span class=\"exponea-more-link\"></span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link8 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n</div>","script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 2000\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-notification\").forEach(a=>a.parentNode.removeChild(a))}};","sdk_object_name":"exponea","style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'right' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '10px' %}\n {%- set offsetVertical = '10px' %}\n {%- set bannerHeight = '80px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '520px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '#F9DDD8' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '5px' %}\n {%- set bannerPadding = '0 0 0 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'horizontal' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '0.9em' %}\n {%- set fontWeight = '600' %}\n \n {#- Text variables #}\n {%- set textMargin = '1.1em 1.7em 1em 1.4em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '#1c1733' %}\n {%- set textLineHeight = '1.2' %}\n\n {#- Title variables #}\n {%- set titleColor = '#1c1733' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleMargin = '0 0 5px 0' %}\n\n {#- Image variables #}\n {%- set imgURL = 'https://cdn3.vectorstock.com/i/1000x1000/66/82/please-wash-your-hands-vector-18606682.jpg' %}\n {%- set imgMargin = 'auto 15px auto 0' %}\n {%- set imgHeight = '50px' %}\n {%- set imgWidth = '50px' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '#1c1733' %}\n {%- set closeLeftRight = 'right' %} {#- Optional: 'left', 'right' or '' #}\n \n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '400px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '150px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '10px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '10px' %} \n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\t max-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\t height: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n {{- printDisplayFlex() }}\n }\n .exponea-banner.exponea-action .exponea-wrap .exponea-text-wrap {\n {{- printAttributeWithCalc('width', '100% - ( ' ~ imgWidth ~ ' + 10px ) ' ) }}\n }\n {#- Links #}\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n display: block;\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin}};\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n text-align: {{ textAlign }};\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Div whose background will be the image #}\n.exponea-banner .exponea-img {\n {{- printAttributeWithCalc('max-height', imgHeight ) }}\n {{- printAttributeWithCalc('max-width', imgWidth ) }}\n height: 100px;\n width: 100%;\n margin: {{ imgMargin }};\n background: url('{{- imgURL }}');\n {{- printBackgroundSize('cover') }}\n background-repeat: no-repeat;\n background-position: center top;\n background-size: 80% auto;\n margin-top: -4px;\n vertical-align: middle;\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .exponea-img {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\nmargin-left: 0;\nmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n\n.exponea-more-link {\n\tcolor: #BB0000;\n\tfont-weight: normal;\n\ttext-decoration: underline;\n\tdisplay: none;\n}\n\n.exponea-link .exponea-more-link {\n\tdisplay: inline-block;\n}\n\n.jinja-hidden {\n\tdisplay: none;\n}\n\n.jinja-condition:not(:empty) {\n\tcolor: transparent;\n\tfont-size: 0;\n\theight: 0;\n\tposition: relative;\n\tdisplay: block;\n\tmargin: 0;\n}\n.jinja-condition:not(:empty)::before {\n\tcontent: attr(title);\n\tfont-size: 10px;\n\tbackground: black;\n\tcolor: white;\n\tpadding: 1px 4px;\n\tfont-weight: normal;\n\topacity: 0.25;\n\tposition: absolute;\n\ttop: 0;\n\twhite-space: nowrap;\n}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}"},"params":{"backgroundColor":"#F9DDD8","bannerLink":"https://www.exponea.com","bannerShowDelayInMilliseconds":"0","body1":"Wash your hands thoroughly, avoid touching your face, practice social distancing","body2":"Click here to read up-to-date information on COVID-19","body3":"All employees that can do so are working from home. All other employees have received PPE and training on best practices.","body4":"We've adopted a contact-free delivery policy to reduce chances of virus transmission","body5":"Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible.","body6":"We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days.","body7":"All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them.","body8":"We are donating 10% of all revenue to a COVID-19 medical research fund. ","bodyText":"Subscribe now and get 50% discount for first three months.","bodyTextColor":"#1c1733","buttonBackgroundColor":"#1c1733","buttonText":"Subscribe","buttonTextColor":"#ffffff","closeButtonColor":"#1c1733","headerText":"MyNews.com","headerTextColor":"#1c1733","image1":"https://cdn.exponea.com/exponea-delivery-team/f/cad8383e55bf590b94cef5c2fde9f4a3f659823c11a28802429c40fae1398f97","image2":"https://cdn.exponea.com/exponea-delivery-team/f/5cb8fa7aad9e3b0a6fc57bb16cd8cbc344109d1013b0c8152c2ad3825c2cea60","image3":"https://cdn.exponea.com/exponea-delivery-team/f/d2c48c81d6e5cebedb29237e8f6906431b25c17102291182f84f690d9bae033e","image4":"https://cdn.exponea.com/exponea-delivery-team/f/c24d4eb072c6a5cb618671b4108a46eab9df1d9f5d23296f1f96ed1af9b03465","image5":"https://cdn.exponea.com/exponea-delivery-team/f/ab2e637f8e2b9c94865cb8f3468fc75689ab83572b58f448b51a3cbfe417c40d","image6":"https://cdn.exponea.com/exponea-delivery-team/f/0bf8be3a720e1270f1f1ee3bf32e0b19309fadbb3e6963134995eb848599f8b4","image7":"https://cdn.exponea.com/exponea-delivery-team/f/0755edb1e997b25125ffbae6b7ef897fb306a9d2a6f7a7a24cd1231e0e352d96","image8":"https://cdn.exponea.com/exponea-delivery-team/f/4c13dad470f78e29e3c8374028db1671d5f42345780123c51bbbeb6d205c7da6","imageUrl":"https://cdn3.vectorstock.com/i/1000x1000/66/82/please-wash-your-hands-vector-18606682.jpg","link1":"www.exponea.com","link2":"www.exponea.com","link3":"www.exponea.com","link4":"www.exponea.com","link5":"www.exponea.com","link6":"www.exponea.com","link7":"www.exponea.com","link8":"www.exponea.com","linkColor":"#BB0000","mainLink":"www.exponea.com","mainTitle":"We're here for you","moreLinkText":"","notificationText":"Enjoy our selection of discounted products!","notificationTextColor":"#ffffff","secondaryColor":"#ffffff","title1":"How to keep yourself safe","title2":"Stay informed","title3":"How are we protecting our employees?","title4":"How are we delivering products?","title5":"Will products be delivered on time?","title6":"Relaxed return policy","title7":"Managing returned products","title8":"We are supporting our community","titleText":"Happy Shopping!","titleTextColor":"#1c1733"},"percentage":100,"script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 2000\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-notification\").forEach(a=>a.parentNode.removeChild(a))}};","source_mode":true,"style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'right' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '10px' %}\n {%- set offsetVertical = '10px' %}\n {%- set bannerHeight = '80px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '520px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '[[ backgroundColor ]]' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '5px' %}\n {%- set bannerPadding = '0 0 0 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'horizontal' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '0.9em' %}\n {%- set fontWeight = '600' %}\n \n {#- Text variables #}\n {%- set textMargin = '1.1em 1.7em 1em 1.4em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '[[ bodyTextColor ]]' %}\n {%- set textLineHeight = '1.2' %}\n\n {#- Title variables #}\n {%- set titleColor = '[[ titleTextColor ]]' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleMargin = '0 0 5px 0' %}\n\n {#- Image variables #}\n {%- set imgURL = '[[ imageUrl ]]' %}\n {%- set imgMargin = 'auto 15px auto 0' %}\n {%- set imgHeight = '50px' %}\n {%- set imgWidth = '50px' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '[[closeButtonColor]]' %}\n {%- set closeLeftRight = 'right' %} {#- Optional: 'left', 'right' or '' #}\n \n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '400px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '150px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '10px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '10px' %} \n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\t max-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\t height: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n {{- printDisplayFlex() }}\n }\n .exponea-banner.exponea-action .exponea-wrap .exponea-text-wrap {\n {{- printAttributeWithCalc('width', '100% - ( ' ~ imgWidth ~ ' + 10px ) ' ) }}\n }\n {#- Links #}\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n display: block;\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin}};\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n text-align: {{ textAlign }};\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Div whose background will be the image #}\n.exponea-banner .exponea-img {\n {{- printAttributeWithCalc('max-height', imgHeight ) }}\n {{- printAttributeWithCalc('max-width', imgWidth ) }}\n height: 100px;\n width: 100%;\n margin: {{ imgMargin }};\n background: url('{{- imgURL }}');\n {{- printBackgroundSize('cover') }}\n background-repeat: no-repeat;\n background-position: center top;\n background-size: 80% auto;\n margin-top: -4px;\n vertical-align: middle;\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .exponea-img {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\nmargin-left: 0;\nmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n\n.exponea-more-link {\n\tcolor: [[ linkColor ]];\n\tfont-weight: normal;\n\ttext-decoration: underline;\n\tdisplay: none;\n}\n\n.exponea-link .exponea-more-link {\n\tdisplay: inline-block;\n}\n\n.jinja-hidden {\n\tdisplay: none;\n}\n\n.jinja-condition:not(:empty) {\n\tcolor: transparent;\n\tfont-size: 0;\n\theight: 0;\n\tposition: relative;\n\tdisplay: block;\n\tmargin: 0;\n}\n.jinja-condition:not(:empty)::before {\n\tcontent: attr(title);\n\tfont-size: 10px;\n\tbackground: black;\n\tcolor: white;\n\tpadding: 1px 4px;\n\tfont-weight: normal;\n\topacity: 0.25;\n\tposition: absolute;\n\ttop: 0;\n\twhite-space: nowrap;\n}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b491e5a9d18682282985c","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e7867a55808283458feaf8d","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}\n","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"COVID-19 Informative Banner v3","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<div class=\"exponea-banner exponea-notification\">\n\t<span class=\"jinja-hidden\">\n\t{% set mainTitle %}[[ mainTitle ]]{% endset %}\n\t{% set mainLink %}[[ mainLink ]]{% endset %}\n\t{% if mainLink and not 'http' in mainLink %}\n\t\t{% set mainLink = 'http://' ~ mainLink %}\n\t{% endif %}\n\t\n\t{% set title1 %}[[ title1 ]]{% endset %}\n\t{% set body1 %}[[ body1 ]]{% endset %}\n\t{% set image1 %}[[ image1 ]]{% endset %}\n\t{% set link1 %}[[ link1 ]]{% endset %}\n\t{% if link1 and not 'http' in link1 %}\n\t\t{% set link1 = 'http://' ~ link1 %}\n\t{% endif %}\n\t\n\t{% set title2 %}[[ title2 ]]{% endset %}\n\t{% set body2 %}[[ body2 ]]{% endset %}\n\t{% set image2 %}[[ image2 ]]{% endset %}\n\t{% set link2 %}[[ link2 ]]{% endset %}\n\t{% if link2 and not 'http' in link2 %}\n\t\t{% set link2 = 'http://' ~ link2 %}\n\t{% endif %}\n\t\n\t{% set title3 %}[[ title3 ]]{% endset %}\n\t{% set body3 %}[[ body3 ]]{% endset %}\n\t{% set image3 %}[[ image3 ]]{% endset %}\n\t{% set link3 %}[[ link3 ]]{% endset %}\n\t{% if link3 and not 'http' in link3 %}\n\t\t{% set link3 = 'http://' ~ link3 %}\n\t{% endif %}\n\t\n\t{% set title4 %}[[ title4 ]]{% endset %}\n\t{% set body4 %}[[ body4 ]]{% endset %}\n\t{% set image4 %}[[ image4 ]]{% endset %}\n\t{% set link4 %}[[ link4 ]]{% endset %}\n\t{% if link4 and not 'http' in link4 %}\n\t\t{% set link4 = 'http://' ~ link4 %}\n\t{% endif %}\n\t\n\t{% set title5 %}[[ title5 ]]{% endset %}\n\t{% set body5 %}[[ body5 ]]{% endset %}\n\t{% set image5 %}[[ image5 ]]{% endset %}\n\t{% set link5 %}[[ link5 ]]{% endset %}\n\t{% if link5 and not 'http' in link5 %}\n\t\t{% set link5 = 'http://' ~ link5 %}\n\t{% endif %}\n\t\n\t{% set title6 %}[[ title6 ]]{% endset %}\n\t{% set body6 %}[[ body6 ]]{% endset %}\n\t{% set image6 %}[[ image6 ]]{% endset %}\n\t{% set link6 %}[[ link6 ]]{% endset %}\n\t{% if link6 and not 'http' in link6 %}\n\t\t{% set link6 = 'http://' ~ link6 %}\n\t{% endif %}\n\t\n\t{% set title7 %}[[ title7 ]]{% endset %}\n\t{% set body7 %}[[ body7 ]]{% endset %}\n\t{% set image7 %}[[ image7 ]]{% endset %}\n\t{% set link7 %}[[ link7 ]]{% endset %}\n\t{% if link7 and not 'http' in link7 %}\n\t\t{% set link7 = 'http://' ~ link7 %}\n\t{% endif %}\n\t\n\t{% set title8 %}[[ title8 ]]{% endset %}\n\t{% set body8 %}[[ body8 ]]{% endset %}\n\t{% set image8 %}[[ image8 ]]{% endset %}\n\t{% set link8 %}[[ link8 ]]{% endset %}\n\t{% if link8 and not 'http' in link8 %}\n\t\t{% set link8 = 'http://' ~ link8 %}\n\t{% endif %}\n\t</span>\n\t\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional link\">{% if mainLink %}</span><a href=\"{{ mainLink }}\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t<div class=\"exponea-wrap\">\n\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t<span class=\"exponea-title\" exp-action>[[ mainTitle ]]</span>\n\t\t\t</div>\n\t\t</div>\n\t<span class=\"jinja-hidden\">{% if mainLink %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 1\">{% if title1!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link1 %}</span><a href=\"{{ link1 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image1]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title1 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body1 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link1 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 2\">{% if title2!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link2 %}</span><a href=\"{{ link2 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image2]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title2 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body2 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link2 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\n\t<span class=\"jinja-condition\" title=\"optional block 3\">{% if title3!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link3 %}</span><a href=\"{{ link3 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image3]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title3 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body3 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link3 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 4\">{% if title4!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link4 %}</span><a href=\"{{ link4 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image4]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title4 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body4 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link4 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 5\">{% if title5!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link5 %}</span><a href=\"{{ link5 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image5]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title5 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body5 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link5 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 6\">{% if title6!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link6 %}</span><a href=\"{{ link6 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image6]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title6 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body6 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link6 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 7\">{% if title7!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link7 %}</span><a href=\"{{ link7 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image7]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title7 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body7 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link7 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 8\">{% if title8!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link8 %}</span><a href=\"{{ link8 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('[[image8]]')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>[[ title8 ]]</span>\n\t\t\t\t\t<span class=\"exponea-text\">[[ body8 ]] <span class=\"exponea-more-link\">[[ moreLinkText ]]</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link8 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n</div>","id":0,"name":"Variant A","parametrized_parts":{"html":"<div class=\"exponea-banner exponea-notification\">\n\t<span class=\"jinja-hidden\">\n\t{% set mainTitle %}We're here for you{% endset %}\n\t{% set mainLink %}www.exponea.com{% endset %}\n\t{% if mainLink and not 'http' in mainLink %}\n\t\t{% set mainLink = 'http://' ~ mainLink %}\n\t{% endif %}\n\t\n\t{% set title1 %}How to keep yourself safe{% endset %}\n\t{% set body1 %}Wash your hands thoroughly, avoid touching your face, practice social distancing{% endset %}\n\t{% set image1 %}https://image.flaticon.com/icons/svg/547/547390.svg{% endset %}\n\t{% set link1 %}www.exponea.com{% endset %}\n\t{% if link1 and not 'http' in link1 %}\n\t\t{% set link1 = 'http://' ~ link1 %}\n\t{% endif %}\n\t\n\t{% set title2 %}Stay informed{% endset %}\n\t{% set body2 %}Click here to read up-to-date information on COVID-19{% endset %}\n\t{% set image2 %}https://image.flaticon.com/icons/svg/2150/2150324.svg{% endset %}\n\t{% set link2 %}www.exponea.com{% endset %}\n\t{% if link2 and not 'http' in link2 %}\n\t\t{% set link2 = 'http://' ~ link2 %}\n\t{% endif %}\n\t\n\t{% set title3 %}How are we protecting our employees?{% endset %}\n\t{% set body3 %}All employees that can do so are working from home. All other employees have received PPE and training on best practices.{% endset %}\n\t{% set image3 %}https://image.flaticon.com/icons/svg/687/687532.svg{% endset %}\n\t{% set link3 %}www.exponea.com{% endset %}\n\t{% if link3 and not 'http' in link3 %}\n\t\t{% set link3 = 'http://' ~ link3 %}\n\t{% endif %}\n\t\n\t{% set title4 %}How are we delivering products?{% endset %}\n\t{% set body4 %}We've adopted a contact-free delivery policy to reduce chances of virus transmission{% endset %}\n\t{% set image4 %}https://image.flaticon.com/icons/svg/1727/1727633.svg{% endset %}\n\t{% set link4 %}www.exponea.com{% endset %}\n\t{% if link4 and not 'http' in link4 %}\n\t\t{% set link4 = 'http://' ~ link4 %}\n\t{% endif %}\n\t\n\t{% set title5 %}Will products be delivered on time?{% endset %}\n\t{% set body5 %}Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible.{% endset %}\n\t{% set image5 %}https://image.flaticon.com/icons/svg/1084/1084788.svg{% endset %}\n\t{% set link5 %}www.exponea.com{% endset %}\n\t{% if link5 and not 'http' in link5 %}\n\t\t{% set link5 = 'http://' ~ link5 %}\n\t{% endif %}\n\t\n\t{% set title6 %}Relaxed return policy{% endset %}\n\t{% set body6 %}We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days.{% endset %}\n\t{% set image6 %}https://image.flaticon.com/icons/svg/2394/2394090.svg{% endset %}\n\t{% set link6 %}www.exponea.com{% endset %}\n\t{% if link6 and not 'http' in link6 %}\n\t\t{% set link6 = 'http://' ~ link6 %}\n\t{% endif %}\n\t\n\t{% set title7 %}Managing returned products{% endset %}\n\t{% set body7 %}All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them.{% endset %}\n\t{% set image7 %}https://image.flaticon.com/icons/svg/181/181176.svg{% endset %}\n\t{% set link7 %}www.exponea.com{% endset %}\n\t{% if link7 and not 'http' in link7 %}\n\t\t{% set link7 = 'http://' ~ link7 %}\n\t{% endif %}\n\t\n\t{% set title8 %}We are supporting our community{% endset %}\n\t{% set body8 %}We are donating 10% of all revenue to a COVID-19 medical research fund. {% endset %}\n\t{% set image8 %}https://image.flaticon.com/icons/svg/2654/2654423.svg{% endset %}\n\t{% set link8 %}www.exponea.com{% endset %}\n\t{% if link8 and not 'http' in link8 %}\n\t\t{% set link8 = 'http://' ~ link8 %}\n\t{% endif %}\n\t</span>\n\t\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional link\">{% if mainLink %}</span><a href=\"{{ mainLink }}\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t<div class=\"exponea-wrap\">\n\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t<span class=\"exponea-title\" exp-action>We're here for you</span>\n\t\t\t</div>\n\t\t</div>\n\t<span class=\"jinja-hidden\">{% if mainLink %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 1\">{% if title1!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link1 %}</span><a href=\"{{ link1 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://image.flaticon.com/icons/svg/547/547390.svg')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How to keep yourself safe</span>\n\t\t\t\t\t<span class=\"exponea-text\">Wash your hands thoroughly, avoid touching your face, practice social distancing <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link1 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 2\">{% if title2!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link2 %}</span><a href=\"{{ link2 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://image.flaticon.com/icons/svg/2150/2150324.svg')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Stay informed</span>\n\t\t\t\t\t<span class=\"exponea-text\">Click here to read up-to-date information on COVID-19 <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link2 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\n\t<span class=\"jinja-condition\" title=\"optional block 3\">{% if title3!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link3 %}</span><a href=\"{{ link3 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://image.flaticon.com/icons/svg/687/687532.svg')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How are we protecting our employees?</span>\n\t\t\t\t\t<span class=\"exponea-text\">All employees that can do so are working from home. All other employees have received PPE and training on best practices. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link3 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 4\">{% if title4!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link4 %}</span><a href=\"{{ link4 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://image.flaticon.com/icons/svg/1727/1727633.svg')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>How are we delivering products?</span>\n\t\t\t\t\t<span class=\"exponea-text\">We've adopted a contact-free delivery policy to reduce chances of virus transmission <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link4 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 5\">{% if title5!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link5 %}</span><a href=\"{{ link5 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://image.flaticon.com/icons/svg/1084/1084788.svg')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Will products be delivered on time?</span>\n\t\t\t\t\t<span class=\"exponea-text\">Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link5 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 6\">{% if title6!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link6 %}</span><a href=\"{{ link6 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://image.flaticon.com/icons/svg/2394/2394090.svg')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Relaxed return policy</span>\n\t\t\t\t\t<span class=\"exponea-text\">We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link6 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 7\">{% if title7!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link7 %}</span><a href=\"{{ link7 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://image.flaticon.com/icons/svg/181/181176.svg')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>Managing returned products</span>\n\t\t\t\t\t<span class=\"exponea-text\">All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link7 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n\t\n\t<span class=\"jinja-condition\" title=\"optional block 8\">{% if title8!='' %}</span>\n\t\t<span class=\"jinja-hidden\" title=\"link\">{% if link8 %}</span><a href=\"{{ link8 }}\" class=\"exponea-link\" exp-action><span class=\"jinja-hidden\">{% endif %}</span>\n\t\t\t<div class=\"exponea-wrap\">\n\t\t\t\t<div class=\"exponea-img\" style=\"background-image: url('https://image.flaticon.com/icons/svg/2654/2654423.svg')\"></div>\n\t\t\t\t<div class=\"exponea-text-wrap\">\n\t\t\t\t\t<span class=\"exponea-title\" exp-action>We are supporting our community</span>\n\t\t\t\t\t<span class=\"exponea-text\">We are donating 10% of all revenue to a COVID-19 medical research fund. <span class=\"exponea-more-link\">More...</span></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t<span class=\"jinja-hidden\">{% if link8 %}</span></a><span class=\"jinja-hidden\">{% endif %}</span>\n\t<span class=\"jinja-hidden\">{% endif %}</span>\n</div>","script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 2000\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-notification\").forEach(a=>a.parentNode.removeChild(a))}};","sdk_object_name":"exponea","style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'right' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '10px' %}\n {%- set offsetVertical = '10px' %}\n {%- set bannerHeight = '80px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '520px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '#CDE2ED' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '5px' %}\n {%- set bannerPadding = '0 0 0 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'horizontal' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '0.9em' %}\n {%- set fontWeight = '600' %}\n \n {#- Text variables #}\n {%- set textMargin = '1.1em 1.7em 1em 1.4em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '#1c1733' %}\n {%- set textLineHeight = '1.2' %}\n\n {#- Title variables #}\n {%- set titleColor = '#1c1733' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleMargin = '0 0 5px 0' %}\n\n {#- Image variables #}\n {%- set imgURL = 'https://cdn3.vectorstock.com/i/1000x1000/66/82/please-wash-your-hands-vector-18606682.jpg' %}\n {%- set imgMargin = 'auto 15px auto 0' %}\n {%- set imgHeight = '50px' %}\n {%- set imgWidth = '50px' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '#1c1733' %}\n {%- set closeLeftRight = 'right' %} {#- Optional: 'left', 'right' or '' #}\n \n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '400px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '150px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '10px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '10px' %} \n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\t max-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\t height: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n {{- printDisplayFlex() }}\n }\n .exponea-banner.exponea-action .exponea-wrap .exponea-text-wrap {\n {{- printAttributeWithCalc('width', '100% - ( ' ~ imgWidth ~ ' + 10px ) ' ) }}\n }\n {#- Links #}\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n display: block;\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin}};\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n text-align: {{ textAlign }};\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Div whose background will be the image #}\n.exponea-banner .exponea-img {\n {{- printAttributeWithCalc('max-height', imgHeight ) }}\n {{- printAttributeWithCalc('max-width', imgWidth ) }}\n height: 100px;\n width: 100%;\n margin: {{ imgMargin }};\n background: url('{{- imgURL }}');\n {{- printBackgroundSize('cover') }}\n background-repeat: no-repeat;\n background-position: center top;\n background-size: 80% auto;\n margin-top: -4px;\n vertical-align: middle;\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .exponea-img {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\nmargin-left: 0;\nmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n\n.exponea-more-link {\n\tcolor: #BB0000;\n\tfont-weight: normal;\n\ttext-decoration: underline;\n\tdisplay: none;\n}\n\n.exponea-link .exponea-more-link {\n\tdisplay: inline-block;\n}\n\n.jinja-hidden {\n\tdisplay: none;\n}\n\n.jinja-condition:not(:empty) {\n\tcolor: transparent;\n\tfont-size: 0;\n\theight: 0;\n\tposition: relative;\n\tdisplay: block;\n\tmargin: 0;\n}\n.jinja-condition:not(:empty)::before {\n\tcontent: attr(title);\n\tfont-size: 10px;\n\tbackground: black;\n\tcolor: white;\n\tpadding: 1px 4px;\n\tfont-weight: normal;\n\topacity: 0.25;\n\tposition: absolute;\n\ttop: 0;\n\twhite-space: nowrap;\n}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}"},"params":{"backgroundColor":"#CDE2ED","bannerLink":"https://www.exponea.com","bannerShowDelayInMilliseconds":"0","body1":"Wash your hands thoroughly, avoid touching your face, practice social distancing","body2":"Click here to read up-to-date information on COVID-19","body3":"All employees that can do so are working from home. All other employees have received PPE and training on best practices.","body4":"We've adopted a contact-free delivery policy to reduce chances of virus transmission","body5":"Many companies are facing delays in deliveries due to supply chain challenges. We are working with our logistic partners to make sure your products are delivered to your door as soon as possible, but please be aware that delays are possible.","body6":"We know logistical issues affect you as well, so we have relaxed our return policy from 30 days to 90 days.","body7":"All returned products are disinfected and isolated for at least 72 hours to ensure no contamination survives on them.","body8":"We are donating 10% of all revenue to a COVID-19 medical research fund. ","bodyText":"Subscribe now and get 50% discount for first three months.","bodyTextColor":"#1c1733","buttonBackgroundColor":"#1c1733","buttonText":"Subscribe","buttonTextColor":"#ffffff","closeButtonColor":"#1c1733","headerText":"MyNews.com","headerTextColor":"#1c1733","image1":"https://image.flaticon.com/icons/svg/547/547390.svg","image2":"https://image.flaticon.com/icons/svg/2150/2150324.svg","image3":"https://image.flaticon.com/icons/svg/687/687532.svg","image4":"https://image.flaticon.com/icons/svg/1727/1727633.svg","image5":"https://image.flaticon.com/icons/svg/1084/1084788.svg","image6":"https://image.flaticon.com/icons/svg/2394/2394090.svg","image7":"https://image.flaticon.com/icons/svg/181/181176.svg","image8":"https://image.flaticon.com/icons/svg/2654/2654423.svg","imageUrl":"https://cdn3.vectorstock.com/i/1000x1000/66/82/please-wash-your-hands-vector-18606682.jpg","link1":"www.exponea.com","link2":"www.exponea.com","link3":"www.exponea.com","link4":"www.exponea.com","link5":"www.exponea.com","link6":"www.exponea.com","link7":"www.exponea.com","link8":"www.exponea.com","linkColor":"#BB0000","mainLink":"www.exponea.com","mainTitle":"We're here for you","moreLinkText":"More...","notificationText":"Enjoy our selection of discounted products!","notificationTextColor":"#ffffff","secondaryColor":"#ffffff","title1":"How to keep yourself safe","title2":"Stay informed","title3":"How are we protecting our employees?","title4":"How are we delivering products?","title5":"Will products be delivered on time?","title6":"Relaxed return policy","title7":"Managing returned products","title8":"We are supporting our community","titleText":"Happy Shopping!","titleTextColor":"#1c1733"},"percentage":100,"script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 2000\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-notification\").forEach(a=>a.parentNode.removeChild(a))}};","source_mode":true,"style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'right' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '10px' %}\n {%- set offsetVertical = '10px' %}\n {%- set bannerHeight = '80px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '520px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '[[ backgroundColor ]]' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '5px' %}\n {%- set bannerPadding = '0 0 0 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'horizontal' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '0.9em' %}\n {%- set fontWeight = '600' %}\n \n {#- Text variables #}\n {%- set textMargin = '1.1em 1.7em 1em 1.4em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '[[ bodyTextColor ]]' %}\n {%- set textLineHeight = '1.2' %}\n\n {#- Title variables #}\n {%- set titleColor = '[[ titleTextColor ]]' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleMargin = '0 0 5px 0' %}\n\n {#- Image variables #}\n {%- set imgURL = '[[ imageUrl ]]' %}\n {%- set imgMargin = 'auto 15px auto 0' %}\n {%- set imgHeight = '50px' %}\n {%- set imgWidth = '50px' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '[[closeButtonColor]]' %}\n {%- set closeLeftRight = 'right' %} {#- Optional: 'left', 'right' or '' #}\n \n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '400px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '150px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '10px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '10px' %} \n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\t max-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\t height: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n {{- printDisplayFlex() }}\n }\n .exponea-banner.exponea-action .exponea-wrap .exponea-text-wrap {\n {{- printAttributeWithCalc('width', '100% - ( ' ~ imgWidth ~ ' + 10px ) ' ) }}\n }\n {#- Links #}\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n display: block;\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin}};\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n text-align: {{ textAlign }};\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n {{- printFlex('0', '1', '100%') }}\n }\n {#- Div whose background will be the image #}\n.exponea-banner .exponea-img {\n {{- printAttributeWithCalc('max-height', imgHeight ) }}\n {{- printAttributeWithCalc('max-width', imgWidth ) }}\n height: 100px;\n width: 100%;\n margin: {{ imgMargin }};\n background: url('{{- imgURL }}');\n {{- printBackgroundSize('cover') }}\n background-repeat: no-repeat;\n background-position: center top;\n background-size: 80% auto;\n margin-top: -4px;\n vertical-align: middle;\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .exponea-img {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\nmargin-left: 0;\nmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n\n.exponea-more-link {\n\tcolor: [[ linkColor ]];\n\tfont-weight: normal;\n\ttext-decoration: underline;\n\tdisplay: none;\n}\n\n.exponea-link .exponea-more-link {\n\tdisplay: inline-block;\n}\n\n.jinja-hidden {\n\tdisplay: none;\n}\n\n.jinja-condition:not(:empty) {\n\tcolor: transparent;\n\tfont-size: 0;\n\theight: 0;\n\tposition: relative;\n\tdisplay: block;\n\tmargin: 0;\n}\n.jinja-condition:not(:empty)::before {\n\tcontent: attr(title);\n\tfont-size: 10px;\n\tbackground: black;\n\tcolor: white;\n\tpadding: 1px 4px;\n\tfont-weight: normal;\n\topacity: 0.25;\n\tposition: absolute;\n\ttop: 0;\n\twhite-space: nowrap;\n}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b491d5a9d18682282984d","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e79d8da6815dccfcf63dd95","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname \n };\n}","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":1,"name":"Quick Info - Sticky Under Header","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<a class=\"exponea-banner exponea-leaderboard\" href=\"[[ 10BannerLink ]]\">\n <span class=\"exponea-text\"><span class=\"exponea-text-before\"></span>[[exponeaText]]<span class=\"exponea-text-after\"></span></span>\n <span class=\"exponea-close\"><span class=\"exponea-close-cross\"></span></span>\n</a>","id":0,"name":"Variant A","parametrized_parts":{"html":"<a class=\"exponea-banner exponea-leaderboard\" href=\"https://ecommerce.exponea.com\">\n <span class=\"exponea-text\"><span class=\"exponea-text-before\"></span>We are continuing to safely deliver your items<span class=\"exponea-text-after\"></span></span>\n <span class=\"exponea-close\"><span class=\"exponea-close-cross\"></span></span>\n</a>","script":"// console.log('banner called');\n\nvar self = this;\nvar showDelay = parseInt('0' || '0', 10);\nwindow.exp_cartChangeIntervals = [];\n\nsetTimeout(function() {\n self.sdk.track('banner', getEventProperties('show', false));\n requestAnimationFrame(function () {\n document.body.insertAdjacentHTML('afterbegin', self.html);\n var banner = self.banner = document.querySelector('.exponea-leaderboard');\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\n var btnClose = banner.querySelector('.exponea-close');\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\n btnClose.onclick = function (e) {\n removeBanner();\n self.sdk.track('banner', getEventProperties('close'));\n e.preventDefault();\n if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; }\n return false;\n }\n\t\t});\n});\nfunction getEventProperties(action, interactive) {\n return { action: action, banner_id: self.data.banner_id, banner_name: self.data.banner_name, banner_type: self.data.banner_type, variant_id: self.data.variant_id, variant_name: self.data.variant_name, interaction: interactive !== false ? true : false, location: window.location.href, path: window.location.pathname };\n}\n\nfunction removeBanner() {\n if (self.banner) {\n self.banner.parentNode.removeChild(self.banner);\n }\n}\n\n\nreturn {\n remove: removeBanner\n};","sdk_object_name":"exponea","style":"{%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n@import url('{{ fontSource }}');\n \n.exponea-leaderboard {\n display: block;\nwidth: 100%;\nz-index: 9999999;\nbackground: #40e3c5;\nfont-family: 'Lato','PT Sans', Arial, Helvetica, sans-serif;\nfont-size: 24px;\nline-height: normal;\ntext-decoration: inherit;\ntext-align: center;\ncursor: pointer;\ntransition: background 0.3s;\n\n}\n\n.exponea-leaderboard, .exponea-leaderboard * {\n box-sizing: content-box;\n\n}\n\n.exponea-leaderboard:hover, .exponea-leaderboard:active {\n text-decoration: inherit;\n\n}\n\n.exponea-leaderboard span {\n display: inline-block;\n\n}\n\n.exponea-leaderboard .exponea-text {\n font-size: 24px;\nfont-weight: 500;\ncolor: #000000;\nmargin: 2px 24px;\nfont-size: 18px;\npadding: 8px 0;\n\n}\n\n.exponea-leaderboard .exponea-text strong {\n color: #ffcd00;\n\n}\n\n.exponea-leaderboard .exponea-close {\n padding: 15px;\nposition: absolute;\ntop: 0px;\nright: 0px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross {\n position: absolute;\ndisplay: inline-block;\nwidth: 14px;\nheight: 14px;\noverflow: hidden;\ntop: 8px;\nright: 8px;\n\n}\n\n.exponea-leaderboard .exponea-close:hover {\n cursor: pointer;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before, .exponea-leaderboard .exponea-close .exponea-close-cross:after {\n content: '';\nposition: absolute;\nheight: 2px;\nwidth: 100%;\ntop: 50%;\nleft: 0;\nmargin-top: -1px;\nbackground: #ffffff;\nheight: 1px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before {\n -webkit-transform: rotate(45deg);\ntransform: rotate(45deg);\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:after {\n -webkit-transform: rotate(45deg);\ntransform: rotate(-45deg);\n\n}\n\n@media (max-width: 660px) {\n .exponea-leaderboard {\n text-align: center;\n\n}\n\n \n}"},"params":{"10BannerLink":"https://ecommerce.exponea.com","11BodyTextColor":"#000000","12CloseButtonColor":"#ffffff","13DelayToShowBannerInMilliseconds":"0","1CartValueLimitInDefaultCurrency":"139","2CartValueDefaultCurrencyCode":"","3CartValueDefaultCurrencySymbol":"€","4TextInFrontOfLimitIfBelowLimit":"ORDER FOR","5TextAfterLimitIfBelowLimit":" MORE AND GET FREE DELIVERY","6TextInFrontOfLimitIfLimitHit":"FREE DELIVERY ON ORDERS OVER ","7TextAfterLimitIfLimitHit":"","8BackgroundColor":"#40e3c5","8BackgroundColorIfBelowLimit":"#000000","8backgroundColorIfBelowLimit":"#ffffff","9BackgroundColorIfLimitHit":"#000000","backgroundColor":"#b40000","backgroundColorAboveLimit":"#e0c5c5","backgroundColorBelowLimit":"#b40000","backgroundColorIfBelowLimit":"#b40000","backgroundColorIfLimitHit":"#e0c5c5","bannerLink":"https://finlaysonshop.com/collections/all?search_limit=12&search_offset=0&search_slot=collections%2Fall&search_sort%5B0%5D%5Bfield%5D=price&search_sort%5B0%5D%5Border%5D=asc","bannerShowDelayInMilliseconds":"2500","bodyText":"You are just [[ calc ]] from free shipping! ","bodyTextColor":"#ffffff","buttonBackgroundColor":"#f52323","buttonText":"","buttonTextColor":"#ffffff","calc":"{{ 95 - aggregates['5a2a65c5fb6009040f8365e7'] }}","cartValueDefaultCurrencyCode":"EUR","cartValueDefaultCurrencySymbol":"€","cartValueLimit":"100","cartValueLimitInDefaultCurrency":"100","closeButtonColor":"#ffffff","defaultCurrency":"€","defaultCurrencyCode":"EUR","defaultCurrencySymbol":"€","exponeaText":"We are continuing to safely deliver your items","headerText":"MyNews.com","headerTextColor":"#1c1733","textAfterAboveLimit":" :N OSTOKSIIN ","textAfterBelowLimit":" EDESTÄ NIIN SAAT ILMAISEN TOIMITUKSEN","textAfterLimitIfBelowLimit":" EDESTÄ NIIN SAAT ILMAISEN TOIMITUKSEN","textAfterLimitIfLimitHit":" :N OSTOKSIIN ","textAftereBelowLimit":" € EDESTÄ NIIN SAAT ILMAISEN TOIMITUKSEN","textBeforeAboveLimit":"ILMAINEN TOIMITUS YLI ","textBeforeBelowLimit":"TILAA VIELÄ ","textInFrontOfLimitIfBelowLimit":"TILAA VIELÄ ","textInFrontOfLimitIfLimitHit":"ILMAINEN TOIMITUS YLI "},"percentage":100,"script":"// console.log('banner called');\n\nvar self = this;\nvar showDelay = parseInt('[[ 13DelayToShowBannerInMilliseconds ]]' || '0', 10);\nwindow.exp_cartChangeIntervals = [];\n\nsetTimeout(function() {\n self.sdk.track('banner', getEventProperties('show', false));\n requestAnimationFrame(function () {\n document.body.insertAdjacentHTML('afterbegin', self.html);\n var banner = self.banner = document.querySelector('.exponea-leaderboard');\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\n var btnClose = banner.querySelector('.exponea-close');\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\n btnClose.onclick = function (e) {\n removeBanner();\n self.sdk.track('banner', getEventProperties('close'));\n e.preventDefault();\n if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; }\n return false;\n }\n\t\t});\n});\nfunction getEventProperties(action, interactive) {\n return { action: action, banner_id: self.data.banner_id, banner_name: self.data.banner_name, banner_type: self.data.banner_type, variant_id: self.data.variant_id, variant_name: self.data.variant_name, interaction: interactive !== false ? true : false, location: window.location.href, path: window.location.pathname };\n}\n\nfunction removeBanner() {\n if (self.banner) {\n self.banner.parentNode.removeChild(self.banner);\n }\n}\n\n\nreturn {\n remove: removeBanner\n};","source_mode":true,"style":"{%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n@import url('{{ fontSource }}');\n \n.exponea-leaderboard {\n display: block;\nwidth: 100%;\nz-index: 9999999;\nbackground: [[ 8BackgroundColor ]];\nfont-family: 'Lato','PT Sans', Arial, Helvetica, sans-serif;\nfont-size: 24px;\nline-height: normal;\ntext-decoration: inherit;\ntext-align: center;\ncursor: pointer;\ntransition: background 0.3s;\n\n}\n\n.exponea-leaderboard, .exponea-leaderboard * {\n box-sizing: content-box;\n\n}\n\n.exponea-leaderboard:hover, .exponea-leaderboard:active {\n text-decoration: inherit;\n\n}\n\n.exponea-leaderboard span {\n display: inline-block;\n\n}\n\n.exponea-leaderboard .exponea-text {\n font-size: 24px;\nfont-weight: 500;\ncolor: [[ 11BodyTextColor ]];\nmargin: 2px 24px;\nfont-size: 18px;\npadding: 8px 0;\n\n}\n\n.exponea-leaderboard .exponea-text strong {\n color: #ffcd00;\n\n}\n\n.exponea-leaderboard .exponea-close {\n padding: 15px;\nposition: absolute;\ntop: 0px;\nright: 0px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross {\n position: absolute;\ndisplay: inline-block;\nwidth: 14px;\nheight: 14px;\noverflow: hidden;\ntop: 8px;\nright: 8px;\n\n}\n\n.exponea-leaderboard .exponea-close:hover {\n cursor: pointer;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before, .exponea-leaderboard .exponea-close .exponea-close-cross:after {\n content: '';\nposition: absolute;\nheight: 2px;\nwidth: 100%;\ntop: 50%;\nleft: 0;\nmargin-top: -1px;\nbackground: [[ 12CloseButtonColor ]];\nheight: 1px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before {\n -webkit-transform: rotate(45deg);\ntransform: rotate(45deg);\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:after {\n -webkit-transform: rotate(45deg);\ntransform: rotate(-45deg);\n\n}\n\n@media (max-width: 660px) {\n .exponea-leaderboard {\n text-align: center;\n\n}\n\n \n}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":true},"id":"5e7b491e5a9d186822829861","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e74ce1f8e8b1d439cef6973","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}\n","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Top of the page banner","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<div class=\"exponea-banner exponea-covid-19\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<a href=\"[[bannerLink]]\" exp-action>\n\t\t<span class=\"exponea-title\" >[[ titleText ]]</span>\n\t\t<span class=\"exponea-text\">[[ bodyText ]]</span>\n\t</a>\n</div>","id":0,"name":"Variant A","parametrized_parts":{"html":"<div class=\"exponea-banner exponea-covid-19\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<a href=\"\" exp-action>\n\t\t<span class=\"exponea-title\" >COVID-19 Update</span>\n\t\t<span class=\"exponea-text\">You can still shop online with us! Learn what we are doing to keep you safe</span>\n\t</a>\n</div>","script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n\tconsole.log(banner)\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-covid-19\").forEach(a=>a.parentNode.removeChild(a))}};","sdk_object_name":"exponea","style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'center' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '0px' %}\n {%- set offsetVertical = '0px' %}\n {%- set bannerHeight = '90px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '100%' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '#000000' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '0px' %}\n {%- set bannerPadding = '0 0 1em 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.2em 1.8em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '#ffffff' %}\n {%- set textLineHeight = '1.5' %}\n\n {#- Title variables #}\n {%- set titleColor = '#ffd500' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleAlign = 'left' %}\n {%- set titleMargin = '1em 2.2em 0 2.2em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '#ffffff' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '110px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '0px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '0px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n\t {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a,\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin }};\n display: block;\n {%- if titleAlign != \"center\" %}\n {{- printAttributeWithCalc('padding-' ~ closeLeftRight, ' 2 * ' ~ closeSize ) }}\n {%- endif %}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n margin: {{ titleMargin}};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}"},"params":{"ButtonColor":"#ffffff","ButtonTextColor":"#ffffff","backgroundColor":"#000000","bannerLink":"","bannerShowDelayInMilliseconds":"0","bodyText":"You can still shop online with us! Learn what we are doing to keep you safe","bodyTextColor":"#ffffff","buttonText":"Default button text","closeButtonColor":"#ffffff","headerText":"","headerTextColor":"#ffd500","primaryColor":"#1c1733","secondaryColor":"#ffd500","strongColor":"#ffffff","tertiaryColor":"#ffffff","textColor":"#ffffff","titleText":"COVID-19 Update","titleTextColor":"#ffd500"},"percentage":100,"script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n\tconsole.log(banner)\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-covid-19\").forEach(a=>a.parentNode.removeChild(a))}};","source_mode":true,"style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'center' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '0px' %}\n {%- set offsetVertical = '0px' %}\n {%- set bannerHeight = '90px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '100%' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '[[ backgroundColor ]]' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '0px' %}\n {%- set bannerPadding = '0 0 1em 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.2em 1.8em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '[[ bodyTextColor ]]' %}\n {%- set textLineHeight = '1.5' %}\n\n {#- Title variables #}\n {%- set titleColor = '[[ titleTextColor ]]' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleAlign = 'left' %}\n {%- set titleMargin = '1em 2.2em 0 2.2em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '[[closeButtonColor]]' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '110px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '0px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '0px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n\t {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a,\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin }};\n display: block;\n {%- if titleAlign != \"center\" %}\n {{- printAttributeWithCalc('padding-' ~ closeLeftRight, ' 2 * ' ~ closeSize ) }}\n {%- endif %}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n margin: {{ titleMargin}};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b491d5a9d186822829848","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":true,"cloned_from_id":"5e78943369023c2974a79f08","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}\n","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Top of the page banner v2 - Copy","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<div class=\"exponea-banner exponea-leaderboard\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<a href=\"[[bannerLink]]\" exp-action>\n\t\t<span class=\"exponea-title\" >[[ titleText ]]</span>\n\t\t<span class=\"exponea-text\">[[ bodyText ]]</span>\n\t</a>\n</div>","id":0,"name":"Variant A","parametrized_parts":{"html":"<div class=\"exponea-banner exponea-leaderboard\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<a href=\"\" exp-action>\n\t\t<span class=\"exponea-title\" >COVID-19 Update</span>\n\t\t<span class=\"exponea-text\">You can still shop online with us! Learn what we are doing to keep you safe</span>\n\t</a>\n</div>","script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-leaderboard\").forEach(a=>a.parentNode.removeChild(a))}};","sdk_object_name":"exponea","style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'center' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '0px' %}\n {%- set offsetVertical = '0px' %}\n {%- set bannerHeight = '90px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '100%' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '#2dab4c' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '0px' %}\n {%- set bannerPadding = '0 0 1em 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.2em 1.8em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '#ffffff' %}\n {%- set textLineHeight = '1.5' %}\n\n {#- Title variables #}\n {%- set titleColor = '#ffd500' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleAlign = 'left' %}\n {%- set titleMargin = '1em 2.2em 0 2.2em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '#ffffff' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '110px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '0px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '0px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n\t {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a,\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin }};\n display: block;\n {%- if titleAlign != \"center\" %}\n {{- printAttributeWithCalc('padding-' ~ closeLeftRight, ' 2 * ' ~ closeSize ) }}\n {%- endif %}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n margin: {{ titleMargin}};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}"},"params":{"ButtonColor":"#ffffff","ButtonTextColor":"#ffffff","backgroundColor":"#2dab4c","bannerLink":"","bannerShowDelayInMilliseconds":"0","bodyText":"You can still shop online with us! Learn what we are doing to keep you safe","bodyTextColor":"#ffffff","buttonText":"Default button text","closeButtonColor":"#ffffff","headerText":"","headerTextColor":"#ffd500","primaryColor":"#1c1733","secondaryColor":"#ffd500","strongColor":"#ffffff","tertiaryColor":"#ffffff","textColor":"#ffffff","titleText":"COVID-19 Update","titleTextColor":"#ffd500"},"percentage":100,"script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-leaderboard\").forEach(a=>a.parentNode.removeChild(a))}};","source_mode":true,"style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'center' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '0px' %}\n {%- set offsetVertical = '0px' %}\n {%- set bannerHeight = '90px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '100%' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '[[ backgroundColor ]]' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '0px' %}\n {%- set bannerPadding = '0 0 1em 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.2em 1.8em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '[[ bodyTextColor ]]' %}\n {%- set textLineHeight = '1.5' %}\n\n {#- Title variables #}\n {%- set titleColor = '[[ titleTextColor ]]' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleAlign = 'left' %}\n {%- set titleMargin = '1em 2.2em 0 2.2em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '[[closeButtonColor]]' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '110px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '0px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '0px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n\t {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a,\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin }};\n display: block;\n {%- if titleAlign != \"center\" %}\n {{- printAttributeWithCalc('padding-' ~ closeLeftRight, ' 2 * ' ~ closeSize ) }}\n {%- endif %}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n margin: {{ titleMargin}};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b491e5a9d186822829852","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":true,"cloned_from_id":"5e7a2452a384328567d8f760","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname \n };\n}","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"always","general_consent":true,"is_global_object":false,"last_variant_id":1,"name":"Top of the page informative banner - sticks to the top - with icons","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<a class=\"exponea-banner exponea-leaderboard\" href=\"[[ BannerLink ]]\">\n <span class=\"exponea-text\"><img class=\"exponea-image\" src=\"[[imageBefore]]\"/> [[exponeaText]]<img class=\"exponea-image\" src=\"[[imageAfter]]\" /></span></span>\n <span class=\"exponea-close\"><span class=\"exponea-close-cross\"></span></span>\n</a>","id":0,"name":"Variant A","parametrized_parts":{"html":"<a class=\"exponea-banner exponea-leaderboard\" href=\"\">\n <span class=\"exponea-text\"><img class=\"exponea-image\" src=\"https://cdn.exponea.com/exponea-delivery-team/f/14e5f029244a12041e32e4502a55d35e07e350fdb3b780908ed8542d79b32a9b\"/> Latest updates on COVID-19 situation located here<img class=\"exponea-image\" src=\"https://cdn.exponea.com/exponea-delivery-team/f/105d83f73c28013ee408ecd18cd0a025a05da4247292db4b2df57ee66e0ae68c\" /></span></span>\n <span class=\"exponea-close\"><span class=\"exponea-close-cross\"></span></span>\n</a>","script":"// console.log('banner called');\n\nvar self = this;\nvar showDelay = parseInt('0' || '0', 10);\nwindow.exp_cartChangeIntervals = [];\n\nsetTimeout(function() {\n self.sdk.track('banner', getEventProperties('show', false));\n requestAnimationFrame(function () {\n document.body.insertAdjacentHTML('afterbegin', self.html);\n var banner = self.banner = document.querySelector('.exponea-leaderboard');\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\n var btnClose = banner.querySelector('.exponea-close');\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\n btnClose.onclick = function (e) {\n removeBanner();\n self.sdk.track('banner', getEventProperties('close'));\n e.preventDefault();\n if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; }\n return false;\n }\n\t\t});\n});\nfunction getEventProperties(action, interactive) {\n return { action: action, banner_id: self.data.banner_id, banner_name: self.data.banner_name, banner_type: self.data.banner_type, variant_id: self.data.variant_id, variant_name: self.data.variant_name, interaction: interactive !== false ? true : false, location: window.location.href, path: window.location.pathname };\n}\n\nfunction removeBanner() {\n if (self.banner) {\n self.banner.parentNode.removeChild(self.banner);\n }\n}\n\n\nreturn {\n remove: removeBanner\n};","sdk_object_name":"exponea","style":"{%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n@import url('{{ fontSource }}');\n \n.exponea-leaderboard {\n display: block;\nwidth: 100%;\nz-index: 9999999;\nbackground: #000000;\nfont-family: 'Lato','PT Sans', Arial, Helvetica, sans-serif;\nfont-size: 24px;\nline-height: normal;\ntext-decoration: inherit;\ntext-align: center;\ncursor: pointer;\ntransition: background 0.3s;\n\n}\n\n.exponea-leaderboard, .exponea-leaderboard * {\n box-sizing: content-box;\n\n}\n\n.exponea-leaderboard:hover, .exponea-leaderboard:active {\n text-decoration: inherit;\n\n}\n\n.exponea-leaderboard span {\n display: inline-block;\n\n}\n\n.exponea-leaderboard .exponea-text {\n font-size: 24px;\nfont-weight: 500;\ncolor: #ffffff;\nmargin: 2px 24px;\nfont-size: 18px;\npadding: 8px 0;\n\n}\n\n.exponea-leaderboard .exponea-image {\n font-size: 24px;\nfont-weight: 500;\ncolor: #ffffff;\nmargin: 2px 4px;\nfont-size: 18px;\npadding: 0px ;\n}\n\n\n.exponea-leaderboard .exponea-text {\n font-size: 24px;\nfont-weight: 500;\ncolor: #ffffff;\nmargin: 2px 24px;\nfont-size: 18px;\npadding: 8px 0;\n\n}\n\n.exponea-leaderboard .exponea-text strong {\n color: #ffcd00;\n\n}\n\n.exponea-leaderboard .exponea-close {\n padding: 15px;\nposition: absolute;\ntop: 0px;\nright: 0px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross {\n position: absolute;\ndisplay: inline-block;\nwidth: 14px;\nheight: 14px;\noverflow: hidden;\ntop: 8px;\nright: 8px;\n\n}\n\n.exponea-leaderboard .exponea-close:hover {\n cursor: pointer;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before, .exponea-leaderboard .exponea-close .exponea-close-cross:after {\n content: '';\nposition: absolute;\nheight: 2px;\nwidth: 100%;\ntop: 50%;\nleft: 0;\nmargin-top: -1px;\nbackground: #ffffff;\nheight: 1px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before {\n -webkit-transform: rotate(45deg);\ntransform: rotate(45deg);\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:after {\n -webkit-transform: rotate(45deg);\ntransform: rotate(-45deg);\n\n}\n\n@media (max-width: 660px) {\n .exponea-leaderboard {\n text-align: center;\n\n}\n\n \n}"},"params":{"10BannerLink":"https://ecommerce.exponea.com","11BodyTextColor":"#ffffff","12CloseButtonColor":"#ffffff","13DelayToShowBannerInMilliseconds":"0","1CartValueLimitInDefaultCurrency":"139","2CartValueDefaultCurrencyCode":"","3CartValueDefaultCurrencySymbol":"€","4TextInFrontOfLimitIfBelowLimit":"ORDER FOR","5TextAfterLimitIfBelowLimit":" MORE AND GET FREE DELIVERY","6TextInFrontOfLimitIfLimitHit":"FREE DELIVERY ON ORDERS OVER ","7TextAfterLimitIfLimitHit":"","8BackgroundColor":"#000000","8BackgroundColorIfBelowLimit":"#000000","8backgroundColorIfBelowLimit":"#ffffff","9BackgroundColorIfLimitHit":"#000000","backgroundColor":"#b40000","backgroundColorAboveLimit":"#e0c5c5","backgroundColorBelowLimit":"#b40000","backgroundColorIfBelowLimit":"#b40000","backgroundColorIfLimitHit":"#e0c5c5","bannerLink":"https://finlaysonshop.com/collections/all?search_limit=12&search_offset=0&search_slot=collections%2Fall&search_sort%5B0%5D%5Bfield%5D=price&search_sort%5B0%5D%5Border%5D=asc","bannerShowDelayInMilliseconds":"2500","bodyText":"You are just [[ calc ]] from free shipping! ","bodyTextColor":"#ffffff","buttonBackgroundColor":"#f52323","buttonText":"","buttonTextColor":"#ffffff","calc":"{{ 95 - aggregates['5a2a65c5fb6009040f8365e7'] }}","cartValueDefaultCurrencyCode":"EUR","cartValueDefaultCurrencySymbol":"€","cartValueLimit":"100","cartValueLimitInDefaultCurrency":"100","closeButtonColor":"#ffffff","defaultCurrency":"€","defaultCurrencyCode":"EUR","defaultCurrencySymbol":"€","exponeaText":"Latest updates on COVID-19 situation located here","headerText":"MyNews.com","headerTextColor":"#1c1733","imageAfter":"https://cdn.exponea.com/exponea-delivery-team/f/105d83f73c28013ee408ecd18cd0a025a05da4247292db4b2df57ee66e0ae68c","imageBefore":"https://cdn.exponea.com/exponea-delivery-team/f/14e5f029244a12041e32e4502a55d35e07e350fdb3b780908ed8542d79b32a9b","textAfterAboveLimit":" :N OSTOKSIIN ","textAfterBelowLimit":" EDESTÄ NIIN SAAT ILMAISEN TOIMITUKSEN","textAfterLimitIfBelowLimit":" EDESTÄ NIIN SAAT ILMAISEN TOIMITUKSEN","textAfterLimitIfLimitHit":" :N OSTOKSIIN ","textAftereBelowLimit":" € EDESTÄ NIIN SAAT ILMAISEN TOIMITUKSEN","textBeforeAboveLimit":"ILMAINEN TOIMITUS YLI ","textBeforeBelowLimit":"TILAA VIELÄ ","textInFrontOfLimitIfBelowLimit":"TILAA VIELÄ ","textInFrontOfLimitIfLimitHit":"ILMAINEN TOIMITUS YLI "},"percentage":90,"script":"// console.log('banner called');\n\nvar self = this;\nvar showDelay = parseInt('[[ 13DelayToShowBannerInMilliseconds ]]' || '0', 10);\nwindow.exp_cartChangeIntervals = [];\n\nsetTimeout(function() {\n self.sdk.track('banner', getEventProperties('show', false));\n requestAnimationFrame(function () {\n document.body.insertAdjacentHTML('afterbegin', self.html);\n var banner = self.banner = document.querySelector('.exponea-leaderboard');\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\n var btnClose = banner.querySelector('.exponea-close');\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\n btnClose.onclick = function (e) {\n removeBanner();\n self.sdk.track('banner', getEventProperties('close'));\n e.preventDefault();\n if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; }\n return false;\n }\n\t\t});\n});\nfunction getEventProperties(action, interactive) {\n return { action: action, banner_id: self.data.banner_id, banner_name: self.data.banner_name, banner_type: self.data.banner_type, variant_id: self.data.variant_id, variant_name: self.data.variant_name, interaction: interactive !== false ? true : false, location: window.location.href, path: window.location.pathname };\n}\n\nfunction removeBanner() {\n if (self.banner) {\n self.banner.parentNode.removeChild(self.banner);\n }\n}\n\n\nreturn {\n remove: removeBanner\n};","source_mode":true,"style":"{%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n@import url('{{ fontSource }}');\n \n.exponea-leaderboard {\n display: block;\nwidth: 100%;\nz-index: 9999999;\nbackground: [[ 8BackgroundColor ]];\nfont-family: 'Lato','PT Sans', Arial, Helvetica, sans-serif;\nfont-size: 24px;\nline-height: normal;\ntext-decoration: inherit;\ntext-align: center;\ncursor: pointer;\ntransition: background 0.3s;\n\n}\n\n.exponea-leaderboard, .exponea-leaderboard * {\n box-sizing: content-box;\n\n}\n\n.exponea-leaderboard:hover, .exponea-leaderboard:active {\n text-decoration: inherit;\n\n}\n\n.exponea-leaderboard span {\n display: inline-block;\n\n}\n\n.exponea-leaderboard .exponea-text {\n font-size: 24px;\nfont-weight: 500;\ncolor: [[ 11BodyTextColor ]];\nmargin: 2px 24px;\nfont-size: 18px;\npadding: 8px 0;\n\n}\n\n.exponea-leaderboard .exponea-image {\n font-size: 24px;\nfont-weight: 500;\ncolor: [[ 11BodyTextColor ]];\nmargin: 2px 4px;\nfont-size: 18px;\npadding: 0px ;\n}\n\n\n.exponea-leaderboard .exponea-text {\n font-size: 24px;\nfont-weight: 500;\ncolor: [[ 11BodyTextColor ]];\nmargin: 2px 24px;\nfont-size: 18px;\npadding: 8px 0;\n\n}\n\n.exponea-leaderboard .exponea-text strong {\n color: #ffcd00;\n\n}\n\n.exponea-leaderboard .exponea-close {\n padding: 15px;\nposition: absolute;\ntop: 0px;\nright: 0px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross {\n position: absolute;\ndisplay: inline-block;\nwidth: 14px;\nheight: 14px;\noverflow: hidden;\ntop: 8px;\nright: 8px;\n\n}\n\n.exponea-leaderboard .exponea-close:hover {\n cursor: pointer;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before, .exponea-leaderboard .exponea-close .exponea-close-cross:after {\n content: '';\nposition: absolute;\nheight: 2px;\nwidth: 100%;\ntop: 50%;\nleft: 0;\nmargin-top: -1px;\nbackground: [[ 12CloseButtonColor ]];\nheight: 1px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before {\n -webkit-transform: rotate(45deg);\ntransform: rotate(45deg);\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:after {\n -webkit-transform: rotate(45deg);\ntransform: rotate(-45deg);\n\n}\n\n@media (max-width: 660px) {\n .exponea-leaderboard {\n text-align: center;\n\n}\n\n \n}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":true},"id":"5e7b491e5a9d186822829866","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":true,"cloned_from_id":"5e74cb5584ed4effd6bcf01e","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false,\n location: window.location.href,\n path: window.location.pathname\n };\n}","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":null,"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"until_visitor_interacts","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Top of the site permanent banner","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<a class=\"exponea-banner exponea-leaderboard\" href=\"[[ bannerLink ]]\">\n <span class=\"exponea-text\">[[ bodyText ]]</span>\n <span class=\"exponea-button\">[[ buttonText ]]</span>\n <span class=\"exponea-close\"><span class=\"exponea-close-cross\"></span></span>\n</a>","id":0,"name":"Variant A","parametrized_parts":{"html":"<a class=\"exponea-banner exponea-leaderboard\" href=\"\">\n <span class=\"exponea-text\">You can still shop online with us! Learn what else we are doing to keep you safe</span>\n <span class=\"exponea-button\">Learn more</span>\n <span class=\"exponea-close\"><span class=\"exponea-close-cross\"></span></span>\n</a>","script":"var self = this;\n var showDelay = parseInt('0' || '0', 10);\n setTimeout(function() {\n self.sdk.track('banner', getEventProperties('show', false));\n requestAnimationFrame(function () {\n document.body.insertAdjacentHTML('afterbegin', self.html);\n var banner = self.banner = document.querySelector('.exponea-leaderboard');\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\n var btnClose = banner.querySelector('.exponea-close');\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\n btnClose.onclick = function (e) {\n removeBanner();\n self.sdk.track('banner', getEventProperties('close'));\n e.preventDefault();\n if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; }\n return false;\n }\n });\n }, showDelay);\n function getEventProperties(action, interactive) {\n return { action: action, banner_id: self.data.banner_id, banner_name: self.data.banner_name, banner_type: self.data.banner_type, variant_id: self.data.variant_id, variant_name: self.data.variant_name, interaction: interactive !== false ? true : false, location: window.location.href, path: window.location.pathname };\n }\n function removeBanner() {\n if (self.banner) {\n self.banner.parentNode.removeChild(self.banner);\n }\n }\n return {\n remove: removeBanner\n };","sdk_object_name":"exponea","style":".exponea-leaderboard {\n display: block;\nposition: absolute;\ntop: 0;\nleft: 0;\nwidth: 100%;\nmin-height: 55px;\nz-index: 9999999;\nbackground: #2dab4c;\nfont-family: Arial, Helvetica, sans-serif;\nfont-size: 12px;\nline-height: normal;\ntext-decoration: inherit;\ntext-align: left;\ncursor: pointer;\n\n}\n\n.exponea-leaderboard, .exponea-leaderboard * {\n box-sizing: content-box;\ntext-align: center;\n}\n\n.exponea-leaderboard:hover, .exponea-leaderboard:active {\n text-decoration: inherit;\ntext-align: center;\n}\n\n.exponea-leaderboard span {\n display: inline-block;\ntext-align: center;\n}\n\n.exponea-leaderboard .exponea-text {\n font-size: 17px;\nfont-weight: 500;\ncolor: #ffffff;\nmargin: 24px;\ntext-align: center;\n}\n\n.exponea-leaderboard .exponea-text strong {\n color: #ffcd00;\n\n}\n\n.exponea-leaderboard .exponea-button {\n display: inline-block;\nfont-size: 14px;\ncolor: #ffffff;\nbackground: #000000;\npadding: 7px 30px;\nborder-radius: 50px;\n-moz-border-radius: 50px;\n-webkit-border-radius: 50px;\nborder: 0px solid #800000;\nposition: absolute;\ntop: 19px;\nright: 38px;\ncursor: pointer;\n\n}\n\n.exponea-leaderboard .exponea-close {\n padding: 15px;\nposition: absolute;\ntop: 0px;\nright: 0px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross {\n position: absolute;\ndisplay: inline-block;\nwidth: 14px;\nheight: 14px;\noverflow: hidden;\ntop: 8px;\nright: 8px;\n\n}\n\n.exponea-leaderboard .exponea-close:hover {\n cursor: pointer;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before, .exponea-leaderboard .exponea-close .exponea-close-cross:after {\n content: '';\nposition: absolute;\nheight: 2px;\nwidth: 100%;\ntop: 50%;\nleft: 0;\nmargin-top: -1px;\nbackground: #ffffff;\nheight: 1px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before {\n -webkit-transform: rotate(45deg);\ntransform: rotate(45deg);\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:after {\n -webkit-transform: rotate(45deg);\ntransform: rotate(-45deg);\n\n}\n\n@media (max-width: 660px) {\n .exponea-leaderboard {\n text-align: center;\n\n}\n\n .exponea-leaderboard .exponea-button {\n position: static;\ndisplay: block;\nmax-width: 200px;\nmargin: 0 auto 15px;\n\n}\n\n \n}"},"params":{"backgroundColor":"#2dab4c","bannerLink":"","bannerShowDelayInMilliseconds":"0","bodyText":"You can still shop online with us! Learn what else we are doing to keep you safe","bodyTextColor":"#ffffff","buttonBackgroundColor":"#000000","buttonText":"Learn more","buttonTextColor":"#ffffff","closeButtonColor":"#ffffff","headerText":"MyNews.com","headerTextColor":"#1c1733"},"percentage":100,"script":"var self = this;\n var showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);\n setTimeout(function() {\n self.sdk.track('banner', getEventProperties('show', false));\n requestAnimationFrame(function () {\n document.body.insertAdjacentHTML('afterbegin', self.html);\n var banner = self.banner = document.querySelector('.exponea-leaderboard');\n banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');\n var btnClose = banner.querySelector('.exponea-close');\n self.sdk.trackLink(banner, 'banner', getEventProperties('click'));\n btnClose.onclick = function (e) {\n removeBanner();\n self.sdk.track('banner', getEventProperties('close'));\n e.preventDefault();\n if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; }\n return false;\n }\n });\n }, showDelay);\n function getEventProperties(action, interactive) {\n return { action: action, banner_id: self.data.banner_id, banner_name: self.data.banner_name, banner_type: self.data.banner_type, variant_id: self.data.variant_id, variant_name: self.data.variant_name, interaction: interactive !== false ? true : false, location: window.location.href, path: window.location.pathname };\n }\n function removeBanner() {\n if (self.banner) {\n self.banner.parentNode.removeChild(self.banner);\n }\n }\n return {\n remove: removeBanner\n };","source_mode":true,"style":".exponea-leaderboard {\n display: block;\nposition: absolute;\ntop: 0;\nleft: 0;\nwidth: 100%;\nmin-height: 55px;\nz-index: 9999999;\nbackground: [[ backgroundColor ]];\nfont-family: Arial, Helvetica, sans-serif;\nfont-size: 12px;\nline-height: normal;\ntext-decoration: inherit;\ntext-align: left;\ncursor: pointer;\n\n}\n\n.exponea-leaderboard, .exponea-leaderboard * {\n box-sizing: content-box;\ntext-align: center;\n}\n\n.exponea-leaderboard:hover, .exponea-leaderboard:active {\n text-decoration: inherit;\ntext-align: center;\n}\n\n.exponea-leaderboard span {\n display: inline-block;\ntext-align: center;\n}\n\n.exponea-leaderboard .exponea-text {\n font-size: 17px;\nfont-weight: 500;\ncolor: [[ bodyTextColor ]];\nmargin: 24px;\ntext-align: center;\n}\n\n.exponea-leaderboard .exponea-text strong {\n color: #ffcd00;\n\n}\n\n.exponea-leaderboard .exponea-button {\n display: inline-block;\nfont-size: 14px;\ncolor: [[ buttonTextColor ]];\nbackground: [[ buttonBackgroundColor ]];\npadding: 7px 30px;\nborder-radius: 50px;\n-moz-border-radius: 50px;\n-webkit-border-radius: 50px;\nborder: 0px solid #800000;\nposition: absolute;\ntop: 19px;\nright: 38px;\ncursor: pointer;\n\n}\n\n.exponea-leaderboard .exponea-close {\n padding: 15px;\nposition: absolute;\ntop: 0px;\nright: 0px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross {\n position: absolute;\ndisplay: inline-block;\nwidth: 14px;\nheight: 14px;\noverflow: hidden;\ntop: 8px;\nright: 8px;\n\n}\n\n.exponea-leaderboard .exponea-close:hover {\n cursor: pointer;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before, .exponea-leaderboard .exponea-close .exponea-close-cross:after {\n content: '';\nposition: absolute;\nheight: 2px;\nwidth: 100%;\ntop: 50%;\nleft: 0;\nmargin-top: -1px;\nbackground: [[ closeButtonColor ]];\nheight: 1px;\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:before {\n -webkit-transform: rotate(45deg);\ntransform: rotate(45deg);\n\n}\n\n.exponea-leaderboard .exponea-close .exponea-close-cross:after {\n -webkit-transform: rotate(45deg);\ntransform: rotate(-45deg);\n\n}\n\n@media (max-width: 660px) {\n .exponea-leaderboard {\n text-align: center;\n\n}\n\n .exponea-leaderboard .exponea-button {\n position: static;\ndisplay: block;\nmax-width: 200px;\nmargin: 0 auto 15px;\n\n}\n\n \n}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b491d5a9d186822829843","type":"banner"}],"version":"v1.164.11"}
Country Based Informative Banners
Specific informative banners can be shown only to customers from specific countries. The following JSON contains twice the same banner, once targeted at the US and once at the UK. It is meant to illustrate how different versions of the same web layer can be shown to customers from different countries.
{"files":[],"initiative":{"archived":false,"cloned_from_id":"5e79d23cd8a7dd27a9a9db3a","color":"rgb(0, 153, 255)","description":"","name":"COVID-19 Country Based Informative","pinned":false,"prevent_archivation":false},"items":[{"data":{"aggregation":"first","all_exposing_properties":[{"event_type":"session_start","property":"country","type":"event"}],"archived":false,"attribute":{"property":"country","type":"property"},"cloned_from_id":"5e79cf76cde26b1de6ec4e75","date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"description":null,"event":{"filter":[{"attribute":{"property":"country","type":"property"},"constraint":{"operands":[{"type":"constant","value":""}],"operator":"has value","type":"string"}}],"type":"session_start"},"exposing_properties":[{"event_type":"session_start","property":"country","type":"event"}],"format":"number","independent_if_reused":true,"is_global_object":true,"max_values":1,"name":"Last session start country","prevent_archivation":false,"show_description_in_view":false,"skip":0,"tags":[],"type":"first"},"id":"5e7b48e2ac2c1a73cbd4189d","type":"aggregate"},{"data":{"all_exposing_properties":[{"event_type":"session_start","property":"country","type":"event"}],"archived":false,"cloned_from_id":"5e79e0f0a94d6a08e2e8cf43","customer_count_format":"value","customer_filter":{"filters":[],"formula":""},"description":null,"independent_if_reused":true,"is_global_object":false,"metrics":[],"name":"Segmentation for country restrictions","prevent_archivation":false,"segmentation_map_axes":{"size":-1,"x":-1,"y":-1},"segments":[{"customer_filter":{"filters":[{"attribute":{"id":"5e7b48e2ac2c1a73cbd4189d","type":"aggregate"},"constraint":{"operands":[{"type":"constant","value":"Slovakia"},{"type":"constant","value":"Czech Republic"},{"type":"constant","value":"United Kingdom"},{"type":"constant","value":"France"},{"type":"constant","value":"Spain"}],"operator":"in","type":"string"},"type":"attribute"}],"formula":"A"},"name":"Only essential stores open"},{"customer_filter":{"filters":[{"attribute":{"id":"5e7b48e2ac2c1a73cbd4189d","type":"aggregate"},"constraint":{"operands":[{"type":"constant","value":"South Korea"}],"operator":"in","type":"string"},"type":"attribute"}],"formula":"A"},"name":"No restrictions"}],"show_description_in_view":false,"tags":[]},"id":"5e7b48e2ac2c1a73cbd418b3","type":"segmentation"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e79d2ee2e205b4ee07b6ab3","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}\n","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":{"filters":[{"attribute":{"property":"country","type":"property"},"constraint":{"operands":[{"type":"constant","value":"United Kingdom"},{"type":"constant","value":"UK"},{"type":"constant","value":"Wales"},{"type":"constant","value":"Scotland"},{"type":"constant","value":"England"}],"operator":"in","type":"string"},"type":"attribute"},{"attribute":{"id":"5e7b48e2ac2c1a73cbd4189d","type":"aggregate"},"constraint":{"operands":[{"type":"constant","value":"United Kingdom"},{"type":"constant","value":"UK"},{"type":"constant","value":"Wales"},{"type":"constant","value":"Scotland"},{"type":"constant","value":"England"}],"operator":"in","type":"string"},"type":"attribute"},{"attribute":{"aggregate":{"_id":"5e7a300da8ba62ff0a08a9cb","aggregation":"first","attribute":{"property":"location","type":"property"},"date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"event":{"filter":[{"attribute":{"property":"location","type":"property"},"constraint":{"operands":[{"type":"constant","value":""}],"operator":"has value","type":"string"}}],"type":"session_start"},"exposing_properties":[{"event_type":"session_start","property":"location","type":"event"}],"format":"number","independent_if_reused":true,"max_values":1,"name":"Last session start location","skip":0,"type":"first"},"type":"embedded_aggregate"},"constraint":{"operands":[{"type":"constant","value":".co.uk"}],"operator":"contains","type":"string"},"type":"attribute"}],"formula":"A|B|C"},"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"once_per_visit","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Geo-based banner - UK","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<div class=\"exponea-banner exponea-covid-19\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<a href=\"[[bannerLink]]\" exp-action>\n\t\t<span class=\"exponea-title\" >[[ titleText ]]</span>\n\t\t<span class=\"exponea-text\">[[ bodyText ]]</span>\n\t</a>\n</div>","id":0,"name":"Variant A","parametrized_parts":{"html":"<div class=\"exponea-banner exponea-covid-19\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<a href=\"\" exp-action>\n\t\t<span class=\"exponea-title\" >COVID-19 Shipping update</span>\n\t\t<span class=\"exponea-text\">Here is how our shipping operates for online orders</span>\n\t</a>\n</div>","script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n\tconsole.log(banner)\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-covid-19\").forEach(a=>a.parentNode.removeChild(a))}};","sdk_object_name":"exponea","style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'center' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '0px' %}\n {%- set offsetVertical = '0px' %}\n {%- set bannerHeight = '90px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '100%' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '#000000' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '0px' %}\n {%- set bannerPadding = '0 0 1em 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.2em 1.8em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '#ffffff' %}\n {%- set textLineHeight = '1.5' %}\n\n {#- Title variables #}\n {%- set titleColor = '#ffd500' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleAlign = 'left' %}\n {%- set titleMargin = '1em 2.2em 0 2.2em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '#ffffff' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '110px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '0px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '0px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n\t {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a,\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin }};\n display: block;\n {%- if titleAlign != \"center\" %}\n {{- printAttributeWithCalc('padding-' ~ closeLeftRight, ' 2 * ' ~ closeSize ) }}\n {%- endif %}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n margin: {{ titleMargin}};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}"},"params":{"ButtonColor":"#ffffff","ButtonTextColor":"#ffffff","backgroundColor":"#000000","bannerLink":"","bannerShowDelayInMilliseconds":"0","bodyText":"Here is how our shipping operates for online orders","bodyTextColor":"#ffffff","buttonText":"Default button text","closeButtonColor":"#ffffff","headerText":"","headerTextColor":"#ffd500","primaryColor":"#1c1733","secondaryColor":"#ffd500","strongColor":"#ffffff","tertiaryColor":"#ffffff","textColor":"#ffffff","titleText":"COVID-19 Shipping update","titleTextColor":"#ffd500"},"percentage":100,"script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n\tconsole.log(banner)\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-covid-19\").forEach(a=>a.parentNode.removeChild(a))}};","source_mode":true,"style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'center' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '0px' %}\n {%- set offsetVertical = '0px' %}\n {%- set bannerHeight = '90px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '100%' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '[[ backgroundColor ]]' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '0px' %}\n {%- set bannerPadding = '0 0 1em 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.2em 1.8em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '[[ bodyTextColor ]]' %}\n {%- set textLineHeight = '1.5' %}\n\n {#- Title variables #}\n {%- set titleColor = '[[ titleTextColor ]]' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleAlign = 'left' %}\n {%- set titleMargin = '1em 2.2em 0 2.2em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '[[closeButtonColor]]' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '110px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '0px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '0px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n\t {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a,\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin }};\n display: block;\n {%- if titleAlign != \"center\" %}\n {{- printAttributeWithCalc('padding-' ~ closeLeftRight, ' 2 * ' ~ closeSize ) }}\n {%- endif %}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n margin: {{ titleMargin}};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b48e2ac2c1a73cbd418a8","type":"banner"},{"data":{"ab_testing_options":{"type":"manual"},"archived":false,"cloned_from_id":"5e7a30641ac1890ced58a617","consent_category":null,"control_group":{"script":"var self = this;\nself.sdk.track('banner', getEventProperties('show', false));\n\nfunction getEventProperties(action, interactive) {\n return {\n action: action,\n banner_id: self.data.banner_id,\n banner_name: self.data.banner_name,\n banner_type: self.data.banner_type,\n variant_id: self.data.variant_id,\n variant_name: self.data.variant_name,\n interaction: interactive !== false ? true : false,\n location: window.location.href,\n path: window.location.pathname\n };\n}\n","sdk_object_name":"exponea"},"conversion_goal":{"type":"purchase"},"customer_filter":{"filters":[{"attribute":{"property":"country","type":"property"},"constraint":{"operands":[{"type":"constant","value":"United States"},{"type":"constant","value":"US"}],"operator":"in","type":"string"},"type":"attribute"},{"attribute":{"id":"5e7b48e2ac2c1a73cbd4189d","type":"aggregate"},"constraint":{"operands":[{"type":"constant","value":"United States"},{"type":"constant","value":"US"}],"operator":"in","type":"string"},"type":"attribute"},{"attribute":{"aggregate":{"_id":"5e7a300da8ba62ff0a08a9cb","aggregation":"first","attribute":{"property":"location","type":"property"},"date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"event":{"filter":[{"attribute":{"property":"location","type":"property"},"constraint":{"operands":[{"type":"constant","value":""}],"operator":"has value","type":"string"}}],"type":"session_start"},"exposing_properties":[{"event_type":"session_start","property":"location","type":"event"}],"format":"number","independent_if_reused":true,"max_values":1,"name":"Last session start location","skip":0,"type":"first"},"type":"embedded_aggregate"},"constraint":{"operands":[{"type":"constant","value":".com"}],"operator":"contains","type":"string"},"type":"attribute"}],"formula":"A|B|C"},"date_filter":{"enabled":false,"from_date":null,"to_date":null},"description":null,"device_target":{"type":"any"},"enabled":false,"frequency":"once_per_visit","general_consent":true,"is_global_object":false,"last_variant_id":0,"name":"Geo-based banner - US","prevent_archivation":false,"show_description_in_view":false,"site_url":"","status":"draft","tags":[],"trigger":{"exclude_pages":[],"include_pages":[{"type":"any"}]},"variants":[{"enabled":true,"group":"","html":"<div class=\"exponea-banner exponea-covid-19\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<a href=\"[[bannerLink]]\" exp-action>\n\t\t<span class=\"exponea-title\" >[[ titleText ]]</span>\n\t\t<span class=\"exponea-text\">[[ bodyText ]]</span>\n\t</a>\n</div>","id":0,"name":"Variant A","parametrized_parts":{"html":"<div class=\"exponea-banner exponea-covid-19\">\n\t<span class=\"exponea-close\" exp-close><span class=\"exponea-close-cross\"></span></span>\n\t<a href=\"\" exp-action>\n\t\t<span class=\"exponea-title\" >COVID-19 Shipping update</span>\n\t\t<span class=\"exponea-text\">Here is how our shipping operates for online orders</span>\n\t</a>\n</div>","script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n\tconsole.log(banner)\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-covid-19\").forEach(a=>a.parentNode.removeChild(a))}};","sdk_object_name":"exponea","style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'center' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '0px' %}\n {%- set offsetVertical = '0px' %}\n {%- set bannerHeight = '90px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '100%' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '#000000' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '0px' %}\n {%- set bannerPadding = '0 0 1em 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.2em 1.8em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '#ffffff' %}\n {%- set textLineHeight = '1.5' %}\n\n {#- Title variables #}\n {%- set titleColor = '#ffd500' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleAlign = 'left' %}\n {%- set titleMargin = '1em 2.2em 0 2.2em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '#ffffff' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '110px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '0px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '0px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n\t {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a,\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin }};\n display: block;\n {%- if titleAlign != \"center\" %}\n {{- printAttributeWithCalc('padding-' ~ closeLeftRight, ' 2 * ' ~ closeSize ) }}\n {%- endif %}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n margin: {{ titleMargin}};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}"},"params":{"ButtonColor":"#ffffff","ButtonTextColor":"#ffffff","backgroundColor":"#000000","bannerLink":"","bannerShowDelayInMilliseconds":"0","bodyText":"Here is how our shipping operates for online orders","bodyTextColor":"#ffffff","buttonText":"Default button text","closeButtonColor":"#ffffff","headerText":"","headerTextColor":"#ffd500","primaryColor":"#1c1733","secondaryColor":"#ffd500","strongColor":"#ffffff","tertiaryColor":"#ffffff","textColor":"#ffffff","titleText":"COVID-19 Shipping update","titleTextColor":"#ffd500"},"percentage":100,"script":"var config = {\r\n\tcontext: this,\r\n\tdata: {},\r\n\tscoped: true,\r\n\ttrigger: {\r\n\t\ttype: 'onready',\r\n\t\tdelay: 0\r\n\t}\r\n};\r\n\r\nexponea.loadDependency('exp', function(){\r\n\tvar banner = new Exp(config);\r\n\tconsole.log(banner)\r\n});\r\n\r\nreturn {remove:()=>{document.querySelectorAll(\"div.exponea-covid-19\").forEach(a=>a.parentNode.removeChild(a))}};","source_mode":true,"style":"{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Banner position and size #}\n {%- set setLeftRight = 'center' %} {#- 'left', 'right' or 'center' #}\n {%- set setTopBottom = 'top' %} {#- 'top', 'bottom', 'center' #}\n {%- set offsetHorizontal = '0px' %}\n {%- set offsetVertical = '0px' %}\n {%- set bannerHeight = '90px' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set bannerWidth = '100%' %} {#- Value must be numeric, e.g. '200px', '10em', '50%'... #}\n {%- set heightFitContent = 'true' %} {#- If 'true' banner height depends on content #}\n\n {#- Banner variables #}\n {%- set bannerBackground = 'color' %} {#- 'color' or 'image' #}\n {%- set bannerBackgroundColor = '[[ backgroundColor ]]' %}\n {%- set bannerBackgroundImage = 'https://exp-framework.exponea.com/background.jpg' %}\n {%- set bannerBorder = 'none' %}\n {%- set bannerBorderRadius = '0px' %}\n {%- set bannerPadding = '0 0 1em 0' %}\n {%- set bannerShadow = 'true' %} {#- 'true' or 'false' -#}\n \n {#- Transition variables #}\n {%- set bannerTransitionDirection = 'vertical' %} {#- 'vertical', 'horizontal' or 'none' #}\n {%- set bannerTransitionSpeed = '1.5s' %}\n {%- set transitionSpeed = '0.3s' %}\n \n {#- Font variables #}\n {%- set fontSource = 'https://fonts.googleapis.com/css?family=Lato' %}\n {%- set fontFamily = \"\\'PT Sans\\', sans-serif\" %}\n {%- set fontSize = '16px' %}\n {%- set fontWeight = 'bold' %}\n \n {#- Text variables #}\n {%- set textMargin = '0.2em 1.8em' %}\n {%- set textDecoration = 'none' %}\n {%- set textAlign = 'left' %}\n {%- set textColor = '[[ bodyTextColor ]]' %}\n {%- set textLineHeight = '1.5' %}\n\n {#- Title variables #}\n {%- set titleColor = '[[ titleTextColor ]]' %}\n {%- set titleFontSize = '16px' %}\n {%- set titleFontWeight = '700' %}\n {%- set titleAlign = 'left' %}\n {%- set titleMargin = '1em 2.2em 0 2.2em' %}\n \n {#- Close Cross variables #}\n {%- set closeSize = '15px' %}\n {%- set closeColor = '[[closeButtonColor]]' %}\n {%- set closeLeftRight = '' %} {#- Optional: 'left', 'right' or '' #}\n\n {#- Responsive Design variables #}\n {%- set mobileBreakpointWidth = '500px' %} {#- Must be equal or larger than bannerWidth + offsets #}\n {%- set mobileBreakpointHeight = '110px' %} {#- Must be equal or larger than bannerHeight + offsets #}\n {%- set mobileOffsetHorizontal = '0px' %} {#- Must be same unit as width #}\n {%- set mobileOffsetVertical = '0px' %}\n \n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- GLOBAL VARIABLES END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC START HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n {#- Determine position of close cross button #}\n {%- if closeLeftRight != 'left' and closeLeftRight != 'right' %}\n {%- set closeLeftRight = 'left' if setLeftRight == 'right' else 'right' %}\n {%- endif %}\n\n {#- Banner shadow evaluation -#}\n {%- if bannerShadow == 'true' -%}\n {%- set bannerShadowValue = '0px 0px 10px 0px rgba(0,0,0,0.5)' %}\n {%- else %}\n {%- set bannerShadowValue = 'none' %}\n {%- endif -%}\n\n {#- Banner background image evaluation -#}\n {%- if bannerBackground == 'image' %}\n {%- set backgroundImageValue = 'url(' ~ bannerBackgroundImage ~ ')' %}\n {%- set backgroundSizeValue = 'cover' %}\n {%- else %}\n {%- set backgroundImageValue = 'none' %}\n {%- set backgroundSizeValue = 'inherit' %}\n {%- endif %}\n\n\t {#- Process all values (assumed to have same unit) with same operator #}\n {#- Supported operators: 'add' ('+'), 'subtract' ('-'), 'multiply' ('*'), 'divide' ('/') #}\n {#- In case of subtract and multiply, first value is the number to be subtracted/divided from #}\n {#- Useful for setting up dynamic values in CSS media queries #}\n\t {%- macro printOperationOnSameUnit(operation, sameUnitVals) %}\n\t {%- set unit = [] %}\n\t {%- set unitlessVals = [] %}\n\n\t {%- if sameUnitVals | count > 0 %}\n\t {%- for char in sameUnitVals[0] %}\n\t {%- if char | int('') == '' and char != '.' %}\n\t {%- append char to unit %}\n\t {%- endif %}\n\t {%- endfor %} \n\t {%- endif %}\n\t {%- for val in sameUnitVals %}\n\t\t \t{%- set unitlessVal = [] %}\n\t\t\t \t{%- for char in val %}\n\t\t\t\t \t{%- set charAsInt = char | int('') %}\n\t\t\t\t \t{%- if charAsInt != '' or char == '.' %}\n\t\t\t\t \t\t{%- append charAsInt to unitlessVal %}\n\t\t\t\t \t{%- endif %}\n\t\t\t \t{%- endfor %}\n\t\t \t{%- append unitlessVal | join('') | int to unitlessVals %}\n\t {%- endfor %}\n\t \n \t {%- set total = 0 %}\n\t {%- if operation == 'multiply' or operation == '*' %}\n\t\t\t{%- set total = 1 %}\n\t {%- elif (unitlessVals | count > 0) and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t\t{%- set total = unitlessVals[0] %}\n\t {%- endif %}\n\t \n\t {%- set tempTotalArr = [total] %}\n\t {%- for numVal in unitlessVals %}\n\t\t {%- if loop.first and (operation in ['divide', '/', 'subtract', '-']) %}\n\t\t {%- elif operation == 'multiply' or operation == '*' %}\n\t\t\t\t{%- append ((tempTotalArr | last) * numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'divide' or operation == '/' %}\n\t\t\t\t{%- append ((tempTotalArr | last) / numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'add' or operation == '+' %}\n\t\t\t\t{%- append ((tempTotalArr | last) + numVal) to tempTotalArr %}\n\t\t {%- elif operation == 'subtract' or operation == '-' %}\n\t\t\t\t{%- append ((tempTotalArr | last) - numVal) to tempTotalArr %}\n\t\t {%- endif %}\n\t {%- endfor %}\n\t {{ (tempTotalArr | last) ~ unit | join('') }}\n\t{%- endmacro %}\n\n \n {#- Banner height evaluation macro #}\n {%- macro printBannerHeight(fitContent, height, offset) %}\n\t {%- if fitContent == 'true' %}\n\t \tmax-height: -webkit-fit-content;\n\t\t\tmax-height: -moz-fit-content;\n\t\t max-height: fit-content;\n\t\t height: -webkit-fit-content;\n\t\t\theight: -moz-fit-content;\n\t\t height: fit-content;\n\t {%- else %}\n\t \tmax-height: {{ height }};\n\t \t{{- printAttributeWithCalc('height', '100% - (2 * ' ~ offset ~ ')' ) }}\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to align-self attribute #}\n {%- macro printAlignSelf(alignSelfValue) %}\n -webkit-align-self: {{ alignSelfValue }};\n -ms-flex-item-align: {{ alignSelfValue }};\n align-self: {{ alignSelfValue }};\n {%- endmacro %}\n\n {#- Add prefixes to appearance attribute #}\n {%- macro printAppearance(appearanceValue) %}\n -webkit-appearance: {{ appearanceValue }};\n -moz-appearance: {{ appearanceValue }};\n appearance: {{ appearanceValue }};\n {%- endmacro %}\n\n {#- Macro for printing breakpoint conditions #}\n {#- To calculate value from multiple values, pass arr of values as breakpointValue, #}\n {#- specify (or define here if new one) the name of function to process values, #}\n {#- and pass any additional args that the function may need #}\n {%- macro printBreakpointConditions(dimension, breakpointValue, processFunc, processFuncArgs) %}\n {%- if (breakpointValue is iterable) and not (breakpointValue is string) %} {#- If is array #}\n\t {%- if (processFuncArgs is not defined) or ((processFuncArgs is iterable) and not (processFuncArgs is string) and (processFuncArgs | count < 1)) %} {#- If undefined or (is array and empty array) #}\n\t {%- set processFuncArgs = ['+'] %} {#- Set addition as default operation #}\n\t {%- elif processFuncArgs is not iterable or processFuncArgs is string %} {#- if processFuncArgs is not array #}\n \t {%- set processFuncArgs = [processFuncArgs] %}\n \t{%- endif %}\n\t {%- if processFunc == 'printOperationOnSameUnit' %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} ),\n\t (max-{{ dimension }}: {{- printOperationOnSameUnit(processFuncArgs[0], breakpointValue) }} )\n\t {%- endif %}\n\t {%- else %}\n\t (-webkit-min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min--moz-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( -o-min-device-pixel-ratio: 2/1) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-device-pixel-ratio: 2) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 192dpi) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t ( min-resolution: 2dppx) and (max-{{ dimension }}: {{ breakpointValue }} ),\n\t (max-{{ dimension }}: {{ breakpointValue }} )\n\t {%- endif %}\n {%- endmacro %}\n\n {#- Add prefixes to the attribute that uses calc() in its value #}\n {%- macro printAttributeWithCalc(attribute, expression) %}\n {{ attribute }}: -webkit-calc( {{ expression }} );\n {{ attribute }}: -moz-calc( {{ expression }} );\n {{ attribute }}: calc( {{ expression }} );\n {%- endmacro %}\n\n {#- Add prefixes to background-size attribute #}\n {%- macro printBackgroundSize(backgroundSizeValue) %}\n -webkit-background-size: {{ backgroundSizeValue }};\n -moz-background-size: {{ backgroundSizeValue }};\n -ms-background-size: {{ backgroundSizeValue }};\n -o-background-size: {{ backgroundSizeValue }};\n background-size: {{ backgroundSizeValue }};\n {%- endmacro %}\n\n {#- Add prefixes to border-radius attribute #}\n {%- macro printBorderRadius(borderRadiusValue) %}\n -webkit-border-radius: {{ borderRadiusValue }};\n -moz-border-radius: {{ borderRadiusValue }};\n border-radius: {{ borderRadiusValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-shadow attribute #}\n {%- macro printBoxShadow(boxShadowValue) %}\n -webkit-box-shadow: {{ boxShadowValue }};\n -moz-box-shadow: {{ boxShadowValue }};\n box-shadow: {{ boxShadowValue }};\n {%- endmacro %}\n\n {#- Add prefixes to box-sizing attribute #}\n {%- macro printBoxSizing(boxSizingValue) %}\n -webkit-box-sizing: {{ boxSizingValue }};\n -moz-box-sizing: {{ boxSizingValue }};\n box-sizing: {{ boxSizingValue }};\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'flex' #}\n {%- macro printDisplayFlex() %}\n display: -webkit-flex;\n display: -moz-flex;\n display: -ms-flexbox;\n display: -o-flex;\n display: flex;\n {%- endmacro %}\n\n {#- Add prefixes to display attribute 'inline-flex' #}\n {%- macro printDisplayInlineFlex() %}\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -moz-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n {%- endmacro %}\n\n {#- Add prefixes to flex attribute #}\n {%- macro printFlex(flexGrowValue, flexShrinkValue, flexBasisValue) %}\n -webkit-box-flex: {{ flexGrowValue }};\n -webkit-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n -moz-box-flex: {{ flexGrowValue }};\n -ms-flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n flex: {{ flexGrowValue }} {{ flexShrinkValue }} {{ flexBasisValue }};\n {%- endmacro %}\n\n {#- Add prefixes to flex-wrap attribute #}\n {%- macro printFlexWrap(flexWrapValue) %}\n -webkit-flex-wrap: {{ flexWrapValue }};\n -ms-flex-wrap: {{ flexWrapValue }};\n flex-wrap: {{ flexWrapValue }};\n {%- endmacro %}\n\n {#- Add prefixes to justify-content attribute #}\n {%- macro printJustifyContent(justifyContentValue) %}\n -webkit-box-pack: {{ justifyContentValue }};\n -webkit-justify-content: {{ justifyContentValue }};\n -moz-box-pack: {{ justifyContentValue }};\n -ms-flex-pack: {{ justifyContentValue }};\n justify-content: {{ justifyContentValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform attribute #}\n {%- macro printTransform(transformValue) %}\n -webkit-transform: {{ transformValue }};\n -moz-transform: {{ transformValue }};\n -ms-transform: {{ transformValue }};\n -o-transform: {{ transformValue }};\n transform: {{ transformValue }};\n {%- endmacro %}\n\n {#- Add prefixes to the transform: rotate() attribute function #}\n {%- macro printTransformRotate(rotationValue) %}\n -webkit-transform: rotate( {{ rotationValue }} );\n -moz-transform: rotate( {{ rotationValue }} );\n -ms-transform: rotate( {{ rotationValue }} );\n -o-transform: rotate( {{ rotationValue }} );\n transform: rotate( {{ rotationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes to the transform: translateY() attribute function #}\n {%- macro printTransformTranslateY(translationValue) %}\n -webkit-transform: translateY( {{ translationValue }} );\n -moz-transform: translateY( {{ translationValue }} );\n -ms-transform: translateY( {{ translationValue }} );\n -o-transform: translateY( {{ translationValue }} );\n transform: translateY( {{ translationValue }} );\n {%- endmacro %}\n\n {#- Add prefixes for transition attribute for all attributes given as array #}\n {%- macro printTransition(arrOfAttributes, duration, timing) %}\n {%- set transitionPrefixes = ['-webkit-', '-o-', '-moz-', ''] %}\n {%- set defaultVals = [\"\", duration, timing] %}\n {%- for prefix in transitionPrefixes %}\n {{- prefix ~ 'transition: '}}\n {%- for attribute in arrOfAttributes %}\n {%- if (attribute is iterable) and not (attribute is string) %}\n \t{%- if attribute|count == 1 %}\n \t\t{{- attribute[0] ~ ' ' ~ defaultVals[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 2 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ defaultVals[2] }}\n \t{%- elif attribute|count == 3 %}\n \t\t{{- attribute[0] ~ ' ' ~ attribute[1] ~ ' ' ~ attribute[2] }}\n \t{%- endif %}\n \t\t{%- else %}\n \t\t\t{{- attribute ~ ' ' ~ duration ~ ' ' ~ timing }}\n \t\t\t{%- endif %}\n \t\t\t{%- if not loop.last %}, {% endif %}\n\t\t\t{%- endfor %};{% if not loop.last %}{{'\\n '}}{%- endif %}\n {%- endfor %}\n {%- endmacro %}\n\n {#- Print left, right, top, bottom attributes #}\n {#- Axis indicates the axis of slide-in animation, either vertical or horizontal #}\n {#- Position Main is position set in setLeftRight/setTopBottom and that is along the axis, e.g. 'right' #}\n {#- Position Opp is the opposite side of Position Main, e.g. for 'right' it's 'left' #}\n {#- Offset is the offset set for that axis #}\n {#- fitContent allows banner height to grow with content if 'true' #}\n {%- macro printPosition(posAlongAxisMain, posAlongAxisOpp, dimensionAlongAxis, offsetAlongAxis, posPerpToAxisMain, posPerpToAxisOpp, dimensionPerpToAxis, offsetPerpToAxis, fitContent) %}\n {{- printAttributeWithCalc(posAlongAxisMain, offsetAlongAxis ) }}\n {%- if fitContent == 'true' and ( (posAlongAxisOpp == 'top') or (posAlongAxisOpp == 'bottom') ) %}\n \t{{ posAlongAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posAlongAxisOpp, '100% - ' ~ offsetAlongAxis ~ ' - ' ~ dimensionAlongAxis ) }}\n {%- endif %}\n {{- printAttributeWithCalc(posPerpToAxisMain, offsetPerpToAxis ) }}\n {%- if fitContent == 'true' and ( (posPerpToAxisOpp == 'top') or (posPerpToAxisOpp == 'bottom') ) %}\n \t{{ posPerpToAxisOpp }}: inherit;\n {%- else %}\n \t{{- printAttributeWithCalc(posPerpToAxisOpp, '100% - ' ~ offsetPerpToAxis ~ ' - ' ~ dimensionPerpToAxis ) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Process the values for position attributes based on axis of slide-in animation #}\n {#- 1) Determine the names and values of position attributes and of offsets #}\n {#- 2) Determine whether offset should be changed to large negative value in case of 'off-screen' position\n {#- 3) Determine which position attributes are along and perpendicular to axis of animation and call printPosition #}\n {%- macro evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, fitContent) %}\n {#- Declare variables for position attributes #}\n {%- set posLeftRight = '' %}\n {%- set posLeftRightOpp = '' %}\n {%- set posTopBottom = '' %}\n {%- set posTopBottomOpp = '' %}\n\n {#- Evaluate horizontal (left/right/center) positions #}\n {%- if setLeftRight == 'right' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'left' %}\n {%- elif setLeftRight == 'left' %}\n {%- set posLeftRight = setLeftRight %}\n {%- set posLeftRightOpp = 'right' %}\n {%- elif setLeftRight == 'center' %}\n {%- set posLeftRight = 'left' %}\n {%- set posLeftRightOpp = 'right' %}\n {%- set offsetHorizontal = '50% - ( ' ~ bannerWidth ~ ' / 2 ) ' %}\n {%- endif %}\n\n {#- Evaluate vertical (top/bottom/center) positions #}\n {%- if setTopBottom == 'top' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'bottom' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'bottom' %}\n {%- set posTopBottom = setTopBottom %}\n {%- set posTopBottomOpp = 'top' %}\n \t{{- printTransformTranslateY('0%') }}\n {%- elif setTopBottom == 'center' %}\n {%- set posTopBottom = 'top' %}\n {%- set posTopBottomOpp = 'bottom' %}\n {%- if heightFitContent == 'true' %}\n \t{%- set offsetVertical = '50%' %}\n \t{{- printTransformTranslateY('-50%') }}\n \t{%- else %}\n \t\t{%- set offsetVertical = '50% - ( ' ~ bannerHeight ~ ' / 2 ) ' %}\n \t\t{{- printTransformTranslateY('0%') }}\n {%- endif %}\n {%- endif %}\n \n {%- if screenState == 'off-screen' and bannerTransitionDirection == 'vertical' %}\n {%- set newVerticalOffset = '-2 * ' ~ bannerHeight %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- elif screenState == 'off-screen' and bannerTransitionDirection == 'horizontal' %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = '-2 * ' ~ bannerWidth %}\n {%- else %}\n {%- set newVerticalOffset = offsetVertical %}\n {%- set newHorizontalOffset = offsetHorizontal %}\n {%- endif %}\n\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- elif bannerTransitionDirection == 'horizontal' %}\n {{- printPosition(posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, fitContent) }}\n {%- else %}\n {{- printPosition(posTopBottom, posTopBottomOpp, bannerHeight, newVerticalOffset, posLeftRight, posLeftRightOpp, bannerWidth, newHorizontalOffset, fitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n {#- Determines which configuration should be used for position evaluation #}\n {#- based on given banner state. Screen state is passed into next function #}\n {#- If banner should appear on multiple positions (have multiple on-screen states), #}\n {#- define here what values for positions, sizes, and offsets should each state have #}\n {%- macro printPositionByState(bannerState, screenState) %}\n {%- if bannerState == 'large' %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- else %}\n {{- evaluateAndPrintPosition(screenState, setTopBottom, bannerHeight, offsetVertical, setLeftRight, bannerWidth, offsetHorizontal, heightFitContent) }}\n {%- endif %}\n {%- endmacro %}\n\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- JINJA LOGIC END HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS STARTS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}\n\n{#- -------------------------------------------------------- #}\n{#- BANNER STARTS HERE #}\n{#- -------------------------------------------------------- #}\n {#- Main banner definition. Position off-screen #}\n .exponea-banner {\n {{- printBoxSizing('border-box') }}\n position: fixed;\n max-width: {{ bannerWidth }}; {#- banner width actually set by max-width attribute, width attribute is dynamic #}\n {{- printAttributeWithCalc('width', '100% - (2 * ' ~ offsetHorizontal ~ ')' ) }}\n {{- printBannerHeight(heightFitContent, bannerHeight, mobileOffsetVertical) }}\n padding: {{ bannerPadding }};\n {%- if (setLeftRight == 'center' and bannerWidth != '100%') or (setLeftRight != 'center') or ('%' not in bannerWidth) %}\n margin-left: 0;\n margin-right: 0;\n {%- else %}\n {{- printAttributeWithCalc('margin-left', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {{- printAttributeWithCalc('margin-right', '( 100% - (' ~ bannerWidth ~ ' - 2 * ' ~ offsetHorizontal ~ ' ) ) / 2 ') }}\n {%- endif %}\n z-index: 9999999;\n border: {{ bannerBorder }};\n {{- printBorderRadius(bannerBorderRadius) }}\n background: {{ bannerBackgroundColor }};\n background-image: {{ backgroundImageValue }};\n {{- printBackgroundSize(backgroundSizeValue) }}\n @import url('{{ fontSource }}');\n font-family: {{ fontFamily }};\n font-weight: {{ fontWeight }};\n font-size: {{ fontSize }};\n text-align: {{ textAlign }};\n line-height: 1;\n text-decoration: {{ textDecoration }};\n {{ printTransition( ['top', 'bottom', 'left', 'right', 'width', 'margin-left', 'margin-right', ['height', '0.05s'], ['max-height', '0.05s'], ['transform', '0.05s']], bannerTransitionSpeed, 'ease-in-out' ) }}\n {{- printBoxShadow(bannerShadowValue) }}\n {{- printPositionByState('', 'off-screen') }}\n }\n {#- Main banner position off-screen #}\n .exponea-banner.exponea-animate {\n {{- printPositionByState('', 'on-screen') }}\n }\n {#- Wrap around the whole content #}\n .exponea-banner .exponea-wrap {\n margin: {{ textMargin }};\n text-decoration: {{ textDecoration }};\n }\n {#- Links #}\n .exponea-banner .exponea-wrap a,\n .exponea-banner a {\n text-decoration: {{ textDecoration }};\n }\n {#- Main title #}\n .exponea-banner .exponea-title {\n color: {{ titleColor }};\n font-size: {{ titleFontSize }};\n text-align: {{ textAlign }};\n font-weight: {{ titleFontWeight }};\n letter-spacing: 1px;\n margin: {{ titleMargin }};\n display: block;\n {%- if titleAlign != \"center\" %}\n {{- printAttributeWithCalc('padding-' ~ closeLeftRight, ' 2 * ' ~ closeSize ) }}\n {%- endif %}\n }\n {#- Either wrap around text + subscription CTA, or just text #}\n .exponea-banner .exponea-text {\n display: block;\n font-size: {{ fontSize }};\n font-weight: {{ fontWeight }};\n color: {{ textColor }};\n text-decoration: {{ textDecoration }};\n line-height: {{ textLineHeight }};\n list-style-type: none;\n margin: {{ titleMargin}};\n }\n {#- Elements that should be hidden on mobile resolution - shown when desktop resolution #}\n.exponea-banner .can-disappear {\n\tdisplay: inherit;\n}\n\n{#- -------------------------------------------------------- #}\n{#- CLOSE CROSS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Cross 'X' that is used to close the banner #}\n{#- Wrap around the cross #}\n.exponea-banner .exponea-close {\n position: relative;\n display: block;\n}\n{#- Element whose :before & :after form the 'X'. Size determines the size of 'X' #}\n.exponea-banner .exponea-close .exponea-close-cross {\n position: absolute;\n cursor: pointer;\n width: {{ closeSize }};\n height: {{ closeSize }};\n top: 8px;\n {{ closeLeftRight }}: 8px;\n {{ printTransition( ['width', 'height', 'left', 'right'], transitionSpeed, 'ease-in-out' ) }} \n}\n{#- Common definition for :before & :after #}\n.exponea-banner .exponea-close .exponea-close-cross:before,\n.exponea-banner .exponea-close .exponea-close-cross:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 1px;\n top: 50%;\n left: 0;\n background: {{ closeColor }};\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:before {\n{{- printTransformRotate('45deg') }}\n}\n{#- :before specific #}\n.exponea-banner .exponea-close .exponea-close-cross:after {\n{{- printTransformRotate('-45deg') }}\n}\n\n \n{#- -------------------------------------------------------- #}\n{#- RESPONSIVENESS STARTS HERE #}\n{#- -------------------------------------------------------- #}\n{#- Close button size to double when below breakpoint #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }},\n{{- printBreakpointConditions('height', mobileBreakpointWidth) }}\n{ \n .exponea-banner .exponea-close .exponea-close-cross {\n {{- printAttributeWithCalc('width', ' 2 * ' ~ closeSize ) }}\n {{- printAttributeWithCalc('height', ' 2 * ' ~ closeSize ) }}\n }\n}\n{#- Responsiveness when below breakpoint set for width. #}\n{#- Increase width to 100% - offset from edge. Hide .can-disappear. Change On-/Off-screen positions to reflect the changed width. #}\n@media\n{{- printBreakpointConditions('width', mobileBreakpointWidth) }}\n{ \n .exponea-banner {\n \t{{- printAttributeWithCalc('width', '100% - (2 * ' ~ mobileOffsetHorizontal ~ ')' ) }}\n {%- if setLeftRight == 'center' and bannerWidth == '100%' %}\n margin-left: 0;\n margin-right: 0;\n {%- elif bannerWidth != '100%' %}\n {{- printAttributeWithCalc('margin-left', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('margin-right', '( 100% - ' ~ bannerWidth ~ ' ) / 2 - ' ~ mobileOffsetHorizontal) }}\n {%- endif %}\n {%- if bannerTransitionDirection == 'vertical' %}\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n {%- endif %}\n }\n .exponea-banner.exponea-animate {\n {{- printAttributeWithCalc('left', mobileOffsetHorizontal) }}\n {{- printAttributeWithCalc('right', mobileOffsetHorizontal) }}\n }\n .exponea-banner .exponea-wrap {\n }\n .exponea-banner .can-disappear { \n display: none;\n }\n}\n{#- Responsiveness when below breakpoint set for height. #}\n{#- Increase height to 100% - offset from edge. Change On-/Off-screen positions to reflect the changed height. #}\n@media\n{{- printBreakpointConditions('height', mobileBreakpointHeight) }}\n{\n .exponea-banner {\n {{- printAttributeWithCalc('height', ' 100% - ( 2 * ' ~ mobileOffsetVertical ~ ' )' ) }} {#- Subtracted value is to leave a little room from the edges #}\n }\n .exponea-banner.exponea-animate {\n \t{%- if setTopBottom != 'center' %}\n\t {{- printAttributeWithCalc('top', mobileOffsetVertical) }}\n\t {{- printAttributeWithCalc('bottom', mobileOffsetVertical) }}\n {%- endif %}\n }\n}\n{#- Media query to imitate margin:auto by setting margin to 0 when viewport width == bannerWidth + offsets #}\n@media\n{{- printBreakpointConditions('width', [bannerWidth, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\tmargin-left: 0;\n\tmargin-right: 0;\n }\n}\n{#- Media query to add scroll when viewport height <= bannerHeight + offsets #}\n@media\n{{- printBreakpointConditions('height', [bannerHeight, mobileOffsetHorizontal, mobileOffsetHorizontal] ) }}\n{\n .exponea-banner {\n\toverflow: scroll;\n }\n}\n{#- -------------------------------------------------------------------------- #}\n{#- #}\n{#- CSS ENDS HERE #}\n{#- #}\n{#- -------------------------------------------------------------------------- #}","template_id":null,"type":"medium_rectangle"}],"variants_enabled":false},"id":"5e7b48e2ac2c1a73cbd418ad","type":"banner"},{"data":{"aggregation":"first","all_exposing_properties":[{"event_type":"session_start","property":"location","type":"event"}],"archived":false,"attribute":{"property":"location","type":"property"},"cloned_from_id":"5e7a300da8ba62ff0a08a9cb","date_filter":{"absolute":false,"duration":{"count":30,"units":"days"},"enabled":false,"from_date":null,"offset":null,"to_date":null},"description":null,"event":{"filter":[{"attribute":{"property":"country","type":"property"},"constraint":{"operands":[{"type":"constant","value":""}],"operator":"has value","type":"string"}}],"type":"session_start"},"exposing_properties":[{"event_type":"session_start","property":"location","type":"event"}],"format":"number","independent_if_reused":true,"is_global_object":false,"max_values":1,"name":"Last session start location","prevent_archivation":false,"show_description_in_view":false,"skip":0,"tags":[],"type":"first"},"id":"5e7b48e2ac2c1a73cbd418a3","type":"aggregate"}],"version":"v1.164.11"}
It might not be possible to import the JSON file if your Exponea instance has not gone through the release 1.164 yet.
Updated 5 months ago