ToDo.md

@@ -1,4 +0,0 @@
-[x] hero element needs a possibility to set the anchor link for down arrow
-[x] unordered list design
-[x] check if marker design of ul and ol use em instead of rem for sizing
-[x] navbar should be sticky on mobile

packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html

@@ -3,7 +3,7 @@
 <f:section name="Header" />
 
 <f:section name="Main">
-  <section class="bg-white md:bg-hero-gradient md:mb-16 -mt-16">
+  <section class="bg-white md:bg-hero-gradient md:mb-16">
     <div class="container mx-auto px-6 py-12 md:py-24 bg-white md:bg-hero-inner">
       <div class="md:flex md:items-center">
 

packages/base/Resources/Private/PageView/Layouts/Default.html

@@ -1,4 +1,4 @@
-<header class="sticky top-0 left-0 right-0 z-50 bg-primary text-white">
+<header>
     <!-- Main Navigation -->
     <f:render partial="Navigation/Main" arguments="{_all}"  />
 </header>

packages/base/Resources/Private/PageView/Partials/Navigation/Main.html

@@ -1,4 +1,4 @@
-<nav class="py-1 main-nav group" id="mainNav">
+<nav class="py-1 main-nav group sticky top-0 z-50 bg-repeat" id="mainNav">
     <div class="container flex items-center h-full mx-auto px-4">
         <a href="/" class="nav-logo">
             <f:image src="EXT:base/Resources/Public/Images/logo.svg" alt="Logo" class="block max-h-[50px] h-auto w-auto" />

packages/base/Resources/Public/Icons/check.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20 6L9 17L4 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

packages/base/Resources/Public/Scss/abstracts/_icons.scss

@@ -17,28 +17,26 @@
   margin-top: 0.125em;
 }
 
-
 .ci-instagram::before {
   mask-image: url(../Icons/instagram.svg);
 }
+
 .ci-linkedin::before {
   mask-image: url(../Icons/linkedin.svg);
   width: 0.9em;
   height: 0.9em;
 }
+
 .ci-facebook::before {
   mask-image: url(../Icons/facebook.svg);
 }
-
 .ci-arrow-down::before {
   mask-image: url(../Icons/arrow-down.svg);
 }
 .ci-arrow-up-right::before {
   mask-image: url(../Icons/arrow-up-right.svg);
 }
-.ci-check::before {
+
-  mask-image: url(../Icons/check.svg);
-}
 .ci-email::before {
   mask-image: url(../Icons/email.svg);
 }

packages/base/Resources/Public/Scss/components/_navigation.scss

@@ -2,10 +2,4 @@
   .container {
     padding: 0 1rem;
   }
-
-  ul {
-    ::before {
-      @apply hidden;
-    }
-  }
 }

packages/base/Resources/Public/Scss/components/_text.scss

@@ -1,5 +1,5 @@
-$marker-size: 1.5em;
+$marker-size: 1.5rem;
-$gap-y: 2em;
+$gap-y: 2rem;
 
 ol {
   @apply list-none m-0 p-0;
@@ -7,7 +7,7 @@ ol {
 
   > li {
     @apply relative;
-    padding-left: calc(#{$marker-size} + .5em);
+    padding-left: calc(#{$marker-size} + .5rem);
     margin-bottom: $gap-y;
     counter-increment: step;
 
@@ -15,7 +15,7 @@ ol {
     &::before {
       content: counter(step, decimal-leading-zero);
       position: absolute;
-      top: .2em;
+      top: .2rem;
       left: 0;
       @apply text-primary font-bold text-2xl leading-none;
     }
@@ -24,7 +24,7 @@ ol {
     &::after {
       content: "";
       position: absolute;
-      top: calc(#{$marker-size} + .5em);
+      top: calc(#{$marker-size} + .5rem);
       bottom: -$gap-y;              // extend past the li’s bottom margin
       left: calc(#{$marker-size} / 2);
       transform: translateX(-50%);
@@ -41,18 +41,3 @@ ol {
     }
   }
 }
-
-ul {
-  @apply list-none m-0 p-0;
-
-  > li {
-    @apply relative pl-8 mb-4; // Adjust padding-left based on icon size + desired gap
-
-    &::before {
-      @extend .ci; // Inherit base icon styles
-      @extend .ci-check; // Use the check icon
-      @apply absolute left-0 top-1 text-primary; // Position and color the icon
-      // Adjust 'top' value as needed for vertical alignment
-    }
-  }
-}

packages/base/Resources/Public/Scss/layouts/_home-page.scss

@@ -2,11 +2,24 @@
 
 .backendlayout-home_page {
 
+    // --- Target the header element ---
     header {
+        // --- Mobile First: Always Primary Background ---
+        @apply bg-primary text-white;
+
+        // Mobile link/icon colors (on primary background)
+        #mainNav .nav-link { // Target links within #mainNav
+            @apply text-primary lg:text-white lg:hover:text-gray-200;
+        }
+        // Adjust mobile submenu link colors if needed (depends on dropdown background)
+        #mainNav .sub-menu .nav-link {
+             @apply text-gray-700 hover:text-black; // Assuming light dropdown background
+        }
+
         // --- Desktop Styles ---
         @screen lg {
             // Initial state: Transparent background, fixed position
-            @apply bg-transparent transition-colors duration-300 ease-in-out;
+            @apply fixed top-0 left-0 right-0 z-50 bg-transparent transition-colors duration-300 ease-in-out;
 
             // Initial link colors and background for transparent header (desktop)
             #mainNav .nav-link {
@@ -36,3 +49,11 @@
         }
     }
 }
+
+// --- Default styles for header on NON-home pages ---
+// Ensures header has a background and correct colors on other pages
+body:not(.backendlayout-home_page) {
+    header {
+        @apply bg-primary text-white; // Or your desired default background/text
+    }
+}