diff --git a/addons/dine360_theme_chennora/static/src/img/hero-mushroom.png b/addons/dine360_theme_chennora/static/src/img/hero-mushroom.png new file mode 100644 index 0000000..193b8e7 Binary files /dev/null and b/addons/dine360_theme_chennora/static/src/img/hero-mushroom.png differ diff --git a/addons/dine360_theme_chennora/static/src/img/hero-onion-ring.png b/addons/dine360_theme_chennora/static/src/img/hero-onion-ring.png new file mode 100644 index 0000000..59aace4 Binary files /dev/null and b/addons/dine360_theme_chennora/static/src/img/hero-onion-ring.png differ diff --git a/addons/dine360_theme_chennora/static/src/scss/theme.scss b/addons/dine360_theme_chennora/static/src/scss/theme.scss index 17f0dde..1fd5138 100644 --- a/addons/dine360_theme_chennora/static/src/scss/theme.scss +++ b/addons/dine360_theme_chennora/static/src/scss/theme.scss @@ -188,16 +188,15 @@ header { } // Hero Shape Animation -.hero-shape-accent { +.hero-half-tomato-left { position: absolute; - top: 5%; - left: 2%; - width: 350px; - z-index: 1; - opacity: 0.1; + top: 50%; + left: -40%; + width: clamp(120px, 15vw, 250px); + z-index: 2; pointer-events: none; - filter: brightness(0) invert(1); // Make it white/light - animation: shapeFloat 15s ease-in-out infinite; + filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.3)); + animation: floatSlight 15s ease-in-out infinite; } @keyframes shapeFloat { @@ -208,7 +207,7 @@ header { } 33% { - transform: translateY(-20px) rotate(3deg) scale(1.05); + transform: translateY(-20px) rotate(3deg) scale(1.02); } 66% { @@ -216,57 +215,88 @@ header { } } +@keyframes floatSlight { + + 0%, + 100% { + transform: translate(0, 0) rotate(0deg); + } + + 50% { + transform: translate(15px, -15px) rotate(5deg); + } +} + +@keyframes floatRotate { + 0% { + transform: translateY(0) rotate(0deg); + } + + 50% { + transform: translateY(-30px) rotate(180deg); + } + + 100% { + transform: translateY(0) rotate(360deg); + } +} + +@keyframes pulseSubtle { + + 0%, + 100% { + transform: scale(1); + opacity: 0.8; + } + + 50% { + transform: scale(1.05); + opacity: 1; + } +} + // Hero Floating Elements .hero-tomato-right { position: absolute; top: 5%; right: 2%; - width: 200px; + width: clamp(100px, 15vw, 220px); z-index: 2; pointer-events: none; + filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.3)); animation: shapeFloat 8s ease-in-out infinite; } .hero-leaf-right { position: absolute; - top: 15%; + top: 25%; right: 8%; - width: 80px; + width: 60px; z-index: 1; pointer-events: none; - animation: shapeFloat 10s ease-in-out infinite reverse; + animation: floatSlight 10s ease-in-out infinite reverse; } .hero-lettuce-left { position: absolute; - bottom: 5%; - left: -2%; - width: 250px; - z-index: 2; + bottom: -40%; + left: -40%; + width: clamp(150px, 20vw, 350px); + z-index: 3; pointer-events: none; + filter: drop-shadow(-10px 10px 25px rgba(0, 0, 0, 0.4)); animation: shapeFloat 12s ease-in-out infinite; } .hero-sketches-left { position: absolute; - top: 2%; - left: 2%; - width: 300px; + top: 10%; + left: 4%; + width: clamp(200px, 25vw, 400px); z-index: 1; pointer-events: none; - opacity: 0.2; - animation: shapeFloat 20s linear infinite; -} - -.hero-onion-mid { - position: absolute; - bottom: 20%; - left: 40%; - width: 120px; - z-index: 1; - pointer-events: none; - opacity: 0.6; - animation: shapeFloat 9s ease-in-out infinite; + opacity: 0.25; + animation: floatSlight 20s linear infinite; } // Section Headers diff --git a/addons/dine360_theme_chennora/views/pages.xml b/addons/dine360_theme_chennora/views/pages.xml index aeb9a3d..5b1961a 100644 --- a/addons/dine360_theme_chennora/views/pages.xml +++ b/addons/dine360_theme_chennora/views/pages.xml @@ -21,13 +21,15 @@