feat: update accessibility text and improve color consistency across sections

src/config/locales/de/landing-experience.ts

@@ -4,6 +4,6 @@ export const landingExperience = {
     'Ich habe Unternehmen wie deins geholfen – von kleinen Läden bis hin zu Dienstleistern – ihre Webseiten barrierefrei zu machen.',
     'Bei ORWO habe ich einen Fotobuch-Designer entwickelt, der für tausende Kunden funktionierte, auch für Menschen mit Sehbeeinträchtigungen. Ich habe ihn nicht nur gut aussehen lassen, ich habe ihn für alle zum Laufen gebracht.',
     'Diese Sorgfalt bringe ich jetzt zu deiner Webseite, egal ob Bäckerei, Therapeut, Handwerker oder Kiosk.',
-    'Barrierefreiheit geht alle was an.',
+    'Barrierefreiheit bedeutet Respekt und mehr Reichweite für dich und deine Produkte.',
   ],
 };

src/config/locales/en/landing-experience.ts

@@ -2,8 +2,8 @@ export const landingExperience = {
   title: 'My Experience',
   paragraphs: [
     "I've helped businesses like yours — from small shops to service providers — make their websites accessible.",
-    "At ORWO, I built a photo book designer that worked for thousands of customers, even those with visual impairments. I didn't just make it look good, I made it work for everyone.",
+    "At ORWO, I built a photo book designer that worked for thousands of customers, even those with visual impairments.",
     'Now, I bring that same care to your website, whether you are a bakery, a therapist, a craftsman, or a local shop.',
-    'You do not need to be big. You just need to be accessible.',
+    'Accessibility means respect and more reach for you and your products.',
   ],
 };

src/scss/mixins.scss

@@ -11,7 +11,7 @@
   cursor: pointer;
   transition: all 0.3s ease;
   border-radius: $border-radius-sm;
