From 896df57bceb04457fc6f3e3b5f333b777ad36aa0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 29 Jan 2026 08:06:23 +0000
Subject: [PATCH 1/3] feat: implement new 'professional playful' redesign

- Updated color palette to bumble-yellow (#f1c232), dark grey (#5e5e5e), and light grey (#999999).
- Implemented high-contrast typography with Fraunces for headings and Inter for body text.
- Introduced 'blocky' UI elements: square borders and heavy 8px/12px solid shadows.
- Replaced image mastheads with solid color backgrounds for a cleaner look.
- Modernized the navigation bar with a multi-colored logo.
- Updated homepage content (DE/EN) to reflect current service offerings: App Development, Lego/Minecraft Education, Workshops, and Open Space Coaching.
- Fixed Sass build issues by providing Bootstrap grey-scale variable fallbacks.

Co-authored-by: dachrisch <763505+dachrisch@users.noreply.github.com>
---
 .bundle/config                  |   2 +
 _data/style.yml                 |  11 ++--
 _i18n/de.yml                    |  33 +++++-----
 _i18n/en.yml                    |  33 +++++-----
 _includes/head.html             |   4 ++
 _includes/navheader.html        |   6 +-
 _pages/index.md                 |  29 +++++----
 _sass/_header_images.scss       |  22 +++++--
 _sass/base/_mixins.scss         |   8 +--
 _sass/base/_page.scss           |  91 ++++++++++++++++++++++++++++
 _sass/base/_variables.scss      |  20 +++++++
 _sass/components/_buttons.scss  |  49 +++++++++++++++
 _sass/components/_navbar.scss   |  99 +++++++++++++-----------------
 _sass/layout/_footer.scss       |  32 ++++++++++
 _sass/layout/_masthead.scss     |  47 ++++++++-------
 _sass/layout/_team.scss         |  54 +++++++++++++++++
 _sass/layout/gallery-hover.scss | 103 +++++++++++++-------------------
 assets/css/bumble.scss          |   6 +-
 18 files changed, 442 insertions(+), 207 deletions(-)
 create mode 100644 .bundle/config
 create mode 100644 _sass/base/_page.scss
 create mode 100644 _sass/base/_variables.scss
 create mode 100644 _sass/components/_buttons.scss
 create mode 100644 _sass/layout/_footer.scss
 create mode 100644 _sass/layout/_team.scss

diff --git a/.bundle/config b/.bundle/config
new file mode 100644
index 0000000..2369228
--- /dev/null
+++ b/.bundle/config
@@ -0,0 +1,2 @@
+---
+BUNDLE_PATH: "vendor/bundle"
diff --git a/_data/style.yml b/_data/style.yml
index 27b936a..6dc9d3c 100644
--- a/_data/style.yml
+++ b/_data/style.yml
@@ -1,10 +1,13 @@
 #Color Customization
-highlight: "#fbc02d"
-#white: "#FF0000"
-#black: "#000"
+highlight: "#f1c232"
+bumble_yellow: "#f1c232"
+bumble_grey_dark: "#5e5e5e"
+bumble_grey_light: "#999999"
+white: "#ffffff"
+black: "#242424"
 
 #Image Customization
-header-image: "/assets/img/header-bg.webp"
+# header-image: "/assets/img/header-bg.webp"
 accceu-image: "/assets/img/accceu-header.webp"
 fast-image: "/assets/img/fast-header.webp"
 nvc-image: "/assets/img/nvc-header.webp"
diff --git a/_i18n/de.yml b/_i18n/de.yml
index 4c41967..42c7d34 100644
--- a/_i18n/de.yml
+++ b/_i18n/de.yml
@@ -5,21 +5,24 @@ pages:
     title: Startseite
     header:
       title: Willkommen bei den bumbleflies
-      text: WIR LIEBEN OPEN SPACE!
-      button: Schreib uns
+      text: Innovative Wege der Zusammenarbeit und Bildung
+      button: Kontakt aufnehmen
     gallery:
       title: Leistungen
-      text: So unterstützen wir dich
+      text: Innovative Wege für Kollaboration und Bildung
       items:
-        effective_collaboration:
-          title: Effektive Kollaboration
-          desc: Wir helfen dir, deine Meetings und Workshops effektiv, interaktiv und kollaborativ zu gestalten. Du wirst überrascht sein, wie viel Energie das bei deinen Mitarbeiter:innen freisetzt.
-        big_room:
-          title: Online Big-Room-Meetings
-          desc: Wir organisieren für dich dein nächstes Big-Room-Meeting (z.B. PI-Planning) für alle deine Teams. Egal ob 20, 200 oder mehr Personen. Wir sorgen für den produktiven Rahmen, damit ihr euch auf die Inhalte konzentrieren könnt.
-        online_events:
-          title: Online Events
-          desc: Wir organisieren für dich ein Event, bei dem Teambuilding, Austausch und Spaß im Vordergrund stehen. Ihr habt euch lange nicht mehr gesehen und sucht den Kontakt zu den Kollegen? Dann ist das genau das richtige.
+        app_development:
+          title: App-Entwicklung
+          desc: Wir entwickeln maßgeschneiderte Apps, die Zusammenarbeit und Lernen in deinem Unternehmen auf das nächste Level heben.
+        lego_minecraft:
+          title: Lego & Minecraft Education
+          desc: Spielerisch lernen und komplexe Probleme lösen – wir nutzen Lego und Minecraft für innovative Bildungsformate.
+        workshops:
+          title: Workshops
+          desc: Interaktive und effektive Workshops, die Energie freisetzen und echte Ergebnisse liefern.
+        openspace_coaching:
+          title: Open Space Coaching
+          desc: Wir begleiten dich und dein Team dabei, die Kraft von Open Space für eure Transformation zu nutzen.
   retreats:
     title: Retreats
     bumbleretreat:
@@ -568,11 +571,11 @@ pages:
     title: Über uns
     text: Wir sind bumbleflies
     body: |
-      Wir sind Chris, nochmal Chris und Sebastian, die bumbleflies. Unser Name ist eine Anspielung auf die beiden Erscheinungen des Open Space: die Hummeln, die für das Verbreiten von Ideen stehen, und die Schmetterlinge, die für das Schöne und Unerwartete stehen. Als Teil des Organisationsteams der Open Space Scrum München Veranstaltung haben wir viel Erfahrung und sind dazu bereit, diese weiterzugeben.
+      Wir sind Christian Dähn, Christoph Kämpfe und Sebastian Keller – die bumbleflies. Unser Name ist eine Anspielung auf die beiden Erscheinungen des Open Space: die Hummeln (bumblebees), die für das Verbreiten von Ideen stehen, und die Schmetterlinge (butterflies), die für das Schöne und Unerwartete stehen.
 
-      Mit der bumbleflies UG bieten wir Organisationen Unterstützung beim Einsatz des Open Space Formats an. Wir glauben, dass Open Space ein mächtiges Werkzeug für die Zusammenarbeit und den Wissensaustausch ist und wollen gemeinsam mit Euch die Idee voranbringen. Deshalb bieten wir nicht nur die Organisation von Open Spaces an, sondern auch Schulungen und Workshops, um Unternehmen und Organisationen bei der Implementierung von Open Space zu unterstützen.
+      Wir begleiten Organisationen auf neuen Wegen der Zusammenarbeit und Bildung. Von der Entwicklung maßgeschneiderter Apps über innovative Bildungsformate mit Lego und Minecraft bis hin zu professioneller Workshop-Moderation und Open Space Coaching – wir bringen frischen Wind in eure Projekte.
 
-      Wir sind überzeugt, dass jeder von der offenen und partizipativen Arbeitsweise profitieren kann, die Open Space ermöglicht, und wir freuen uns darauf, unsere Leidenschaft für Open Space und eine offene, kollaborative Arbeitskultur mit Euch zu teilen."
+      Wir sind überzeugt, dass jeder von einer offenen, partizipativen und spielerischen Arbeitsweise profitieren kann. Wir freuen uns darauf, unsere Leidenschaft für innovative Kollaboration mit euch zu teilen.
   stayintheloop:
     title: Informiert bleiben
   team:
diff --git a/_i18n/en.yml b/_i18n/en.yml
index 50ebde2..0f1a6e3 100644
--- a/_i18n/en.yml
+++ b/_i18n/en.yml
@@ -3,21 +3,24 @@ pages:
     title: Home
     header:
       title: Welcome to the bumbleflies
-      text: WE LOVE OPEN SPACE!
-      button: Contact us
+      text: Innovative ways of collaboration and education
+      button: Get in touch
     gallery:
       title: Services
-      text: This is how we support you
+      text: Innovative ways for collaboration and education
       items:
-        effective_collaboration:
-          title: Effective Collaboration
-          desc: We help you make your meetings and workshops effective, interactive, and collaborative. You'll be surprised at how much energy this unleashes in your employees.
-        big_room:
-          title: Online Big-Room-Meetings
-          desc: We organize your next big room meeting (e.g., PI Planning) for all your teams, whether it's 20, 200, or more people. We provide the productive framework, so you can focus on the content.
-        online_events:
-          title: Online Events
-          desc: We organize an event for you where team building, exchange, and fun are the focus. Haven't seen each other for a year and looking for contact with colleagues? Then this is exactly the right thing.
+        app_development:
+          title: App Development
+          desc: We develop custom apps that take collaboration and learning in your company to the next level.
+        lego_minecraft:
+          title: Lego & Minecraft Education
+          desc: Learn through play and solve complex problems – we use Lego and Minecraft for innovative educational formats.
+        workshops:
+          title: Workshops
+          desc: Interactive and effective workshops that unleash energy and deliver real results.
+        openspace_coaching:
+          title: Open Space Coaching
+          desc: We accompany you and your team in utilizing the power of Open Space for your transformation.
   retreats:
     title: Retreats
     bumbleretreat:
@@ -577,11 +580,11 @@ pages:
     title: About us
     text: We are bumbleflies
     body: |
-      We are Chris, Chris again, and Sebastian, the bumbleflies. Our name is a nod to the two phenomena of Open Space: the bumblebees, representing the spread of ideas, and the butterflies, symbolizing the beautiful and unexpected. As part of the organizing team for the Open Space Scrum Munich event, we have gathered extensive experience and are ready to pass on this knowledge.
+      We are Christian Dähn, Christoph Kämpfe, and Sebastian Keller – the bumbleflies. Our name is a nod to the two phenomena of Open Space: the bumblebees, representing the spread of ideas, and the butterflies, symbolizing the beautiful and unexpected.
 
-      With bumbleflies UG, we offer organizations support in the implementation of the Open Space format. We believe that Open Space is a powerful tool for collaboration and knowledge exchange and want to advance the idea together with you. That's why we not only offer the organization of Open Spaces, but also training and workshops to assist companies and organizations in implementing Open Space.
+      We guide organizations on new paths of collaboration and education. From developing custom apps and innovative educational formats with Lego and Minecraft to professional workshop facilitation and Open Space coaching – we bring fresh energy to your projects.
 
-      We are convinced that everyone can benefit from the open and participatory working method that Open Space enables, and we look forward to sharing our passion for Open Space and an open, collaborative work culture with you.
+      We are convinced that everyone can benefit from an open, participatory, and playful way of working. We look forward to sharing our passion for innovative collaboration with you.
   stayintheloop:
     title: Stay in the loop
   team:
diff --git a/_includes/head.html b/_includes/head.html
index 3e3136b..9831f58 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -33,6 +33,10 @@
 
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico">
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
     <!-- preload styles -->
     {% for style in site.data.style.sheets %}
     <link rel="preload" type="text/css" href="{{ site.baseurl_root }}/assets/css/{{ style.name }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
diff --git a/_includes/navheader.html b/_includes/navheader.html
index 36a6179..f5e6ee2 100644
--- a/_includes/navheader.html
+++ b/_includes/navheader.html
@@ -2,11 +2,7 @@
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
     <div class="container">
         <a class="navbar-brand js-scroll-trigger" href="{{ site.baseurl }}/#">
-            {%- if site.logo -%}
-            <img height="{{ site.logo.height | default: 52 }}" src="{{ site.logo.path }}"/>
-            {%- else -%}
-            {{ site.title }}
-            {%- endif -%}
+            <span class="logo-b">b</span><span class="logo-umble">umble</span><span class="logo-flies">flies</span>
         </a>
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                 data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
diff --git a/_pages/index.md b/_pages/index.md
index 068db41..2e48454 100644
--- a/_pages/index.md
+++ b/_pages/index.md
@@ -47,25 +47,24 @@ gallery:
   text: pages.home.gallery.text
   section: services
   list:
-    - title: pages.home.gallery.items.effective_collaboration.title
-      desc: pages.home.gallery.items.effective_collaboration.desc
+    - title: pages.home.gallery.items.app_development.title
+      desc: pages.home.gallery.items.app_development.desc
       image: 
-        url: /assets/img/services/bumblespace_effective-workshop.webp
+        url: /assets/img/bumblefly-blue.png
         copyright: bumbleflies UG
-        width: 300
-        height: 270
-    - title: pages.home.gallery.items.big_room.title
-      desc: pages.home.gallery.items.big_room.desc
+    - title: pages.home.gallery.items.lego_minecraft.title
+      desc: pages.home.gallery.items.lego_minecraft.desc
       image: 
-        url: /assets/img/services/bumblespace_pi-planning.webp
+        url: /assets/img/bumblefly-blue.png
         copyright: bumbleflies UG
-        width: 300
-        height: 270
-    - title: pages.home.gallery.items.online_events.title
-      desc: pages.home.gallery.items.online_events.desc
+    - title: pages.home.gallery.items.workshops.title
+      desc: pages.home.gallery.items.workshops.desc
       image: 
-        url: /assets/img/services/bumblespace_online-events.webp
+        url: /assets/img/bumblefly-blue.png
+        copyright: bumbleflies UG
+    - title: pages.home.gallery.items.openspace_coaching.title
+      desc: pages.home.gallery.items.openspace_coaching.desc
+      image:
+        url: /assets/img/bumblefly-blue.png
         copyright: bumbleflies UG
-        width: 300
-        height: 270
 ---
diff --git a/_sass/_header_images.scss b/_sass/_header_images.scss
index ec2c8dc..e7c6a3c 100644
--- a/_sass/_header_images.scss
+++ b/_sass/_header_images.scss
@@ -1,16 +1,28 @@
 // Custom Images
 
 header.masthead {
+  background-color: $bumble-yellow; // Default fallback to yellow
+  color: $black;
+  background-image: none !important; // Force no background image for the new look
+
+  .intro-text .intro-lead-in, .intro-text .intro-heading {
+    color: $black;
+  }
+
   &.default-image {
-    background-image: url("#{$header-image}");
+    background-color: $bumble-yellow;
   }
+
   &.accceu-image {
-    background-image: url("#{$accceu-image}");
+    background-color: $bumble-grey-dark;
+    .intro-text .intro-lead-in, .intro-text .intro-heading {
+      color: $white;
+    }
   }
   &.fast-image {
-    background-image: url("#{$fast-image}");
+    background-color: $bumble-yellow;
   }
   &.nvc-image {
-    background-image: url("#{$nvc-image}");
+    background-color: $bumble-grey-light;
   }
-}
\ No newline at end of file
+}
diff --git a/_sass/base/_mixins.scss b/_sass/base/_mixins.scss
index cf7dd19..40a5c07 100644
--- a/_sass/base/_mixins.scss
+++ b/_sass/base/_mixins.scss
@@ -1,25 +1,25 @@
 // Font Mixins
 /* second heading */
 @mixin serif-font {
-  font-family: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Fraunces", "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 /* #mainNav .navbar-brand */
 @mixin script-font {
-  font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Fraunces", "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 /* default */
 @mixin body-font {
-  font-family: /*'Roboto Slab',*/ -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 /* main font */
 @mixin heading-font {
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family: "Fraunces", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
diff --git a/_sass/base/_page.scss b/_sass/base/_page.scss
new file mode 100644
index 0000000..20daaca
--- /dev/null
+++ b/_sass/base/_page.scss
@@ -0,0 +1,91 @@
+// Global styling for this template
+body {
+  overflow-x: hidden;
+  @include body-font;
+  color: $black;
+  background-color: $white;
+}
+
+p {
+  line-height: 1.8;
+  margin-bottom: 1.5rem;
+}
+
+a {
+  color: $bumble-grey-dark;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+  transition: all 0.2s ease;
+  &:hover {
+    color: $primary;
+    text-decoration-color: $primary;
+  }
+}
+
+.text-primary {
+  color: $primary !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 800;
+  @include heading-font;
+  letter-spacing: -0.02em;
+}
+
+.page-section {
+  padding: 120px 0;
+  h2.section-heading {
+    font-size: 3.5rem;
+    margin-top: 0;
+    margin-bottom: 2rem;
+    text-transform: none !important; // Fraunces looks better in mixed case
+  }
+  h3.section-subheading {
+    font-size: 1.25rem;
+    font-weight: 400;
+    font-style: normal;
+    margin-bottom: 4rem;
+    text-transform: none;
+    @include body-font;
+    color: $bumble-grey-dark;
+  }
+}
+@media (min-width: 768px) {
+  section {
+    padding: 160px 0;
+  }
+}
+
+// Highlight color customization
+::-moz-selection {
+  background: $primary;
+  text-shadow: none;
+}
+
+// Clients section
+#customer {
+  padding: 60px 0;
+  background-color: $gray-100;
+  img {
+    max-height: 40px;
+    width: auto;
+    filter: grayscale(100%);
+    opacity: 0.6;
+    transition: all 0.3s ease;
+    &:hover {
+      filter: grayscale(0%);
+      opacity: 1;
+    }
+  }
+}
+
+::selection {
+  background: $primary;
+  text-shadow: none;
+}
diff --git a/_sass/base/_variables.scss b/_sass/base/_variables.scss
new file mode 100644
index 0000000..cefb9d9
--- /dev/null
+++ b/_sass/base/_variables.scss
@@ -0,0 +1,20 @@
+// Bumbleflies Color Palette
+$bumble-yellow: #f1c232 !default;
+$bumble-grey-dark: #5e5e5e !default;
+$bumble-grey-light: #999999 !default;
+
+// Theme overrides
+$primary: $bumble-yellow !default;
+$black: #242424 !default;
+$white: #ffffff !default;
+
+// Bootstrap grey scale fallbacks
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
diff --git a/_sass/components/_buttons.scss b/_sass/components/_buttons.scss
new file mode 100644
index 0000000..af287f2
--- /dev/null
+++ b/_sass/components/_buttons.scss
@@ -0,0 +1,49 @@
+// Button Styles
+.btn {
+  @include heading-font;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 0; // Square buttons for a more modern look
+  padding: 1rem 2rem;
+  transition: all 0.3s ease;
+}
+
+.btn-xl {
+  font-size: 1.25rem;
+  padding: 1.5rem 3rem;
+}
+
+.btn-primary {
+  background-color: $primary;
+  border: 2px solid $black;
+  color: $black;
+  box-shadow: 4px 4px 0px $black;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: $white !important;
+    color: $black !important;
+    border-color: $black !important;
+    box-shadow: 0px 0px 0px $black;
+    transform: translate(4px, 4px);
+  }
+}
+
+.btn-secondary {
+  background-color: $white;
+  border: 2px solid $black;
+  color: $black;
+  box-shadow: 4px 4px 0px $black;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: $primary !important;
+    color: $black !important;
+    border-color: $black !important;
+    box-shadow: 0px 0px 0px $black;
+    transform: translate(4px, 4px);
+  }
+}
diff --git a/_sass/components/_navbar.scss b/_sass/components/_navbar.scss
index 0ea3ab8..1493982 100644
--- a/_sass/components/_navbar.scss
+++ b/_sass/components/_navbar.scss
@@ -1,93 +1,78 @@
 // Styling for the navbar
 #mainNav {
-  background-color: $gray-900;
+  background-color: $black;
+  transition: all 0.3s ease;
+
   .navbar-toggler {
-    font-size: 12px;
-    font-weight: 700;
-    right: 0;
-    padding: 13px;
+    font-size: 14px;
+    padding: 10px;
     text-transform: uppercase;
-    color: white;
-    border: 0;
+    color: $black;
+    border: 2px solid $black;
     background-color: $primary;
     @include heading-font;
+    border-radius: 0;
   }
+
   .navbar-brand {
-    color: $primary;
-    @include script-font;
-    &.active,
+    @include heading-font;
+    font-weight: 900;
+    text-transform: lowercase;
+    letter-spacing: -0.05em;
+    font-size: 2rem;
+
+    .logo-b { color: $bumble-yellow; }
+    .logo-umble { color: $bumble-grey-dark; }
+    .logo-flies { color: $bumble-grey-light; }
+
     &:active,
     &:focus,
     &:hover {
-      color: darken($primary, 10%);
+      opacity: 0.8;
     }
   }
+
   .navbar-nav {
     .nav-item {
       .nav-link {
-        font-size: 90%;
-        font-weight: 700;
-        padding: 0.75em 0;
-        letter-spacing: 1px;
-        color: white;
+        font-size: 1rem;
+        font-weight: 600;
+        padding: 0.75em 1em;
+        color: $white;
         @include heading-font;
-        &.active,
-        &:hover {
-          color: $primary;
-        };
-      }
-      .current {
-        // mark current as active
-        box-shadow: inset 0 -2px 0 0 $primary;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+
+        &:hover, &.current {
+          color: $primary !important;
+        }
       }
     }
   }
 }
 
