diff --git a/src/components/sections/HeroSection.vue b/src/components/sections/HeroSection.vue index b8baf09..6119703 100644 --- a/src/components/sections/HeroSection.vue +++ b/src/components/sections/HeroSection.vue @@ -30,12 +30,7 @@ import logo from "@/assets/logo.jpg"; .hero-section { padding: var(--space-2xl) var(--space-lg); text-align: center; - background: linear-gradient( - 135deg, - var(--color-background-soft) 0%, - var(--color-primary-light) 50%, - var(--color-secondary-light) 100% - ); + background-color: var(--color-background); } .hero-container { @@ -66,8 +61,8 @@ import logo from "@/assets/logo.jpg"; .hero-description { font-size: var(--font-size-lg); - color: var(--color-text); + color: var(--color-secondary-dark); max-width: 600px; margin: 0 auto; } - + \ No newline at end of file diff --git a/src/styles/variables.css b/src/styles/variables.css index 81f445b..331da32 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -1,7 +1,7 @@ /** * Design System Variables - lukastitch.corneruniverse.com * - * Color Palette: Pastel pink, purple, and grey + * Color Palette: Pastel pink, purple, and grey with creamy white background * Mood: Warm, cozy, handcrafted feel * * AI CODING TOOL INSTRUCTIONS: @@ -15,7 +15,7 @@ :root { /* ============================================ PASTEL COLOR PALETTE - Pink, Purple, and Grey as requested + Pink, Purple, and Grey with Creamy White Background ============================================ */ /* Primary: Soft Pastel Pink */ @@ -33,10 +33,10 @@ --color-grey-light: #e0e0e0; --color-grey-dark: #6e6e6e; - /* Background Colors */ - --color-background: #fefcfd; - --color-background-soft: #fdf5f8; - --color-background-mute: #f8eef2; + /* Background Colors - Creamy White Theme */ + --color-background: #fefbf7; + --color-background-soft: #fdf9f5; + --color-background-mute: #faf6f2; /* Text Colors */ --color-text: #4a4a4a; @@ -129,4 +129,4 @@ --color-primary: #f4a5c0; --color-secondary: #c9a5f4; } -} +} \ No newline at end of file