Update src/app/styles/variables.css

Merge version_7 into main

src/app/page.tsx

@@ -85,13 +85,13 @@ export default function LandingPage() {
               icon={Sparkles}
               imageSrc="http://img.b2bpic.net/free-photo/top-view-hands-holding-food_23-2149410425.jpg"
               imageAlt="Man die een wijnfles kiest in een kelder"
-              mediaAnimation="slide-up"
+              mediaAnimation="blur-reveal"
             />
           </div>
 
           <div id="recommended-products" data-section="recommended-products">
             <ProductCardThree
-              animationType="slide-up"
+              animationType="blur-reveal"
               textboxLayout="default"
               gridVariant="four-items-2x2-equal-grid"
               useInvertedBackground={false}
@@ -122,7 +122,7 @@ export default function LandingPage() {
 
           <div id="blog-preview" data-section="blog-preview">
             <BlogCardTwo
-              animationType="slide-up"
+              animationType="blur-reveal"
               textboxLayout="default"
               useInvertedBackground={true}
               title="Laatste Nieuws & Blogs"
@@ -143,7 +143,7 @@ export default function LandingPage() {
 
           <div id="events-preview" data-section="events-preview">
             <FeatureCardSixteen
-              animationType="slide-up"
+              animationType="blur-reveal"
               textboxLayout="default"
               useInvertedBackground={false}
               negativeCard={{

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-playfair-display), serif;
 }

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #f5f3f0;
   --card: #ffffff;
-  --foreground: #262626;
+  --foreground: #2a2a2a;
   --primary-cta: #b8860b;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #262626;
+  --secondary-cta: #6b4423;
   --secondary-cta-text: #f5f3f0;
   --accent: #e0ac10;
-  --background-accent: #e8e8e8;
+  --background-accent: #a8b5a0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);