… ============================= */ /* Warm backdrop for the whole FAQ section */ .fp #faq.home-faq{ background: #FFF7EC; /* soft cream */ padding: 36px 0 44px; /* a bit taller like ref */ } /* Keep pill spacing and add a clean gap under H2 */ .fp #faq .section-head{ margin-bottom: 6px; } .fp #faq h2{ margin: 10px 0 16px; } /* Grid: 1 col mobile → 2 col tablet → 3 col desktop */ .fp #faq .cards{ display: grid; gap: 28px; grid-template-columns: 1fr; /* mobile */ } @media (min-width: 760px){ .fp #faq .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 1100px){ .fp #faq .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); } } /* Card look */ .fp #faq .card{ background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 10px 28px rgba(0,0,0,.08); } /* Title and body rhythm */ .fp #faq .card h3{ margin: 0 0 10px; font-size: clamp(18px, 2.1vw, 22px); line-height: 1.25; font-weight: 800; color: var(--brand-ink); } .fp #faq .card p{ margin: 0; color: var(--ink-700); } /* Optional: very subtle hover polish (no lift) */ .fp #faq .card:hover{ box-shadow: 0 12px 32px rgba(0,0,0,.10); } /* ============================= FAQ — Zoom + Inner Fill + Darker Outer Glow (v3) Scope: #faq only ============================= */ .fp #faq.home-faq{ background:#FFF7EC; padding:36px 0 44px; } .fp #faq .section-head{ margin-bottom:6px; } .fp #faq h2{ margin:10px 0 16px; } /* Grid layout */ .fp #faq .cards{ display:grid; gap:28px; grid-template-columns:1fr; } @media (min-width:760px){ .fp #faq .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:1100px){ .fp #faq .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* Base card */ .fp #faq .card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 10px 28px rgba(0,0,0,.08); overflow:visible; /* shows outer box */ transition: transform .18s ease, box-shadow .18s ease; } .fp #faq .card h3{ margin:0 0 10px; font-size:clamp(18px,2.1vw,22px); line-height:1.25; font-weight:800; } .fp #faq .card p{ margin:0; color:var(--ink-700); } /* --- Effect defaults (applies to all FAQ cards) --- */ .fp #faq .card{ --fill: rgba(68,164,170,.18); /* inner fill (rich) */ --spread: rgba(68,164,170,.22); /* darker outer glow (global default) */ --scale: 1.010; --offset: 8%; --radius: 20px; --blinkd: .38s; } /* Inner tinted fill */ .fp #faq .card::before{ content:""; position:absolute; inset:6px; background: var(--fill); border-radius:14px; opacity:0; transition: opacity .16s ease; pointer-events:none; z-index:0; } /* Outer glow (darker but tight) */ .fp #faq .card::after{ content:""; position:absolute; left:calc(-1 * var(--offset)); right:calc(-1 * var(--offset)); top:calc(-1 * var(--offset)); bottom:calc(-1 * var(--offset)); border-radius: var(--radius); background: var(--spread); filter: blur(7px); /* keep compact so neighbors are safe */ opacity:0; pointer-events:none; z-index:-1; } /* Hover behavior */ .fp #faq .card:hover, .fp #faq .card:focus-within{ transform: scale(var(--scale)); box-shadow: 0 14px 36px rgba(0,0,0,.14); } .fp #faq .card:hover::before, .fp #faq .card:focus-within::before{ opacity:1; } .fp #faq .card:hover::after, .fp #faq .card:focus-within::after{ animation: faq-outbox-blink var(--blinkd) ease-out 1; } /* Blink animation */ @keyframes faq-outbox-blink{ 0% { opacity:0; transform:scale(.99); } 40% { opacity:.95; transform:scale(1.00); } /* peak darker */ 100% { opacity:.22; transform:scale(1.01); } /* darker settle */ } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .fp #faq .card:hover, .fp #faq .card:focus-within{ transform:none; } .fp #faq .card:hover::after, .fp #faq .card:focus-within::after{ animation:none; opacity:.18; } } /* ============================= Per-card colors (darker fill + darker glow) ============================= */ /* 1 — Teal */ .fp #faq .card:nth-child(1){ --fill: rgba(68,164,170,.18); --spread: rgba(68,164,170,.24); } /* 2 — Violet */ .fp #faq .card:nth-child(2){ --fill: rgba(167,139,250,.18); --spread: rgba(167,139,250,.24); } /* 3 — Amber */ .fp #faq .card:nth-child(3){ --fill: rgba(245,158,11,.18); --spread: rgba(245,158,11,.24); } /* 4 — Rose */ .fp #faq .card:nth-child(4){ --fill: rgba(244,114,182,.18); --spread: rgba(244,114,182,.24); } /* 5 — Sky */ .fp #faq .card:nth-child(5){ --fill: rgba(56,189,248,.18); --spread: rgba(56,189,248,.24); } /* 6 — Emerald */ .fp #faq .card:nth-child(6){ --fill: rgba(16,185,129,.18); --spread: rgba(16,185,129,.24); } /* ==================================================================About Page======================================================= */ /* ABOUT — HERO split like Home */ .fp.about-page .hero{ /*background: var(--hero-bg);*/ padding-top: var(--pad-lg); padding-bottom: var(--pad-lg); } .fp.about-page .hero .grid.grid-2{ display: grid; grid-template-columns: 1.15fr .85fr; /* text left, image right */ align-items: center; gap: 28px; } .fp.about-page .hero h1{ font-size: var(--h1); line-height: 1.05; color: var(--brand); margin: 8px 0 14px; } .fp.about-page .hero .hero-img{ display:block; width:100%; max-width:540px; /* smaller image */ aspect-ratio: 4 / 3; object-fit: cover; border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow-md); margin-left:auto; /* hug right edge */ } @media (max-width:820px){ /* stack like Home/About: text first, image below */ .fp.why-page .hero .grid.grid-2{ grid-template-columns: 1fr; gap: 20px; } /* ensure image comes after text */ .fp.why-page .hero .hero-card{ order: 2; max-height: none; } } /* ============================= ABOUT — Overview cleanup ============================= */ .fp.about-page #about-overview{ padding-top: var(--pad-lg); padding-bottom: calc(var(--pad-lg) + 6px); background: linear-gradient(180deg, rgba(12,141,143,.04), rgba(173,58,113,.02) 60%, transparent); } .fp.about-page #about-overview .section-head{ margin-bottom: 12px; /* tighter than default */ } .fp.about-page #about-overview h2{ font-size: var(--h2); line-height: 1.2; margin: 8px 0 6px; color: var(--brand-ink); } .fp.about-page #about-overview .lead{ max-width: 72ch; /* readable line length */ color: var(--ink-800); font-size: 1.05rem; /* slightly larger for comfort */ margin: 0; /* remove extra gaps */ } /* About – Overview paragraph */ .fp #about-overview .lead{ text-align: justify; text-justify: inter-word; /* browsers that support it will space words nicely */ } /* ============================================ ABOUT — VMV #77 (Effect 3: Soft Tint + Glow Ring) FULL REPLACEMENT — idle tint + colored border, hover adds glow ring; no lift/underline/rails ============================================ */ /* layout */ .fp.about-page #vmv77 .cards{ display:grid; gap:18px; } @media (min-width:980px){ .fp.about-page #vmv77 .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); } } /* per-card accent tokens (adjust if you want Set A/B/C/D) */ .fp.about-page #vmv77 .card:nth-child(1){ --a:#2563EB; } /* Vision — royal blue */ .fp.about-page #vmv77 .card:nth-child(2){ --a:#06B6D4; } /* Mission — cyan */ .fp.about-page #vmv77 .card:nth-child(3){ --a:#7C3AED; } /* Values — violet */ /* base card — has tint + colored border even before hover */ .fp.about-page #vmv77 .card{ background: color-mix(in srgb, var(--a) 9%, #fff); /* idle tint */ border: 2px solid color-mix(in srgb, var(--a) 35%, #dbe2ea); border-radius: 18px; padding: 22px 24px; box-shadow: 0 6px 14px rgba(0,0,0,.06); /* soft base shadow */ transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; } /* titles use the same accent; body text stays legible */ .fp.about-page #vmv77 .card h3{ color: var(--a); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.25; margin: 0 0 8px; } .fp.about-page #vmv77 .card p{ margin:0; color: var(--ink-700); } /* hover/focus — stronger tint + glow ring; NO lift */ .fp.about-page #vmv77 .card:hover{ background: color-mix(in srgb, var(--a) 14%, #fff); /* slightly deeper */ border-color: color-mix(in srgb, var(--a) 50%, #cfd6de); box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 0 0 6px color-mix(in srgb, var(--a) 22%, transparent); /* glow ring */ } /* Touch (mobile + tablet) – same effect on tap */ @media (max-width: 1024px){ .fp.about-page #vmv77 .card:active{ background: color-mix(in srgb, var(--a) 14%, #fff); border-color: color-mix(in srgb, var(--a) 50%, #cfd6de); box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 0 0 6px color-mix(in srgb, var(--a) 22%, transparent); } } .fp.about-page #vmv77 .card:focus-within{ outline: none; background: color-mix(in srgb, var(--a) 14%, #fff); border-color: color-mix(in srgb, var(--a) 50%, #cfd6de); box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 0 0 6px color-mix(in srgb, var(--a) 22%, transparent); } /* reduced motion — keep color changes, no extra transitions */ @media (prefers-reduced-motion: reduce){ .fp.about-page #vmv77 .card{ transition: none; } } /* ============================================ ABOUT — HOW WE WORK (FULL REPLACEMENT) 2×2 cards, thin left strip (6px) + lift+glow hover ============================================ */ .fp.about-page .how .cards{ display:grid; gap:18px; } @media (min-width:980px){ .fp.about-page .how .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .fp.about-page .how .card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); padding:22px 24px; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; will-change: transform, box-shadow; } /* thinner left color strip */ .fp.about-page .how .card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; /* was 12px */ border-radius:18px 0 0 18px; background:var(--a); } /* Bright accents (not used elsewhere on About) */ .fp.about-page .how .card:nth-child(1){ --a:#F97316; } /* Discover — orange */ .fp.about-page .how .card:nth-child(2){ --a:#84CC16; } /* Scope — lime */ .fp.about-page .how .card:nth-child(3){ --a:#4F46E5; } /* Deliver — indigo */ .fp.about-page .how .card:nth-child(4){ --a:#EF4444; } /* Verify — red */ .fp.about-page .how .card h3{ color: var(--a); font-size: clamp(18px, 2.2vw, 22px); line-height:1.25; margin:0 0 8px; } .fp.about-page .how .card p{ margin:0; color: var(--ink-700); } /* Hover / Focus: lift + glow ring */ .fp.about-page .how .card:hover{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--a) 28%, var(--line)); box-shadow: 0 16px 36px rgba(0,0,0,.14), 0 0 0 6px color-mix(in srgb, var(--a) 20%, transparent); background: color-mix(in srgb, var(--a) 6%, #fff); } /* Touch (mobile + tablet) – lift + glow on tap */ @media (max-width: 1024px){ .fp.about-page .how .card:active{ transform: translateY(-4px); border-color: color-mix(in srgb, var(--a) 28%, var(--line)); box-shadow: 0 16px 36px rgba(0,0,0,.14), 0 0 0 6px color-mix(in srgb, var(--a) 20%, transparent); background: color-mix(in srgb, var(--a) 6%, #fff); } } .fp.about-page .how .card:focus-within{ outline:none; transform: translateY(-4px); border-color: color-mix(in srgb, var(--a) 28%, var(--line)); box-shadow: 0 16px 36px rgba(0,0,0,.14), 0 0 0 6px color-mix(in srgb, var(--a) 20%, transparent); background: color-mix(in srgb, var(--a) 6%, #fff); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .fp.about-page .how .card{ transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .fp.about-page .how .card:hover, .fp.about-page .how .card:focus-within{ transform:none; } } /* ============================================ ABOUT — WHO WE SERVE (FULL REPLACEMENT) Effects: #77 (title spacing) + #142 (neon glow) ============================================ */ .fp.about-page #serve63 .cards{ display:grid; gap:18px; } @media (min-width:980px){ .fp.about-page #serve63 .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } } .fp.about-page #serve63 .card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); padding:22px 24px; transition: filter .25s ease, border-color .25s ease, background .25s ease; will-change:filter; } /* Pastel heading colors (static seeds per card) */ .fp.about-page #serve63 .card:nth-child(1){ --a:#3B82F6; } /* Blue */ .fp.about-page #serve63 .card:nth-child(2){ --a:#06B6D4; } /* Cyan */ .fp.about-page #serve63 .card:nth-child(3){ --a:#F59E0B; } /* Amber */ .fp.about-page #serve63 .card:nth-child(4){ --a:#A855F7; } /* Violet */ .fp.about-page #serve63 .card h3{ color:var(--a); font-size:clamp(18px,2.2vw,22px); line-height:1.25; margin:0 0 8px; transition:letter-spacing .25s ease, color .25s ease; /* #77 */ } .fp.about-page #serve63 .card p{ margin:0; color:var(--ink-700); } /* ---------- Hover / Focus: apply both effects ---------- */ /* #142 — neon glow ring + gentle tint */ /* #77 — headline spacing + slight brighten */ .fp.about-page #serve63 .card:hover{ filter: drop-shadow(0 0 12px color-mix(in srgb, var(--a) 42%, transparent)); border-color: color-mix(in srgb, var(--a) 28%, var(--line)); background: color-mix(in srgb, var(--a) 6%, #fff); } .fp.about-page #serve63 .card:hover h3{ letter-spacing:.04em; color: color-mix(in srgb, var(--a) 78%, #ffffff); } /* Touch (mobile + tablet) – neon glow + heading shift on tap */ @media (max-width: 1024px){ .fp.about-page #serve63 .card:active{ filter: drop-shadow(0 0 12px color-mix(in srgb, var(--a) 42%, transparent)); border-color: color-mix(in srgb, var(--a) 28%, var(--line)); background: color-mix(in srgb, var(--a) 6%, #fff); } .fp.about-page #serve63 .card:active h3{ letter-spacing:.04em; color: color-mix(in srgb, var(--a) 78%, #ffffff); } } /* Keyboard/touch parity */ .fp.about-page #serve63 .card:focus-within{ outline:none; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--a) 42%, transparent)); border-color: color-mix(in srgb, var(--a) 28%, var(--line)); background: color-mix(in srgb, var(--a) 6%, #fff); } .fp.about-page #serve63 .card:focus-within h3{ letter-spacing:.04em; color: color-mix(in srgb, var(--a) 78%, #ffffff); } /* Reduced motion: keep color/glow, no extra transitions */ @media (prefers-reduced-motion:reduce){ .fp.about-page #serve63 .card{ transition:none; } } /*=============================== Header adjustments ===================================== */ /* ========================================================= FAZILATPRO — HEADER + NAV (FULL REPLACEMENT) - Logo left, nav right - Compact bar height (logo visually larger via scale) - Nav effects: #6 Soft Pill Fill + #9 Lift & Shadow - Active/hover underline in brand color ========================================================= */ /* Header bar */ .site-header{ position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #e8edf3; box-shadow: 0 2px 14px rgba(17,24,39,.06); overflow: visible; /* ensure shadows aren't clipped */ } /* Inner shell: compact height */ .site-header .nav-shell{ display: flex; align-items: center; justify-content: space-between; /* logo left, nav right */ gap: 24px; padding: 14px 24px; /* compact vertical height */ overflow: visible; } /* Logo: larger look without increasing header height */ .logo{ flex: 0 0 auto; display:flex; align-items:center; } .logo img{ height: 66px; /* layout height stays modest */ width: auto; transform: scale(1.16); /* visual boost only */ transform-origin: left center; /* grows to the right, not downward */ will-change: transform; pointer-events: none; } /* Nav on the right */ .main-nav{ margin-left: auto; display: flex; align-items: center; gap: 48px; } /* Brand token fallback */ :root{ --nav-accent: #D8B24A; } /* soft golden tone */ /* Base nav link (no layout shift) */ .main-nav a{ position: relative; display: inline-block; padding: 8px 14px; /* small pill padding (visual) */ border-radius: 999px; /* pill shape */ text-decoration: none; color: var(--ink-900, #0E1B2A); line-height: 1; background-clip: padding-box; /* helps shadow read cleanly */ z-index: 0; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease; } /* Underline bar (hidden by default) */ .main-nav a::after{ content: ""; position: absolute; left: 10px; right: 10px; bottom: -14px; height: 4px; border-radius: 3px; background: var(--nav-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease, background-color .25s ease; pointer-events: none; } /* HOVER — Effect #6 (soft pill fill) + Effect #9 (lift & shadow) + underline */ .main-nav a:hover{ background-color: color-mix(in srgb, var(--nav-accent) 14%, transparent); transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(0,0,0,.28), 0 6px 14px -6px rgba(0,0,0,.18); filter: drop-shadow(0 10px 14px rgba(0,0,0,.16)); /* survives any overflow clipping */ color: var(--nav-accent); } .main-nav a:hover::after{ transform: scaleX(1); } /* ACTIVE (current page) — same look as hover, persistent */ .main-nav a.active, .main-nav a[aria-current="page"]{ background-color: color-mix(in srgb, var(--nav-accent) 18%, transparent); transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(0,0,0,.30), 0 7px 16px -6px rgba(0,0,0,.20); filter: drop-shadow(0 12px 16px rgba(0,0,0,.18)); color: var(--nav-accent); font-weight: 700; } .main-nav a.active::after, .main-nav a[aria-current="page"]::after{ transform: scaleX(1); } /* Safety: keep nav clean */ .site-header nav ul{ list-style: none; } /* Small screens */ @media (max-width: 640px){ .site-header .nav-shell{ padding: 12px 16px; } .logo img{ height: 48px; transform: scale(1.10); } .main-nav{ gap: 14px; } .main-nav a{ padding: 7px 12px; } .main-nav a::after{ bottom: -10px; height: 3px; } } .main-nav a::after{ height:0 !important; background:transparent !important; transform:none !important; } /*====================================================WHY PAGE=======================================*/ /* ========================================================== Why Us — page-scoped styles (keeps global styles intact) Namespace: .fp.why-page ========================================================== */ /* HERO: soft gradient bg + roomy spacing */ .fp.why-page .hero{ position: relative; padding: clamp(48px, 6vw, 96px) 0; background: linear-gradient(135deg, rgba(12,141,143,.08) 0%, rgba(173,58,113,.08) 100%); border-top: 1px solid transparent; /* aligns baseline */ } /* container uses your global vars */ .fp.why-page .hero .container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } /* two-column layout, text heavier than image */ .fp.why-page .grid.grid-2{ display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(20px, 3.5vw, 48px); } /* left copy */ .fp.why-page .hero .badge{ margin-bottom: 14px; } .fp.why-page .hero h1{ font-size: var(--h1); line-height: 1.05; color: var(--brand); margin: 8px 0 14px; } .fp.why-page .hero .lede{ font-size: var(--lede); color: var(--ink-700); max-width: 60ch; } /* === WHY — HERO (no bars, no distortion) ================== .fp.why-page .hero .hero-card{ background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 50px -18px rgba(0,0,0,.25), 0 10px 22px -10px rgba(0,0,0,.18); overflow:hidden; /* lock the frame to 16:10 so the image can cover it */ /* aspect-ratio:16 / 10; max-height:460px; /* desktop cap */ /*} /* Image fills the card; slight crop is okay (no white bands) */ /*.fp.why-page .hero .hero-img{ display:block; width:100%; height:100%; /* fill the aspect-ratio frame */ /*object-fit:cover; /* no letterboxing, no stretch */ /*image-rendering:auto; backface-visibility:hidden; transform:translateZ(0); } */ /* === WHY — HERO (full image, no cropping) ================== */ .fp.why-page .hero .hero-card{ background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 24px 50px -18px rgba(0,0,0,.25), 0 10px 22px -10px rgba(0,0,0,.18); overflow:hidden; display:flex; justify-content:center; align-items:center; padding:0; } .fp.why-page .hero .hero-img{ display:block; width:100%; height:auto; max-width:780px; /* optional cap; tweak if needed */ object-fit:contain; /* show whole image */ margin:0; } /* Tablet / mobile caps */ @media (max-width:1100px){ .fp.why-page .hero .hero-card{ max-height:380px; } } @media (max-width:820px){ .fp.why-page .hero .hero-card{ order:-1; max-height:260px; } } /* ============================= WHY — Our Pillars (FULL REPLACEMENT) Clean lift + Gradient Fog (#46) + Colored Border ONLY COLOR PALETTE CHANGED (no yellow, one blue) ============================= */ .fp.why-page #pillars{ padding-top:12px; } .fp.why-page #pillars .section-head{ margin:0 0 12px; } .fp.why-page #pillars h2{ margin:8px 0 6px; } .fp.why-page #pillars .lead{ margin:0 0 10px; color:var(--ink-700); } /* 2-col grid on desktop */ .fp.why-page .pillars-grid{ display:grid; gap:20px; grid-template-columns:1fr; } @media (min-width:980px){ .fp.why-page .pillars-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Base card + effects (unchanged) */ .fp.why-page .pillar{ --bd: color-mix(in srgb, var(--title, #2563eb) 22%, var(--line)); position:relative; background:#fff; border:2px solid var(--bd); border-radius:18px; padding:18px 20px; box-shadow:0 6px 18px rgba(0,0,0,.06); transition:transform .20s ease, box-shadow .20s ease, border-color .20s ease, filter .20s ease, outline-color .20s ease; overflow:hidden; } .fp.why-page .pillar h3{ margin:0 0 8px; font-size:clamp(18px,2.1vw,22px); line-height:1.25; font-weight:800; color:var(--title, var(--brand-ink)); } .fp.why-page .pillar p{ margin:0; color:var(--ink-700); } .fp.why-page .pillar:hover{ transform:translateY(-4px); border-color: color-mix(in srgb, var(--title, #2563eb) 48%, var(--line)); box-shadow:0 16px 36px rgba(2,6,23,.12); } /* Gradient Fog overlay (unchanged) */ .fp.why-page .pillar::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s ease; background: radial-gradient(700px 340px at 62% -12%, color-mix(in srgb, var(--title, #06b6d4) 18%, transparent), transparent 72%); } .fp.why-page .pillar:hover::after{ opacity:.9; } .fp.why-page .pillar:focus-within{ transform:translateY(-3px); border-color: color-mix(in srgb, var(--title, #2563eb) 48%, var(--line)); box-shadow:0 16px 36px rgba(2,6,23,.12); } .fp.why-page .pillar:focus-within::after{ opacity:.85; } /* ============================= NEW Distinct Pastel/Neon Title Colors (no yellow, one blue) Order 1–10 (F, A, Z, I, A[audit], P[proactive], T, P[coord], R, O) ============================= */ .fp.why-page .pillars-grid .pillar:nth-child(1) { --title:#4FC3F7; } /* Sky Blue (only blue) */ .fp.why-page .pillars-grid .pillar:nth-child(2) { --title:#2EE6A6; } /* Neon Mint */ .fp.why-page .pillars-grid .pillar:nth-child(3) { --title:#FF8A4B; } /* Tangerine */ .fp.why-page .pillars-grid .pillar:nth-child(4) { --title:#18E0D6; } /* Aqua Teal */ .fp.why-page .pillars-grid .pillar:nth-child(5) { --title:#C084FC; } /* Orchid Violet */ .fp.why-page .pillars-grid .pillar:nth-child(6) { --title:#FF4D8D; } /* Hot Pink */ .fp.why-page .pillars-grid .pillar:nth-child(7) { --title:#58D26F; } /* Fresh Green */ .fp.why-page .pillars-grid .pillar:nth-child(8) { --title:#FF6F61; } /* Coral Red */ .fp.why-page .pillars-grid .pillar:nth-child(9) { --title:#FFA3E0; } /* Lavender Pink */ .fp.why-page .pillars-grid .pillar:nth-child(10) { --title:#F59F9F; } /* Soft Salmon */ /* ========================================================== WHAT YOU RECEIVE — STATIC HALO, NO INNER FILL Full replacement for this section only ========================================================== */ /* Ensure the section background itself doesn't add a wash */ .fp .receive{ background: none !important; padding: 24px 0 8px; } .fp .receive .section-head{ margin-bottom: 10px; } .fp .receive h2{ margin: 8px 0 0; } /* Grid stays the same */ .fp .receive-cards{ display:grid; gap:20px; grid-template-columns:1fr; } @media (min-width:980px){ .fp .receive-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ---------- CARD (no inside tint) ---------- */ .fp .receive-card{ position: relative; background: #ffffff !important; /* force white interior */ border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; /* Base elevation + OUTER neon halo only (no pseudo-element) */ box-shadow: 0 6px 18px rgba(0,0,0,.06), /* soft elevation */ 0 0 25px 8px var(--halo, rgba(0,0,0,0));/* static halo OUTSIDE */ } /* Kill any older effects that added fills/bars/overlays */ .fp .receive-card::before, .fp .receive-card::after{ display:none !important; } /* Typography aligned with “Our Pillars” */ .fp .receive-card h3{ margin: 0 0 8px; font-size: clamp(18px, 2.1vw, 22px); line-height: 1.25; font-weight: 800; color: var(--rc, var(--brand-ink)); } .fp .receive-card p{ margin: 0; color: var(--ink-700); font-size: clamp(14px, 1.35vw, 18px); } /* ---------- Distinct pastel/neo halo palette (no reuse) ---------- */ /* 1) Periwinkle title + lilac halo */ .fp .receive-cards .receive-card:nth-child(1){ --rc: #5B6CFF; /* Periwinkle */ --halo: rgba(167,139,250,.36); /* Lilac halo */ } /* 2) Teal-green title + mint halo (greenish, not blue) */ .fp .receive-cards .receive-card:nth-child(2){ --rc: #0EA5A4; /* Teal-green */ --halo: rgba(45,212,191,.34); /* Mint/seafoam halo */ } /* 3) Orchid/Magenta title + rose halo */ .fp .receive-cards .receive-card:nth-child(3){ --rc: #A855F7; /* Orchid */ --halo: rgba(236,72,153,.34); /* Rose/Magenta halo */ } /* 4) Deep cyan title + sky/cornflower halo (clearly blue) */ .fp .receive-cards .receive-card:nth-child(4){ --rc: #0369A1; /* Deep cyan */ --halo: rgba(147,197,253,.36); /* Sky/Cornflower halo */ } /* ===================================== CTA — Ready block (Why page) ===================================== */ .fp .cta-ready{ padding: clamp(40px, 7vw, 72px) 0; background: radial-gradient(900px 300px at 75% 30%, rgba(173,58,113,.06), transparent 60%), radial-gradient(900px 320px at 20% 10%, rgba(12,141,143,.05), transparent 60%); } /* Layout */ .fp .cta-ready .container{ display:grid; grid-template-columns: 1.2fr auto; align-items:end; gap: clamp(18px, 5vw, 40px); } @media (max-width: 900px){ .fp .cta-ready .container{ grid-template-columns: 1fr; align-items:flex-start; } } /* Left block */ .fp .cta-ready .head .pill{ margin-bottom: 10px; /* uses global pill/why-pill style */ } .fp .cta-ready h2{ margin: 8px 0 10px; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.15; color: var(--brand-ink); } .fp .cta-ready .lede{ margin:0; color: var(--ink-700); font-size: clamp(16px, 1.5vw, 18px); } /* Buttons block (right) */ .fp .cta-ready .actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end; } @media (max-width: 900px){ .fp .cta-ready .actions{ justify-content:flex-start; } } /* Buttons */ .fp .cta-ready .btn{ display:inline-block; padding: 14px 20px; border-radius: 16px; font-weight: 800; text-decoration: none; line-height: 1; box-shadow: 0 10px 24px rgba(0,0,0,.10); transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; } .fp .cta-ready .btn:hover{ transform: translateY(-2px); filter: saturate(1.02); box-shadow: 0 14px 30px rgba(0,0,0,.14); } /* Primary = brand magenta */ .fp .cta-ready .btn-primary{ background: var(--brand, #AD3A71); color:#fff; } /* Outline = WhatsApp/teal family (filled, but lighter) */ .fp .cta-ready .btn-outline{ background: color-mix(in srgb, var(--teal, #0C8D8F) 85%, #ffffff 15%); color:#fff; } /* Small screens tighten spacing */ @media (max-width: 480px){ .fp .cta-ready .btn{ padding: 12px 16px; } } /* ===================================== Global Footer ===================================== */ .fp .site-footer{ border-top: 1px solid var(--line); background: var(--paper); padding: 18px 0; } .fp .site-footer .container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .fp .site-footer .copy{ margin: 0; color: var(--ink-700); font-size: 15px; } .fp .site-footer .footer-links{ display: flex; align-items: center; gap: 12px; font-weight: 600; } .fp .site-footer .footer-links a{ color: var(--teal); text-decoration: none; } .fp .site-footer .footer-links a:hover{ text-decoration: underline; } .fp .site-footer .footer-links .dot{ color: var(--ink-500); user-select: none; } /* Small screens: stack nicely */ @media (max-width: 560px){ .fp .site-footer .container{ flex-direction: column; align-items: flex-start; gap: 8px; } } /*====================================================services=======================================*/ /* SERVICES PAGE — small, page-scoped tweaks only */ .fp.services-page .hero{ /* same family as other pages */ background: linear-gradient(135deg, rgba(12,141,143,.08) 0%, rgba(173,58,113,.08) 100%); padding: clamp(48px, 6vw, 96px) 0; } /* slightly smaller hero image than Why */ .fp.services-page .hero .hero-img{ max-height: 420px; } /* keep the card grid breathing a bit more on services */ .fp.services-page #services{ padding: 10px 0 22px; } /* ============================= SERVICES — HERO (page-scoped) ============================= */ /* ================================ SERVICES — HERO (FULL REPLACEMENT) ================================ */ /* Hero wrapper: same soft gradient and spacing */ .fp.services-page .svc-hero{ background: linear-gradient(135deg, rgba(12,141,143,.08) 0%, rgba(173,58,113,.08) 100%); padding: clamp(48px, 6vw, 96px) 0; } /* 2-col layout (give image equal room) */ .fp.services-page .svc-hero .grid.grid-2{ grid-template-columns: 1fr 1fr; /* was 1.15fr .85fr */ align-items: center; gap: clamp(20px, 3.5vw, 48px); } /* Headline + lede */ .fp.services-page .svc-hero h1{ margin: 10px 0 12px; color: var(--brand, #AD3A71); font-size: var(--h1); line-height: 1.05; } .fp.services-page .svc-hero .lede{ color: var(--ink-700); max-width: 62ch; } /* Pill spacing under badge */ .fp.services-page .svc-hero .badge{ margin-bottom: 12px; } /* ----------------------------- Tick Pill (EXACT like Why page) ----------------------------- */ .fp .badge{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.08); color:var(--brand-ink); font-weight:700; position:relative; isolation:isolate; } .fp .badge::before{ content:"✔"; display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; font-weight:800; font-size:13px; color: var(--tick, #7C6CF5); /* same purple tick as Why page */ background:#fff; border:1px solid #E5E7EB; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.10); } .fp .badge::after{ content:""; position:absolute; inset:-10px; border-radius:999px; background: radial-gradient(30% 50% at 14% 50%, rgba(124,108,245,.20), transparent 60%); z-index:-1; pointer-events:none; } /* Right-side image card */ .fp.services-page .svc-media{ background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.25), 0 10px 22px -10px rgba(0,0,0,.18); overflow:hidden; } /* Make the image a little bigger (inside the card) */ .fp.services-page .svc-img{ display:block; width:100%; height:auto; aspect-ratio: 16/10; object-fit: cover; max-height: 520px; /* larger cap for big screens */ transform: scale(1.06); /* subtle up-scale */ transform-origin: center center; } .fp.services-page .svc-fallback{ min-height:260px; display:flex; align-items:center; justify-content:center; color:var(--ink-500); } /* Responsive adjustments */ @media (max-width: 1100px){ .fp.services-page .svc-img{ max-height: 440px; transform: scale(1.03); } } @media (max-width: 820px){ .fp.services-page .svc-hero .grid.grid-2{ grid-template-columns:1fr; } .fp.services-page .svc-media{ order:-1; } /* image first on mobile */ .fp.services-page .svc-img{ max-height: 300px; transform: scale(1.0); } } /* ================================ SERVICES — CATALOG (MATCHES YOUR HTML) Targets: #svc-catalog .cards .card Pastel/neo accents + lift hover, no inner fill ================================ */ .fp.services-page #svc-catalog{ padding:18px 0; } .fp.services-page #svc-catalog .section-head{ margin:0 0 12px; } .fp.services-page #svc-catalog h2{ margin:6px 0 2px; } .fp.services-page #svc-catalog .lede{ color:var(--ink-700); margin:0 0 6px; } /* Grid */ .fp.services-page #svc-catalog .cards{ display:grid; gap:18px; grid-template-columns:1fr; } @media (min-width:980px){ .fp.services-page #svc-catalog .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Card base */ .fp.services-page #svc-catalog .card{ /* accent and title fallbacks; each card overrides via nth-child below */ --accent:#7c3aed; --title:#0e1b2a; position:relative; background:#fff; border:2px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius:16px; padding:14px 16px; box-shadow:0 6px 18px rgba(0,0,0,.06); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease; overflow:hidden; isolation:isolate; /* for the fog halo */ } .fp.services-page #svc-catalog .card h3{ margin:0 0 10px; font-weight:800; font-size:16px; color:var(--title); } .fp.services-page #svc-catalog .card ul{ margin:0 12px 12px 0; padding-left:16px; color:var(--ink-700); font-size:13px; } .fp.services-page #svc-catalog .card .btn-quote{ display:inline-block; font-weight:800; font-size:12px; padding:8px 10px; border-radius:10px; text-decoration:none; color:#fff; background:var(--accent); box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); } /* Subtle neo fog on hover; no interior fill */ .fp.services-page #svc-catalog .card::after{ content:""; position:absolute; inset:-12px; border-radius:18px; pointer-events:none; z-index:-1; background: radial-gradient(600px 260px at 80% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); opacity:0; transition:opacity .18s ease; } /* Lift hover */ .fp.services-page #svc-catalog .card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 18px 40px rgba(2,6,23,.12), 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); filter:saturate(1.02); } .fp.services-page #svc-catalog .card:hover::after{ opacity:.9; } /* Keyboard focus */ .fp.services-page #svc-catalog .card:focus-within{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 16px 36px rgba(2,6,23,.12), 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); } .fp.services-page #svc-catalog .card:focus-within::after{ opacity:.85; } /* Pastel/neo accents per card (1–8) — readable, not dark */ .fp.services-page #svc-catalog .cards .card:nth-child(1){ --accent:#60A5FA; --title:#1E40AF; } /* soft blue */ .fp.services-page #svc-catalog .cards .card:nth-child(2){ --accent:#34D399; --title:#065F46; } /* mint green */ .fp.services-page #svc-catalog .cards .card:nth-child(3){ --accent:#A78BFA; --title:#4C1D95; } /* orchid */ .fp.services-page #svc-catalog .cards .card:nth-child(4){ --accent:#F472B6; --title:#9D174D; } /* rose pink */ .fp.services-page #svc-catalog .cards .card:nth-child(5){ --accent:#22D3EE; --title:#0C4A6E; } /* aqua cyan */ .fp.services-page #svc-catalog .cards .card:nth-child(6){ --accent:#FB923C; --title:#7C2D12; } /* tangerine */ .fp.services-page #svc-catalog .cards .card:nth-child(7){ --accent:#4ADE80; --title:#166534; } /* fresh green */ .fp.services-page #svc-catalog .cards .card:nth-child(8){ --accent:#38BDF8; --title:#0B3C69; } /* sky cyan */ /* Unify "Get a Quote" buttons across all service cards */ .fp.services-page #svc-catalog .card .btn-quote{ --quote: #AD3A71; /* FazilatPro brand magenta */ background: var(--quote) !important; color: #fff !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--quote) 28%, transparent); border: 0; } .fp.services-page #svc-catalog .card .btn-quote:hover{ filter: saturate(1.05); transform: translateY(-1px); box-shadow: 0 12px 24px color-mix(in srgb, var(--quote) 34%, transparent); } .fp.services-page #svc-catalog .card .btn-quote:focus-visible{ outline: 2px solid color-mix(in srgb, var(--quote) 60%, white); outline-offset: 2px; } /*====================================================contact page==========================================*/ /* ========================================================== CONTACT — page-scoped stylesheet (FULL REPLACEMENT) Uses global tokens from style.final.css (Inter/Montserrat, --brand, --teal, --ink-*, --line, --maxw, --pad, etc.) ========================================================== */ /* -------------------- Hero -------------------- */ .fp.contact-page .contact-hero{ background: linear-gradient(135deg, rgba(12,141,143,.08) 0%, rgba(173,58,113,.08) 100%); padding: clamp(48px, 6vw, 96px) 0; } .fp.contact-page .contact-hero .grid.grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(20px, 3.5vw, 48px); } .fp.contact-page .contact-hero h1{ margin: 10px 0 12px; color: var(--brand); font-size: var(--h1); line-height: 1.05; } .fp.contact-page .contact-hero .lede{ color: var(--ink-700); max-width: 62ch; } .fp.contact-page .contact-hero .hero-card{ background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.25), 0 10px 22px -10px rgba(0,0,0,.18); overflow:hidden; } .fp.contact-page .contact-hero .hero-img{ display:block; width:100%; aspect-ratio: 16/10; object-fit: cover; max-height: 500px; } .fp.contact-page .contact-hero .hero-figure{ min-height: 260px; display:flex; align-items:center; justify-content:center; color: var(--ink-500); } /* -------------------- Form + Right panel -------------------- */ .fp.contact-page .contact-wrap{ padding: clamp(36px, 6vw, 72px) 0; } .fp.contact-page .contact-wrap .grid.grid-2{ display:grid; grid-template-columns: 1.05fr .95fr; align-items: start; gap: clamp(18px, 4vw, 36px); } /* Card shell */ .fp.contact-page .card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding: clamp(16px, 2vw, 22px); box-shadow: 0 10px 24px rgba(0,0,0,.08); } /* Form */ .fp.contact-page form.form h2{ margin: 0 0 10px; font-size: clamp(22px, 2.8vw, 28px); color: var(--brand-ink); } .fp.contact-page form.form .row{ margin-bottom: 12px; } .fp.contact-page form.form .row.two{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fp.contact-page label{ display:block; font-weight:600; margin-bottom:6px; color: var(--ink-900); } .fp.contact-page input[type="text"], .fp.contact-page input[type="email"], .fp.contact-page input[type="tel"], .fp.contact-page select, .fp.contact-page textarea{ width:100%; border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit; color:var(--ink-900); background:#fff; } .fp.contact-page textarea{ resize: vertical; min-height: 140px; } .fp.contact-page .actions{ display:flex; gap:12px; margin-top: 6px; flex-wrap:wrap; } .fp.contact-page .btn{ display:inline-block; padding: 12px 18px; border-radius: 14px; font-weight:800; text-decoration:none; line-height:1; box-shadow:0 10px 24px rgba(0,0,0,.10); transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; } .fp.contact-page .btn:hover{ transform: translateY(-2px); filter:saturate(1.02); box-shadow:0 14px 30px rgba(0,0,0,.14); } .fp.contact-page .btn-primary{ background: var(--brand); color:#fff; border:0; } .fp.contact-page .btn-outline{ background: color-mix(in srgb, var(--teal) 85%, #fff 15%); color:#fff; border:0; } .fp.contact-page .tiny{ margin-top:8px; color:var(--ink-500); font-size: 12.5px; } /* ============================================ TALK CARD (replaces old .info/map panel) ============================================ */ .fp.contact-page .talk-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding: clamp(16px, 2vw, 22px); box-shadow: 0 10px 24px rgba(0,0,0,.08); } .fp.contact-page .talk-card h3{ margin: 0 0 12px; font-size: clamp(22px, 2.8vw, 28px); color: var(--brand-ink); } .fp.contact-page .talk-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; text-decoration:none; color:var(--ink-900); box-shadow: 0 4px 10px rgba(0,0,0,.04); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; margin-bottom:10px; } .fp.contact-page .talk-item:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); box-shadow: 0 10px 22px rgba(0,0,0,.10); } .fp.contact-page .talk-item .txt strong{ font-weight:800; } /* --- ICONS: text-only (no circular background) --- */ .fp.contact-page .talk-item .ico{ display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; margin-right:2px; background:none; border-radius:0; box-shadow:none; font-size:18px; font-weight:900; line-height:1; color:inherit; /* specific colors set below */ } /* Color hints per channel */ .fp.contact-page .talk-item .ico.call{ color:#0EA5A4; } /* teal */ .fp.contact-page .talk-item .ico.wa { color:#25D366; } /* WhatsApp green */ .fp.contact-page .talk-item .ico.mail{ color:#7C6CF5; } /* violet */ /* Symbols (can be replaced with SVG later) */ .fp.contact-page .talk-item .ico.call::before{ content:"📞"; } .fp.contact-page .talk-item .ico.wa::before { content:"💬"; } .fp.contact-page .talk-item .ico.mail::before{ content:"✉"; } .fp.contact-page .tip{ margin-top:12px; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; background: #fafcff; color: var(--ink-700); font-size: 14px; } /* -------------------- Responsive -------------------- */ @media (max-width: 900px){ .fp.contact-page .contact-hero .grid.grid-2, .fp.contact-page .contact-wrap .grid.grid-2{ grid-template-columns:1fr; } .fp.contact-page .contact-hero .hero-card{ order:-1; } .fp.contact-page form.form .row.two{ grid-template-columns: 1fr; } } /*============================================================Overriding=====================================*/ /* HOME — hero title uses brand magenta */ .fp.home-page .hero h1{ color: var(--brand); } .fp.about-page .hero h1 { color: var(--brand); } .fp.about-page .hero h1 { color: var(--brand) !important; } /* ABOUT — make WhatsApp CTAs teal (match Why page) */ .fp.about-page a.btn[href*="wa.me"]{ background: color-mix(in srgb, var(--teal) 85%, #fff 15%) !important; color:#fff !important; border:0; box-shadow: 0 10px 24px rgba(0,0,0,.10); } .fp.about-page a.btn[href*="wa.me"]:hover{ filter:saturate(1.02); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.14); } /* ========================================================= HERO BACKGROUND — bg-yellow-1 (softened version) ========================================================= */ .fp section.hero, .fp.why-page .hero, .fp.services-page .svc-hero, .fp.contact-page .contact-hero{ background: radial-gradient(1100px 480px at 72% -12%, rgba(250,204,21,.22), transparent 70%), radial-gradient(800px 320px at 10% 100%, rgba(245,158,11,.12), transparent 66%), #fff !important; } /* ========================= CTAs — unified pink background Targets: #contact-cta (Home/About/Services/Contact) and .cta-ready (Why) ========================= */ .fp #contact-cta, .fp .cta-ready{ /* soft brand-pink wash */ --cta-p1: rgba(173,58,113,0.12); /* brand */ --cta-p2: rgba(173,58,113,0.06); --cta-p3: rgba(255,255,255,0.90); background: radial-gradient(60% 120% at 15% 10%, var(--cta-p1), transparent 60%), radial-gradient(70% 120% at 85% 0%, var(--cta-p2), transparent 60%), linear-gradient(180deg, var(--cta-p3), #fff); padding: clamp(28px, 5vw, 56px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Keep typography readable on the pink wash */ .fp #contact-cta h2, .fp .cta-ready h2{ color: var(--brand-ink); } .fp #contact-cta p, .fp .cta-ready p{ color: var(--ink-700); } /* Layout harmony inside CTA heads */ .fp #contact-cta .section-head, .fp .cta-ready .head{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap: wrap; } /* Ensure action buttons sit nicely */ .fp #contact-cta .section-head > div:last-child, .fp .cta-ready .actions{ display:flex; gap:12px; flex-wrap:wrap; } /* Optional: give WhatsApp alt button a teal treatment if present */ .fp .btn.btn-alt{ background: var(--teal); color:#fff; } /* ===== Normalize spacing before footer (CTA as last section) ===== */ .fp main { padding-bottom: 0; } /* no extra padding from the page shell */ .fp main > section:last-of-type { margin-bottom: 0; /* kill stray section gap */ padding-bottom: clamp(16px, 2.5vw, 28px); /* modest breathing room only */ border-bottom: 0; } /* CTA blocks: ensure they don't push a gap */ .fp #contact-cta, .fp .cta-ready { margin-bottom: 0 !important; padding-bottom: clamp(16px, 2.5vw, 28px); box-shadow: none; /* in case a soft shadow was adding depth */ } /* Footer should sit flush with previous section */ .fp footer { margin-top: 0; } /* ========================================= FazilatPro — Contact Form (scoped) ========================================= */ .fp .contact-form-block .wrap { max-width: var(--maxw, 1100px); margin: 0 auto; } .fp .contact-form-block .h2 { color: var(--brand-ink, #0E1B2A); margin-bottom: clamp(8px, 1.5vw, 12px); } .fp .contact-form-block .lede { color: var(--ink-700, #415066); margin-bottom: clamp(16px, 2vw, 20px); } .fp .fp-form .grid { display:grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: repeat(2,minmax(0,1fr)); } @media (max-width:800px){ .fp .fp-form .grid{ grid-template-columns:1fr; } } .fp .fp-form .field { display:flex; flex-direction:column; gap:6px; } .fp .fp-form label { font-weight:600; color:var(--brand-ink, #0E1B2A); } .fp .fp-form input, .fp .fp-form select, .fp .fp-form textarea { width:100%; padding:12px 14px; border:1px solid var(--line, #E5E7EB); border-radius:8px; background:var(--paper, #fff); color:var(--ink-900, #0E1B2A); line-height:1.5; outline:none; } .fp .fp-form input:focus, .fp .fp-form select:focus, .fp .fp-form textarea:focus { border-color:var(--teal, #0C8D8F); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal, #0C8D8F) 25%, transparent); } .fp .fp-form .microcopy { color:var(--ink-500,#6B7280); font-size:.9rem; margin-top:8px; } .fp .fp-form .actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:clamp(12px,2vw,16px); } .fp .fp-form .btn { padding:12px 18px; border-radius:999px; border:1px solid transparent; background:var(--brand,#AD3A71); color:#fff; cursor:pointer; text-decoration:none; } .fp .fp-form .btn:hover { filter:brightness(1.05); } .fp .fp-form .btn:disabled { opacity:.6; cursor:not-allowed; } .fp .fp-form .btn-quiet { background:transparent; border-color:var(--ink-500,#6B7280); color:var(--brand-ink,#0E1B2A); } .fp .contact-form-block .status { margin-bottom:clamp(12px,2vw,16px); padding:10px 12px; border-radius:10px; background:var(--paper-2,#F7FAFC); border:1px solid var(--line,#E5E7EB);} .fp .contact-form-block .status.ok { border-color:#16a34a; } .fp .contact-form-block .status.bad { border-color:#b00020; } .fp .fp-form .hp { position:absolute !important; left:-9999px !important; opacity:0 !important; width:1px; height:1px; } .fp.contact-page .form-status{ margin-top: 10px; font-size: 0.9rem; } .fp.contact-page .form-status.success{ color: var(--teal); } .fp.contact-page .form-status.error{ color: #B91C1C; /* soft red error */ } .fp.contact-page .form-status.pending{ color: var(--ink-700); } /* ============================ Center popup status overlay ============================ */ .fp.contact-page #form-status{ position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.25); /* light dim */ opacity: 0; visibility: hidden; transition: opacity 0.25s ease-out, visibility 0s linear 0.25s; } .fp.contact-page #form-status.is-visible{ opacity: 1; visibility: visible; transition: opacity 0.25s ease-out, visibility 0s linear 0s; } /* Base popup pill (neutral / "Sending your request…") */ .fp.contact-page .form-status__box{ background: #ffffff; color: var(--ink-900, #0E1B2A); padding: 16px 32px; border-radius: 999px; /* pill */ max-width: 420px; width: min(92vw, 420px); text-align: center; font-family: var(--body, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 1rem; font-weight: 600; line-height: 1.5; border: 1px solid rgba(148,163,184,0.4); box-shadow: 0 18px 55px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255,255,255,0.7); transform: translateY(14px); transition: transform 0.25s ease-out, background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out; } /* slide-up when visible */ .fp.contact-page #form-status.is-visible .form-status__box{ transform: translateY(0); } /* SUCCESS: soft green pill */ .fp.contact-page .form-status__box[data-state="success"]{ background: #ecfdf5; /* very light green */ color: #166534; /* deep green text */ border-color: #bbf7d0; /* soft green border */ } /* ERROR: soft red pill */ .fp.contact-page .form-status__box[data-state="error"]{ background: #fef2f2; /* very light red */ color: #b91c1c; /* deep red text */ border-color: #fecaca; /* soft red border */ } /* Small screens tweak */ @media (max-width: 480px){ .fp.contact-page .form-status__box{ font-size: 0.95rem; padding: 14px 20px; } }