-@media (max-width: 992px) {
-    .dropdown {
-        .dropdown-menu {
-          .nav-link {
-            .arrow {
-              display: unset;
-            }
-          }
-        }
-   }
-}
-
 @media (min-width: 992px) {
   #mainNav {
-    padding-top: 25px;
-    padding-bottom: 25px;
-    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-    -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
-    transition: padding-top 0.3s, padding-bottom 0.3s;
-    border: none;
+    padding-top: 30px;
+    padding-bottom: 30px;
     background-color: transparent;
-    .navbar-brand {
-      font-size: 1.75em;
-      -webkit-transition: all 0.3s;
-      -moz-transition: all 0.3s;
-      transition: all 0.3s;
-    }
+
     .navbar-nav {
       .nav-item {
         .nav-link {
-          padding: 1.1em 1em !important;
-          .arrow {
-            display: none;
-          }
+          padding: 0.5em 1.5em !important;
         }
       }
     }
+
     &.navbar-shrink {
-      padding-top: 0;
-      padding-bottom: 0;
-      background-color: $gray-900;
+      padding-top: 15px;
+      padding-bottom: 15px;
+      background-color: rgba($black, 0.95);
+      backdrop-filter: blur(10px);
+
       .navbar-brand {
-        font-size: 1.25em;
-        padding: 12px 0;
+        font-size: 1.5rem;
       }
     }
   }
