Oliver/my-biz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: parallax bg on pricing + custom cards, aligned CTA buttons, new agentic image

Browse Source
This commit is contained in:
oliver
2026-04-24 16:20:49 -03:00
parent 32fe8a4073
commit 1d8e85c83d
1 changed files with 111 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+111 -8
View File
@@ -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">