-  
+
   &:focus {
     outline: none;
     box-shadow: var(--box-shadow-sm);
@@ -21,7 +21,7 @@
 // Card hover effect mixin
 @mixin card-hover {
   transition: all 0.3s ease;
-  
+
   &:hover {
     transform: translateY(-2px);
     box-shadow: var(--box-shadow-lg);
@@ -47,14 +47,14 @@
 // Aspect ratio mixin
 @mixin aspect-ratio($ratio: 1) {
   aspect-ratio: $ratio;
-  
+
   @supports not (aspect-ratio: 1) {
     &::before {
       content: '';
       float: left;
       padding-top: calc(100% / #{$ratio});
     }
-    
+
     &::after {
       content: '';
       display: table;
@@ -65,13 +65,13 @@
 
 // Responsive breakpoint mixins
 @mixin mobile-only {
-  @media (max-width: $mobile-breakpoint) { 
+  @media (max-width: $mobile-breakpoint) {
     @content;
   }
 }
 
 @mixin desktop-only {
-  @media (min-width: $desktop-breakpoint) { 
+  @media (min-width: $desktop-breakpoint) {
     @content;
   }
 }
@@ -96,7 +96,7 @@
   font-size: 1.875rem;
   font-weight: bold;
   margin-bottom: 1rem;
-  color: var(--color-text);
+  color: $color-heading;
 
   @include desktop-only {
     font-size: 2.25rem;
@@ -108,4 +108,4 @@
   color: var(--color-text-muted);
   max-width: 48rem;
   margin: 0 auto;
-}
+}

src/scss/sections/about-section.scss

@@ -34,11 +34,6 @@
     @include section-title;
     font-size: clamp(2rem, 5vw, 2.75rem);
     font-weight: 800;
-    background: var(--gradient-text);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
   }
 
   &__subtitle {
@@ -101,7 +96,7 @@
     font-size: 1.5rem;
     font-weight: bold;
     margin-bottom: 1rem;
-    color: var(--about-greeting-color);
+    color: $color-heading;
   }
 
   &__bio-text {

src/scss/sections/certifications-section.scss

@@ -34,11 +34,6 @@
     @include section-title;
     font-size: clamp(2rem, 5vw, 2.75rem);
     font-weight: 800;
-    background: var(--gradient-text);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
   }
 
   &__subtitle {
@@ -128,7 +123,7 @@
   &__card-title {
     font-size: 1.125rem;
     font-weight: 600;
-    color: var(--color-text);
+    color: $color-heading;
     margin-bottom: 0.5rem;
     line-height: 1.4;
   }

src/scss/sections/contact-section.scss

@@ -34,11 +34,6 @@
     @include section-title;
     font-size: clamp(2rem, 5vw, 2.75rem);
     font-weight: 800;
-    background: var(--gradient-text);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
   }
 
   &__subtitle {
@@ -100,7 +95,7 @@
   &__email-title {
     font-size: 1.5rem;
     font-weight: 700;
-    color: var(--color-text);
+    color: $color-heading;
     margin-bottom: 0.75rem;
   }
 

src/scss/sections/experience-section.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .experience-section {
   padding-block: var(--space-20);
   padding-inline: var(--space-4);
@@ -38,10 +40,7 @@
     font-weight: 800;
     letter-spacing: var(--tracking-tight);
     line-height: var(--leading-tight);
-    background: var(--gradient-text);
+    color: $color-heading;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
   }
 
   // ── Body ──────────────────────────────────────────────────────

src/scss/sections/hero-section.scss

@@ -63,7 +63,7 @@
     margin: 0;
     letter-spacing: -0.03em;
     line-height: 1.1;
-    @include gradient-text(var(--gradient-text));
+    color: $color-heading;
   }
 
   &__description {

src/scss/sections/imprint-page.scss

@@ -23,7 +23,7 @@
   &__title {
     font-size: 2.5rem;
     font-weight: bold;
-    color: var(--color-text);
+    color: globals.$color-heading;
     margin-bottom: 0.5rem;
 
     @include globals.desktop-only {
@@ -52,7 +52,7 @@
   &__section-title {
     font-size: 1.5rem;
     font-weight: 600;
-    color: var(--color-text);
+    color: globals.$color-heading;
     margin-bottom: 1.5rem;
     border-bottom: 2px solid var(--color-primary);
     padding-bottom: 0.5rem;
@@ -69,7 +69,7 @@
   &__subsection-title {
     font-size: 1.25rem;
     font-weight: 600;
-    color: var(--color-text);
+    color: globals.$color-heading;
     margin-bottom: 1rem;
   }
 
@@ -120,7 +120,7 @@
   &__privacy-subtitle {
     font-size: 1.375rem;
     font-weight: 600;
-    color: var(--color-text);
+    color: globals.$color-heading;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--border-color);

src/scss/sections/processes-section.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .processes-section {
   padding-block: var(--space-20);
   padding-inline: var(--space-4);
@@ -38,10 +40,7 @@
     font-weight: 800;
     letter-spacing: var(--tracking-tight);
     line-height: var(--leading-tight);
-    background: var(--gradient-text);
+    color: $color-heading;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
   }
 
   // ── Intro line ────────────────────────────────────────────────

src/scss/sections/projects-section.scss

@@ -34,11 +34,6 @@
     @include section-title;
     font-size: clamp(2rem, 5vw, 2.75rem);
     font-weight: 800;
-    background: var(--gradient-text);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
   }
 
   &__subtitle {
@@ -245,7 +240,7 @@
   &__card-title {
     font-size: 1.125rem;
     font-weight: 600;
-    color: var(--color-text);
+    color: $color-heading;
     margin-bottom: 0.5rem;
     line-height: 1.4;
   }

src/scss/sections/reasons-section.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .reasons-section {
   padding-block: var(--space-20);
   padding-inline: var(--space-4);
@@ -38,10 +40,7 @@
     font-weight: 800;
     letter-spacing: var(--tracking-tight);
     line-height: var(--leading-tight);
-    background: var(--gradient-text);
+    color: $color-heading;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
   }
 
   // ── Intro quote ───────────────────────────────────────────────

src/scss/sections/references-section.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .references-section {
   padding-block: var(--space-20);
   padding-inline: var(--space-4);
@@ -38,10 +40,7 @@
     font-weight: 800;
     letter-spacing: var(--tracking-tight);
     line-height: var(--leading-tight);
-    background: var(--gradient-text);
+    color: $color-heading;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
   }
 
   // ── List ──────────────────────────────────────────────────────

src/scss/sections/services-section.scss

@@ -49,11 +49,6 @@
     @include section-title;
     font-size: clamp(2rem, 5vw, 2.75rem);
     font-weight: 800;
-    background: var(--gradient-text);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
   }
 
   &__subtitle {
@@ -348,28 +343,13 @@
       font-size: 1.25rem;
     }
 
-    &--primary {
+    &--primary,
-      color: var(--service-title-primary);
+    &--secondary,
-    }
+    &--tertiary,
-
+    &--quaternary,
-    &--secondary {
+    &--quinary,
-      color: var(--service-title-secondary);
-    }
-
-    &--tertiary {
-      color: var(--service-title-tertiary);
-    }
-
-    &--quaternary {
-      color: var(--service-title-quaternary);
-    }
-
-    &--quinary {
-      color: var(--service-title-quinary);
-    }
-
     &--senary {
-      color: var(--service-title-senary);
+      color: $color-heading;
     }
   }
 

src/scss/sections/skills-section.scss

@@ -62,11 +62,6 @@
     @include section-title;
     font-size: clamp(2rem, 5vw, 2.75rem);
     font-weight: 800;
-    background: var(--gradient-text);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
   }
 
   &__subtitle {
@@ -239,7 +234,7 @@
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
-    color: var(--skills-category-title-color);
+    color: $color-heading;
     text-align: center;
     position: relative;
     z-index: 2;

src/scss/sections/winnings-section.scss

@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 .winnings-section {
   padding-block: var(--space-20);
   padding-inline: var(--space-4);
@@ -38,10 +40,7 @@
     font-weight: 800;
     letter-spacing: var(--tracking-tight);
     line-height: var(--leading-tight);
-    background: var(--gradient-text);
+    color: $color-heading;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
   }
 
   // ── Intro line ────────────────────────────────────────────────

src/scss/variables.scss

@@ -5,6 +5,7 @@ $desktop-breakpoint: 769px;
 // Color variables
 $color-primary: #9333ea;
 $color-secondary: #2563eb;
+$color-heading: #0f4d46;
 
 // Shadow variables
 $shadow-sm: 0 4px 12px;
@@ -48,13 +49,17 @@ $transition-fast: all 0.2s ease;
 $transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
 // Common shadow variables
-$shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+$shadow-card:
+  0 4px 6px -1px rgba(0, 0, 0, 0.1),
   0 2px 4px -1px rgba(0, 0, 0, 0.06);
-$shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+$shadow-card-hover:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
   0 4px 6px -2px rgba(0, 0, 0, 0.05);
-$shadow-card-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+$shadow-card-lg:
+  0 10px 15px -3px rgba(0, 0, 0, 0.1),
   0 4px 6px -2px rgba(0, 0, 0, 0.05);
-$shadow-button: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+$shadow-button:
+  0 4px 6px -1px rgba(0, 0, 0, 0.1),
   0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
 // Gradient variables