/* ================================================================
ENIDAPS CAPITAL — UI/UX REDESIGN PATCH v1.0
Drop-in: paste
AFTER your existing
Also add Google Fonts tags to your (see README).
================================================================ */
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap");
/* ── DESIGN TOKENS ─────────────────────────────────── */
:root {
--font-display: "Outfit", "Segoe UI", sans-serif;
--font-body: "Inter", "Segoe UI", sans-serif;
/* Section palette */
--bg-dark-1: #0d2818; /* How It Works */
--bg-dark-2: #111c14; /* Gallery */
--bg-dark-3: #131d16; /* Testimonials */
--bg-cream: #faf7f0; /* About · Trust */
--bg-warm: #f4f2ec; /* Services */
--bg-amber: #fdf5e8; /* Quote Form */
}
/* ── BASE TYPOGRAPHY ───────────────────────────────── */
body {
font-family: var(--font-body);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display);
}
/* Heading tightening */
.section-header h2,
.about-content h1,
.service-container h2:nth-child(2),
.gallery-preview h2,
.testimonial-title-wrapper h2,
.faq-preview h1 {
font-family: var(--font-display) !important;
letter-spacing: -0.025em !important;
font-size: clamp(1.85rem, 3vw, 2.6rem) !important;
font-weight: 700 !important;
}
.section-header h4,
.about-content h2,
.testimonial-header h4,
.service-container h2:first-child {
font-family: var(--font-display) !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 3.5px !important;
}
/* ── REDUCED SECTION PADDING ───────────────────────── */
.about-preview,
.how-it-works,
#services,
.gallery-preview,
.trust-section,
.testimonials-section,
.calculator-section,
.quote-section,
.faq-preview {
padding: clamp(60px, 8vw, 96px) 0 !important;
}
/* ── NAVIGATION — DARK FOREST GREEN ───────────────── */
header {
background: rgba(10, 40, 18, 0.96) !important;
box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
}
header.scrolled {
background: rgba(8, 32, 14, 0.99) !important;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.45) !important;
}
header h1 {
color: #fff !important;
font-family: var(--font-display) !important;
letter-spacing: -0.02em !important;
}
.name {
color: var(--accent) !important;
}
nav a {
color: rgba(255, 255, 255, 0.78) !important;
font-family: var(--font-body) !important;
}
nav a:hover,
nav a.active {
color: var(--accent) !important;
}
nav a::after {
background: var(--accent) !important;
}
.toggle-btn {
color: rgba(255, 255, 255, 0.88) !important;
}
@media (max-width: 768px) {
nav {
background: rgba(10, 40, 18, 0.98) !important;
}
nav a {
color: rgba(255, 255, 255, 0.85) !important;
}
}
/* ── SECTION: ABOUT — WARM CREAM ───────────────────── */
.about-preview {
background: var(--bg-cream) !important;
}
.stat-item {
background: #fff !important;
border: 1px solid rgba(46, 125, 50, 0.1) !important;
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06) !important;
}
/* Kill the left-border anti-pattern on feature bullets */
.features p {
background: #fff !important;
border-left: none !important;
border: 1px solid rgba(46, 125, 50, 0.1) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
}
.features p:hover {
transform: translateY(-4px) !important;
border-color: var(--primary-light) !important;
box-shadow: 0 8px 24px rgba(46, 125, 50, 0.12) !important;
}
/* ── SECTION: HOW IT WORKS — DEEP GREEN DARK ────────── */
.how-it-works {
background: var(--bg-dark-1) !important;
}
.how-it-works .section-header h4 {
color: var(--accent) !important;
}
.how-it-works .section-header h2 {
color: #fff !important;
}
.how-it-works .section-header p {
color: rgba(255, 255, 255, 0.6) !important;
}
.process-step {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.process-step:hover {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
transform: translateY(-8px) !important;
}
.process-step h3 {
color: #fff !important;
}
.process-step p {
color: rgba(255, 255, 255, 0.58) !important;
}
.step-icon {
color: var(--accent) !important;
}
.step-number {
background: var(--accent) !important;
color: #1a1a1a !important;
font-family: var(--font-display) !important;
font-weight: 700 !important;
}
.process-connector {
color: rgba(255, 255, 255, 0.18) !important;
}
/* ── SECTION: SERVICES — WARM OFF-WHITE ─────────────── */
#services {
background: var(--bg-warm) !important;
}
.service-card {
background: #fff !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
border: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.service-card:hover {
box-shadow: 0 16px 48px rgba(46, 125, 50, 0.14) !important;
}
.service-content h3 {
font-family: var(--font-display) !important;
}
/* ── SECTION: GALLERY — VERY DARK ───────────────────── */
.gallery-preview {
background: var(--bg-dark-2) !important;
}
.gallery-preview h2,
.gallery-preview .section-header h2,
.gallery-preview .section-header h4 {
color: #fff !important;
}
.gallery-preview .section-header h4 {
color: var(--accent) !important;
}
/* ── SECTION: TRUST — WARM CREAM ───────────────────── */
.trust-section {
background: var(--bg-cream) !important;
}
.trust-card {
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
border-top: 3px solid transparent !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
.trust-card:hover {
border-top-color: var(--primary) !important;
box-shadow: 0 12px 36px rgba(46, 125, 50, 0.12) !important;
transform: translateY(-8px) !important;
}
.trust-card h3 {
font-family: var(--font-display) !important;
}
.partner-logos {
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
/* ── SECTION: TESTIMONIALS — DARK CHARCOAL GREEN ───── */
.testimonials-section {
background: var(--bg-dark-3) !important;
}
.testimonial-header h4 {
color: var(--accent) !important;
}
.testimonial-title-wrapper h2 {
color: #fff !important;
}
.testimonial-title-wrapper p {
color: rgba(255, 255, 255, 0.52) !important;
}
.slider-container {
background: rgba(255, 255, 255, 0.07) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.quote {
color: rgba(255, 255, 255, 0.88) !important;
}
.profile-info strong {
color: var(--accent) !important;
}
.profile-info small {
color: rgba(255, 255, 255, 0.48) !important;
}
.dot {
background: rgba(255, 255, 255, 0.2) !important;
}
.dot.active {
background: var(--accent) !important;
}
/* ── SECTION: QUOTE FORM — WARM AMBER ──────────────── */
.quote-section {
background: var(--bg-amber) !important;
}
.quote-wrapper {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
.quote-info h4 {
color: var(--accent);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 3.5px;
margin-bottom: 12px;
font-weight: 600;
}
.quote-info h2 {
font-size: clamp(1.8rem, 3vw, 2.4rem);
color: var(--primary-dark);
margin-bottom: 16px;
font-weight: 700;
letter-spacing: -0.02em;
}
.quote-info > p {
color: #555;
margin-bottom: 28px;
font-size: 1.02rem;
line-height: 1.75;
}
.quote-benefits {
list-style: none;
padding: 0;
margin-bottom: 32px;
}
.quote-benefits li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: #333;
font-size: 0.97rem;
}
.quote-benefits li i {
color: var(--primary);
font-size: 1.2rem;
}
.quote-contact-hint {
padding: 20px;
background: rgba(46, 125, 50, 0.08);
border-radius: 12px;
border: 1px solid rgba(46, 125, 50, 0.15);
}
.quote-contact-hint p {
color: #666;
font-size: 0.9rem;
margin-bottom: 10px;
}
.wa-inline-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #25d366;
color: #fff;
padding: 10px 20px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s;
}
.wa-inline-btn:hover {
background: #1da851;
transform: translateY(-2px);
}
.quote-form-box {
background: #fff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 8px 48px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.form-group {
margin-bottom: 14px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 14px 18px;
border: 2px solid #e8e4dc;
border-radius: 10px;
background: #fafaf8;
color: #1a1a1a;
font-size: 0.97rem;
font-family: var(--font-body);
outline: none;
transition:
border 0.25s,
background 0.25s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--primary);
background: #fff;
}
.form-group textarea {
resize: vertical;
}
.form-submit-btn {
width: 100%;
background: var(--primary) !important;
color: #fff !important;
opacity: 1 !important;
animation: none !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 1rem;
font-weight: 600;
padding: 15px;
margin-top: 8px;
border-radius: 50px;
}
.form-submit-btn:hover {
background: var(--primary-dark) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(46, 125, 50, 0.35);
}
.form-disclaimer {
text-align: center;
font-size: 0.78rem;
color: #aaa;
margin-top: 12px;
}
@media (max-width: 768px) {
.quote-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.quote-form-box {
padding: 24px;
}
}
/* ── SECTION: FAQ — CRISP WHITE ─────────────────────── */
.faq-preview {
background: #fff !important;
}
.faq-item {
background: #faf7f0 !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
.faq-header:hover {
background: #f2ede3 !important;
}
.faq-question {
font-family: var(--font-display) !important;
font-weight: 600 !important;
}
/* ── FLOATING WHATSAPP BUTTON ────────────────────────── */
.whatsapp-float {
position: fixed;
bottom: 80px;
right: 24px;
width: 56px;
height: 56px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.42);
z-index: 999;
text-decoration: none;
transition: all 0.3s;
animation: pulse-wa 2.5s ease-in-out infinite;
}
.whatsapp-float:hover {
transform: translateY(-4px) scale(1.08);
box-shadow: 0 8px 32px rgba(37, 211, 102, 0.58);
}
.whatsapp-float i {
font-size: 1.85rem;
color: #fff;
}
@keyframes pulse-wa {
0%,
100% {
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.42);
}
50% {
box-shadow:
0 4px 28px rgba(37, 211, 102, 0.65),
0 0 0 10px rgba(37, 211, 102, 0.08);
}
}
/* ── BACK TO TOP BUTTON ──────────────────────────────── */
.back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 44px;
height: 44px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22);
z-index: 998;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s;
font-size: 1.1rem;
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--primary-dark);
transform: translateY(-3px);
}
/* ── TOAST NOTIFICATIONS ─────────────────────────────── */
.toast {
position: fixed;
bottom: 150px;
right: 24px;
padding: 14px 18px;
border-radius: 10px;
font-size: 0.9rem;
font-family: var(--font-body);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
z-index: 9999;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s;
max-width: 280px;
display: flex;
align-items: center;
gap: 8px;
color: #fff;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.toast i {
font-size: 1.1rem;
}
/* ── CALCULATOR RESULT CTA ───────────────────────────── */
.result-cta {
display: inline-block;
margin-top: 10px;
padding: 12px 24px;
background: var(--accent);
color: #fff;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s;
text-align: center;
font-family: var(--font-body);
}
.result-cta:hover {
background: #e65100;
transform: translateY(-2px);
}
/* ── HERO BUTTON REFINEMENT ──────────────────────────── */
.hero-button .btn:first-child {
background: var(--accent) !important;
font-family: var(--font-body) !important;
}
.hero-button .btn-secondary {
font-family: var(--font-body) !important;
}
/* ── SECTION HEADER UNIVERSAL FONT ──────────────────── */
.section-header h4 {
font-family: var(--font-display) !important;
}
/* ── WHATSAPP TOOLTIP ────────────────────────────────── */
.whatsapp-float {
overflow: visible !important;
}
.wa-tooltip {
position: absolute;
right: 64px;
top: 50%;
transform: translateY(-50%);
background: #1a1a1a;
color: #fff;
padding: 5px 12px;
border-radius: 6px;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
font-family: var(--font-body);
}
.whatsapp-float:hover .wa-tooltip {
opacity: 1;
}
/* ================================================================
TESTIMONIALS — Bento Grid 2026 Design
Replaces the old single-slider layout entirely.
================================================================ */
/* Suppress the old slider so nothing leaks if HTML isn't swapped */
.testimonials-section .slider-container,
.testimonials-section
.testimonial-header
> h4
~ *:not(.testimonial-title-wrapper),
.testimonials-section .dots,
.testimonials-section .profile {
display: none !important;
}
/* ── Section base ──────────────────────────────────── */
.testimonials-section {
background: #131d16 !important;
}
/* ── Header row ────────────────────────────────────── */
.testi-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
margin-bottom: 52px;
flex-wrap: wrap;
}
.testi-label {
display: inline-block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--accent);
font-family: var(--font-display);
margin-bottom: 10px;
}
.testi-header-text h2 {
font-family: var(--font-display) !important;
font-size: clamp(1.85rem, 3vw, 2.6rem) !important;
font-weight: 700 !important;
color: #fff !important;
letter-spacing: -0.025em !important;
margin-bottom: 8px;
}
.testi-header-text p {
color: rgba(255, 255, 255, 0.5);
font-size: 1rem;
}
/* ── Overall rating badge ──────────────────────────── */
.testi-overall-rating {
display: flex;
align-items: center;
gap: 18px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
padding: 20px 28px;
flex-shrink: 0;
}
.overall-score {
font-size: 3.2rem;
font-weight: 800;
color: #fff;
font-family: var(--font-display);
line-height: 1;
}
.overall-stars {
display: flex;
gap: 3px;
color: #ffd700;
font-size: 1.1rem;
margin-bottom: 5px;
}
.overall-info span {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.45);
}
/* ── Bento grid ────────────────────────────────────── */
.testi-bento {
display: grid;
grid-template-columns: 1.55fr 1fr;
grid-template-rows: auto auto;
gap: 18px;
}
/* ── Card base ─────────────────────────────────────── */
.testi-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 22px;
padding: 34px;
position: relative;
overflow: hidden;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
.testi-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 22px;
background: radial-gradient(
ellipse at top left,
rgba(255, 167, 38, 0.04) 0%,
transparent 70%
);
pointer-events: none;
}
.testi-card:hover {
border-color: rgba(255, 167, 38, 0.38);
box-shadow:
0 0 0 1px rgba(255, 167, 38, 0.14),
0 24px 56px rgba(0, 0, 0, 0.4);
transform: translateY(-5px);
}
/* Featured card spans both rows */
.testi-card--featured {
grid-row: span 2;
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.12);
}
/* ── Stats card ────────────────────────────────────── */
.testi-card--stat {
background: linear-gradient(
135deg,
rgba(46, 125, 50, 0.28) 0%,
rgba(13, 40, 24, 0.65) 100%
);
border-color: rgba(46, 125, 50, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.testi-card--stat:hover {
border-color: rgba(102, 187, 106, 0.5);
box-shadow:
0 0 0 1px rgba(102, 187, 106, 0.18),
0 24px 56px rgba(0, 0, 0, 0.4);
}
.stat-big {
font-size: 3.8rem;
font-weight: 800;
color: var(--accent);
font-family: var(--font-display);
line-height: 1;
margin-bottom: 8px;
}
.stat-label {
font-size: 1rem;
font-weight: 600;
color: #fff;
font-family: var(--font-display);
margin-bottom: 4px;
}
.stat-sublabel {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 22px;
}
.stat-icons {
display: flex;
justify-content: center;
gap: 14px;
font-size: 1.7rem;
color: rgba(255, 255, 255, 0.22);
}
/* ── Quote mark ────────────────────────────────────── */
.testi-quote-mark {
font-family: Georgia, "Times New Roman", serif;
font-size: 5.5rem;
line-height: 0.75;
color: var(--accent);
opacity: 0.35;
display: block;
margin-bottom: 14px;
user-select: none;
}
/* ── Testimonial text ──────────────────────────────── */
.testi-text {
font-size: 1rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 28px;
max-width: 100%;
}
.testi-card--featured .testi-text {
font-size: 1.08rem;
}
.testi-text strong {
color: var(--accent);
font-weight: 600;
}
/* ── Footer: avatar + author + stars ──────────────── */
.testi-footer {
display: flex;
align-items: center;
gap: 13px;
}
.testi-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
border: 2px solid var(--accent);
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(255, 167, 38, 0.12);
}
.testi-author {
flex: 1;
}
.testi-author strong {
display: block;
color: #fff;
font-size: 0.95rem;
font-family: var(--font-display);
font-weight: 600;
margin-bottom: 2px;
}
.testi-author span {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.42);
}
.testi-stars {
display: flex;
gap: 2px;
color: #ffd700;
font-size: 0.82rem;
flex-shrink: 0;
}
/* ── Verified badge ────────────────────────────────── */
.testi-verified {
position: absolute;
top: 18px;
right: 18px;
display: flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
font-family: var(--font-body);
font-weight: 600;
color: #66bb6a;
background: rgba(102, 187, 106, 0.1);
padding: 4px 10px;
border-radius: 50px;
border: 1px solid rgba(102, 187, 106, 0.22);
}
.testi-verified i {
font-size: 0.88rem;
}
/* ── Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
.testi-bento {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.testi-card--featured {
grid-row: span 1;
}
.testi-header {
flex-direction: column;
align-items: flex-start;
}
.testi-overall-rating {
width: 100%;
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.testi-card {
padding: 24px 20px;
}
.testi-quote-mark {
font-size: 4rem;
}
}
/* ================================================================
CALCULATOR — Plain-English Explanation Styles
================================================================ */
/* Intro paragraph above the result cards */
.results-intro {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 14px;
}
.results-intro p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.75;
margin: 0;
max-width: 100%;
}
.results-intro p strong {
color: var(--accent);
}
/* Explanation text inside each result card */
.result-explain {
font-size: 0.84rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.7;
margin-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 8px;
}
.result-explain strong {
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
}
/* Bump up label size to accommodate emoji */
.result-card .result-label {
font-size: 0.82rem !important;
letter-spacing: 0.5px !important;
}
/* Plain-terms summary box at the bottom */
.result-summary {
background: linear-gradient(
135deg,
rgba(46, 125, 50, 0.18) 0%,
rgba(13, 40, 24, 0.4) 100%
);
border: 1px solid rgba(46, 125, 50, 0.28);
border-radius: 12px;
padding: 16px 20px;
margin-top: 4px;
}
.result-summary p {
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.72;
margin: 0;
max-width: 100%;
font-style: italic;
}
/* ================================================================
FOOTER — Professional 2026 Redesign
================================================================ */
/* Reset old footer padding since we restructure it completely */
footer {
background: none !important;
padding: 0 !important;
}
.footer-top,
.footer-info,
.footer-bottom {
all: unset;
display: revert;
}
/* ── Pre-footer CTA band ─────────────────────────────── */
.footer-cta-band {
background: linear-gradient(130deg, #1b5e20 0%, #2e7d32 55%, #388e3c 100%);
padding: clamp(44px, 6vw, 64px) 0;
position: relative;
overflow: hidden;
}
/* Amber glow radial from the right */
.footer-cta-band::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 85% 50%,
rgba(255, 167, 38, 0.18) 0%,
transparent 62%
);
pointer-events: none;
}
.footer-cta-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.footer-cta-text h3 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3vw, 2.1rem);
font-weight: 700;
color: #fff;
margin-bottom: 6px;
letter-spacing: -0.02em;
}
.footer-cta-text p {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
}
.footer-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--accent);
color: #1a1a1a;
font-weight: 700;
font-size: 1rem;
padding: 16px 38px;
border-radius: 50px;
text-decoration: none;
white-space: nowrap;
font-family: var(--font-display);
transition: all 0.28s;
box-shadow: 0 4px 24px rgba(255, 167, 38, 0.42);
flex-shrink: 0;
}
.footer-cta-btn:hover {
background: #fff;
color: #1a1a1a;
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(255, 167, 38, 0.52);
}
@media (max-width: 640px) {
.footer-cta-inner {
flex-direction: column;
text-align: center;
}
.footer-cta-btn {
width: 100%;
justify-content: center;
}
}
/* ── Footer body ─────────────────────────────────────── */
.footer-body {
background: #0a1f10;
padding: clamp(56px, 7vw, 92px) 0 52px;
position: relative;
overflow: hidden;
}
/* Giant faded wordmark behind content */
.footer-body::before {
content: "EniDaps";
position: absolute;
bottom: -24px;
right: -10px;
font-family: var(--font-display);
font-size: clamp(80px, 17vw, 210px);
font-weight: 900;
color: rgba(255, 255, 255, 0.028);
pointer-events: none;
user-select: none;
line-height: 1;
letter-spacing: -0.04em;
}
/* Subtle top divider glow */
.footer-body::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(46, 125, 50, 0.5) 30%,
rgba(255, 167, 38, 0.4) 50%,
rgba(46, 125, 50, 0.5) 70%,
transparent 100%
);
}
/* ── 4-column grid ───────────────────────────────────── */
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.25fr;
gap: 52px;
position: relative;
z-index: 1;
}
@media (max-width: 1060px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
@media (max-width: 540px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* ── Brand column ────────────────────────────────────── */
.footer-logo {
font-family: var(--font-display);
font-size: 1.65rem;
font-weight: 800;
color: #fff;
margin-bottom: 16px;
letter-spacing: -0.025em;
line-height: 1;
}
.footer-logo-eni {
color: var(--accent);
}
.footer-tagline {
color: rgba(255, 255, 255, 0.48);
font-size: 0.88rem;
line-height: 1.75;
margin-bottom: 22px;
max-width: 240px;
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(102, 187, 106, 0.1);
border: 1px solid rgba(102, 187, 106, 0.22);
color: #66bb6a;
font-size: 0.76rem;
font-weight: 600;
font-family: var(--font-body);
padding: 5px 13px;
border-radius: 50px;
margin-bottom: 24px;
}
.footer-badge i {
font-size: 0.9rem;
}
.footer-socials {
display: flex;
gap: 10px;
}
.footer-socials a {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
font-size: 1.2rem;
text-decoration: none;
transition: all 0.28s;
}
.footer-socials a:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(255, 167, 38, 0.08);
transform: translateY(-3px);
}
/* ── Column titles ───────────────────────────────────── */
.footer-col-title {
font-family: var(--font-display) !important;
font-size: 0.74rem !important;
font-weight: 700 !important;
letter-spacing: 3.5px !important;
text-transform: uppercase !important;
color: var(--accent) !important;
margin-bottom: 24px !important;
padding: 0 !important;
background: none !important;
}
/* ── Footer nav links with animated arrow ────────────── */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.footer-links li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
font-size: 0.9rem;
font-family: var(--font-body);
display: inline-flex;
align-items: center;
gap: 0;
transition:
color 0.22s,
padding-left 0.22s;
position: relative;
}
/* Animated → arrow on hover */
.footer-links li a::before {
content: "→";
position: absolute;
left: -16px;
opacity: 0;
color: var(--accent);
font-size: 0.78rem;
transition:
opacity 0.22s,
left 0.22s;
}
.footer-links li a:hover {
color: rgba(255, 255, 255, 0.9);
padding-left: 20px;
}
.footer-links li a:hover::before {
opacity: 1;
left: 0;
}
/* ── Contact list ────────────────────────────────────── */
.footer-contact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.footer-contact-list li {
display: flex;
align-items: flex-start;
gap: 13px;
color: rgba(255, 255, 255, 0.5);
font-size: 0.87rem;
line-height: 1.65;
font-family: var(--font-body);
}
.footer-contact-list li i {
color: var(--accent);
font-size: 1.05rem;
margin-top: 3px;
flex-shrink: 0;
}
.footer-contact-list li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.22s;
}
.footer-contact-list li a:hover {
color: var(--accent);
}
/* ── Bottom bar ──────────────────────────────────────── */
.footer-bottom {
background: #071510 !important;
border-top: 1px solid rgba(255, 255, 255, 0.055) !important;
padding: 20px 0 !important;
display: block !important;
}
.footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.32) !important;
font-size: 0.8rem !important;
font-family: var(--font-body) !important;
margin: 0 !important;
}
.footer-bottom-right {
display: flex;
align-items: center;
gap: 5px;
color: rgba(255, 255, 255, 0.32);
font-size: 0.8rem;
font-family: var(--font-body);
}
.footer-bottom-right i {
font-size: 0.95rem;
color: var(--accent);
}
@media (max-width: 480px) {
.footer-bottom-inner {
flex-direction: column;
text-align: center;
}
}
/* ================================================================
SECTION TAG — Pill label above section headings
Used on h2/h4 elements that act as section identifiers
================================================================ */
.section-tag {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-body) !important;
font-size: 0.74rem !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--primary) !important;
background: rgba(46, 125, 50, 0.1) !important;
border: 1px solid rgba(46, 125, 50, 0.22) !important;
padding: 5px 14px 5px 10px !important;
border-radius: 50px !important;
margin-bottom: 14px !important;
line-height: 1 !important;
position: relative;
}
/* Glowing left dot */
.section-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
box-shadow: 0 0 6px rgba(255, 167, 38, 0.7);
animation: tag-pulse 2.4s ease-in-out infinite;
}
@keyframes tag-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.7);
}
}
/* On dark section backgrounds, flip to lighter variant */
.how-it-works .section-tag,
.calculator-section .section-header .section-tag,
.quote-section .section-tag {
color: var(--accent) !important;
background: rgba(255, 167, 38, 0.1) !important;
border-color: rgba(255, 167, 38, 0.25) !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.section-tag::before {
animation: none;
}
}