# vim: set ts=2 sw=2 sts=2 et:
#
# Banners for automobile demo.
#
# Copyright (c) 2011-present Qualiteam software Ltd. All rights reserved.
# See https://www.x-cart.com/license-agreement.html for license details.

QSL\Banner\Model\Banner:
  - title: 'Front Page - Full Width Top Banner'
    location: WideTop
    effect: fade
    timeout: 4
    delay: 3
    contents:
      - position: 10
        translations:
          - code: en
            content: '<div class="banner"><a class="banner__link" href="/"><picture class="banner__placeholder"><source srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjg4MCIgaGVpZ2h0PSI4MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PC9zdmc+" media="(min-width: 992px)"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIzNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PC9zdmc+" class="fr-fic fr-dii"></picture><picture class="banner__image"><source srcset="images/banner/wheels-tires-and-parts-mobile.webp 1x, images/banner/wheels-tires-and-parts-mobile-2x.webp 2x" media="(max-width: 425px)"><source srcset="images/banner/wheels-tires-and-parts-tablet.webp 1x, images/banner/wheels-tires-and-parts-tablet-2x.webp 2x" media="(min-width: 426px) and (max-width: 770px)"><source srcset="images/banner/wheels-tires-and-parts-tablet-big.webp 1x, images/banner/wheels-tires-and-parts-tablet-big-2x.webp" media="(min-width: 771px) and (max-width: 1049px)"><source srcset="images/banner/wheels-tires-and-parts-desktop.webp 1x, images/banner/wheels-tires-and-parts-desktop-2x.webp 2x" media="(min-width: 1050px) and (max-width: 1949px)"><img src="images/banner/wheels-tires-and-parts.webp" width="2880" height="800" alt="Wheels, Tires and Parts" class="fr-fic fr-dii"></picture><span class="banner__content"><span class="banner__title">Customize, Upgrade, Replace</span><span class="banner__btn">Shop Now</span></span>&nbsp;</a></div>'
      - position: 20
        translations:
          - code: en
            content: "<style>\n\t.banner {\n\t\theight: 340px;\n\t\toverflow: hidden\n\t}\n\t\n\t.area-c .bannerBox .banner_container > div .banner_item img.banner__image,\n\t.area-c .bannerBox .banner_container > div .banner_item picture.banner__image img {\n\t\tz-index: 1;\n\t\twidth: auto;\n\t\theight: 100%;\n\t\tmax-width: none;\n\t\tmax-height: none\n\t}\n\t\n\t.banner__link {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 0\n\t}\n\t\n\t.banner__link:before {\n\t\tcontent: \"\";\n\t\tbackground: linear-gradient(180deg, rgba(2, 2, 3, .05) 0, rgba(2, 2, 3, .45) 50.25%, rgba(2, 2, 3, 0) 100%);\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tz-index: 2\n\t}\n\t\n\t.banner__content {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex-flow: column;\n\t\trow-gap: 20px;\n\t\tz-index: 3;\n\t\tmargin: 0 16px\n\t}\n\t\n\t.banner__title {\n\t\tfont-size: 26px;\n\t\tline-height: 48px;\n\t\tfont-weight: 800;\n\t\tcolor: #f0f0f0;\n\t\ttext-align: center;\n\t\ttext-transform: uppercase;\n\t\ttext-shadow: 2px 2px 4px #000\n\t}\n\t\n\t.banner__btn {\n\t\tborder-radius: 4px;\n\t\tpadding: 12px;\n\t\tcolor: #fff;\n\t\tfont-size: 18px;\n\t\tline-height: 32px;\n\t\tbackground: #ca2602;\n\t\tfont-weight: 700\n\t}\n\t\n\timg.banner__placeholder,\n\tpicture.banner__placeholder img {\n\t\tvisibility: hidden;\n\t\tmax-width: 100%;\n\t\theight: auto;\n\t}\n\t\n\t.banner__placeholder + picture.banner__image {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t}\n\t\n\t.banner__placeholder + img.banner__image,\n\t.banner__placeholder + picture.banner__image img {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\ttransform: translate3d(-50%, -50%, 0);\n\t}\n\t\n\t@media (min-width:992px) {\n\t\t.banner {\n\t\t\theight: auto\n\t\t}\n\t\t.area-c .bannerBox .banner_container > div .banner_item img.banner__image,\n\t\t.area-c .bannerBox .banner_container > div .banner_item picture.banner__image img {\n\t\t\tmax-width: 100%;\n\t\t\theight: auto\n\t\t}\n\t\t.banner__title {\n\t\t\tfont-size: 40px;\n\t\t\tline-height: 32px\n\t\t}\n\t\t.banner__btn {\n\t\t\tpadding: 17px 20px;\n\t\t\tfont-size: 20px;\n\t\t\tline-height: 16px\n\t\t}\n\t\t.banner__content {\n\t\t\trow-gap: 32px\n\t\t}\n\t}\n\n</style><div class=\"banner\"><a class=\"banner__link\" href=\"/interior-accessories/\">&nbsp;<picture class=\"banner__image\"><source srcset=\"images/banner/interior-blue-mobile.webp 1x, images/banner/interior-blue-mobile-2x.webp 2x\" media=\"(max-width: 425px)\"><source srcset=\"images/banner/interior-blue-tablet.webp 1x, images/banner/interior-blue-tablet-2x.webp 2x\" media=\"(min-width: 426px) and (max-width: 770px)\"><source srcset=\"images/banner/interior-blue-big-tablet.webp 1x, images/banner/interior-blue-big-tablet-2x.webp\" media=\"(min-width: 771px) and (max-width: 1049px)\"><source srcset=\"images/banner/interior-blue-desktop.webp 1x, images/banner/interior-blue-desktop-2x.webp 2x\" media=\"(min-width: 1050px) and (max-width: 1949px)\"><img src=\"images/banner/interior-blue.webp\" width=\"2880\" height=\"800\" alt=\"Interior\" class=\"fr-fic fr-dii\"></picture><span class=\"banner__content\"><span class=\"banner__title\">Customize, Upgrade, Replace</span><span class=\"banner__btn\">Shop Now</span></span>&nbsp;</a></div>"
      - position: 30
        translations:
          - code: en
            content: '<div class="banner"><a class="banner__link" href="/cooling-systems/">&nbsp;<picture class="banner__image"><source srcset="images/banner/cooling-systems-1-mobile.webp 1x, images/banner/cooling-systems-1-mobile-2x.webp 2x" media="(max-width: 425px)"><source srcset="images/banner/cooling-systems-1-tablet.webp 1x, images/banner/cooling-systems-1-tablet-2x.webp 2x" media="(min-width: 426px) and (max-width: 770px)"><source srcset="images/banner/cooling-systems-1-big-tablet.webp 1x, images/banner/cooling-systems-1-big-tablet-2x.webp" media="(min-width: 771px) and (max-width: 1049px)"><source srcset="images/banner/cooling-systems-1-desktop.webp 1x, images/banner/cooling-systems-1-desktop-2x.webp 2x" media="(min-width: 1050px) and (max-width: 1949px)"><img src="images/banner/cooling-systems-1.webp" width="2880" height="800" alt="Cooling Systems" class="fr-fic fr-dii"></picture><span class="banner__content"><span class="banner__title">Customize, Upgrade, Replace</span><span class="banner__btn">Shop Now</span></span>&nbsp;</a></div>'
      - position: 40
        translations:
          - code: en
            content: '<div class="banner"><a class="banner__link" href="/exterior-accessories/">&nbsp;<picture class="banner__image"><source srcset="images/banner/exterior-mobile.webp 1x, images/banner/exterior-mobile-2x.webp 2x" media="(max-width: 425px)"><source srcset="images/banner/exterior-tablet.webp 1x, images/banner/exterior-tablet-2x.webp 2x" media="(min-width: 426px) and (max-width: 770px)"><source srcset="images/banner/exterior-big-tablet.webp 1x, images/banner/exterior-big-tablet-2x.webp" media="(min-width: 771px) and (max-width: 1049px)"><source srcset="images/banner/exterior-desktop.webp 1x, images/banner/exterior-desktop-2x.webp 2x" media="(min-width: 1050px) and (max-width: 1949px)"><img src="images/banner/exterior.webp" width="2880" height="800" alt="Exterior Accessories" class="fr-fic fr-dii"></picture><span class="banner__content"><span class="banner__title">Customize, Upgrade, Replace</span><span class="banner__btn">Shop Now</span></span>&nbsp;</a></div>'
      - position: 50
        translations:
          - code: en
            content: '<div class="banner"><a class="banner__link" href="/performance/">&nbsp;<picture class="banner__image"><source srcset="images/banner/performance-mobile.webp 1x, images/banner/performance-mobile-2x.webp 2x" media="(max-width: 425px)"><source srcset="images/banner/performance-tablet.webp 1x, images/banner/performance-tablet-2x.webp 2x" media="(min-width: 426px) and (max-width: 770px)"><source srcset="images/banner/performance-tablet-big.webp 1x, images/banner/performance-tablet-big-2x.webp" media="(min-width: 771px) and (max-width: 1049px)"><source srcset="images/banner/performance-desktop.webp 1x, images/banner/performance-desktop-2x.webp 2x" media="(min-width: 1050px) and (max-width: 1949px)"><img src="images/banner/performance.webp" width="2880" height="800" alt="Performance" class="fr-fic fr-dii"></picture><span class="banner__content"><span class="banner__title">Customize, Upgrade, Replace</span><span class="banner__btn">Shop Now</span></span>&nbsp;</a></div>'
      - position: 60
        translations:
          - code: en
            content: '<div class="banner"><a class="banner__link" href="/cooling-systems/">&nbsp;<picture class="banner__image"><source srcset="images/banner/cooling-systems-2-mobile.webp 1x, images/banner/cooling-systems-2-mobile-2x.webp 2x" media="(max-width: 425px)"><source srcset="images/banner/cooling-systems-2-tablet.webp 1x, images/banner/cooling-systems-2-tablet-2x.webp 2x" media="(min-width: 426px) and (max-width: 770px)"><source srcset="images/banner/cooling-systems-2-big-tablet.webp 1x, images/banner/cooling-systems-2-big-tablet-2x.webp" media="(min-width: 771px) and (max-width: 1049px)"><source srcset="images/banner/cooling-systems-2-desktop.webp 1x, images/banner/cooling-systems-2-desktop-2x.webp 2x" media="(min-width: 1050px) and (max-width: 1949px)"><img src="images/banner/cooling-systems-2.webp" width="2880" height="800" alt="Cooling Systems" class="fr-fic fr-dii"></picture><span class="banner__content"><span class="banner__title">Customize, Upgrade, Replace</span><span class="banner__btn">Shop Now</span></span>&nbsp;</a></div>'