diff --git a/_sass/layout/_footer.scss b/_sass/layout/_footer.scss
new file mode 100644
index 0000000..cc13ebe
--- /dev/null
+++ b/_sass/layout/_footer.scss
@@ -0,0 +1,32 @@
+// Styling for the footer
+.footer {
+  padding: 60px 0;
+  text-align: center;
+  background-color: $black !important;
+  color: $white;
+  border-top: 4px solid $primary;
+
+  span.copyright {
+    font-size: 0.9rem;
+    line-height: 40px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    @include heading-font;
+  }
+
+  ul.quicklinks {
+    font-size: 0.9rem;
+    line-height: 40px;
+    margin-bottom: 0;
+    text-transform: uppercase;
+    @include heading-font;
+
+    li a {
+      color: $white;
+      text-decoration: none;
+      &:hover {
+        color: $primary;
+      }
+    }
+  }
+}
diff --git a/_sass/layout/_masthead.scss b/_sass/layout/_masthead.scss
index a15eb07..107ca53 100644
--- a/_sass/layout/_masthead.scss
+++ b/_sass/layout/_masthead.scss
@@ -1,30 +1,37 @@
 // Styling for the masthead
 header.masthead {
   text-align: center;
-  color: white;
+  color: $white;
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: center center;
   background-size: cover;
+  border-bottom: 4px solid $black;
 
   .intro-text {
-    padding-top: 150px;
-    padding-bottom: 100px;
+    padding-top: 180px;
+    padding-bottom: 120px;
 
     .intro-lead-in {
-      font-size: 22px;
-      font-style: italic;
-      line-height: 22px;
+      font-size: 1.5rem;
+      font-style: normal;
+      line-height: 1.5rem;
       margin-bottom: 25px;
-      @include serif-font;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      @include body-font;
+      font-weight: 700;
+      color: $bumble-grey-dark;
     }
 
     .intro-heading {
-      font-size: 50px;
-      font-weight: 700;
-      line-height: 50px;
-      margin-bottom: 25px;
+      font-size: 3.5rem;
+      font-weight: 900;
+      line-height: 1.1;
+      margin-bottom: 40px;
       @include heading-font;
+      text-transform: none; // Fraunces looks better in mixed case
+      color: $black;
     }
   }
 }
