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 @@
>
@@ -1914,6 +2007,16 @@ >