fix: force text color on links in travel info boxes to maintain visibility

This commit is contained in:
Björn Fromme
2025-11-10 08:56:27 +01:00
parent 681833b1f9
commit f7f8a47bd5
3 changed files with 32 additions and 12 deletions
@@ -10,4 +10,5 @@
@import "components/misc";
@import "components/searchbar";
@import "components/teaser";
@import "components/travelinfo";
}
@@ -0,0 +1,19 @@
.travel-info-box {
@apply flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-white px-8 lg:px-0 py-8;
}
.travel-info-box-title {
@apply lg:w-1/4 flex flex-col space-y-4 pb-8 lg:pb-0 lg:px-8;
}
.travel-info-box-title__inner {
@apply text-2xl lg:text-4xl text-white uppercase font-bold;
}
.travel-info-box-content {
@apply lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white;
}
.travel-info-box a {
color: inherit !important;
}
@@ -123,28 +123,28 @@
<div id="goodtoknow" class="bg-ep-primary-bg">
<div class="container">
<f:if condition="{travelInfo.additionalInfo}">
<div class="flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-white bg-[#B48F1D] px-8 lg:px-0 py-8">
<div class="travel-info-box bg-[#B48F1D]">
<div class="lg:w-1/4 flex flex-col space-y-4 pb-8 lg:pb-0 lg:px-8">
<div class="w-32 h-32 xl:w-16 xl:h-16 text-[#F9C700]">
<div class="travel-info-box-title text-[#F9C700]">
<f:render section="Icon" arguments="{icon: 'chat'}"/>
</div>
<div class="text-2xl lg:text-4xl text-white uppercase font-bold">
<div class="travel-info-box-title__inner">
Weitere Infos
</div>
</div>
<div class="lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white" data-rte-content>
<div class="travel-info-box-content" data-rte-content>
{travelInfo.additionalInfo -> f:format.html()}
</div>
</div>
</f:if>
<f:if condition="{travelInfo.importantPhoneNumbers}">
<div class="flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-white bg-[#F8C62F] px-8 lg:px-0 py-8">
<div class="lg:w-1/4 flex flex-col space-y-4 pb-8 lg:pb-0 lg:px-8">
<div class="text-2xl lg:text-4xl text-white uppercase font-bold">
<div class="travel-info-box bg-[#F8C62F]">
<div class="travel-info-box-title">
<div class="travel-info-box-title__inner">
Wichtige Telefon&shy;nummern
</div>
</div>
<div class="lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white" data-rte-content>
<div class="travel-info-box-content" data-rte-content>
<f:if condition="{travelData.guide}">
<p>
<strong>Busbegleitung / Reiseleitung</strong>
@@ -157,13 +157,13 @@
</div>
</f:if>
<f:if condition="{travelInfo.importantLinks}">
<div class="flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-white bg-[#18527B] px-8 lg:px-0 py-8">
<div class="lg:w-1/4 flex flex-col space-y-4 pb-8 lg:pb-0 lg:px-8">
<div class="text-2xl lg:text-4xl text-white uppercase font-bold">
<div class="travel-info-box bg-[#18527B]">
<div class="travel-info-box-title">
<div class="travel-info-box-title__inner">
Wichtige Links vor Ort
</div>
</div>
<div class="lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white" data-rte-content>
<div class="travel-info-box-content" data-rte-content>
{travelInfo.importantLinks -> f:format.html()}
</div>
</div>