@@ -32,23 +39,17 @@ header.masthead {
 @media (min-width: 768px) {
   header.masthead {
     .intro-text {
-      padding-top: 300px;
-      padding-bottom: 200px;
+      padding-top: 240px;
+      padding-bottom: 160px;
 
       .intro-lead-in {
-        font-size: 40px;
-        font-style: italic;
-        line-height: 40px;
-        margin-bottom: 25px;
-        @include serif-font;
+        font-size: 2rem;
+        margin-bottom: 30px;
       }
 
       .intro-heading {
-        font-size: 75px;
-        font-weight: 700;
-        line-height: 75px;
-        margin-bottom: 50px;
-        @include heading-font;
+        font-size: 5rem;
+        margin-bottom: 60px;
       }
     }
   }
diff --git a/_sass/layout/_team.scss b/_sass/layout/_team.scss
new file mode 100644
index 0000000..ef3a914
--- /dev/null
+++ b/_sass/layout/_team.scss
@@ -0,0 +1,54 @@
+// Styling for the team section
+.team-member {
+  margin-bottom: 50px;
+  text-align: center;
+  padding: 30px;
+  background: $white;
+  transition: all 0.3s ease;
+
+  img {
+    width: 225px;
+    height: 225px;
+    border: 4px solid $black;
+    box-shadow: 6px 6px 0px $bumble-yellow;
+    filter: grayscale(0%); // Keep it professional yet playful
+    border-radius: 0 !important; // Modern blocky look
+  }
+
+  h3 {
+    margin-top: 25px;
+    margin-bottom: 0.5rem;
+    font-size: 1.75rem;
+    @include heading-font;
+  }
+
+  .text-muted {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: $bumble-grey-dark !important;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+}
+
+.social-buttons {
+  li a {
+    display: block;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+    color: $white;
+    background-color: $black;
+    border-radius: 0;
+    transition: all 0.3s;
+    text-decoration: none;
+
+    &:hover {
+      background-color: $primary;
+      color: $black;
+      transform: translate(-2px, -2px);
+      box-shadow: 4px 4px 0px $black;
+    }
+  }
+}
diff --git a/_sass/layout/gallery-hover.scss b/_sass/layout/gallery-hover.scss
index 77a332e..39b1a56 100644
--- a/_sass/layout/gallery-hover.scss
+++ b/_sass/layout/gallery-hover.scss
@@ -1,21 +1,44 @@
 .gallery-item {
     right: 0;
-    margin: 0 0 15px;
+    margin: 0 0 30px;
+    padding: 20px;
+    background: $white;
+    border: 2px solid $black;
+    box-shadow: 8px 8px 0px $black;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translate(-4px, -4px);
+      box-shadow: 12px 12px 0px $primary;
+    }
+
+    .entry-heading {
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      font-size: 1.5rem;
+      text-transform: none;
+    }
+
+    .text-muted {
+      font-size: 1rem;
+      line-height: 1.6;
+    }
+
     .gallery-link {
       position: relative;
       display: block;
-      max-width: 400px;
+      max-width: 100%;
       margin: 0 auto;
       cursor: pointer;
+      overflow: hidden;
+
       .gallery-hover {
         position: absolute;
         width: 100%;
         height: 100%;
-        -webkit-transition: all ease 0.5s;
-        -moz-transition: all ease 0.5s;
         transition: all ease 0.5s;
         opacity: 0;
-        background: fade-out($primary, 0.1);
+        background: rgba($primary, 0.9);
         &:hover {
           opacity: 1;
         }
@@ -27,14 +50,7 @@
           height: 20px;
           margin-top: -12px;
           text-align: center;
-          color: white;
-          i {
-            margin-top: -12px;
-          }
-          h3,
-          h4 {
-            margin: 0;
-          }
+          color: $black;
         }
       }
     }
@@ -48,63 +64,24 @@
   .modal-content {
     padding: 100px 0;
     text-align: center;
+    border: 4px solid $black;
+    border-radius: 0;
+
     h2 {
-      font-size: 3em;
-      margin-bottom: 15px;
+      font-size: 3.5rem;
+      margin-bottom: 25px;
+      @include heading-font;
     }
     p {
       margin-bottom: 30px;
+      font-size: 1.25rem;
     }
     p.item-intro {
-      font-size: 16px;
-      font-style: italic;
+      font-size: 1.5rem;
+      font-style: normal;
       margin: 20px 0 30px;
-      @include serif-font;
-    }
-    ul.list-inline {
-      margin-top: 0;
-      margin-bottom: 30px;
-    }
-    img {
-      margin-bottom: 30px;
-    }
-    button {
-      cursor: pointer;
-    }
-  }
-  .close-modal {
-    position: absolute;
-    top: 25px;
-    right: 25px;
-    width: 75px;
-    height: 75px;
-    cursor: pointer;
-    background-color: transparent;
-    &:hover {
-      opacity: 0.3;
-    }
-    .lr {
-      /* Safari and Chrome */
-      z-index: 1051;
-      width: 1px;
-      height: 75px;
-      margin-left: 35px;
-      /* IE 9 */
-      -webkit-transform: rotate(45deg);
-      -ms-transform: rotate(45deg);
-      transform: rotate(45deg);
-      background-color: $gray-900;
-      .rl {
-        /* Safari and Chrome */
-        z-index: 1052;
-        width: 1px;
-        height: 75px;
-        /* IE 9 */
-        -webkit-transform: rotate(90deg);
-        -ms-transform: rotate(90deg);
-        transform: rotate(90deg);
-        background-color: $gray-900;
-      }
+      @include heading-font;
+      color: $primary;
     }
   }
 }
diff --git a/assets/css/bumble.scss b/assets/css/bumble.scss
index 41908af..7c4cdc3 100644
--- a/assets/css/bumble.scss
+++ b/assets/css/bumble.scss
@@ -9,7 +9,11 @@
 // Custom colors
 $primary: {{ site.data.style.highlight | default: "#fed136" }} !default;
 $white: {{ site.data.style.white | default: "#fff" }} !default;
-$black: {{ site.data.style.black | default: "#000" }} !default;
+$black: {{ site.data.style.black | default: "#242424" }} !default;
+
+$bumble-yellow: {{ site.data.style.bumble_yellow | default: "#f1c232" }};
+$bumble-grey-dark: {{ site.data.style.bumble_grey_dark | default: "#5e5e5e" }};
+$bumble-grey-light: {{ site.data.style.bumble_grey_light | default: "#999999" }};
 
 $contact-image: "{{ site.data.style.contact-image }}";
 

From 5d0346b0d1216c6fc6276296498d16ad933f26b0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 29 Jan 2026 08:24:09 +0000
Subject: [PATCH 2/3] fix: allow Google Fonts in tests and improve Sass
 structure

- Whitelisted the new Google Fonts URL in pytest external stylesheet checks.
- Cleaned up Sass variable definitions to avoid Liquid/Sass redundancy.
- Standardized naming of Sass partials (adding underscores).
- Ensured all new Sass modules are correctly imported in the main entry point.
- Removed unnecessary `.bundle/config`.

Co-authored-by: dachrisch <763505+dachrisch@users.noreply.github.com>
---
 .../{gallery-hover.scss => _gallery.scss}     |  0
 _sass/layout/{submenu.scss => _submenu.scss}  |  0
 _tests/test_on_every_en_page.py               |  6 +-
 _tests/test_on_every_page.py                  |  6 +-
 assets/css/bumble.scss                        | 55 +++++++++----------
 5 files changed, 35 insertions(+), 32 deletions(-)
 rename _sass/layout/{gallery-hover.scss => _gallery.scss} (100%)
 rename _sass/layout/{submenu.scss => _submenu.scss} (100%)

diff --git a/_sass/layout/gallery-hover.scss b/_sass/layout/_gallery.scss
similarity index 100%
rename from _sass/layout/gallery-hover.scss
rename to _sass/layout/_gallery.scss
diff --git a/_sass/layout/submenu.scss b/_sass/layout/_submenu.scss
similarity index 100%
rename from _sass/layout/submenu.scss
rename to _sass/layout/_submenu.scss
diff --git a/_tests/test_on_every_en_page.py b/_tests/test_on_every_en_page.py
index 7c86f44..dd6b1ec 100644
--- a/_tests/test_on_every_en_page.py
+++ b/_tests/test_on_every_en_page.py
@@ -18,7 +18,11 @@ def test_allowed_external_stylesheet(self, bumbleserve, title, page, allowed_sty
         stylesheets = query_site(bumbleserve, page).find_all(rel='stylesheet')
         external_stylesheets = list(filter(lambda s: s.attrs['href'].startswith('http'), stylesheets))
 
-        not_allowed = list(filter(lambda s: s.attrs['href'] not in allowed_stylesheets, external_stylesheets))
+        actually_allowed = list(allowed_stylesheets) + [
+            'https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
+        ]
+
+        not_allowed = list(filter(lambda s: s.attrs['href'] not in actually_allowed, external_stylesheets))
         assert len(not_allowed) == 0, f'External Stylesheets not allowed: {not_allowed}'
 
     def test_title(self, bumbleserve, title, page, allowed_stylesheets):
diff --git a/_tests/test_on_every_page.py b/_tests/test_on_every_page.py
index 4cb2dc7..8830438 100644
--- a/_tests/test_on_every_page.py
+++ b/_tests/test_on_every_page.py
@@ -18,7 +18,11 @@ def test_allowed_external_stylesheet(self, bumbleserve, title, page, allowed_sty
         stylesheets = query_site(bumbleserve, page).find_all(rel='stylesheet')
         external_stylesheets = list(filter(lambda s: s.attrs['href'].startswith('http'), stylesheets))
 
-        not_allowed = list(filter(lambda s: s.attrs['href'] not in allowed_stylesheets, external_stylesheets))
+        actually_allowed = list(allowed_stylesheets) + [
+            'https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
+        ]
+
+        not_allowed = list(filter(lambda s: s.attrs['href'] not in actually_allowed, external_stylesheets))
         assert len(not_allowed) == 0, f'External Stylesheets not allowed: {not_allowed}'
 
     def test_title(self, bumbleserve, title, page, allowed_stylesheets):
diff --git a/assets/css/bumble.scss b/assets/css/bumble.scss
index 7c4cdc3..3ce9491 100644
--- a/assets/css/bumble.scss
+++ b/assets/css/bumble.scss
@@ -1,44 +1,39 @@
 ---
-# copy of agency.scss
+# bumbleflies theme
 ---
 @charset "utf-8";
-// Core variables and mixins
-@import "base/variables.scss";
-@import "base/mixins.scss";
-
-// Custom colors
-$primary: {{ site.data.style.highlight | default: "#fed136" }} !default;
-$white: {{ site.data.style.white | default: "#fff" }} !default;
-$black: {{ site.data.style.black | default: "#242424" }} !default;
 
+// 1. Liquid variables from site data
 $bumble-yellow: {{ site.data.style.bumble_yellow | default: "#f1c232" }};
 $bumble-grey-dark: {{ site.data.style.bumble_grey_dark | default: "#5e5e5e" }};
 $bumble-grey-light: {{ site.data.style.bumble_grey_light | default: "#999999" }};
+$primary: {{ site.data.style.highlight | default: "#f1c232" }};
+$white: {{ site.data.style.white | default: "#ffffff" }};
+$black: {{ site.data.style.black | default: "#242424" }};
 
 $contact-image: "{{ site.data.style.contact-image }}";
-
-// Custom Images
 $header-image: "{{ site.data.style.header-image }}";
 $accceu-image: "{{ site.data.style.accceu-image }}";
 $fast-image: "{{ site.data.style.fast-image }}";
 $nvc-image: "{{ site.data.style.nvc-image }}";
 
-@import "header_images.scss";
-
-// Global CSS
-@import "base/page.scss";
-
-// Components
-@import "components/buttons.scss";
-@import "components/navbar.scss";
-
-// Layout
-@import "layout/masthead.scss";
-@import "layout/services.scss";
-@import "layout/team.scss";
-@import "layout/contact.scss";
-@import "layout/footer.scss";
-@import "layout/gallery-hover.scss";
-
-// Submenu
-@import "layout/submenu.scss";
\ No newline at end of file
+// 2. Core variables and mixins
+@import "base/variables";
+@import "base/mixins";
+
+// 3. Global CSS
+@import "base/page";
+
+// 4. Components
+@import "components/buttons";
+@import "components/navbar";
+
+// 5. Layout
+@import "header_images";
+@import "layout/masthead";
+@import "layout/services";
+@import "layout/gallery";
+@import "layout/team";
+@import "layout/contact";
+@import "layout/footer";
+@import "layout/submenu";

From 1ef3dfdd94a8c9abe4eefdeb156d0c46f0385eb7 Mon Sep 17 00:00:00 2001
From: dachrisch <763505+dachrisch@users.noreply.github.com>
Date: Thu, 29 Jan 2026 22:32:59 +0000
Subject: [PATCH 3/3] Redesign website with "professional playful" look

- Implement new color palette: Yellow (#f1c232) and Grey.
- Update typography to Fraunces (headings) and Inter (body).
- Apply "blocky" UI style with square components and hard shadows.
- Modernize service sections (App-Dev, Lego/Minecraft, Workshops, Open Space).
- Fully localize hardcoded strings in navigation, footer, and team sections.
- Update About Us section with current founders and mission.
- Fix automated test regressions by whitelisting Google Fonts.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>