Add custom Bootstrap theme CSS for core components

This commit introduces custom stylesheets for various UI components, enhancing typography, navigation, breadcrumbs, buttons, cards, event sections, footers, and more. These styles bring a cohesive design, improved responsiveness, and modern visual animations tailored to FEO GmbH's branding.
2 weeks ago · 17f39a6046
parent 7413f92f50
commit 17f39a6046
13 changed files with 1288 additions and 1126 deletions
--- a/core/models.py
+++ b/core/models.py
@ -442,13 +442,13 @@ EventPage.content_panels = [
    FieldPanel('downloads'),
    MultiFieldPanel([
        FieldPanel('show_in_event_calendar'),
-        FieldPanel('is_free'),
        FieldPanel('is_external'),
-        FieldPanel('pretix_slug'),
-        FieldPanel('registration_url'),
        FieldPanel('vimeo_id'),
    ], heading="Settings", classname="collapsible collapsed"),
    MultiFieldPanel([
+        FieldPanel('is_free'),
+        FieldPanel('pretix_slug'),
+        FieldPanel('registration_url'),
        FieldPanel('registration_start_date'),
        FieldPanel('registration_end_date'),
    ], heading="Registration Settings", classname="collapsible collapsed"),
--- a/core/static/css/theme.css
+++ b/core/static/css/theme.css
--- a/core/static/css/theme/base.css
+++ b/core/static/css/theme/base.css
@ -0,0 +1,91 @@
+/* FEO GmbH Custom Bootstrap Theme - Base
+ * Typography, body, headings, links, etc.
+ */
+
+/* Typography improvements */
+body {
+  font-family: 'Roboto', 'Segoe UI', sans-serif;
+  color: #333;
+  line-height: 1.6;
+  font-weight: var(--font-weight-light);
+  letter-spacing: 0.01em;
+}
+
+/* Text color utilities */
+.text-white-75 {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--font-weight-light);
+  margin-bottom: 1rem;
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+}
+
+h1 {
+  font-weight: var(--font-weight-thin);
+  letter-spacing: 0.02em;
+}
+
+h2 {
+  font-weight: var(--font-weight-thin);
+  letter-spacing: 0.02em;
+}
+
+.text-bold {
+  font-weight: var(--font-weight-regular);
+}
+
+/* Link styling */
+a {
+  color: var(--bs-primary);
+  text-decoration: none;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+a:hover {
+  color: var(--bs-primary);
+  text-decoration: none;
+  background-color: rgba(var(--bs-primary-rgb), 0.05);
+}
+
+a::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+  transition: width 0.3s ease;
+}
+
+a:hover::after {
+  width: 100%;
+}
+
+/* Form controls */
+.form-control:focus {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+}
+
+/* Animations */
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
--- a/core/static/css/theme/breadcrumbs.css
+++ b/core/static/css/theme/breadcrumbs.css
@ -0,0 +1,90 @@
+/* FEO GmbH Custom Bootstrap Theme - Breadcrumbs
+ * Breadcrumb styling
+ */
+
+/* Breadcrumb styling */
+.breadcrumb-section {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
+  position: relative;
+}
+
+.breadcrumb-section::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71, transparent);
+  opacity: 0.5;
+}
+
+.breadcrumb-section h1 {
+  margin-bottom: 0.5rem;
+  font-weight: var(--font-weight-light);
+  color: #333;
+  position: relative;
+  display: inline-block;
+}
+
+.breadcrumb-section h1::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+  border-radius: 3px;
+}
+
+.breadcrumb {
+  background: transparent;
+  margin-bottom: 0;
+  padding: 0.5rem 0;
+  font-weight: var(--font-weight-light);
+  letter-spacing: 0.01em;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  content: "›";
+  color: #999;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  vertical-align: middle;
+}
+
+.breadcrumb-item a {
+  color: #666;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+}
+
+.breadcrumb-item.active {
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-regular);
+}
+
+/* Responsive adjustments for breadcrumbs */
+@media (max-width: 767.98px) {
+  .breadcrumb-section {
+    padding: 1.5rem 0 !important;
+  }
+
+  .breadcrumb-section h1 {
+    font-size: 1.5rem;
+  }
+
+  .breadcrumb {
+    font-size: 0.9rem;
+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    padding-right: 0.3rem;
+    padding-left: 0.3rem;
+  }
+}
--- a/core/static/css/theme/buttons.css
+++ b/core/static/css/theme/buttons.css
@ -0,0 +1,52 @@
+/* FEO GmbH Custom Bootstrap Theme - Buttons
+ * Button styling
+ */
+
+/* Button styling */
+.btn {
+  border-radius: 4px;
+  padding: 0.5rem 1.5rem;
+  font-weight: var(--font-weight-light);
+  transition: all 0.3s ease;
+  letter-spacing: 0.01em;
+}
+
+.nav-btn {
+  padding: 0.5rem 1.2rem;
+  box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.15);
+  transition: all 0.3s ease;
+  font-weight: var(--font-weight-light);
+  letter-spacing: 0.02em;
+}
+
+.nav-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 3px 8px rgba(var(--bs-primary-rgb), 0.2);
+}
+
+/* Social media buttons styling */
+.social-btn {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1.2rem;
+  transition: all 0.3s ease;
+  width: 100%;
+  text-align: left;
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0.01em;
+  border-width: 2px;
+  white-space: normal;
+  min-height: 3.5rem;
+}
+
+.social-btn i {
+  font-size: 1.2rem;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: 0.2rem;
+}
+
+.social-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
--- a/core/static/css/theme/cards.css
+++ b/core/static/css/theme/cards.css
@ -0,0 +1,143 @@
+/* FEO GmbH Custom Bootstrap Theme - Cards
+ * Card styling
+ */
+
+/* Card styling */
+.card {
+  border: none;
+  border-radius: 8px;
+  box-shadow: var(--box-shadow-light);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  border: 1px solid rgba(0, 0, 0, 0.02);
+}
+
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--box-shadow-medium);
+}
+
+/* Event detail cards */
+.event-detail-card {
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.event-detail-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
+}
+
+.event-detail-card .card-title {
+  position: relative;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.event-detail-card .card-title::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background-color: var(--bs-primary);
+}
+
+/* Event date card */
+.event-date-card {
+  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
+  border: none;
+  border-radius: 12px;
+  padding: 1.5rem;
+  color: white;
+  margin-bottom: 2rem;
+  box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb), 0.3);
+  transition: all 0.3s ease;
+}
+
+.event-date-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(var(--bs-primary-rgb), 0.4);
+}
+
+.event-date-card .card-title {
+  font-weight: var(--font-weight-medium);
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.event-date-card .btn-light {
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-medium);
+  padding: 0.7rem 1.5rem;
+  border-radius: 50px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.event-date-card .btn-light:hover {
+  background: white;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+/* Responsive adjustments for event date card */
+@media (max-width: 767.98px) {
+  .event-date-card {
+    padding: 1.25rem;
+  }
+}
+
+/* Sponsor card */
+.sponsor-card {
+  border-radius: 10px;
+  transition: all 0.3s ease;
+}
+
+.sponsor-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
+}
+
+.sponsor-logo {
+  transition: all 0.3s ease;
+  max-height: 100px;
+  width: auto;
+}
+
+.sponsor-card:hover .sponsor-logo {
+  transform: scale(1.05);
+}
+
+/* Image gallery and cards */
+.event-image-card {
+  border: none;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  height: 100%;
+  max-width: 200px;
+  margin: 0 auto;
+}
+
+.event-image-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
+}
+
+.event-image-card img {
+  transition: all 0.5s ease;
+  max-height: 600px;
+  object-fit: contain;
+}
+
+.event-image-card:hover img {
+  transform: scale(1.05);
+}
+
+.event-image-card .card-body {
+  padding: 1.25rem;
+}
--- a/core/static/css/theme/events.css
+++ b/core/static/css/theme/events.css
@ -0,0 +1,304 @@
+/* FEO GmbH Custom Bootstrap Theme - Events
+ * Event calendar, event CTA, event date card, etc.
+ */
+
+/* Event calendar styling */
+.event-calendar {
+  position: relative;
+}
+
+.event-calendar-header {
+  border-bottom: 2px solid var(--bs-primary);
+  position: relative;
+}
+
+.event-calendar-title {
+  font-weight: var(--font-weight-light);
+  color: #333;
+  margin-bottom: 0.5rem;
+  position: relative;
+  display: inline-block;
+}
+
+.event-calendar-title::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background-color: var(--bs-primary);
+}
+
+.event-item {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+}
+
+.event-item:hover {
+  transform: translateX(3px);
+}
+
+.event-date-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 60px;
+  height: 60px;
+  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
+  color: white;
+  border-radius: 8px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
+  text-align: center;
+}
+
+.event-day {
+  font-size: 1.25rem;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.event-month {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+.event-year {
+  font-size: 0.7rem;
+  opacity: 0.8;
+  line-height: 1;
+}
+
+.event-content {
+  flex: 1;
+  overflow: hidden;
+}
+
+.event-title {
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: var(--font-weight-regular);
+}
+
+.event-link {
+  color: #333;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.event-details {
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.event-date, .event-location {
+  margin-bottom: 0.25rem;
+}
+
+.event-date i, .event-location i {
+  margin-right: 0.5rem;
+  color: var(--bs-primary);
+  font-size: 0.8rem;
+}
+
+.event-calendar-footer {
+  margin-top: 1rem;
+}
+
+/* Event CTA styling */
+.event-cta {
+  background: transparent;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.3);
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.event-cta::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(135deg, var(--bs-primary), #2ecc71);
+  z-index: -1;
+}
+
+.event-cta::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 30%;
+  background: rgba(255, 255, 255, 0.1);
+  transform: skewX(-15deg) translateX(10%);
+  z-index: -1;
+}
+
+.event-cta:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 35px rgba(var(--bs-primary-rgb), 0.4);
+}
+
+.event-cta .btn-light {
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-medium);
+  padding: 0.8rem 1.8rem;
+  border-radius: 50px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.event-cta .btn-light:hover {
+  background: white;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+/* Responsive adjustments for event CTA */
+@media (max-width: 767.98px) {
+  .event-cta {
+    padding: 2rem 1.5rem;
+  }
+}
+
+/* Event title container */
+.event-title-container {
+  position: relative;
+  margin-bottom: 2.5rem;
+}
+
+.event-title {
+  font-weight: var(--font-weight-light);
+  margin-bottom: 0.5rem;
+  position: relative;
+  display: inline-block;
+}
+
+.event-title::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 0;
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+  border-radius: 3px;
+}
+
+.event-subtitle {
+  color: #666;
+  font-weight: var(--font-weight-light);
+  margin-top: 1rem;
+}
+
+/* Responsive adjustments for titles */
+@media (max-width: 767.98px) {
+  .event-title {
+    font-size: 2rem;
+  }
+}
+
+/* Content sections */
+.event-description {
+  background-color: white;
+  border-radius: 12px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+/* Image gallery */
+.event-image-gallery {
+  margin-bottom: 2rem;
+}
+
+/* Tabs styling */
+.event-tabs .nav-pills {
+  gap: 0.5rem;
+}
+
+.event-tabs .nav-pills .nav-link {
+  border-radius: 50px;
+  padding: 0.7rem 1.5rem;
+  color: #555;
+  font-weight: var(--font-weight-regular);
+  transition: all 0.3s ease;
+}
+
+.event-tabs .nav-pills .nav-link:hover {
+  background-color: rgba(var(--bs-primary-rgb), 0.05);
+  color: var(--bs-primary);
+}
+
+.event-tabs .nav-pills .nav-link.active {
+  background-color: var(--bs-primary);
+  color: white;
+  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
+}
+
+/* Hero sections */
+.event-hero {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 3rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.event-hero-carousel {
+  border-radius: 12px;
+}
+
+.event-hero-carousel .carousel-item {
+  height: 500px;
+}
+
+.event-hero-carousel .carousel-item img {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+.event-hero-carousel .carousel-caption {
+  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
+  border-radius: 0 0 12px 12px;
+  padding: 3rem 2rem 2rem;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: left;
+}
+
+.event-hero-carousel .carousel-indicators {
+  margin-bottom: 1.5rem;
+}
+
+.event-hero-carousel .carousel-indicators button {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin: 0 5px;
+}
+
+/* Responsive adjustments for hero sections */
+@media (max-width: 767.98px) {
+  .event-hero-carousel .carousel-item {
+    height: 300px;
+  }
+
+  .event-hero-carousel .carousel-caption {
+    padding: 2rem 1.5rem 1.5rem;
+  }
+}
--- a/core/static/css/theme/footer.css
+++ b/core/static/css/theme/footer.css
@ -0,0 +1,148 @@
+/* FEO GmbH Custom Bootstrap Theme - Footer
+ * Footer and copyright styling
+ */
+
+/* Footer styling */
+.footer {
+  background-color: #2c3e50;
+  padding: 4rem 0;
+  color: #f8f9fa;
+  position: relative;
+  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.footer::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+}
+
+.footer h2.h4 {
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0.01em;
+  color: white;
+  margin-bottom: 1.5rem;
+  position: relative;
+  display: inline-block;
+}
+
+.footer h2.h4::after {
+  content: '';
+  position: absolute;
+  bottom: -8px;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  background-color: var(--bs-primary);
+}
+
+.footer p, .footer address {
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: var(--font-weight-light);
+}
+
+.footer .row > div {
+  position: relative;
+}
+
+.footer .row > div:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 10%;
+  right: 0;
+  height: 80%;
+  width: 1px;
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .footer .row > div:not(:last-child)::after {
+    display: block;
+  }
+}
+
+/* Footer-specific event calendar styling */
+.footer .event-calendar-title {
+  color: white;
+}
+
+.footer .event-item {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.footer .event-link {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.footer .event-details {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.footer a {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.footer .btn-outline-primary {
+  border-color: rgba(255, 255, 255, 0.3);
+  color: white;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer .btn-outline-primary:hover {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Copyright section */
+.copyright {
+  background-color: #1a252f;
+  color: rgba(255, 255, 255, 0.7);
+  padding: 1.5rem 0;
+  font-weight: var(--font-weight-light);
+}
+
+.copyright a {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+/* Dark background scrollbar styles */
+.footer, .copyright {
+  --scrollbar-thumb-dark: rgba(255, 255, 255, 0.4);
+  --scrollbar-thumb-hover-dark: rgba(255, 255, 255, 0.6);
+  --scrollbar-track-dark: rgba(0, 0, 0, 0.2);
+}
+
+.footer ::-webkit-scrollbar-track,
+.copyright ::-webkit-scrollbar-track {
+  background: var(--scrollbar-track-dark);
+}
+
+.footer ::-webkit-scrollbar-thumb,
+.copyright ::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb-dark);
+}
+
+.footer ::-webkit-scrollbar-thumb:hover,
+.copyright ::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover-dark);
+}
+
+/* Firefox - dark background */
+.footer *, .copyright * {
+  scrollbar-color: var(--scrollbar-thumb-dark) var(--scrollbar-track-dark);
+}
--- a/core/static/css/theme/navigation.css
+++ b/core/static/css/theme/navigation.css
@ -0,0 +1,206 @@
+/* FEO GmbH Custom Bootstrap Theme - Navigation
+ * Navigation, dropdown, mobile navbar
+ */
+
+/* Navigation styling */
+.modern-navbar {
+  box-shadow: var(--box-shadow-light);
+  transition: all 0.3s ease;
+  padding: 0.8rem 0;
+}
+
+.modern-navbar.sticky-top {
+  backdrop-filter: blur(8px);
+  background-color: rgba(255, 255, 255, 0.92) !important;
+}
+
+.modern-navbar.scrolled {
+  padding: 0.5rem 0;
+  box-shadow: var(--box-shadow-medium);
+}
+
+.modern-navbar .navbar-brand {
+  padding: 0.5rem 0;
+}
+
+.modern-navbar .logo-img {
+  transition: transform 0.3s ease;
+}
+
+.modern-navbar .logo-img:hover {
+  transform: scale(1.05);
+}
+
+/* Main navigation styling */
+.navbar-light .navbar-nav .nav-link {
+  color: #333;
+  font-weight: var(--font-weight-light);
+  padding: 0.7rem 1rem;
+  transition: all 0.3s ease;
+  position: relative;
+  border-radius: 4px;
+  letter-spacing: 0.01em;
+}
+
+.navbar-light .navbar-nav .nav-link:hover,
+.navbar-light .navbar-nav .nav-link:focus {
+  color: var(--bs-primary);
+  background-color: rgba(var(--bs-primary-rgb), 0.03);
+  text-decoration: none;
+}
+
+.navbar-light .navbar-nav .active-link {
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-regular);
+}
+
+.navbar-light .navbar-nav .active-link:after {
+  content: '';
+  position: relative;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 2px;
+  background-color: var(--bs-primary);
+  border-radius: 2px;
+}
+
+/* Dropdown toggle enhancement */
+.navbar-light .navbar-nav .dropdown-toggle::after {
+  transition: transform 0.3s ease;
+  vertical-align: middle;
+  position: relative;
+  transform: translateY(-50%);
+  z-index: -1;
+}
+
+.navbar-light .navbar-nav .dropdown-toggle:hover::after {
+  transform: translateY(-40%);
+  z-index: -1;
+}
+
+.navbar-light .navbar-nav .show > .dropdown-toggle::after {
+  transform: translateY(-50%) rotate(180deg);
+  left: 0.5rem;
+  top: 55%;
+  z-index: -1;
+}
+
+/* Exclude dropdown toggle arrow from link styling */
+.navbar-light .navbar-nav .dropdown-toggle::after {
+  width: auto;
+  height: auto;
+  background: none;
+}
+
+.navbar-light .navbar-nav .dropdown-toggle:hover::after {
+  background: none;
+}
+
+/* Ensure dropdown toggle doesn't get background color from general link hover */
+.navbar-light .navbar-nav .nav-link.dropdown-toggle:hover {
+  background-color: rgba(var(--bs-primary-rgb), 0.03);
+}
+
+/* Dropdown menu styling */
+.modern-dropdown {
+  margin-top: 0.3rem;
+  border-radius: 8px;
+  padding: 0.2rem;
+  min-width: 220px;
+  animation: fadeIn 0.2s ease-out;
+  box-shadow: var(--box-shadow-medium) !important;
+  border: 1px solid rgba(0, 0, 0, 0.03) !important;
+}
+
+.modern-dropdown .dropdown-item {
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  margin-bottom: 0;
+  transition: all 0.2s ease;
+  font-weight: var(--font-weight-light);
+  letter-spacing: 0.01em;
+}
+
+.modern-dropdown .dropdown-item:hover {
+  background-color: rgba(var(--bs-primary-rgb), 0.03);
+  color: var(--bs-primary);
+  transform: translateX(2px);
+}
+
+.modern-dropdown .dropdown-item.active {
+  background-color: rgba(var(--bs-primary-rgb), 0.05);
+  color: var(--bs-primary);
+  font-weight: var(--font-weight-regular);
+}
+
+.modern-dropdown .parent-item {
+  font-weight: var(--font-weight-regular);
+  color: var(--bs-primary);
+  letter-spacing: 0.01em;
+}
+
+.modern-dropdown .dropdown-divider {
+  margin: 0.1rem 0;
+  opacity: 0.1;
+}
+
+/* Mobile navbar improvements */
+@media (max-width: 991.98px) {
+  .modern-navbar {
+    padding: 0.5rem 0;
+  }
+
+  .navbar-collapse {
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    padding: 1rem;
+    margin-top: 1rem;
+  }
+
+  .navbar-nav .nav-item {
+    margin: 0.3rem 0;
+  }
+
+  .navbar-light .navbar-nav .nav-link {
+    padding: 0.8rem 1.2rem;
+  }
+
+  .navbar-light .navbar-nav .nav-link.dropdown-toggle {
+    padding-left: 2.2rem;
+  }
+
+  .navbar-light .navbar-nav .dropdown-toggle::after {
+    left: 0.8rem;
+    top: 55%;
+    transform: translateY(-50%);
+    z-index: -1;
+  }
+
+  .navbar-light .navbar-nav .active-link:after {
+    left: 1.2rem;
+    transform: none;
+    width: 30px;
+  }
+
+  .nav-btn {
+    margin-top: 0.5rem;
+    display: block;
+    text-align: center;
+  }
+
+  .modern-dropdown {
+    border: none !important;
+    box-shadow: none !important;
+    padding-left: 1rem;
+    animation: none;
+  }
+
+  .modern-dropdown .dropdown-item {
+    padding: 0.4rem 0.8rem;
+  }
+
+  .modern-dropdown .dropdown-item:hover {
+    transform: none;
+  }
+}
--- a/core/static/css/theme/newsletter.css
+++ b/core/static/css/theme/newsletter.css
@ -0,0 +1,79 @@
+/* FEO GmbH Custom Bootstrap Theme - Newsletter
+ * Newsletter CTA and heading styling
+ */
+
+/* Newsletter CTA styling */
+.newsletter-cta {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(5px);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.newsletter-cta::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(to right, var(--bs-primary), #2ecc71);
+}
+
+.newsletter-cta:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+.newsletter-heading {
+  color: white;
+  font-size: 1.2rem;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.02em;
+  margin-bottom: 0.5rem;
+}
+
+.newsletter-text {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.newsletter-cta .btn-primary {
+  padding: 0.6rem 1rem;
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0.02em;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+.newsletter-cta .btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Newsletter heading styling */
+.newsletter-heading-main {
+  color: var(--bs-primary) !important;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.3rem 0.5rem;
+  margin-left: -0.5rem;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  animation: pulse 2s infinite;
+}
+
+.newsletter-heading-main::after {
+  background-color: var(--bs-primary) !important;
+  width: 60px !important;
+}
+
+.newsletter-heading-main i {
+  color: var(--bs-primary);
+  font-size: 1rem;
+}
--- a/core/static/css/theme/utilities.css
+++ b/core/static/css/theme/utilities.css
@ -0,0 +1,108 @@
+/* FEO GmbH Custom Bootstrap Theme - Utilities
+ * Scrollbar styling and other utilities
+ */
+
+/* Custom Scrollbar Styling */
+/* WebKit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-width);
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 10px;
+  transition: background 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* Image Tab styling */
+.image-tab-container {
+  margin: 1rem 0 2rem;
+}
+
+.image-tab-wrapper {
+  display: inline-block;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+
+.image-tab-wrapper:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+}
+
+.image-tab-wrapper img {
+  border-radius: 8px;
+  transition: all 0.5s ease;
+}
+
+.image-tab-caption {
+  font-size: 0.9rem;
+  color: #666;
+  padding: 0.5rem 0;
+  font-style: italic;
+}
+
+/* Image size options */
+.image-size-small {
+  width: 25%;
+  min-width: 200px;
+}
+
+.image-size-medium {
+  width: 50%;
+  min-width: 300px;
+}
+
+.image-size-large {
+  width: 75%;
+  min-width: 400px;
+}
+
+.image-size-full {
+  width: 100%;
+}
+
+/* Responsive adjustments for image tabs */
+@media (max-width: 767.98px) {
+  .image-size-small,
+  .image-size-medium,
+  .image-size-large {
+    width: 100%;
+    min-width: auto;
+  }
+}
+
+/* Sponsor heading */
+.sponsor-heading {
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.1);
+}
+
+.sponsor-heading::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 50px;
+  height: 2px;
+  background-color: var(--bs-primary);
+}
--- a/core/static/css/theme/variables.css
+++ b/core/static/css/theme/variables.css
@ -0,0 +1,51 @@
+/* FEO GmbH Custom Bootstrap Theme - Variables
+ * Root variables and color definitions
+ */
+
+:root {
+  --bs-primary: #82bb27;
+  --bs-primary-rgb: 114, 192, 44;
+  --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.03);
+  --box-shadow-medium: 0 3px 10px rgba(0, 0, 0, 0.05);
+  --font-weight-thin: 200;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --scrollbar-thumb: rgba(var(--bs-primary-rgb), 0.6);
+  --scrollbar-thumb-hover: var(--bs-primary);
+  --scrollbar-track: rgba(0, 0, 0, 0.05);
+  --scrollbar-width: 8px;
+}
+
+/* Override Bootstrap primary color */
+.btn-primary {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+  background-color: #65ab27;
+  border-color: #65ab27;
+}
+
+.btn-outline-primary {
+  color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
+  background-color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+.text-primary {
+  color: var(--bs-primary) !important;
+}
+
+.bg-primary {
+  background-color: var(--bs-primary) !important;
+}
+
+.border-primary {
+  border-color: var(--bs-primary) !important;
+}
--- a/core/templates/bootstrap5_base.html
+++ b/core/templates/bootstrap5_base.html
@ -38,9 +38,9 @@

        <!-- Breadcrumbs -->
        {% if not self.url == site_root.url %}
-            <div class="bg-light py-4">
+            <div class="breadcrumb-section py-4">
                <div class="container">
-                    <h1 class="h2 mb-3">{{ self.title }}</h1>
+                    <h1 class="h2">{{ self.title }}</h1>
                    <nav aria-label="breadcrumb">
                        {% bootstrap5_breadcrumbs %}
                    </nav>