From 1d8e85c83d47ac41077d4bda6423ee9ee40784f9 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Fri, 24 Apr 2026 16:20:49 -0300
Subject: [PATCH] feat: parallax bg on pricing + custom cards, aligned CTA
 buttons, new agentic image

---
 index.html | 119 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 111 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index aff143c..b4df9c2 100644
--- a/index.html
+++ b/index.html
@@ -767,16 +767,49 @@
             }
 
             .pricing-card {
-                background: var(--card);
+                background: transparent;
                 padding: 48px 40px;
                 position: relative;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
             }
             .pricing-card.featured {
-                background: var(--lift);
+                background: transparent;
                 box-shadow:
                     0 0 0 1px var(--gold),
                     0 0 28px var(--gold-glow);
             }
+            /* Cream overlay so text stays legible above the parallax image */
+            .pricing-card::before {
+                content: "";
+                position: absolute;
+                inset: 0;
+                z-index: 0;
+                background: rgba(255, 243, 224, 0.86);
+                pointer-events: none;
+            }
+            .pricing-card.featured::before {
+                background: rgba(245, 236, 228, 0.9);
+            }
+            /* Lift every direct child above the overlay */
+            .pricing-card > *:not(.card-bg) {
+                position: relative;
+                z-index: 1;
+            }
+            /* Parallax background container (shared with custom cards) */
+            .card-bg {
+                position: absolute;
+                inset: -30% 0;
+                z-index: -1;
+                pointer-events: none;
+            }
+            .card-bg img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                display: block;
+            }
 
             .pricing-badge {
                 display: inline-block;
@@ -849,7 +882,8 @@
             }
 
             .pricing-features {
-                margin-bottom: 36px;
+                margin-bottom: 24px;
+                flex: 1;
             }
             .pricing-features li {
                 padding: 8px 0 8px 22px;
@@ -875,6 +909,7 @@
                 font-weight: 700;
                 border-radius: 2px;
                 cursor: pointer;
+                margin-top: auto;
                 transition:
                     background 0.2s,
                     color 0.2s,
@@ -915,10 +950,29 @@
 
             .custom-card {
                 position: relative;
-                background: var(--card);
+                background: transparent;
                 padding: 48px 40px;
                 overflow: hidden;
+                display: flex;
+                flex-direction: column;
+            }
+            /* Cream overlay */
+            .custom-card::before {
+                content: "";
+                position: absolute;
+                inset: 0;
+                z-index: 1;
+                background: rgba(255, 243, 224, 0.86);
                 transition: background 0.3s;
+                pointer-events: none;
+            }
+            .custom-card:hover::before {
+                background: rgba(245, 236, 228, 0.92);
+            }
+            /* All direct content above overlay */
+            .custom-card > *:not(.card-bg) {
+                position: relative;
+                z-index: 2;
             }
             .custom-card::after {
                 content: "";
@@ -936,9 +990,7 @@
                 transform: scaleX(0);
                 transform-origin: left;
                 transition: transform 0.4s;
-            }
-            .custom-card:hover {
-                background: var(--lift);
+                z-index: 3;
             }
             .custom-card:hover::after {
                 transform: scaleX(1);
@@ -961,6 +1013,7 @@
                 font-size: 0.88rem;
                 line-height: 1.7;
                 margin-bottom: 24px;
+                flex: 1;
             }
             .custom-body strong {
                 color: var(--light);
@@ -1633,7 +1686,7 @@
                     >
                         <img
                             class="vtick-img"
-                            src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=600&q=80&auto=format&fit=crop"
+                            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&q=80&auto=format&fit=crop"
                             alt="Agentic Businesses"
                         />
                         <div class="vtick-body">
@@ -1776,6 +1829,16 @@
                     data-mf-animation-easing="ease-out-cubic"
                     data-mf-animation-once="true"
                 >
+                    <div class="card-bg">
+                        <img
+                            data-mf-parallax
+                            data-mf-parallax-speed="0.25"
+                            data-mf-parallax-speed-mobile="0"
+                            src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&q=80&auto=format&fit=crop"
+                            alt=""
+                            aria-hidden="true"
+                        />
+                    </div>
                     <div class="pricing-plan">Side Hustle</div>
                     <div class="pricing-price">$214</div>
                     <div class="pricing-period">
@@ -1802,6 +1865,16 @@
                     data-mf-animation-easing="ease-out-back"
                     data-mf-animation-once="true"
                 >
+                    <div class="card-bg">
+                        <img
+                            data-mf-parallax
+                            data-mf-parallax-speed="0.25"
+                            data-mf-parallax-speed-mobile="0"
+                            src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=80&auto=format&fit=crop"
+                            alt=""
+                            aria-hidden="true"
+                        />
+                    </div>
                     <div class="pricing-badge">Most Popular</div>
                     <div class="pricing-plan">On the Rise</div>
                     <div class="pricing-price">$395</div>
@@ -1830,6 +1903,16 @@
                     data-mf-animation-easing="ease-out-cubic"
                     data-mf-animation-once="true"
                 >
+                    <div class="card-bg">
+                        <img
+                            data-mf-parallax
+                            data-mf-parallax-speed="0.25"
+                            data-mf-parallax-speed-mobile="0"
+                            src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&q=80&auto=format&fit=crop"
+                            alt=""
+                            aria-hidden="true"
+                        />
+                    </div>
                     <div class="pricing-plan">Empire</div>
                     <div class="pricing-price">$750</div>
                     <div class="pricing-period">
@@ -1894,6 +1977,16 @@
                 data-mf-stagger-once="true"
             >
                 <div class="custom-card">
+                    <div class="card-bg">
+                        <img
+                            data-mf-parallax
+                            data-mf-parallax-speed="0.2"
+                            data-mf-parallax-speed-mobile="0"
+                            src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&q=80&auto=format&fit=crop"
+                            alt=""
+                            aria-hidden="true"
+                        />
+                    </div>
                     <span class="custom-icon">&#127760;</span>
                     <div class="custom-title">Hire Any Odoo Developer</div>
                     <p class="custom-body">
@@ -1914,6 +2007,16 @@
                     >
                 </div>
                 <div class="custom-card">
+                    <div class="card-bg">
+                        <img
+                            data-mf-parallax
+                            data-mf-parallax-speed="0.2"
+                            data-mf-parallax-speed-mobile="0"
+                            src="https://images.unsplash.com/photo-1531482615713-2afd69097998?w=800&q=80&auto=format&fit=crop"
+                            alt=""
+                            aria-hidden="true"
+                        />
+                    </div>
                     <span class="custom-icon">&#128295;&#65039;</span>
                     <div class="custom-title">Our In-House Team</div>
                     <p class="custom-body">