diff --git a/main/static/main/css/pattern-scaffolding.css b/main/static/main/css/pattern-scaffolding.css
deleted file mode 100644
index d56b035d01635d79ac4e4e26502b87d5d34f6902..0000000000000000000000000000000000000000
--- a/main/static/main/css/pattern-scaffolding.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * This stylesheet is for styles you want to include only when displaying demo
- * styles for grids, animations, color swatches, etc.
- * These styles will not be your production CSS.
- */
-#sg-patterns {
- -webkit-box-sizing: border-box !important;
- box-sizing: border-box !important;
- max-width: 100%;
- padding: 0 0.5em;
-}
-
-.demo-animate {
- background: #ddd;
- padding: 1em;
- margin-bottom: 1em;
- text-align: center;
- border-radius: 8px;
- cursor: pointer;
-}
-
-.sg-colors {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- list-style: none !important;
- padding: 0 !important;
- margin: 0 !important;
-}
-.sg-colors li {
- -webkit-box-flex: 1;
- -ms-flex: auto;
- flex: auto;
- padding: 0.3em;
- margin: 0 0.5em 0.5em 0;
- min-width: 5em;
- max-width: 14em;
- border: 1px solid #ddd;
- border-radius: 0;
-}
-
-.sg-swatch {
- display: block;
- height: 8rem;
- margin-bottom: 0.5rem;
- border-radius: 0;
-}
-
-.sg-label {
- font-size: 1rem;
-}
-
-.sg-pattern-example {
- font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
-}
-
-.sg-pattern-head .sg-pattern-title a {
- font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
- font-weight: bold !important;
- font-size: 1.2rem !important;
- color: #202020 !important;
-}
-
-.sg-pattern-category-title a {
- font-family: "Bebas Neue", "Helvetica", "Arial", sans-serif !important;
- font-weight: 400 !important;
- font-size: 3.5rem !important;
-}
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 0d7b98c469e7cb92b7a48c3d68e13da0e2017ee1..1987bd96d517eea59997ed8ceccf073db2bf8cb1 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -1273,11 +1273,6 @@ video {
color: #000000;
}
-.btn--violet-500 .btn__icon{
- border-color: rgb(93, 0, 64);
- background-color: #670047;
-}
-
.btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
background-color: rgb(82, 0, 57);
color: #fff;
@@ -1306,6 +1301,44 @@ video {
color: #000000 !important;
}
+.btn--violet-700 .btn__body, .btn--violet-700 .btn__icon{
+ background-color: #7D347D;
+ color: #000000;
+}
+
+.btn--violet-700 .btn__icon{
+ border-color: rgb(113, 47, 113);
+ background-color: #7D347D;
+}
+
+.btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ background-color: rgb(100, 42, 100);
+ color: #fff;
+}
+
+.btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+ border-color: rgb(88, 36, 88);
+}
+
+.btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--violet-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+ color: #fff;
+ fill: #fff;
+}
+
+.btn--hoveractive.btn--to-violet-700:hover .btn__body, .btn--to-violet-700.btn--activated .btn__body{
+ background-color: #7D347D !important;
+ color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-violet-700:hover .btn__icon, .btn--to-violet-700.btn--activated .btn__icon{
+ border-color: rgb(113, 47, 113) !important;
+ background-color: #7D347D !important;
+}
+
+.btn--hoveractive.btn--to-violet-700:hover .btn__inline-icon, .btn--to-violet-700.btn--activated .btn__inline-icon{
+ color: #000000 !important;
+}
+
.btn--red-600 .btn__body, .btn--red-600 .btn__icon{
background-color: #d60d53;
color: #ffffff;
@@ -2976,7 +3009,7 @@ p{
.main-menu__main .menu-link{
--tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.main-menu__main .menu-link{
@@ -2993,7 +3026,7 @@ p{
.main-menu__main .menu-link{
--tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
+ color: rgb(0 0 0 / var(--tw-text-opacity));
}
.main-menu__main .menu-link:hover{
@@ -3001,6 +3034,14 @@ p{
text-decoration-line: none;
}
+@media (min-width: 1200px){
+
+ .main-menu__main .menu-link{
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+ }
+}
+
@media (min-width: 1200px){
.main-menu__main .menu-link{
@@ -3015,6 +3056,14 @@ p{
}
}
+@media (min-width: 1200px){
+
+ .main-menu__main .menu-link{
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity));
+ }
+}
+
.navbar-background {
background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
min-height: 63px;
@@ -3034,9 +3083,22 @@ p{
.main-menu__external{
--tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
+ color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+@media (min-width: 1200px){
+
+ .main-menu__external{
+ --tw-bg-opacity: 1;
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity));
+ }
+}
+
+.main-menu__external {
grid-area: external;
}
@@ -3067,6 +3129,31 @@ p{
}
}
+.container {
+ display: inline-block;
+ cursor: pointer;
+}
+
+.bar1, .bar2, .bar3 {
+ width: 35px;
+ height: 5px;
+ background-color: white;
+ margin: 6px 0;
+ transition: 0.4s;
+}
+
+#menuToggle:checked + label .bar1 {
+ transform: rotate(-45deg) translate(-9px, 6px);
+ background-color: black;
+}
+
+#menuToggle:checked + label .bar2 {opacity: 0;}
+
+#menuToggle:checked + label .bar3 {
+ transform: rotate(45deg) translate(-8px, -8px);
+ background-color: black;
+}
+
.newsletter-grid{
display: grid;
@@ -3172,6 +3259,14 @@ p{
z-index: 10;
}
+.z-50{
+ z-index: 50;
+}
+
+.z-40{
+ z-index: 40;
+}
+
.col-span-4{
grid-column: span 4 / span 4;
}
@@ -3200,6 +3295,10 @@ p{
grid-column-end: 3;
}
+.m-0{
+ margin: 0px;
+}
+
.mx-1{
margin-left: 0.25rem;
margin-right: 0.25rem;
@@ -3295,6 +3394,10 @@ p{
margin-bottom: 2.5rem;
}
+.-mt-20{
+ margin-top: -5rem;
+}
+
.mt-20{
margin-top: 5rem;
}
@@ -3527,6 +3630,16 @@ p{
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
+.space-x-10 > :not([hidden]) ~ :not([hidden]){
+ --tw-space-x-reverse: 0;
+ margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.overflow-auto{
+ overflow: auto;
+}
+
.rounded-full{
border-radius: 9999px;
}
@@ -3549,9 +3662,9 @@ p{
border-color: rgb(236 236 236 / var(--tw-border-opacity));
}
-.border-violet-400{
+.border-violet-600{
--tw-border-opacity: 1;
- border-color: rgb(132 0 72 / var(--tw-border-opacity));
+ border-color: rgb(125 51 127 / var(--tw-border-opacity));
}
.bg-black{
@@ -3584,16 +3697,6 @@ p{
background-color: rgb(125 51 127 / var(--tw-bg-opacity));
}
-.bg-green-400{
- --tw-bg-opacity: 1;
- background-color: rgb(76 169 113 / var(--tw-bg-opacity));
-}
-
-.bg-violet-400{
- --tw-bg-opacity: 1;
- background-color: rgb(132 0 72 / var(--tw-bg-opacity));
-}
-
.bg-grey-100{
--tw-bg-opacity: 1;
background-color: rgb(243 243 243 / var(--tw-bg-opacity));
@@ -3731,6 +3834,14 @@ p{
padding-top: 1rem;
}
+.pt-20{
+ padding-top: 5rem;
+}
+
+.pb-8{
+ padding-bottom: 2rem;
+}
+
.pb-32{
padding-bottom: 8rem;
}
@@ -3897,6 +4008,12 @@ p{
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
+.shadow-2xl{
+ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+ --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
.drop-shadow-xl{
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -4327,6 +4444,10 @@ a.icon-link:hover span{
@media (min-width: 1200px){
+ .xl\:static{
+ position: static;
+ }
+
.xl\:absolute{
position: absolute;
}
@@ -4397,6 +4518,14 @@ a.icon-link:hover span{
margin-bottom: 7rem;
}
+ .xl\:mr-0{
+ margin-right: 0px;
+ }
+
+ .xl\:-mt-0{
+ margin-top: -0px;
+ }
+
.xl\:mt-0{
margin-top: 0px;
}
@@ -4425,6 +4554,10 @@ a.icon-link:hover span{
display: none;
}
+ .xl\:h-auto{
+ height: auto;
+ }
+
.xl\:h-screen{
height: 100vh;
}
@@ -4449,6 +4582,10 @@ a.icon-link:hover span{
width: 100%;
}
+ .xl\:w-auto{
+ width: auto;
+ }
+
.xl\:max-w-xl{
max-width: 36rem;
}
@@ -4465,6 +4602,10 @@ a.icon-link:hover span{
flex-direction: column;
}
+ .xl\:flex-wrap{
+ flex-wrap: wrap;
+ }
+
.xl\:items-start{
align-items: flex-start;
}
@@ -4473,6 +4614,10 @@ a.icon-link:hover span{
align-items: center;
}
+ .xl\:justify-start{
+ justify-content: flex-start;
+ }
+
.xl\:justify-end{
justify-content: flex-end;
}
@@ -4485,6 +4630,12 @@ a.icon-link:hover span{
gap: 1.25rem;
}
+ .xl\:space-x-3 > :not([hidden]) ~ :not([hidden]){
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+ }
+
.xl\:justify-self-end{
justify-self: end;
}
@@ -4520,6 +4671,18 @@ a.icon-link:hover span{
padding-bottom: 9rem;
}
+ .xl\:pt-0{
+ padding-top: 0px;
+ }
+
+ .xl\:pb-0{
+ padding-bottom: 0px;
+ }
+
+ .xl\:pr-5{
+ padding-right: 1.25rem;
+ }
+
.xl\:pt-8{
padding-top: 2rem;
}
@@ -4528,8 +4691,8 @@ a.icon-link:hover span{
padding-top: 3.5rem;
}
- .xl\:pb-0{
- padding-bottom: 0px;
+ .xl\:text-left{
+ text-align: left;
}
.xl\:text-center{
@@ -4552,6 +4715,17 @@ a.icon-link:hover span{
font-size: 7.5rem;
}
+ .xl\:text-white{
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity));
+ }
+
+ .xl\:shadow-none{
+ --tw-shadow: 0 0 #0000;
+ --tw-shadow-colored: 0 0 #0000;
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ }
+
.xl\:duration-200{
transition-duration: 200ms;
}
diff --git a/main/static/main/images/background-images/50632006293_2001701fa0_o.jpg b/main/static/main/images/background-images/50632006293_2001701fa0_o.jpg
deleted file mode 100644
index 4435c07d90887d949837c7de5f8dd5f9df3184a2..0000000000000000000000000000000000000000
Binary files a/main/static/main/images/background-images/50632006293_2001701fa0_o.jpg and /dev/null differ
diff --git a/main/static/main/images/background-images/bartos-2.jpg b/main/static/main/images/background-images/bartos-2.jpg
deleted file mode 100644
index d152c083c45ed8c76388779c4064fec23a554ece..0000000000000000000000000000000000000000
Binary files a/main/static/main/images/background-images/bartos-2.jpg and /dev/null differ
diff --git a/main/static/main/images/background-images/bartos-newsletter.png b/main/static/main/images/background-images/bartos-newsletter.png
deleted file mode 100644
index 77892120e96c6464a2c63dcc072fddcea716bd68..0000000000000000000000000000000000000000
Binary files a/main/static/main/images/background-images/bartos-newsletter.png and /dev/null differ
diff --git a/main/styleguide/source/_patterns/organisms/footer.mustache b/main/styleguide/source/_patterns/organisms/footer.mustache
index ab6971ccececc78d5f7bda3bb44a06064458f803..31f9f279c6d646c403a62a9df931b790ae1266b8 100644
--- a/main/styleguide/source/_patterns/organisms/footer.mustache
+++ b/main/styleguide/source/_patterns/organisms/footer.mustache
@@ -9,7 +9,7 @@
class="w-32 md:w-40 pb-6"
/>
</section>
- <section class="footer__social lg:text-right lg:mb-10">
+ <section class="footer__social mb-5 lg:text-right lg:mb-10">
<div class="font-alt text-2xl mb-4">
Zůstaňte s námi v konaktu
</div>
@@ -34,7 +34,7 @@
</div>
</section>
<section class="footer__main-links text-white lg:flex lg:flex-wrap lg:justify-between gap-8">
- <div class="pt-8 pb-4 lg:py-0">
+ <div class="py-4 lg:py-0">
<ui-footer-collapsible label="Navigace">
<ul class="text-white py-8">
<li>
diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache
index 3246eef5bcfbd71796bb07885842f70135c98023..883b18c897448ba8c8a6e90950f9921f91675384 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/main/styleguide/source/_patterns/organisms/header.mustache
@@ -12,11 +12,11 @@
<!-- Hamburger Icon -->
<input class="hidden" type="checkbox" id="menuToggle"/>
<label class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
- <div class="container">
- <div class="bar1"></div>
- <div class="bar2"></div>
- <div class="bar3"></div>
- </div>
+ <span class="container">
+ <span class="bar1"></span>
+ <span class="bar2"></span>
+ <span class="bar3"></span>
+ </span>
</label>
<!-- Menu -->
diff --git a/main/templates/main/blocks/articles_timeline_block.html b/main/templates/main/blocks/articles_timeline_block.html
index bba3c974a679f863a8a4bfe9911f1c0003ee0f6a..c63e7953a49651542e3f48785e1e1953add84fd4 100644
--- a/main/templates/main/blocks/articles_timeline_block.html
+++ b/main/templates/main/blocks/articles_timeline_block.html
@@ -1,29 +1,24 @@
{% for month_article_data in article_data_list %}
- <div class="mb-4">
- <h2 class="head-4xl mb-5 xl:hidden">
- {{ month_article_data.month_text }}
- </h2>
- <div class="article-timeline-grid justify-between">
- <div class="article-timeline-grid__left-article xl:pt-8">
- {% for article_page in month_article_data.left_column %}
- {% include 'main/includes/work_article_preview.html' %}
- {% empty %}
- <div class="p-7 flex flex-col max-w-xl mb-8"/>
- {% endfor %}
- </div>
- <div class="article-timeline-grid__timeline relative border border-violet-600 hidden xl:block">
- <div class="article-timeline--month absolute bg-violet-600 p-1 text-white font-bold">
- {{ month_article_data.month_text }}
-
- </div>
- </div>
- <div class="article-timeline-grid__right-article xl:pt-14">
- {% for article_page in month_article_data.right_column %}
- {% include 'main/includes/work_article_preview.html' %}
- {% empty %}
- <div class="p-7 flex flex-col max-w-xl mb-8"/>
- {% endfor %}
- </div>
+ <div class="mb-4">
+ <h2 class="head-4xl mb-5 xl:hidden">
+ {{ month_article_data.month_text }}
+ </h2>
+ <div class="article-timeline-grid justify-between">
+ <div class="article-timeline-grid__left-article xl:pt-8">
+ {% for article_page in month_article_data.left_column %}
+ {% include 'main/includes/work_article_preview.html' %}
+ {% endfor %}
+ </div>
+ <div class="article-timeline-grid__timeline relative border border-violet-600 hidden xl:block">
+ <div class="article-timeline--month absolute bg-violet-600 p-1 text-white font-bold">
+ {{ month_article_data.month_text }}
</div>
+ </div>
+ <div class="article-timeline-grid__right-article xl:pt-14">
+ {% for article_page in month_article_data.right_column %}
+ {% include 'main/includes/work_article_preview.html' %}
+ {% endfor %}
+ </div>
</div>
+ </div>
{% endfor %}
diff --git a/main/templates/main/includes/layout/footer.html b/main/templates/main/includes/layout/footer.html
index b58f5c7948253f5b1106aeff515aaaeab5861461..1ad964298a84397a7ae2184be35e97edfe06e829 100644
--- a/main/templates/main/includes/layout/footer.html
+++ b/main/templates/main/includes/layout/footer.html
@@ -10,7 +10,7 @@
class="w-32 md:w-40 pb-6"
/>
</section>
- <section class="footer__social lg:text-right lg:mb-10">
+ <section class="footer__social mb-5 lg:text-right lg:mb-10">
{% if page.root_page.social_links %}
<div class="font-alt text-2xl mb-4">
Zůstaňte s námi v konaktu
@@ -28,7 +28,7 @@
</section>
<section class="footer__main-links text-white lg:flex lg:flex-wrap lg:justify-between gap-8">
{% for other_link in page.root_page.footer_other_links %}
- <div class="{% if forloop.first %}pt-8 pb-4 {% else %}pt-4 {% endif %}lg:py-0">
+ <div class="py-4 lg:py-0">
<ui-footer-collapsible label="{{ other_link.value.title }}">
<ul class="text-white py-8">
{% for link_list in other_link.value.list %}
diff --git a/main/templates/main/includes/layout/header.html b/main/templates/main/includes/layout/header.html
index da6b05db0df1765f14131178783d09ac0ac27710..a1848e7c3cc64ad384cb4f704bd8a3baf7964607 100644
--- a/main/templates/main/includes/layout/header.html
+++ b/main/templates/main/includes/layout/header.html
@@ -1,43 +1,41 @@
{% load static wagtailcore_tags %}
<!-- Navbar -->
-<nav
- class="navbar-background bg-black xl:duration-200 relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full hover:bg-black">
+<nav class="navbar-background bg-black xl:duration-200 relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full hover:bg-black">
<!-- Logo -->
<a href="/" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
<img src="{% static "shared/img/logo-full-black.svg" %}" alt="">
</a>
<!-- Flex container -->
<div class="grid-container main-menu-grid m-0 w-full xl:w-auto absolute xl:static">
- <div
- class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none xl:py-6">
+ <div class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none xl:py-6">
<!-- Hamburger Icon -->
<input class="hidden" type="checkbox" id="menuToggle"/>
<label class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
- <div class="container">
- <div class="bar1"></div>
- <div class="bar2"></div>
- <div class="bar3"></div>
- </div>
+ <span class="container">
+ <span class="bar1"></span>
+ <span class="bar2"></span>
+ <span class="bar3"></span>
+ </span>
</label>
<!-- Menu -->
- <div
- class="main-menu__main main-menu-items justify-center pt-20 xl:pt-0 xl:flex-wrap z-40 space-x-3 overflow-auto bg-white -mt-20 xl:-mt-0 xl:h-auto xl:bg-transparent text-center xl:text-left xl:space-x-3 xl:mt-0 2xl:space-x-6 xl:flex">
+
+ <div class="main-menu__main main-menu-items justify-center pt-20 xl:pt-0 xl:flex-wrap z-40 space-x-3 overflow-auto bg-white -mt-20 xl:-mt-0 xl:h-auto xl:bg-transparent text-center xl:text-left xl:space-x-3 xl:mt-0 2xl:space-x-6 xl:flex">
{% for block in page.root_page.menu %}
{% include_block block %}
{% endfor %}
</div>
<!-- Buttons & Social-->
- <div
- class="main-menu__external main-menu-items items-center justify-center xl:justify-start space-x-1 2xl:space-x-3 xl:flex">
- {% for social_link_block in page.root_page.social_links %}
- <div class="flex py-4 space-x-10 xl:space-x-3 mb-2 xl:mb-0 justify-center xl:justify-start xl:mr-2">
- <a href="{{ social_link_block.value.link }}"
- class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
- <i class="{{ social_link_block.value.icon }}"></i>
- </a>
- {% endfor %}
+ <div class="main-menu__external main-menu-items items-center justify-center xl:justify-start space-x-1 2xl:space-x-3 xl:flex">
+ <div class="flex py-4 space-x-10 xl:space-x-3 mb-2 xl:mb-0 justify-center xl:justify-start xl:mr-2">
+ {% for social_link_block in page.root_page.social_links %}
+ <a href="{{ social_link_block.value.link }}"
+ class="text-lg xl:text-base text-black xl:text-white hover:no-underline">
+ <i class="{{ social_link_block.value.icon }}"></i>
+ </a>
+ {% endfor %}
</div>
+
<div class="flex-row flex pb-8 xl:pb-0 gap-4 xl:pr-5">
{% if page.root_page.donation_page %}
<a href="{{ page.root_page.donation_page }}"