@leuffen/themejs1 2.0.7 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/CNAME +1 -0
- package/docs/_config.yml +34 -0
- package/docs/_includes/navbar.html +16 -0
- package/docs/_layouts/blank.html +18 -0
- package/docs/_layouts/default.html +27 -0
- package/docs/assets/ani.svg +5 -0
- package/docs/assets/dist/index.js +16091 -0
- package/docs/assets/dist/index.js.map +1 -0
- package/docs/assets/dist/style.css +1095 -0
- package/docs/assets/dist/style.css.map +1 -0
- package/docs/assets/dist/style.js +28 -0
- package/docs/assets/dist/style.js.map +1 -0
- package/docs/assets/morphing.svg +5 -0
- package/docs/pages/html.html +11 -0
- package/docs/pages/index.md +39 -0
- package/elements/e-card-default/e-card-default.scss +18 -0
- package/elements/e-card-default/e-card-default.ts +13 -0
- package/elements/elements.scss +1 -0
- package/elements/elements.ts +1 -0
- package/package.json +5 -1
- package/sections/_defaults.scss +20 -0
- package/sections/cta-base/cta-base.scss +15 -0
- package/sections/cta-base/cta-base.ts +12 -0
- package/sections/cta-form/cta-form.scss +21 -0
- package/sections/cta-form/cta-form.ts +20 -0
- package/sections/footer-base/footer-base.scss +59 -0
- package/sections/footer-base/footer-base.ts +17 -0
- package/sections/hero-max/hero-max.scss +100 -0
- package/sections/hero-max/hero-max.ts +21 -0
- package/sections/hero-ribbon/hero-ribbon.scss +37 -0
- package/sections/hero-ribbon/hero-ribbon.ts +20 -0
- package/sections/hero-title-small/hero-title-small.scss +28 -0
- package/sections/hero-title-small/hero-title-small.ts +15 -0
- package/sections/navbar-blox/navbar-blox.scss +177 -0
- package/sections/navbar-blox/navbar-blox.ts +54 -0
- package/sections/sec-card-2col/sec-card-2col.scss +35 -0
- package/sections/sec-card-2col/sec-card-2col.ts +20 -0
- package/sections/sec-card-feature/sec-card-feature.scss +35 -0
- package/sections/sec-card-feature/sec-card-feature.ts +22 -0
- package/sections/sec-legal-content/sec-legal-content.scss +46 -0
- package/sections/sec-legal-content/sec-legal-content.ts +20 -0
- package/sections/sec-multi-card/sec-multi-card.scss +22 -0
- package/sections/sec-multi-card/sec-multi-card.ts +18 -0
- package/sections/sec-testimonial-ribbon/sec-testimonial-ribbon.scss +52 -0
- package/sections/sec-testimonial-ribbon/sec-testimonial-ribbon.ts +26 -0
- package/sections/sections.scss +14 -0
- package/sections/sections.ts +13 -0
- package/themes/_general/root-format.scss +108 -0
- package/themes/_vendor/font-bootstrap-icons.scss +4022 -0
- package/themes/_vendor/font-ubuntu.scss +38 -0
- package/themes/theme1/index.scss +119 -0
- package/templates/theme1/leistungen/_default.de.md +0 -68
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"assets/dist/style.css","mappings":";;;AAAA,gBAAgB;ACchB;EACI;ADZJ;;AEFA;EACI;AFKJ;;AEFA;EACI;AFKJ;;AEDA;EACI;EACA;AFIJ;AEFI;EACI;EACA;EACA;AFIR;AEHQ;EACI;EACA;EACA;AFKZ;;AGrBA;EACI;AHwBJ;;AGrBA;EACI;EACA;EAEA;AHuBJ;AGrBI;EAkBI;EACA;EACA;AHMR;AGzBQ;EACI;EACA;EACA;EACA;EACA;AH2BZ;AGzBQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AH2BZ;AI1DA;EACI;EACA;EACA;EACA;EACA;AJ4DJ;;AIxDA;EACI;AJ2DJ;;AIxDA;EACI;EACA;EACA;EAaA;EACA;EACA;EACA;EACA;AJ+CJ;AI9DI;EACI;EACA;EACA;AJgER;AI9DI;EACI;EACA;EACA;AJgER;AItDQ;EAKI;AJoDZ;AIxDY;EACI;EACA;AJ0DhB;AIpDI;EACI;EACA;EACA;EACA;AJsDR;AIrDQ;EACI;EACA;EACA;EACA;AJuDZ;AInDI;EACI;EACA;EACA;EACA;EACA;EACA;AJqDR;AIpDQ;EAEI;EACA;EACA;AJqDZ;AIpDY;EACI;EACA;AJsDhB;AIrDgB;EACI;AJuDpB;AIrDoB;EAEI;AJsDxB;AI9CQ;EACI;EACA;AJgDZ;AI7CQ;EACI;AJ+CZ;AI5CQ;EACI;AJ8CZ;;AIxCI;EACI;AJ2CR;;AIvCA;AAGI;EACI;EACA;EACA;AJwCR;AItCI;EACI;EACA;EACA;AJwCR;AIvCQ;EACI;AJyCZ;;AInCI;EACI;EACA;EACA;AJsCR;AIpCI;EACI;EACA;EACA;AJsCR;AIpCQ;EACI;EAEA;AJqCZ;;AI7BI;EACI;EACA;EACA;AJgCR;AI7BI;EACI;AJ+BR;;AKnLA;EACI;EACA;EACA;EACA;ALsLJ;;AKlLI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ALqLR;AKjLY;EACI;EACA;ALmLhB;AKhLY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;ALkLhB;AK/KY;EAEI;ALgLhB;AK3KQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AL6KZ;AK5KY;EACI;EACA;AL8KhB;AK3KY;EACI;EACA;EACA;AL6KhB;AK3KY;EACI;EACA;EACA;AL6KhB;AK1KY;EACI;EACA;EACA;AL4KhB;AKtKI;EAEI;EACA;ALuKR;AKtKQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ALwKZ;AKtKY;EACI;ALwKhB;AKtKgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;ALwKpB;AKvKoB;EACI;EACA;ALyKxB;AKvKoB;EACI;EACA;ALyKxB;;AKhKA;EACI;ALmKJ;;AMpSA;EACI;ANuSJ;;AMnSA;EACI;ANsSJ;AMrSI;EACE;EACA;ANuSN;AMrSI;EACE;EACA;EACA;ANuSN;;AOrTA;EACI;APwTJ;;AOrTA;EACI;EACA;APwTJ;;AOlTI;EACI;EACA;EACA;APqTR;AOnTK;EACG;APqTR;AOjTI;EACI;EACA;APmTR;AOhTI;EACI;APkTR;AO/SI;EACI;APiTR;AO9SI;EACI;EACA;EACA;EACA;EACA;APgTR;AO/SQ;EACI;EAAU;EACV;EACA;APkTZ;AOjTY;EACI;APmThB;AO1SI;EACI;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;AP0SR;AOvSI;EACI;APySR;;AQjXA;EACI;ARoXJ;;AQ/WA;EAEI;ARiXJ;AQ/WS;EACI;EACA;EACA;EACA;ARiXb;AQ9WS;EACI;ARgXb;AQ5WS;EACI;EACA;EACA;EACA;AR8Wb;;AQxWA;EACI;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AR0WJ;AQxWI;EACI;EACA;AR0WR;AQtWI;EACI;EACA;EACA;EACA;ARwWR;AQtWI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ARwWR;AQrWQ;EACI;ARuWZ;AQpWQ;EACI;ARsWZ;AQnWQ;EACI;ARqWZ;;ASjbA;EACI;ATobJ;;ASjbA;EACI;EACA;ATobJ;;ASjbA;EACI;EACA;ATobJ;;ASjbA;EACI;EACA;ATobJ;;ASlbA;EACI;EACA;ATqbJ;;ASlbA;EAEI;EACA;EAEA;EACA;ATmbJ;ASjbI;EACI;EACA;ATmbR;AShbI;EACI;EACA;EACA;ATkbR;AS/aI;EACI;EACA;ATibR;AS7aI;EACI;EACA;EACA;EACA;AT+aR;AS3aI;EAEI;AT4aR;AS1aQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AT4aZ;ASxaQ;EACI;EACA;EACA;EACA;EACA;EACA;AT0aZ;ASvaQ;EACI;EACA;EACA;EACA;ATyaZ;ASpaI;EAEI;ATqaR;ASnaQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ATqaZ;ASjaQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;ATmaZ;AS/ZQ;EACI;EACA;EACA;EACA;ATiaZ;AS5ZI;EAEI;AT6ZR;AS3ZQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AT6ZZ;ASzZQ;EACI;EACA;EACA;EACA;EACA;EACA;AT2ZZ;ASvZQ;EACI;EACA;EACA;EACA;ATyZZ;ASpZI;EAEI;ATqZR;ASnZQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ATqZZ;ASjZQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;ATmZZ;AS/YQ;EACI;EACA;EACA;EACA;ATiZZ;;AUjlBA;EACI;AVolBJ;;AUjlBA;EACI;EACA;EACA;AVolBJ;AUnlBI;EACI;EACA;AVqlBR;AUnlBI;EACI;EACA;AVqlBR;;AWnmBA;EACI;AXsmBJ;;AWnmBA;EACI;AXsmBJ;;AY1mBA;EACE;EACA;AZ6mBF;;Aa/mBA;EACE;EACA;AbknBF;;Aa/mBA;EACE;AbknBF;;Ac1nBA;EACI;EACA;Ad6nBJ;;AcznBA;EACI;EACA;Ad4nBJ;;AcznBA;EACI;EACA;EACA;EAEA;EACA;EAMA;AdsnBJ;Ac1nBI;EACI;Ad4nBR;AcvnBI;EAEI;AdwnBR;ActnBQ;EACI;AdwnBZ;AcrnBQ;EACI;AdunBZ;AcrnBY;EACI;EACA;AdunBhB;AcjnBI;EACI;EACA;AdmnBR;AcjnBQ;EACI;AdmnBZ;;AenqBA;EACE;AfsqBF;;AenqBA;EACE;AfsqBF;;AehqBI;EACE;EACA;EACA;EACA;AfmqBN;AehqBE;EACE;EACA;AfkqBJ;;Ae7pBE;EACE;EACA;EACA;AfgqBJ;Ae7pBE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;Af+pBJ;Ae7pBI;EACE;EACA;EACA;Af+pBN;Ae5pBE;EACE;EACA;EACA;Af8pBJ;;AgB/sBA;EACI;EACA;EACA;EACA;AhBktBJ;;AgB/sBA;EACI;AhBktBJ;;AgB9sBA;EAII;EACA;EAEA;AhB6sBJ;AgBntBI;EACI;AhBqtBR;AgB7sBI;EACI;AhB+sBR;AgB5sBQ;EACI;EACA;AhB8sBZ;AgBzsBQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AhB2sBZ;AgBxsBI;EACI;AhB0sBR;AgBzsBQ;EAEI;EACA;EACA;EACA;EACA;EACA;AhB0sBZ;AgBtsBI;EACI;EACA;EACA;EACA;EACA;EACA;AhBwsBR;AgBvsBQ;EACI;EACA;AhBysBZ;;AiB1wBA;EAEI;EACA;EACA;EACA;EACA;EACA;EACI;EACA;EACA;EACA;AjB4wBR;AiBzwBI;EACI;EACA;EACA;AjB2wBR;AiBvwBI;EACI;AjBywBR;AiBxwBQ;EACI;EACA;AjB0wBZ;AiBzwBY;EACI;AjB2wBhB;AiBrwBI;EACI;EACA;EAIA;AjBowBR;AiBvwBQ;EACI;AjBywBZ;AiBtwBQ;EAII;EACA;AjBqwBZ;AiBzwBY;EACI;AjB2wBhB;AiBnwBI;EACK;AjBqwBT;AiBpwBQ;EACI;AjBswBZ;AiBpwBY;EACI;AjBswBhB;AiBpwBY;EACI;AjBswBhB;AkBj0BA;EACI;EACA;EAEA;EAEA;EACA;EAEA;EACA;AlBg0BJ;AkB9zBI;EACI;EACA;AlBg0BR;AkB5zBI;EACI;EACA;EACA;EACA;EACA;AlB8zBR;AkB3zBI;EACI;AlB6zBR;AkBzzBI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;AlBwzBR;AmBr2BA;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EA4BA;AnB00BJ;AmBp2BI;EACI;EACA;AnBs2BR;AmBp2BI;EACI;AnBs2BR;AmBp2BI;EACI;EACA;EACA;EACA;AnBs2BR;AmBn2BI;EACI;EACA;EACA;AnBq2BR;AmBl2BI;EACI;EACA;EACA;AnBo2BR;AmB/1BI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AnBi2BR;AoBp5BA;EAEI;ApBq5BJ;AoBn5BI;EACI;ApBq5BR;AoBn5BI;EACI;ApBq5BR;AoBn5BI;EACI;ApBq5BR;AoBl5BI;EACI;EAGA;ApBk5BR;AoBj5BQ;EAEI;EACA;EACA;EACA;ApBk5BZ;AiBv2BI;EACI;EACA;AjBy2BR;AiBx2BQ;EACI;AjB02BZ;AiBr2BI;EACI;EACA;EACA;AjBu2BR;AiBt2BQ;EACI;EACA;AjBw2BZ;AiBn2BI;EACI;EAMA;EACA;EACA;AjBg2BR;AiBt2BQ;EACI;AjBw2BZ;AiBj2BQ;EACI;AjBm2BZ;AiBj2BQ;EACI;AjBm2BZ;AiBh2BQ;EACI;EACA;EAEA;AjBi2BZ;;AqB78BA;EACE;ArBg9BF;AqB/8BE;EACE;ArBi9BJ;AqB/8BE;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;ArB88BJ;AqB78BI;EACE;EACA;EACA;EACA;EACA;EACA;ArB+8BN;AqB58BI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ArB88BN;AqB78BM;EACE;ArB+8BR;;AsB5/BA;EACE;AtB+/BF;;AsB5/BA;EACE;AtB+/BF;;AsBpgCA;EACE;AtBugCF;;AsBpgCA;EACE;AtBugCF;;AuB/gCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AvBkhCF;;AuB/gCA;EACE;IACE;EvBkhCF;EuB/gCA;IACE;EvBihCF;EuB/gCA;IACE;EvBihCF;EuB/gCA;IACE;EvBihCF;AACF;AwB3iCA;EACE;AxB6iCF;;AwB3iCA;EACE;AxB8iCF;;AwB3iCA;EACE;EACA;EACA;AxB8iCF;;AwB3iCA;EACE;EACA;AxB8iCF,C","sources":["webpack://@leuffen/themejs1/./demo_styles.scss","webpack://@leuffen/themejs1/./theme/_variables.scss","webpack://@leuffen/themejs1/./theme/elements/image/image.scss","webpack://@leuffen/themejs1/./theme/elements/map/map.scss","webpack://@leuffen/themejs1/./theme/elements/navbar/navbar.scss","webpack://@leuffen/themejs1/./theme/elements/navblox/navblox.scss","webpack://@leuffen/themejs1/./theme/elements/textstyle/textstyle.scss","webpack://@leuffen/themejs1/./theme/elements/accordion/accordion.scss","webpack://@leuffen/themejs1/./theme/elements/hamburger/hamburger.scss","webpack://@leuffen/themejs1/./theme/elements/screen/screen.scss","webpack://@leuffen/themejs1/./theme/elements/shapes/shapes.scss","webpack://@leuffen/themejs1/./theme/elements/input/input.scss","webpack://@leuffen/themejs1/./theme/sections/col2/col2.scss","webpack://@leuffen/themejs1/./theme/sections/row/row.scss","webpack://@leuffen/themejs1/./theme/footer/footer1/footer1.scss","webpack://@leuffen/themejs1/./theme/heros/header/header.scss","webpack://@leuffen/themejs1/./theme/heros/hero1/hero1.scss","webpack://@leuffen/themejs1/./theme/pages/page1/page1.scss","webpack://@leuffen/themejs1/./theme/pages/page1/style/header.scss","webpack://@leuffen/themejs1/./theme/pages/page1/style/sec3.scss","webpack://@leuffen/themejs1/./theme/pages/page1/style/sec4.scss","webpack://@leuffen/themejs1/./src.dev/dev.scss","webpack://@leuffen/themejs1/./workspaces/jodastyle/style_embed.scss","webpack://@leuffen/themejs1/./src/default/loader.scss","webpack://@leuffen/themejs1/./style_embed.scss"],"sourcesContent":["@charset \"UTF-8\";\njoda-content {\n --joda-init: true;\n}\n\n:root {\n --as-image-aspect-ratio: 16 / 9;\n}\n\n.do-image {\n --joda-use: image();\n}\n\n.as__image {\n width: 100%;\n position: relative;\n}\n.as__image > .image {\n width: 100%;\n height: 100%;\n aspect-ratio: var(--as-image-aspect-ratio, 4/5);\n}\n.as__image > .image > img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n}\n\n.use-map {\n --joda-use: map();\n}\n\n.as__map {\n width: 100%;\n aspect-ratio: 21/9;\n position: relative;\n}\n.as__map .as__map-overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.as__map .as__map-overlay > img {\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: opacity(0.5);\n}\n.as__map .as__map-overlay > div {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n height: 100%;\n width: 100%;\n z-index: 99;\n text-align: center;\n}\n:root {\n --layout-navbar-style: default;\n --layout-navbar-position: fixed;\n --as-minibar-height: 24px;\n --as-minibar-background: #21446b;\n --as-minibar-text-color: white;\n}\n\n.use-navbar {\n --joda-use: navbar();\n}\n\n.as__navbar {\n height: auto;\n top: 0;\n width: 100%;\n transition: opacity 1s ease-in-out;\n position: fixed;\n z-index: 999;\n isolation: isolate;\n opacity: 1;\n}\n.as__navbar.fixed {\n position: fixed;\n top: 0;\n width: 100%;\n}\n.as__navbar.absolute {\n position: absolute;\n top: 0;\n width: 100%;\n}\n.as__navbar.auto-fixed.scrolled {\n opacity: 0;\n}\n.as__navbar.auto-fixed.scrolled.fixed {\n opacity: 1;\n position: fixed;\n}\n.as__navbar .navbar-brand {\n display: block;\n height: 84px;\n max-width: 220px;\n width: 220px;\n}\n.as__navbar .navbar-brand img {\n object-fit: contain;\n object-position: left center;\n height: 100%;\n width: 100%;\n}\n.as__navbar .as__minibar {\n overflow: hidden;\n color: var(--as-minibar-text-color);\n background: var(--as-minibar-background);\n height: var(--as-minibar-height, 24px);\n transition: height 0.3s ease-in-out;\n z-index: 9999;\n}\n.as__navbar .as__minibar ul {\n text-align: right;\n text-decoration: none;\n list-style-type: none;\n}\n.as__navbar .as__minibar ul li {\n display: inline-block;\n margin: 0 0.5rem;\n}\n.as__navbar .as__minibar ul li a {\n text-decoration: none;\n}\n.as__navbar .as__minibar ul li a:hover {\n text-decoration: underline;\n}\n.as__navbar .as__mainbar .nav-link {\n padding-right: 0.8rem;\n padding-left: 0.8rem;\n}\n.as__navbar .as__mainbar .navbar-collapse.show {\n background: var(--as-mainbar-background, white);\n}\n.as__navbar .as__mainbar .navbar-toggler {\n background: rgba(255, 255, 255, 0.5);\n}\n\n.as__navbar.scrolled .as__minibar {\n height: 0;\n}\n\n/* Theme specific styles */\n.as__navbar.default .as__mainbar {\n background: var(--as-mainbar-background, white);\n border-bottom: 1px solid var(--bs-primary, #0d6efd);\n box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);\n}\n.as__navbar.default .as__minibar {\n font-size: 13px;\n line-height: 24px;\n background: var(--as-minibar-background, #007bff);\n}\n.as__navbar.default .as__minibar a {\n color: white;\n}\n\n.as__navbar.transparent .as__minibar {\n border: 0;\n font-size: 13px;\n line-height: 24px;\n}\n.as__navbar.transparent .as__mainbar {\n background-color: transparent !important;\n transition: all 0.3s ease-in-out;\n border: 0;\n}\n.as__navbar.transparent .as__mainbar a {\n font-weight: bolder;\n text-shadow: 1px 1px 1px var(--bs-light, #ccc), -1px -1px 1px var(--bs-light, #ccc), 1px -1px 1px var(--bs-light, #ccc), -1px 1px 1px var(--bs-light, #ccc);\n}\n\n.as__navbar.transparent.scrolled .as__mainbar {\n background-color: var(--as-mainbar-background, white) !important;\n border-bottom: 1px solid var(--bs-primary, #0d6efd);\n box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);\n}\n.as__navbar.transparent.scrolled .as__minibar {\n height: 0;\n}\n\n.use-navblox {\n --joda-class: as__navblox;\n --as-navblox-secondary-color: #21446b;\n --as-navblox-nav-bg: #21446b;\n --as-navblox-nav-text: #fff;\n}\n\n.as__navblox .row > div {\n position: relative;\n background: var(--as-navblox-secondary-color, #21446b);\n color: white;\n border-left: 1px dashed white;\n min-height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n}\n.as__navblox .row > div.block i.bi::before {\n line-height: inherit;\n padding-right: 0.5rem;\n}\n.as__navblox .row > div.block a {\n display: flex;\n align-items: center;\n padding: 15px;\n line-height: 1.5rem;\n color: inherit;\n text-decoration: none;\n transition: all 0.15s ease-in-out;\n}\n.as__navblox .row > div.block a:hover {\n transform: scale(110%);\n}\n.as__navblox .row > div .navbar-brand {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n color: #21446b;\n}\n.as__navblox .row > div .navbar-brand img {\n height: 6.5rem;\n width: auto;\n}\n.as__navblox .row > div .navbar-brand a {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.as__navblox .row > div .navbar-brand span {\n font-size: 2.5rem;\n padding-left: 1rem;\n line-height: 2.5rem;\n}\n.as__navblox .row > div .navbar-brand.mobile {\n position: relative;\n height: 150px;\n width: 100%;\n}\n.as__navblox .sidenav-positioner {\n height: 0 !important;\n min-height: 0 !important;\n}\n.as__navblox .sidenav-positioner .sidenav {\n top: 0;\n right: 0;\n background: var(--as-navblox-nav-bg, #fff);\n color: var(--as-navblox-nav-text, #21446b);\n width: 33vw;\n min-width: 300px;\n position: absolute;\n z-index: 99999;\n overflow: hidden;\n transform: scale(0%);\n transition: all 0.2s ease-in-out;\n padding: 1rem;\n}\n.as__navblox .sidenav-positioner .sidenav ul > li {\n list-style-type: none;\n}\n.as__navblox .sidenav-positioner .sidenav ul > li a {\n padding: 0.5rem 0;\n text-decoration: none;\n color: inherit;\n display: inline-block;\n opacity: 0.8;\n transition: all 0.15s ease-in-out;\n transform: scale(100%);\n}\n.as__navblox .sidenav-positioner .sidenav ul > li a:hover {\n transform: scale(110%);\n opacity: 1;\n}\n.as__navblox .sidenav-positioner .sidenav ul > li a:active {\n font-weight: bold;\n opacity: 1;\n}\n\nbody.nav-open .sidenav-positioner .sidenav {\n transform: scale(100%);\n}\n\n:root {\n --icontext-color: #007bff;\n}\n\n.as__textstyle-icontext {\n position: relative;\n}\n.as__textstyle-icontext .text {\n padding-top: 1.2rem;\n padding-left: 3rem !important;\n}\n.as__textstyle-icontext .icon {\n font-size: 38px;\n color: var(--icontext-color, #007bff);\n position: absolute;\n}\n\n:root {\n --layout-accordion-auto-open: true;\n}\n\n.use-accordion {\n --joda-use: accordion();\n --joda-class: as__accordion;\n}\n\n.as__accordion .section-h3 > .content, .as__accordion .section-h3 > .children {\n overflow: hidden;\n max-height: 0;\n transition: max-height 0.25s ease-out;\n}\n.as__accordion .open.section-h3 > .content, .as__accordion .open.section-h3 > .children {\n max-height: var(--orig-height);\n}\n.as__accordion .section-h3 {\n background-color: rgba(0, 0, 0, 0);\n transition: background-color 0.45s ease-out;\n}\n.as__accordion .section-h3.open {\n background-color: var(--as-accordion-open-bg, rgba(220, 224, 229, 0.5));\n}\n.as__accordion .section-h3 > .content, .as__accordion .section-h3 > .children {\n padding-left: 2.5rem;\n}\n.as__accordion .as__accordion-header {\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n margin-top: 2rem;\n padding-bottom: 2rem;\n}\n.as__accordion .as__accordion-header h3 {\n margin: 0;\n padding: 0;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.as__accordion .as__accordion-header h3:hover {\n background-color: var(--as-accordion-hover-bg, rgba(0, 0, 0, 0.02));\n}\n.as__accordion h3::before {\n display: inline-block;\n content: \"\";\n width: 2.5rem;\n flex-shrink: 0;\n height: 1.25rem;\n margin-right: 0;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d374b'%3E%3Cpath d='M19,11.5v1a.5.5,0,0,1-.5.5H13v5.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V13H5.5a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5H11V5.5a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5V11h5.5A.5.5,0,0,1,19,11.5Z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: 1.25rem;\n background-position: center center;\n}\n.as__accordion .open h2::before, .as__accordion .open h3::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d374b'%3E%3Cpath d='M5.5,13a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h13a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5Z'/%3E%3C/svg%3E\");\n}\n\n.use-hamburger {\n --joda-use: hamburger();\n}\n\nbody.nav-open a.as__hamburger {\n width: 3.3em;\n}\nbody.nav-open a.as__hamburger > .as__hamburger-bar:nth-child(1) {\n left: 0.6em;\n top: 0;\n transform: rotate(45deg);\n transform-origin: top left;\n}\nbody.nav-open a.as__hamburger > .as__hamburger-bar:nth-child(2) {\n opacity: 0;\n}\nbody.nav-open a.as__hamburger > .as__hamburger-bar:nth-child(3) {\n left: 0.6em;\n top: 2.2em;\n transform: rotate(-45deg);\n transform-origin: bottom left;\n}\n\na.as__hamburger {\n --hamburger-size: var(--hamburger-size, 0.9rem);\n --hamburger-bar-color: var(--hamburger-bar-color, #8c9b92);\n font-size: var(--hamburger-size, 1rem);\n display: block;\n width: 3.6em;\n height: 2.6em;\n padding: 0 !important;\n position: relative;\n cursor: pointer;\n text-decoration: none !important;\n}\na.as__hamburger span {\n padding-top: 3.8em;\n display: block;\n}\na.as__hamburger > .as__hamburger-menu {\n padding-top: 3.8em;\n text-align: center;\n width: 100%;\n color: var(--hamburger-bar-color, #8c9b92);\n}\na.as__hamburger > .as__hamburger-bar {\n background-color: var(--hamburger-bar-color, #8c9b92);\n display: block;\n height: 0.3em;\n position: absolute;\n right: 0;\n top: 0;\n transition: all 0.2s ease;\n width: 100%;\n}\na.as__hamburger > .as__hamburger-bar:nth-child(1) {\n top: 0.2em;\n}\na.as__hamburger > .as__hamburger-bar:nth-child(2) {\n top: 1.2em;\n}\na.as__hamburger > .as__hamburger-bar:nth-child(3) {\n top: 2.2em;\n}\n\n:root {\n --layout-accordion-auto-open: true;\n}\n\n.use-screen-mobile {\n --joda-use: screen();\n --layout-type: mobile;\n}\n\n.use-screen-desktop {\n --joda-use: screen();\n --layout-type: desktop;\n}\n\n.use-screen-laptop {\n --joda-use: screen();\n --layout-type: laptop;\n}\n\n.use-screen-tablet {\n --joda-use: screen();\n --layout-type: tablet;\n}\n\n.as__screen {\n display: block;\n isolation: isolate;\n position: relative;\n width: auto;\n}\n.as__screen > .as__screen-shadow {\n position: absolute;\n z-index: 0;\n}\n.as__screen > .as__screen-image {\n position: absolute;\n z-index: 1;\n border-radius: 0.3%;\n}\n.as__screen > .as__screen-overlay {\n position: absolute;\n z-index: 2;\n}\n.as__screen .as__screen-image img {\n width: 100%;\n height: 100%;\n object-position: top center;\n object-fit: cover;\n}\n.as__screen.mobile {\n aspect-ratio: 0.5208333333;\n}\n.as__screen.mobile > .as__screen-shadow {\n background-size: 110%;\n background-repeat: no-repeat;\n background-position: center center;\n top: -5%;\n left: -4%;\n width: 112%;\n height: 115%;\n opacity: 0.5;\n}\n.as__screen.mobile > .as__screen-image {\n background-color: white;\n top: 3%;\n left: 8%;\n width: 84%;\n height: 94%;\n overflow: hidden;\n}\n.as__screen.mobile > .as__screen-overlay {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n.as__screen.laptop {\n aspect-ratio: 1.724137931;\n}\n.as__screen.laptop > .as__screen-shadow {\n background-size: 95%;\n background-repeat: no-repeat;\n background-position: center center;\n top: -4%;\n left: -6%;\n width: 112%;\n height: 109%;\n opacity: 0.5;\n}\n.as__screen.laptop > .as__screen-image {\n background-color: white;\n top: 6%;\n left: 11%;\n width: 78%;\n height: 81%;\n overflow: hidden;\n z-index: 3;\n}\n.as__screen.laptop > .as__screen-overlay {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n.as__screen.tablet {\n aspect-ratio: 1.2987012987;\n}\n.as__screen.tablet > .as__screen-shadow {\n background-size: 95%;\n background-repeat: no-repeat;\n background-position: center center;\n top: -5%;\n left: -6%;\n width: 112%;\n height: 110%;\n opacity: 0.5;\n}\n.as__screen.tablet > .as__screen-image {\n background-color: white;\n top: 3%;\n left: 3%;\n width: 94%;\n height: 95%;\n overflow: hidden;\n}\n.as__screen.tablet > .as__screen-overlay {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n.as__screen.desktop {\n aspect-ratio: 1.2195121951;\n}\n.as__screen.desktop > .as__screen-shadow {\n background-size: 100%;\n background-repeat: no-repeat;\n background-position: center center;\n top: -6%;\n left: -2%;\n width: 104%;\n height: 112%;\n opacity: 0.5;\n}\n.as__screen.desktop > .as__screen-image {\n background-color: white;\n top: 6%;\n left: 2%;\n width: 95.5%;\n height: 63%;\n overflow: hidden;\n z-index: 3;\n}\n.as__screen.desktop > .as__screen-overlay {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n}\n\n:root {\n --layout-accordion-auto-open: true;\n}\n\n.mask {\n mask-size: contain;\n mask-position: center center;\n mask-repeat: no-repeat;\n}\n.mask.shape-blob1 {\n mask-image: var(--shape-blob1);\n -webkit-mask-image: var(--shape-blob1);\n}\n.mask.shape-blob1-anim {\n mask-image: var(--shape-blob1-anim);\n -webkit-mask-image: var(--shape-blob1-anim);\n}\n\n:root {\n --layout-accordion-auto-open: true;\n}\n\n.use-input {\n --joda-use: input();\n}\n\n:root {\n --layout-cols: 8;\n --layout-side-content: \"This is some side-content from --layout-side-content\" ;\n}\n\n:root {\n --layout-cols: 8;\n --layout-side-content: \"This is some side-content from --layout-side-content\" ;\n}\n\n.do-row {\n --joda-use: row();\n}\n\n:root {\n --layout-cols: 8;\n --layout-side-content: \"This is some side-content from --layout-side-content\" ;\n}\n\n.use-footer1 {\n --joda-use: footer1();\n --layout-minifooter: #minifooter;\n}\n\n.as__footer {\n --as-footer-background: var(--bs-primary, #000);\n --as-footer-text-color: var(--bs-light, #fff);\n --as-footer-link-color: var(--bs-light, #fff);\n background: var(--as-footer-background, #f0f0f0);\n color: var(--as-footer-text-color, #333333);\n padding-top: 4.5rem;\n}\n.as__footer a {\n color: var(--as-footer-text-color, #333333);\n}\n.as__footer .as__footer-column {\n margin-bottom: 3.5rem;\n}\n.as__footer .as__footer-column p {\n margin-bottom: 0.5rem;\n}\n.as__footer .as__footer-column ul {\n padding-left: 0;\n}\n.as__footer .as__footer-column ul li {\n text-decoration: none;\n list-style: none;\n}\n.as__footer .as__footer-minifooter {\n text-align: left;\n margin-top: 2rem;\n}\n.as__footer .as__footer-minifooter > * {\n margin-bottom: 0;\n}\n\n:root {\n --as-layout-offset-top: 100px;\n}\n\n.do-header {\n --joda-use: header();\n}\n\n.as__header .as__header-background img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n}\n.as__header .as__header-main {\n position: relative;\n bottom: 0;\n}\n\n.as__header.default .no-image {\n height: 38vh;\n min-height: 250px;\n background: var(--as-border-color, #007bff);\n}\n.as__header.default .as__header-background {\n width: 100%;\n height: 61.8vh;\n min-height: var(--as-header-min-height, 350px);\n overflow: hidden;\n position: relative;\n border-bottom: 10px solid;\n border-bottom-color: var(--as-border-color, #007bff);\n}\n.as__header.default .as__header-background.no-image {\n min-height: unset;\n height: calc(var(--as-layout-offset-top) + 95px);\n background: var(--as-border-color, #007bff);\n}\n.as__header.default .as__header-main {\n position: relative;\n bottom: 0;\n padding-top: 1.5rem;\n}\n\n:root {\n --layout-hero-style: fullsize;\n --as-hero-offset: 110px;\n --as-hero-height-adjustement: 10px;\n --as-min-hero-height: 500px;\n}\n\n.do-hero1 {\n --joda-use: hero1();\n}\n\n.as__hero1 {\n border-bottom: 10px solid;\n border-bottom-color: var(--as--border-color, #007bff);\n margin-top: var(--as-hero-offset);\n}\n.as__hero1 .full_height {\n min-height: max(100svh - var(--as-hero-height-adjustement) - var(--as-hero-offset), var(--as-min-hero-height));\n}\n.as__hero1 .v-hide {\n visibility: hidden;\n}\n.as__hero1 .as__hero1_content-row.mobile {\n min-height: 66vh;\n align-content: center;\n}\n.as__hero1 .as__hero1_image-mobile img {\n max-height: 60svh;\n height: 100%;\n width: 100%;\n min-height: 33svh;\n min-width: inherit;\n object-fit: cover;\n object-position: center center;\n}\n.as__hero1 .as__hero1_image {\n overflow: hidden;\n}\n.as__hero1 .as__hero1_image img {\n height: 100%;\n width: 100%;\n min-height: inherit;\n min-width: inherit;\n object-fit: cover;\n object-position: center center;\n}\n.as__hero1 .image-overlay {\n background-color: var(--as-image-overlay-color);\n top: 0;\n z-index: 999;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.as__hero1 .image-overlay.overlay-fade {\n background-color: unset;\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(255, 255, 255));\n}\n\n.page1 {\n --section-spaceing: 7.5rem;\n --bs-primary: #E0B731;\n --bs-secondary: #9BB1B7;\n --bs-success: #2E4870;\n --bs-danger: #A87E90 ;\n --bs-light: #FBFAFA;\n --layout-break1: xl;\n --section-spacing: 4.5rem;\n --background-light: #ffffff;\n --as-section-spacing: 4.5rem;\n}\n.page1 h3 i.bi::before {\n line-height: inherit;\n vertical-align: sub;\n color: var(--bs-primary, #000);\n}\n.page1 .section-h1 {\n --joda-class: header1;\n}\n.page1 .section-h1 .content {\n padding-right: 60px;\n --joda-class: container;\n}\n.page1 .section-h1 .content h1 {\n --joda-class: text-center :: display-5 :xl: display-3;\n}\n.page1 .sec2 {\n padding-top: 3rem;\n padding-bottom: var(--section-spaceing);\n --joda-class: container;\n}\n.page1 .sec2 h2 {\n --joda-class: text-center display-4;\n}\n.page1 .sec2 .section-h3 {\n --joda-group: @row;\n --joda-class: col g-5;\n}\n.page1 .sec2 .section-h3 h3 {\n --joda-class: text-success;\n}\n.page1 .showcase {\n padding-top: 10rem;\n}\n.page1 .showcase .content {\n --joda-class: container position-relative;\n}\n.page1 .showcase .content .as__screen:nth-child(1) {\n transform: perspective(60vw) rotateY(calc(-5deg + var(--mouse-x) * 0.02deg)) rotateX(calc(0deg + var(--mouse-y) * 0.002deg));\n}\n.page1 .showcase .content .as__screen:nth-child(2) {\n transform: perspective(60vw) rotateY(calc(10deg + var(--mouse-x) * 0.03deg)) rotateX(calc(0deg + var(--mouse-y) * 0.004deg));\n}\n.page1 .header1 {\n min-height: 60svh;\n position: relative;\n display: flex;\n justify-content: center;\n align-content: center;\n align-items: center;\n text-align: center;\n}\n.page1 .header1 h1 {\n font-style: normal;\n padding: 2rem;\n}\n.page1 .header1 p {\n font-size: 1.5rem;\n font-weight: 300;\n font-style: normal;\n padding: 2rem;\n padding-bottom: 0rem;\n}\n.page1 .header1 .btn {\n --joda-class: shadow;\n}\n.page1 .header1::before {\n position: absolute;\n z-index: -1;\n content: \"\";\n left: 0;\n top: -100%;\n bottom: 0;\n right: 30px;\n background: linear-gradient(90deg, var(--bs-light) 0%, rgba(0, 0, 0, 0.2) 30%, var(--bs-light) 100%);\n transform: rotateZ(5deg);\n box-shadow: calc(0px - (var(--mouse-x) - 50) * 0.018px) calc(3px - (var(--mouse-y) - 50) * 0.11px) 10px 0 rgba(0, 0, 0, 0.1);\n border-radius: 0 0 80px 0;\n}\n.page1 .sec3 {\n min-height: 60svh;\n position: relative;\n z-index: 2;\n margin-bottom: var(--section-spaceing);\n padding-top: 4rem;\n padding-bottom: 4rem;\n justify-content: center;\n align-content: center;\n align-items: center;\n text-align: center;\n padding-left: 30px;\n}\n.page1 .sec3 h2 {\n --joda-class: display-4;\n padding: 3rem;\n}\n.page1 .sec3 h2 {\n padding-bottom: 3rem;\n}\n.page1 .sec3 .section-h3 {\n --joda-group: @row;\n --joda-class: col g-5;\n text-align: left;\n padding-bottom: 2rem;\n}\n.page1 .sec3 > .content {\n width: 100%;\n --joda-class: container;\n z-index: 2;\n}\n.page1 .sec3 > .children {\n width: 100%;\n --joda-class: container;\n z-index: 1;\n}\n.page1 .sec3::before {\n position: absolute;\n z-index: -1;\n content: \"\";\n left: 30px;\n top: 0;\n bottom: 0;\n right: 0;\n background: var(--bs-light, #ccc);\n box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);\n border-radius: 40px 0 0 40px;\n}\n.page1 .sec4 {\n --joda-class: container;\n}\n.page1 .sec4 .section-h3:nth-child(1) {\n --joda-class: \"my-auto :: col-12 order-2 :md: col-6 order-2 :xl: col-4\";\n}\n.page1 .sec4 .section-h3:nth-child(2) {\n --joda-class: \"my-auto mx-auto :: col-12 order-1 :md: col-12 order-1 :xl: col-4\";\n}\n.page1 .sec4 .section-h3:nth-child(3) {\n --joda-class: \"my-auto :: col-12 order-3 :md: col-6 order-3 :xl: col-4\";\n}\n.page1 .sec4 .section-h3 {\n --joda-group: @row;\n padding-bottom: var(--section-spaceing);\n}\n.page1 .sec4 .section-h3 img {\n --joda-wrap: @d-flex @justify-content-center > @class=ratio ratio-1x1 :md: w-50 :xl: w-100;\n object-fit: cover;\n object-position: center left;\n --joda-class: mask shape-blob1-anim;\n}\n.page1 .dark {\n background: var(--bs-primary, #000);\n color: var(--bs-light, #fff);\n}\n.page1 .dark a {\n color: inherit;\n}\n.page1 nav {\n --joda-class: use-navblox as__navblox;\n --as-navblox-secondary-color: transparent;\n --as-navblox-nav-text: #ccc;\n}\n.page1 nav .as__hamburger {\n --hamburger-bar-color: #ccc;\n --hamburger-size: 0.7rem;\n}\n.page1 footer {\n background: #2d374b;\n --joda-use: footer1();\n --layout-container: container;\n --layout-minifooter: #minifooter;\n}\n.page1 footer .as__footer {\n --as-footer-background: #2d374b;\n}\n.page1 footer p, .page1 footer a {\n color: rgba(255, 255, 255, 0.8);\n}\n.page1 footer a:hover {\n color: rgb(255, 255, 255);\n}\n.page1 footer h3 {\n margin-top: 4rem;\n font-size: 1rem;\n text-transform: uppercase;\n}\n\nshowcase-element {\n --aspect-ratio: calc(16 / 9);\n}\nshowcase-element.big {\n --aspect-ratio: 0.5;\n}\nshowcase-element .preview {\n --scale: 0.2;\n --width: 350px;\n --height: calc(var(--width) / var(--aspect-ratio));\n position: relative;\n width: var(--width);\n height: var(--height);\n overflow: hidden;\n display: inline-block;\n border: 3px solid #ccc;\n}\nshowcase-element .preview iframe {\n position: relative;\n right: calc(var(--width) / var(--scale) / 2 - var(--width) / 2);\n bottom: calc(var(--height) / var(--scale) / 2 - var(--height) / 2);\n width: calc(var(--width) / var(--scale));\n height: calc(var(--height) / var(--scale));\n transform: scale(var(--scale));\n}\nshowcase-element .preview .overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 1.5rem;\n font-weight: bold;\n text-align: center;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n cursor: pointer;\n}\nshowcase-element .preview .overlay:hover {\n opacity: 1;\n}\n\njoda-content {\n display: none;\n}\n\njoda-content.loaded {\n display: block;\n}\n\njoda-content {\n display: none;\n}\n\njoda-content.loaded {\n display: block;\n}\n\nhtml.loader::before {\n content: \"Seite lädt...\";\n font-family: sans-serif;\n font-size: 12px;\n line-height: 10px;\n position: fixed;\n text-align: center;\n color: white;\n margin-top: 1px;\n -webkit-animation: leu--site-loader 60s ease-out;\n animation: leu--site-loader 60s ease-out;\n display: block;\n background-color: gray;\n height: 12px;\n width: 2%;\n}\n\n@keyframes leu--site-loader {\n 3% {\n width: 2%;\n }\n 5% {\n width: 50%;\n }\n 10% {\n width: 80%;\n }\n 100% {\n width: 100%;\n }\n}\nbody > * {\n display: none;\n}\n\nbody.loaded > * {\n display: block;\n}\n\nbody {\n min-height: 3000vh;\n opacity: 0;\n transition: opacity 0.25s;\n}\n\nbody.loaded {\n min-height: unset;\n opacity: 1;\n}","\n\n$primary: #007bff !default;\n$secondary: #6c757d !default;\n$light: #f8f9fa !default;\n\n\n$as-mainbar-color: white !default;\n$as-minibar-color: $primary !default;\n\n$content-height-adjustment: 0px !default;\n$min-page-height: 600px !default;\n\n\njoda-content {\n --joda-init: true;\n}\n","\n:root {\n --as-image-aspect-ratio: 16 / 9;\n}\n\n.do-image {\n --joda-use: image();\n}\n\n\n.as__image {\n width: 100%;\n position: relative;\n\n &>.image {\n width: 100%;\n height: 100%;\n aspect-ratio: var(--as-image-aspect-ratio, 4 / 5);\n &>img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n }\n }\n}\n","\n:root {\n\n}\n\n.use-map {\n --joda-use: map();\n}\n\n.as__map {\n width: 100%;\n aspect-ratio: 21/9;\n\n position: relative;\n\n .as__map-overlay {\n & > img {\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n filter: opacity(0.5);\n }\n & > div {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n height: 100%;\n width: 100%;\n z-index: 99;\n text-align: center;\n }\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n iframe {\n }\n}\n",":root {\n --layout-navbar-style: default;\n --layout-navbar-position: fixed;\n --as-minibar-height: 24px;\n --as-minibar-background: #21446b;\n --as-minibar-text-color: white;\n}\n\n\n.use-navbar {\n --joda-use: navbar();\n}\n\n.as__navbar {\n height: auto;\n top: 0;\n width: 100%;\n\n &.fixed {\n position: fixed;\n top: 0;\n width: 100%;\n }\n &.absolute {\n position: absolute;\n top: 0;\n width: 100%;\n }\n\n transition: opacity 1s ease-in-out;\n position: fixed;\n z-index: 999;\n isolation: isolate;\n opacity: 1;\n\n &.auto-fixed {\n &.scrolled {\n &.fixed {\n opacity: 1;\n position: fixed;\n }\n opacity: 0;\n }\n }\n\n .navbar-brand {\n display: block;\n height: 84px;\n max-width: 220px; // max width for mobile\n width: 220px;\n img {\n object-fit: contain;\n object-position: left center;\n height: 100%;\n width: 100%;\n }\n }\n\n .as__minibar {\n overflow: hidden;\n color: var(--as-minibar-text-color);\n background: var(--as-minibar-background);\n height: var(--as-minibar-height, 24px);\n transition: height 0.3s ease-in-out;\n z-index: 9999;\n ul {\n\n text-align: right;\n text-decoration: none;\n list-style-type: none;\n li {\n display: inline-block;\n margin: 0 0.5rem;\n a {\n text-decoration: none;\n\n &:hover {\n\n text-decoration: underline;\n }\n }\n }\n }\n }\n\n .as__mainbar {\n .nav-link {\n padding-right: 0.8rem;\n padding-left: 0.8rem;\n }\n\n .navbar-collapse.show {\n background: var(--as-mainbar-background, white);\n\n }\n .navbar-toggler {\n background: rgba(255, 255,255, 0.5);\n }\n }\n}\n\n.as__navbar.scrolled {\n .as__minibar {\n height: 0;\n }\n}\n\n/* Theme specific styles */\n.as__navbar.default {\n\n .as__mainbar {\n background: var(--as-mainbar-background, white);\n border-bottom: 1px solid var(--bs-primary, #0d6efd);\n box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);\n }\n .as__minibar {\n font-size: 13px;\n line-height: 24px;\n background: var(--as-minibar-background, $primary);\n a {\n color: white;\n }\n }\n}\n\n.as__navbar.transparent {\n .as__minibar{\n border: 0;\n font-size: 13px;\n line-height: 24px;\n }\n .as__mainbar {\n background-color: transparent !important;\n transition: all 0.3s ease-in-out;\n border: 0;\n\n a {\n font-weight: bolder;\n // text-frame outset in white to read text better on background\n text-shadow: 1px 1px 1px var(--bs-light, #ccc), -1px -1px 1px var(--bs-light, #ccc), 1px -1px 1px var(--bs-light, #ccc), -1px 1px 1px var(--bs-light, #ccc);\n\n\n }\n }\n\n}\n.as__navbar.transparent.scrolled {\n .as__mainbar {\n background-color: var(--as-mainbar-background, white) !important;\n border-bottom: 1px solid var(--bs-primary, #0d6efd);\n box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);\n\n }\n .as__minibar {\n height: 0;\n }\n}\n",":root {\n\n\n}\n\n\n.use-navblox {\n --joda-class: as__navblox;\n --as-navblox-secondary-color: #21446b;\n --as-navblox-nav-bg: #21446b;\n --as-navblox-nav-text: #fff;\n}\n\n.as__navblox {\n .row > div {\n position: relative;\n background: var(--as-navblox-secondary-color, #21446b);\n color: white;\n border-left: 1px dashed white;\n min-height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n\n &.block {\n i.bi::before {\n line-height: inherit;\n padding-right: 0.5rem;\n }\n\n a {\n display: flex;\n align-items: center;\n padding: 15px;\n line-height: 1.5rem;\n color: inherit;\n text-decoration: none;\n transition: all 0.15s ease-in-out;\n\n }\n a:hover {\n\n transform: scale(110%);\n }\n }\n\n\n .navbar-brand {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n color: #21446b;\n img {\n height: 6.5rem;\n width: auto;\n\n }\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n span {\n font-size: 2.5rem;\n padding-left: 1rem;\n line-height: 2.5rem;\n }\n\n &.mobile {\n position: relative;\n height: 150px;\n width: 100%;\n }\n }\n }\n\n\n .sidenav-positioner {\n\n height: 0 !important;\n min-height: 0 !important;\n .sidenav {\n top: 0;\n right: 0;\n background: var(--as-navblox-nav-bg, #fff);\n color: var(--as-navblox-nav-text, #21446b);\n width: 33vw;\n min-width: 300px;\n position: absolute;\n z-index: 99999;\n overflow: hidden;\n transform: scale(0%);\n transition: all 0.2s ease-in-out;\n padding: 1rem;\n\n ul > li {\n list-style-type: none;\n\n a {\n padding: 0.5rem 0;\n text-decoration: none;\n color: inherit;\n display: inline-block;\n opacity: 0.8;\n transition: all 0.15s ease-in-out;\n transform: scale(100%);\n &:hover {\n transform: scale(110%);\n opacity: 1;\n }\n &:active {\n font-weight: bold;\n opacity: 1;\n }\n }\n }\n\n }\n }\n}\n\nbody.nav-open .sidenav-positioner .sidenav {\n transform: scale(100%);\n}\n","\n:root {\n --icontext-color: #{$primary};\n}\n\n\n.as__textstyle-icontext {\n position:relative;\n .text {\n padding-top: 1.2rem;\n padding-left: 3rem !important;\n }\n .icon {\n font-size: 38px;\n color: var(--icontext-color, $primary);\n position: absolute;\n }\n}\n","\n:root {\n --layout-accordion-auto-open: true;\n}\n\n.use-accordion {\n --joda-use: accordion();\n --joda-class: as__accordion;\n}\n\n\n.as__accordion {\n\n .section-h3 > .content, .section-h3 > .children {\n overflow: hidden;\n max-height: 0;\n transition: max-height 0.25s ease-out;\n }\n .open.section-h3 > .content, .open.section-h3 > .children{\n max-height: var(--orig-height);;\n\n }\n\n .section-h3 {\n background-color: rgba(0, 0, 0, 0);\n transition: background-color 0.45s ease-out;\n }\n\n .section-h3.open {\n background-color: var(--as-accordion-open-bg, rgba(220,224,229,.5));\n }\n\n .section-h3 > .content, .section-h3 > .children {\n padding-left: 2.5rem;\n }\n\n .as__accordion-header {\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n margin-top: 2rem;\n padding-bottom: 2rem;\n h3 {\n margin:0; padding:0;\n padding-top: 1rem;\n padding-bottom: 1rem;\n &:hover {\n background-color: var(--as-accordion-hover-bg, rgba(0, 0, 0, 0.02));\n }\n }\n\n\n }\n\n\n\n h3::before {\n display: inline-block;\n content: \"\";\n width: 2.5rem;\n flex-shrink: 0;\n //width: 1.25rem;\n height: 1.25rem;\n margin-right: 0;\n\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d374b'%3E%3Cpath d='M19,11.5v1a.5.5,0,0,1-.5.5H13v5.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V13H5.5a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5H11V5.5a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5V11h5.5A.5.5,0,0,1,19,11.5Z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-size: 1.25rem;\n background-position: center center;\n }\n\n .open h2::before, .open h3::before {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d374b'%3E%3Cpath d='M5.5,13a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h13a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5Z'/%3E%3C/svg%3E\");\n }\n\n}\n",".use-hamburger {\n --joda-use: hamburger();\n}\n\n\n\nbody.nav-open a.as__hamburger {\n\n width: 3.3em;\n &>.as__hamburger-bar {\n &:nth-child(1) {\n left: .6em;\n top: 0;\n transform: rotate(45deg);\n transform-origin: top left;\n }\n\n &:nth-child(2) {\n opacity: 0;\n //transform: translateY(-50%);\n }\n\n &:nth-child(3) {\n left: .6em;\n top: 2.2em;\n transform: rotate(-45deg);\n transform-origin: bottom left;\n //transform: translateY(-50%);\n }\n }\n}\n\na.as__hamburger {\n --hamburger-size: var(--hamburger-size, 0.9rem);\n --hamburger-bar-color: var(--hamburger-bar-color, #8c9b92);\n\n font-size: var(--hamburger-size, 1rem);\n display: block;\n width: 3.6em;\n height: 2.6em;\n padding: 0 !important;\n position: relative;\n cursor: pointer;\n text-decoration: none !important;\n\n span {\n padding-top: 3.8em;\n display: block;\n\n\n }\n &>.as__hamburger-menu {\n padding-top: 3.8em;\n text-align: center;\n width: 100%;\n color: var(--hamburger-bar-color, #8c9b92);\n }\n &>.as__hamburger-bar {\n background-color: var(--hamburger-bar-color, #8c9b92);\n display: block;\n height: .3em;\n position: absolute;\n right: 0;\n top: 0;\n transition: all .2s ease;\n width: 100%;\n\n\n &:nth-child(1) {\n top: 0.2em;\n }\n\n &:nth-child(2) {\n top: 1.2em;\n //transform: translateY(-50%);\n }\n &:nth-child(3) {\n top: 2.2em;\n //transform: translateY(-50%);\n }\n }\n\n\n}\n","\n:root {\n --layout-accordion-auto-open: true;\n}\n\n.use-screen-mobile {\n --joda-use: screen();\n --layout-type: mobile;\n}\n\n.use-screen-desktop {\n --joda-use: screen();\n --layout-type: desktop;\n}\n\n.use-screen-laptop {\n --joda-use: screen();\n --layout-type: laptop;\n}\n.use-screen-tablet {\n --joda-use: screen();\n --layout-type: tablet;\n}\n\n.as__screen {\n\n display: block;\n isolation: isolate; // Create new zindex stacking context\n\n position: relative;\n width: auto;\n\n & > .as__screen-shadow {\n position: absolute;\n z-index: 0;\n }\n\n & > .as__screen-image {\n position: absolute;\n z-index: 1;\n border-radius: 0.3%;\n }\n\n & > .as__screen-overlay {\n position: absolute;\n z-index: 2;\n\n }\n\n .as__screen-image img {\n width: 100%;\n height: 100%;\n object-position: top center;\n object-fit: cover;\n }\n\n\n &.mobile {\n\n aspect-ratio: calc(1 / 1.92);\n\n & > .as__screen-shadow {\n background-size: 110%;\n background-repeat: no-repeat;\n background-position: center center;\n top: -5%;\n left: -4%;\n width: 112%;\n height: 115%;\n opacity: 0.5;\n\n }\n\n & > .as__screen-image {\n background-color: white;\n top: 3%;\n left: 8%;\n width: 84%;\n height: 94%;\n overflow: hidden;\n }\n\n & > .as__screen-overlay {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n\n }\n }\n\n &.laptop {\n\n aspect-ratio: calc(1 / 0.58);\n\n & > .as__screen-shadow {\n background-size: 95%;\n background-repeat: no-repeat;\n background-position: center center;\n top: -4%;\n left: -6%;\n width: 112%;\n height: 109%;\n opacity: 0.5;\n\n }\n\n & > .as__screen-image {\n background-color: white;\n top: 6%;\n left: 11%;\n width: 78%;\n height: 81%;\n overflow: hidden;\n z-index: 3;\n\n }\n\n & > .as__screen-overlay {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n\n }\n }\n\n &.tablet {\n\n aspect-ratio: calc(1 / 0.77);\n\n & > .as__screen-shadow {\n background-size: 95%;\n background-repeat: no-repeat;\n background-position: center center;\n top: -5%;\n left: -6%;\n width: 112%;\n height: 110%;\n opacity: 0.5;\n\n }\n\n & > .as__screen-image {\n background-color: white;\n top: 3%;\n left: 3%;\n width: 94%;\n height: 95%;\n overflow: hidden;\n\n }\n\n & > .as__screen-overlay {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n\n }\n }\n\n &.desktop {\n\n aspect-ratio: calc(1 / 0.82);\n\n & > .as__screen-shadow {\n background-size: 100%;\n background-repeat: no-repeat;\n background-position: center center;\n top: -6%;\n left: -2%;\n width: 104%;\n height: 112%;\n opacity: 0.5;\n\n }\n\n & > .as__screen-image {\n background-color: white;\n top: 6%;\n left: 2%;\n width: 95.5%;\n height: 63%;\n overflow: hidden;\n z-index: 3;\n\n }\n\n & > .as__screen-overlay {\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n\n }\n }\n}\n","\n:root {\n --layout-accordion-auto-open: true;\n}\n\n.mask {\n mask-size: contain;\n mask-position: center center;\n mask-repeat: no-repeat;\n &.shape-blob1 {\n mask-image: var(--shape-blob1);\n -webkit-mask-image: var(--shape-blob1);\n }\n &.shape-blob1-anim {\n mask-image: var(--shape-blob1-anim);\n -webkit-mask-image: var(--shape-blob1-anim)\n }\n}\n\n","\n:root {\n --layout-accordion-auto-open: true;\n}\n\n.use-input {\n --joda-use: input();\n}\n\n\n","\n\n:root {\n --layout-cols: 8;\n --layout-side-content: \"This is some side-content from --layout-side-content\"\n}\n\n\n.do-two-col {\n\n\n}\n","\n\n:root {\n --layout-cols: 8;\n --layout-side-content: \"This is some side-content from --layout-side-content\"\n}\n\n.do-row {\n --joda-use: row();\n}\n\n.as__row {\n\n}\n\n\n",":root {\n --layout-cols: 8;\n --layout-side-content: \"This is some side-content from --layout-side-content\"\n}\n\n\n.use-footer1 {\n --joda-use: footer1();\n --layout-minifooter: #minifooter;\n}\n\n.as__footer {\n --as-footer-background: var(--bs-primary, #000);\n --as-footer-text-color: var(--bs-light, #fff);\n --as-footer-link-color: var(--bs-light, #fff);\n\n background: var(--as-footer-background, #f0f0f0);\n color: var(--as-footer-text-color, #333333);\n\n a {\n color: var(--as-footer-text-color, #333333);\n }\n\n padding-top: 4.5rem;\n\n .as__footer-column {\n\n margin-bottom: 3.5rem;\n\n p {\n margin-bottom: 0.5rem;\n }\n\n ul {\n padding-left: 0;\n\n li {\n text-decoration: none;\n list-style: none;\n }\n }\n\n }\n\n .as__footer-minifooter {\n text-align: left;\n margin-top: 2rem;\n\n & > * {\n margin-bottom: 0;\n }\n }\n}\n","\n:root {\n --as-layout-offset-top: 100px;\n}\n\n.do-header{\n --joda-use: header();\n}\n\n.as__header {\n\n .as__header-background {\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .as__header-main {\n position: relative;\n bottom: 0;\n }\n}\n\n.as__header.default {\n .no-image {\n height: 38vh;\n min-height: 250px;\n background: var(--as-border-color, $primary);\n\n }\n .as__header-background {\n width: 100%;\n height: 61.8vh;\n min-height: var(--as-header-min-height, 350px);\n overflow: hidden;\n position: relative;\n border-bottom: 10px solid;\n border-bottom-color: var(--as-border-color, $primary);\n\n &.no-image {\n min-height: unset;\n height: calc(var(--as-layout-offset-top) + 95px);\n background: var(--as-border-color, $primary);\n }\n }\n .as__header-main {\n position: relative;\n bottom: 0;\n padding-top: 1.5rem;\n }\n\n\n}\n","\n:root {\n --layout-hero-style: fullsize;\n --as-hero-offset: 110px;\n --as-hero-height-adjustement: 10px;\n --as-min-hero-height: 500px;\n}\n\n.do-hero1 {\n --joda-use: hero1();\n}\n\n\n.as__hero1 {\n .full_height {\n min-height: max(calc(100svh - var(--as-hero-height-adjustement) - var(--as-hero-offset)), var(--as-min-hero-height));\n }\n border-bottom: 10px solid;\n border-bottom-color: var(--as--border-color, $primary);\n\n margin-top: var(--as-hero-offset);\n\n\n .v-hide {\n visibility: hidden;\n }\n .as__hero1_content-row {\n &.mobile {\n min-height: 66vh;\n align-content: center;\n }\n }\n\n .as__hero1_image-mobile {\n img {\n max-height: 60svh;\n height: 100%;\n width: 100%;\n min-height: 33svh;\n min-width: inherit;\n object-fit: cover;\n object-position: center center;\n }\n }\n .as__hero1_image {\n overflow: hidden;\n img {\n // Object-fit requires a height to be set on the image\n height: 100%;\n width: 100%;\n min-height: inherit;\n min-width: inherit;\n object-fit: cover;\n object-position: center center;\n\n }\n }\n .image-overlay {\n background-color: var(--as-image-overlay-color);\n top: 0;\n z-index: 999;\n bottom: 0;\n left: 0;\n right: 0;\n &.overlay-fade {\n background-color: unset;\n background-image: linear-gradient(to left, rgba(0, 0, 0, 0.0), rgba(255, 255, 255, 1));\n }\n\n }\n\n\n}\n","\n.page1 {\n\n --section-spaceing: 7.5rem;\n --bs-primary: #E0B731;\n --bs-secondary: #9BB1B7;\n --bs-success: #2E4870;\n --bs-danger: #A87E90 ;\n --bs-light: #FBFAFA;\n --layout-break1: xl;\n --section-spacing: 4.5rem;\n --background-light: #ffffff;\n --as-section-spacing: 4.5rem;\n\n\n h3 i.bi::before {\n line-height: inherit;\n vertical-align: sub;\n color: var(--bs-primary, #000);\n }\n\n\n .section-h1 {\n --joda-class: header1;\n .content {\n padding-right: 60px;\n --joda-class: container;\n h1 {\n --joda-class: text-center :: display-5 :xl: display-3;\n }\n }\n }\n\n\n .sec2 {\n padding-top: 3rem;\n padding-bottom: var(--section-spaceing);\n h2{\n --joda-class: text-center display-4;\n }\n --joda-class: container;\n .section-h3 {\n h3 {\n --joda-class: text-success;\n }\n --joda-group: @row;\n --joda-class: col g-5;\n }\n }\n\n\n .showcase {\n padding-top: 10rem;\n .content {\n --joda-class: container position-relative;\n\n .as__screen:nth-child(1) {\n transform: perspective(60vw) rotateY(calc(-5deg + var(--mouse-x) * 0.02deg)) rotateX(calc(-0deg + var(--mouse-y) * 0.002deg));\n }\n .as__screen:nth-child(2) {\n transform: perspective(60vw) rotateY(calc(10deg + var(--mouse-x) * 0.03deg)) rotateX(calc(-0deg + var(--mouse-y) * 0.004deg));\n }\n }\n }\n\n @import \"style/header\";\n @import \"style/sec3\";\n @import \"style/sec4\";\n\n .dark {\n background: var(--bs-primary, #000);\n color: var(--bs-light, #fff);\n a {\n color: inherit;\n }\n\n }\n\n nav {\n --joda-class: use-navblox as__navblox;\n --as-navblox-secondary-color: transparent;\n --as-navblox-nav-text: #ccc;\n .as__hamburger {\n --hamburger-bar-color: #ccc;\n --hamburger-size: 0.7rem;\n }\n\n }\n\n footer {\n background: #2d374b;\n\n .as__footer {\n --as-footer-background: #2d374b;\n }\n\n --joda-use: footer1();\n --layout-container: container;\n --layout-minifooter: #minifooter;\n\n p, a {\n color: rgba(255, 255, 255, 0.8)\n }\n a:hover {\n color: rgba(255, 255, 255, 1)\n }\n\n h3 {\n margin-top: 4rem;\n font-size: 1.0rem;\n // make uppercase\n text-transform: uppercase;\n }\n }\n\n\n\n\n}\n\n","\n.header1 {\n min-height: 60svh;\n position: relative;\n\n display: flex;\n //Align the flex items in the vertical and horizontal center\n justify-content: center;\n align-content: center;\n\n align-items: center;\n text-align: center;\n\n h1 {\n font-style: normal;\n padding: 2rem;\n\n }\n\n p {\n font-size: 1.5rem;\n font-weight: 300;\n font-style: normal;\n padding: 2rem;\n padding-bottom: 0rem;\n }\n\n .btn {\n --joda-class: shadow;\n }\n\n\n &::before {\n position: absolute;\n z-index: -1;\n content: \"\";\n left: 0;\n top: -100%;\n bottom: 0;\n right: 30px;\n //background: var(--bs-light, #ccc);\n //transition: box-shadow 0.02s linear;\n background: linear-gradient(90deg, var(--bs-light) 0%, rgba(0,0,0,0.2) calc(30%), var(--bs-light) 100%);\n transform: rotateZ(5deg);\n //transform: perspective(calc(var(--mouse-x) * 1.5px)) rotateY(calc(var(--mouse-y) * 1.5deg));\n box-shadow: calc(0px - calc(var(--mouse-x) - 50) * 0.018px) calc(3px - calc(var(--mouse-y) - 50) * 0.11px) 10px 0 rgba(0, 0, 0, 0.1);\n border-radius: 0 0 80px 0;\n }\n}\n","\n.sec3 {\n min-height: 60svh;\n position: relative;\n z-index: 2;\n margin-bottom: var(--section-spaceing);\n padding-top: 4rem;\n padding-bottom: 4rem;\n //Align the flex items in the vertical and horizontal center\n justify-content: center;\n align-content: center;\n\n align-items: center;\n text-align: center;\n\n h2 {\n --joda-class: display-4;\n padding: 3rem;\n }\n h2 {\n padding-bottom: 3rem;\n }\n .section-h3 {\n --joda-group: @row;\n --joda-class: col g-5;\n text-align: left;\n padding-bottom: 2rem;\n }\n\n & > .content {\n width: 100%;\n --joda-class: container;\n z-index: 2;\n }\n\n & > .children {\n width: 100%;\n --joda-class: container;\n z-index: 1;\n }\n\n padding-left: 30px;\n\n &::before {\n position: absolute;\n z-index: -1;\n content: \"\";\n left: 30px;\n top: 0;\n bottom: 0;\n right: 0;\n background: var(--bs-light, #ccc);\n box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);\n border-radius: 40px 0 0 40px;\n //transform: perspective(60vw) rotateY(calc(-5deg + var(--mouse-x) * 0.05deg)) rotateX(calc(-0deg + var(--mouse-y) * 0.005deg));\n\n }\n}\n","\n\n.sec4 {\n\n --joda-class: container;\n\n .section-h3:nth-child(1) {\n --joda-class: 'my-auto :: col-12 order-2 :md: col-6 order-2 :xl: col-4';\n }\n .section-h3:nth-child(2) {\n --joda-class: 'my-auto mx-auto :: col-12 order-1 :md: col-12 order-1 :xl: col-4';\n }\n .section-h3:nth-child(3) {\n --joda-class: 'my-auto :: col-12 order-3 :md: col-6 order-3 :xl: col-4';\n\n }\n .section-h3 {\n --joda-group: @row;\n //--joda-class: my-auto :: col-12 :xl: col-4;\n\n padding-bottom: var(--section-spaceing);\n img {\n\n --joda-wrap: @d-flex @justify-content-center > @class=ratio ratio-1x1 :md: w-50 :xl: w-100;\n object-fit: cover;\n object-position: center left;\n --joda-class: mask shape-blob1-anim;\n }\n }\n\n}\n","\n\n\nshowcase-element {\n --aspect-ratio: calc(16 / 9);\n &.big {\n --aspect-ratio: 0.5;\n }\n .preview {\n --scale: 0.2;\n\n --width: 350px;\n --height: calc(var(--width) / var(--aspect-ratio));\n position: relative;\n width: var(--width);\n height: var(--height);\n overflow: hidden;\n display: inline-block;\n\n\n border: 3px solid #ccc;\n iframe {\n position: relative;\n right: calc((var(--width) / var(--scale) / 2) - var(--width) / 2);\n bottom: calc((var(--height) / var(--scale) / 2) - var(--height) / 2);\n width: calc(var(--width) / var(--scale));\n height: calc(var(--height) / var(--scale));\n transform: scale(var(--scale));\n }\n\n .overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 1.5rem;\n font-weight: bold;\n text-align: center;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n cursor: pointer;\n &:hover {\n opacity: 1;\n }\n }\n }\n\n}\n","\n\n\njoda-content {\n display: none;\n}\n\njoda-content.loaded {\n display: block;\n}\n","html.loader::before {\n content: \"Seite lädt...\";\n font-family: sans-serif;\n font-size: 12px;\n line-height: 10px;\n position: fixed;\n text-align: center;\n color: white;\n margin-top: 1px;\n -webkit-animation: leu--site-loader 60s ease-out;\n animation: leu--site-loader 60s ease-out;\n display: block;\n background-color: gray;\n height: 12px;\n width: 2%;\n}\n\n@keyframes leu--site-loader {\n 3% {\n width: 2%;\n\n }\n 5% {\n width: 50%;\n }\n 10% {\n width: 80%;\n }\n 100% {\n width: 100%;\n }\n}\n","\n@import \"@leuffen/jodastyle/style_embed\";\n@import \"src/default/loader\";\n\nbody > * {\n display: none;\n}\nbody.loaded > * {\n display: block;\n}\n\nbody {\n min-height: 3000vh; // 3000vh is enough to make sure the page scrolls to correct position on reload\n opacity: 0;\n transition: opacity 0.25s;\n}\n\nbody.loaded {\n min-height: unset;\n opacity: 1;\n}\n"],"names":[],"sourceRoot":""}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/******/ (() => { // webpackBootstrap
|
|
2
|
+
/******/ "use strict";
|
|
3
|
+
/******/ // The require scope
|
|
4
|
+
/******/ var __webpack_require__ = {};
|
|
5
|
+
/******/
|
|
6
|
+
/************************************************************************/
|
|
7
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
8
|
+
/******/ (() => {
|
|
9
|
+
/******/ // define __esModule on exports
|
|
10
|
+
/******/ __webpack_require__.r = (exports) => {
|
|
11
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
12
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
13
|
+
/******/ }
|
|
14
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
15
|
+
/******/ };
|
|
16
|
+
/******/ })();
|
|
17
|
+
/******/
|
|
18
|
+
/************************************************************************/
|
|
19
|
+
var __webpack_exports__ = {};
|
|
20
|
+
/*!**************************!*\
|
|
21
|
+
!*** ./demo_styles.scss ***!
|
|
22
|
+
\**************************/
|
|
23
|
+
__webpack_require__.r(__webpack_exports__);
|
|
24
|
+
// extracted by mini-css-extract-plugin
|
|
25
|
+
|
|
26
|
+
/******/ })()
|
|
27
|
+
;
|
|
28
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"assets/dist/style.js","mappings":";;UAAA;UACA;;;;;WCDA;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;;;;;ACNA","sources":["webpack://@leuffen/themejs1/webpack/bootstrap","webpack://@leuffen/themejs1/webpack/runtime/make namespace object","webpack://@leuffen/themejs1/./demo_styles.scss?1406"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// extracted by mini-css-extract-plugin\nexport {};"],"names":[],"sourceRoot":""}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg id="eZa6F2EiQ7X1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
|
|
2
|
+
<style><![CDATA[
|
|
3
|
+
#eZa6F2EiQ7X2 {animation: eZa6F2EiQ7X2__m 10000ms linear infinite normal forwards}@keyframes eZa6F2EiQ7X2__m { 0% {d: path('M0,-70.86431L67.395964,-21.898276L41.652996,57.330431L-41.652996,57.330431C-41.652996,57.330431,-67.395964,-21.898276,-67.395964,-21.898276L0,-70.86431Z');animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 22% {d: path('M-9.038294,-71.700714L74.571571,-38.33514L36.064567,49.100825L-31.702234,61.789718C-31.702234,61.789718,-60.987933,-6.1267,-60.987933,-6.1267L-9.038294,-71.700714Z');animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 46% {d: path('M-26.967995,-77.544003L57.27148,-32.21869L20.919591,48.274474L-31.702234,61.789718C-31.702234,61.789718,-68.863305,23.687366,-68.863305,23.687366L-26.967995,-77.544003Z');animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 79% {d: path('M-43.492379,-84.294152L31.390876,-29.398083L40.153297,76.494131L-30.603444,59.566459C-30.603444,59.566459,-55.932444,19.633296,-55.932444,19.633296L-43.492379,-84.294152Z')} 100% {d: path('M0,-70.86431L67.395964,-21.898276L41.652996,57.330431L-41.652996,57.330431C-41.652996,57.330431,-67.395964,-21.898276,-67.395964,-21.898276L0,-70.86431Z')}}
|
|
4
|
+
]]></style>
|
|
5
|
+
<path id="eZa6F2EiQ7X2" d="M0,-70.86431l67.395964,48.966034L41.652996,57.330431h-83.305992c0,0-25.742968-79.228707-25.742968-79.228707L0,-70.86431Z" transform="matrix(.462019 1.996615-1.931214 0.446885 141.855571 153.024045)" fill="#d2dbed" stroke-width="0"/></svg>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
permalink: /
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Heros
|
|
11
|
+
|
|
12
|
+
<showcase-element data-category="hero">
|
|
13
|
+
</showcase-element>
|
|
14
|
+
|
|
15
|
+
## Sections
|
|
16
|
+
|
|
17
|
+
<showcase-element data-category="section">
|
|
18
|
+
</showcase-element>
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## Footer
|
|
23
|
+
|
|
24
|
+
<showcase-element data-category="footer">
|
|
25
|
+
</showcase-element>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Elements
|
|
29
|
+
|
|
30
|
+
<showcase-element data-category="element">
|
|
31
|
+
</showcase-element>
|
|
32
|
+
|
|
33
|
+
## pages
|
|
34
|
+
|
|
35
|
+
<showcase-element data-category="page" class="big">
|
|
36
|
+
</showcase-element>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.tjs__e-card-default {
|
|
2
|
+
height: 100%;
|
|
3
|
+
min-width: 300px;
|
|
4
|
+
|
|
5
|
+
&.card {
|
|
6
|
+
height: 100%;
|
|
7
|
+
}
|
|
8
|
+
.card-body {
|
|
9
|
+
height: 100%;
|
|
10
|
+
}
|
|
11
|
+
img {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: 100%;
|
|
14
|
+
--joda-class: card-img-top;
|
|
15
|
+
aspect-ratio: 16 / 9;
|
|
16
|
+
object-fit: cover;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import {Joda} from "@leuffen/jodastyle/src/joda";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
Joda.registerTemplate("e-card-default",
|
|
5
|
+
// language=HTML
|
|
6
|
+
`
|
|
7
|
+
<div class="card tjs__e-card-default">
|
|
8
|
+
<slot data-select="img" data-replace></slot>
|
|
9
|
+
<div class="card-body text-format p-4">
|
|
10
|
+
<slot></slot>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
`);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "e-card-default/e-card-default";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./e-card-default/e-card-default";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leuffen/themejs1",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.8",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.module.js",
|
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
"/dist",
|
|
13
13
|
"/src",
|
|
14
14
|
"/templates",
|
|
15
|
+
"/themes",
|
|
16
|
+
"/docs",
|
|
17
|
+
"/elements",
|
|
18
|
+
"/sections",
|
|
15
19
|
"*.scss"
|
|
16
20
|
],
|
|
17
21
|
"workspaces": [
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--t-background: #f5f5f5;
|
|
3
|
+
--t-background-footer: #fff;
|
|
4
|
+
--t-section-background: transparent;
|
|
5
|
+
--t-section-background-accent: #e7e7eb;
|
|
6
|
+
--t-section-background-primary: #D6EED9;
|
|
7
|
+
--t-text-background: #fff;
|
|
8
|
+
--t-text-color: #707070;
|
|
9
|
+
--t-text-background-light: var(--t-background);
|
|
10
|
+
--t-text-color-accent: var(--bs-gray-900);
|
|
11
|
+
--t-text-color-primary: var(--bs-primary);
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
--t-header-margin: 0 0 20px 0;
|
|
15
|
+
--t-paragraf-margin: 0 0 20px 0;
|
|
16
|
+
|
|
17
|
+
--t-section-padding: 40px 0;
|
|
18
|
+
--t-section-inner-padding: 3rem;
|
|
19
|
+
|
|
20
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
.tjs__cta-form {
|
|
2
|
+
padding: var(--t-section-padding);
|
|
3
|
+
.invalid-feedback {
|
|
4
|
+
padding-bottom: 30px ;
|
|
5
|
+
}
|
|
6
|
+
.wrapper {
|
|
7
|
+
padding: var(--t-section-padding);
|
|
8
|
+
background: var(--t-section-background-accent);
|
|
9
|
+
.row > div {
|
|
10
|
+
--joda-class: "col-12 col-md-6";
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
h2 {
|
|
14
|
+
text-align: center;
|
|
15
|
+
margin-bottom: 40px;
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
input, textarea {
|
|
19
|
+
--joda-use: "input()";
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import {Joda} from "@leuffen/jodastyle/src/joda";
|
|
2
|
+
|
|
3
|
+
Joda.registerTemplate("cta-form",
|
|
4
|
+
// language=HTML
|
|
5
|
+
`
|
|
6
|
+
<form class="tjs__cta-form" data-micx-formmail-preset="default" data-micx-formmail-sent-message="E-Mail erfolgreich gesendet!">
|
|
7
|
+
<div class="container">
|
|
8
|
+
<slot data-select=":scope h2"></slot>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="wrapper">
|
|
11
|
+
<div class="container">
|
|
12
|
+
<div class="row g-3">
|
|
13
|
+
<slot data-select=".section-hr" data-replace=""></slot>
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
</form>
|
|
20
|
+
`);
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.tjs__footer-base {
|
|
2
|
+
background-color: var(--t-background-footer);
|
|
3
|
+
width: 100%;
|
|
4
|
+
min-height: 100px;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
|
|
7
|
+
padding: 40px 0 0 0 ;
|
|
8
|
+
|
|
9
|
+
border-top: 4px solid var(--t-section-background-accent);
|
|
10
|
+
border-bottom: 4px solid var(--t-section-background-accent);
|
|
11
|
+
|
|
12
|
+
.row {
|
|
13
|
+
margin: 0;
|
|
14
|
+
|
|
15
|
+
&> * {
|
|
16
|
+
padding: 40px;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.subfooter {
|
|
21
|
+
background: var(--t-background);
|
|
22
|
+
width: 100%;
|
|
23
|
+
padding: 20px;
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
border-top: 1px solid var(--t-section-background);
|
|
26
|
+
text-align: center;
|
|
27
|
+
}
|
|
28
|
+
h3 {
|
|
29
|
+
margin-top: 20px;
|
|
30
|
+
margin-bottom: 5px;
|
|
31
|
+
font-size: 1em;
|
|
32
|
+
text-transform: uppercase;
|
|
33
|
+
color: var(--bs-gray);
|
|
34
|
+
font-weight: bold;
|
|
35
|
+
}
|
|
36
|
+
.container-fluid .content {
|
|
37
|
+
padding: 30px;
|
|
38
|
+
}
|
|
39
|
+
.container .content {
|
|
40
|
+
padding: 20px;
|
|
41
|
+
}
|
|
42
|
+
ul {
|
|
43
|
+
padding-left: 0;
|
|
44
|
+
&>li {
|
|
45
|
+
list-style: none;
|
|
46
|
+
margin-bottom: 10px;
|
|
47
|
+
&>a {
|
|
48
|
+
text-decoration: none;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
.content {
|
|
53
|
+
--joda-class: ":: border-bottom :xl: border-end";
|
|
54
|
+
}
|
|
55
|
+
.content:last-of-type {
|
|
56
|
+
--joda-class: unset;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import {Joda} from "@leuffen/jodastyle/src/joda";
|
|
2
|
+
|
|
3
|
+
Joda.registerTemplate("footer-base",
|
|
4
|
+
// language=HTML
|
|
5
|
+
`
|
|
6
|
+
|
|
7
|
+
<div class="tjs__footer-base [[layout.class]]">
|
|
8
|
+
<div class="[[layout.container]] h-100">
|
|
9
|
+
<div class="row">
|
|
10
|
+
<slot data-select=".section-h3 > .content" data-class=":: col-12 :xl: col"></slot>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="subfooter">
|
|
14
|
+
<slot data-select="#minifooter"></slot>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
`);
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
.tjs__hero-max {
|
|
4
|
+
--joda-class: ":: mobile :lg: desktop";
|
|
5
|
+
|
|
6
|
+
--layout-image-ratio: 6 / 4;
|
|
7
|
+
|
|
8
|
+
&.mobile {
|
|
9
|
+
&>slot {
|
|
10
|
+
display: block;
|
|
11
|
+
position: relative;
|
|
12
|
+
aspect-ratio: var(--layout-image-ratio, 5 / 4);
|
|
13
|
+
}
|
|
14
|
+
& > slot > img {
|
|
15
|
+
object-fit: cover;
|
|
16
|
+
height: 100%;
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
& > .tjs__hero-max--out-wrapper {
|
|
21
|
+
position: relative;
|
|
22
|
+
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
padding-top: 4rem;
|
|
27
|
+
padding-bottom: 4rem;
|
|
28
|
+
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
&.desktop {
|
|
32
|
+
|
|
33
|
+
&.box {
|
|
34
|
+
.content {
|
|
35
|
+
background: rgba(255, 255, 255, 0.8);
|
|
36
|
+
padding: var(--content-padding, 1rem);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
position: relative;
|
|
42
|
+
&.tjs__hero-max--autoheight {
|
|
43
|
+
height: calc(100vh - 200px);
|
|
44
|
+
min-height: var(--layout-min-height, 400px);
|
|
45
|
+
max-height: var(--layout-max-height, 1000px);
|
|
46
|
+
}
|
|
47
|
+
&>slot {
|
|
48
|
+
display: block;
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 0;
|
|
51
|
+
bottom: 0;
|
|
52
|
+
width: 100%;
|
|
53
|
+
& > img {
|
|
54
|
+
height: 100%;
|
|
55
|
+
object-fit: cover;
|
|
56
|
+
width: 100%;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
& > .tjs__hero-max--out-wrapper {
|
|
61
|
+
position: absolute;
|
|
62
|
+
top: 0;
|
|
63
|
+
bottom: 0;
|
|
64
|
+
width: 100%;
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
padding: 0;
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
width: 100%;
|
|
75
|
+
align-items: center;
|
|
76
|
+
position: relative;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
h1 {
|
|
83
|
+
font-size: calc(1.5em + 1vw);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
.tjs__hero-max--section-text {
|
|
94
|
+
--joda-class: "col-12 col-lg-7";
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.offsetmodifier {
|
|
98
|
+
height: 100px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import {Joda} from "@leuffen/jodastyle/src/joda";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
Joda.registerTemplate("hero-max",
|
|
5
|
+
// language=HTML
|
|
6
|
+
`
|
|
7
|
+
|
|
8
|
+
<div class="tjs__hero-max [[layout.class]] [[layout.autoheight === false ? '' : 'tjs__hero-max--autoheight' ]]">
|
|
9
|
+
<slot data-select="img"></slot>
|
|
10
|
+
<div class="tjs__hero-max--out-wrapper ">
|
|
11
|
+
<div class="tjs__hero-max--container [[layout.container]]">
|
|
12
|
+
<div class="tjs__hero-max--inner-wrapper">
|
|
13
|
+
<div class="tjs__hero-max--section-text">
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
`);
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
.tjs__hero-ribbon {
|
|
2
|
+
padding: var(--t-section-padding);
|
|
3
|
+
padding-top: 0;
|
|
4
|
+
position: relative;
|
|
5
|
+
|
|
6
|
+
&> .tjs__hero-ribbon--wrapper {
|
|
7
|
+
padding-top: 0;
|
|
8
|
+
width: 100%;
|
|
9
|
+
min-height: 100px;
|
|
10
|
+
background: var(--t-text-background);
|
|
11
|
+
border-bottom: 4px solid var(--t-section-background-accent);
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
.content {
|
|
15
|
+
position: relative;
|
|
16
|
+
--joda-class: "col p-4 :: col-12 border-top :lg: col-4 border-start";
|
|
17
|
+
margin-bottom: -4px;
|
|
18
|
+
|
|
19
|
+
&:first-child {
|
|
20
|
+
border-left: none !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:last-child {
|
|
24
|
+
border-bottom: 4px solid var(--bs-primary);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
h3 {
|
|
28
|
+
font-size: 1em;
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
text-transform: uppercase;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import {Joda} from "@leuffen/jodastyle/src/joda";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
Joda.registerTemplate("hero-ribbon",
|
|
5
|
+
// language=HTML
|
|
6
|
+
`
|
|
7
|
+
|
|
8
|
+
<div class="tjs__hero-ribbon">
|
|
9
|
+
<div class="tjs__hero-ribbon--wrapper">
|
|
10
|
+
<div class="tjs__hero-ribbon--container [[layout.container]]">
|
|
11
|
+
<div class="row ">
|
|
12
|
+
|
|
13
|
+
<slot data-select=".section-h3 > .content"></slot>
|
|
14
|
+
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
</div>
|
|
20
|
+
`);
|