/** * Customer Requests landing page. * * Palette (per-type accent): * QUOTE → green #16a34a * CONSULTATION → violet #8b5cf6 * MEETING → sky #0ea5e9 * COMPLAINT → rose #f43f5e */ /* English (LTR) variant — inherits everything, only flips a few pieces */ .creq-page.creq-page--en { direction: ltr; text-align: left; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; } .creq-page--en .creq-hero__motto { text-align: left; } /* Section heads stay center-aligned regardless of direction */ .creq-page--en .creq-section__head { text-align: center; } /* Card content flows LTR */ .creq-page--en .creq-card { text-align: left; align-items: flex-start; } /* Perception → reality arrow already points right via fa-arrow-right in EN template */ /* ═══════════════════════════════════════════════════════════ LANGUAGE SWITCH — pill toggle inside the hero (both pages) ═══════════════════════════════════════════════════════════ */ .creq-lang-switch { position: absolute; top: 110px; /* sit below the fixed site header (85px + breathing room) */ inset-inline-end: 22px; /* respects direction: right in LTR, left in RTL */ z-index: 20; display: inline-flex; align-items: center; gap: 2px; padding: 5px 6px; background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); border: 1px solid rgba(255,255,255,0.65); border-radius: 99px; box-shadow: 0 12px 28px -6px rgba(15,23,42,0.20), 0 0 0 1px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.80); /* Force consistent visual order regardless of page direction */ direction: ltr; font-family: 'Inter', 'Tajawal', 'Cairo', sans-serif; animation: creqLangIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; } @keyframes creqLangIn { from { opacity: 0; transform: translateY(-12px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } .creq-lang-switch__opt { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 99px; font-size: 13px; font-weight: 800; color: #64748b; text-decoration: none; letter-spacing: 0.2px; transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease; white-space: nowrap; } .creq-lang-switch__opt:hover { color: #0f172a; background: rgba(15,23,42,0.05); transform: translateY(-1px); } .creq-lang-switch__opt.is-active { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; box-shadow: 0 8px 20px -6px rgba(245,158,11,0.60), inset 0 1px 0 rgba(255,255,255,0.35); pointer-events: none; cursor: default; text-shadow: 0 1px 1px rgba(0,0,0,0.15); } .creq-lang-switch__divider { display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 11px; padding: 0 4px; opacity: 0.60; } /* On the EN page the site header is hidden, so the switch can sit near the top */ .creq-page.creq-page--en .creq-lang-switch { top: 22px; } @media (max-width: 640px) { .creq-lang-switch { top: 90px; inset-inline-end: 12px; padding: 4px 5px; } .creq-page.creq-page--en .creq-lang-switch { top: 12px; } .creq-lang-switch__opt { padding: 6px 14px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .creq-lang-switch { animation: none; } } /* Hide site chrome on the EN customer-requests page (form-focused experience). WordPress auto-adds `.page-template-template-customer-requests-en` to . */ body.page-template-template-customer-requests-en .main-header, body.page-template-template-customer-requests-en header.main-header, body.page-template-template-customer-requests-en .global-header, body.page-template-template-customer-requests-en .global-footer, body.page-template-template-customer-requests-en > footer, body.page-template-template-customer-requests-en footer:not(.creq-form-panel):not([class*="creq-"]), body.page-template-template-customer-requests-en .ap-side-nav, body.page-template-template-customer-requests-en .floating-whatsapp, body.page-template-template-customer-requests-en .floating-buttons, body.page-template-template-customer-requests-en .bassmah-floating, body.page-template-template-customer-requests-en .whatsapp-float { display: none !important; } /* Also compact any body top padding the theme reserves for the fixed header */ body.page-template-template-customer-requests-en { padding-top: 0 !important; margin-top: 0 !important; } body.page-template-template-customer-requests-en .site-content, body.page-template-template-customer-requests-en main.creq-page { margin-top: 0 !important; padding-top: 0 !important; } .creq-page { --creq-navy: #0f172a; --creq-ink: #1e293b; --creq-mut: #64748b; --creq-line: #e2e8f0; --creq-bg: #f7f9fc; --creq-shadow-sm: 0 4px 12px rgba(15,23,42,0.06); --creq-shadow: 0 12px 28px rgba(15,23,42,0.10); --creq-shadow-lg: 0 28px 60px rgba(15,23,42,0.16); /* Per-type primary/dark pairs */ --creq-c-green: #16a34a; --creq-c-green-d: #15803d; --creq-c-violet: #8b5cf6; --creq-c-violet-d: #6d28d9; --creq-c-sky: #0ea5e9; --creq-c-sky-d: #0369a1; --creq-c-rose: #f43f5e; --creq-c-rose-d: #be123c; /* Google Maps brand palette — matches the map pin (red) + product accents. * Kept under the historical `--creq-c-amber` names since only the GMAPS * request type wires into them; renaming would ripple through card/tab/ * form-panel utilities without visual benefit. */ --creq-c-amber: #ea4335; --creq-c-amber-d: #c5221f; /* Google Red (map pin) */ --creq-c-gm-blue: #1a73e8; /* Google Blue accent */ --creq-c-gm-green: #34a853; /* Google Green accent */ --creq-c-gm-yellow:#fbbc04; /* Google Yellow accent */ /* Rainbow palette — for playful multi-color backgrounds */ --creq-r1: #ff6b6b; /* coral */ --creq-r2: #ff9f43; /* orange */ --creq-r3: #feca57; /* yellow */ --creq-r4: #48dbfb; /* sky-blue*/ --creq-r5: #5f27cd; /* purple */ --creq-r6: #1dd1a1; /* mint */ --creq-r7: #ee5a6f; /* pink */ --creq-r8: #a29bfe; /* lavender*/ background: #fff; color: var(--creq-ink); direction: rtl; font-family: 'Tajawal', 'Cairo', system-ui, sans-serif; overflow-x: clip; } /* ═══════════════════════════════════════════════════════════ GLOBAL RAINBOW BACKGROUNDS + ANIMATED DECORATIONS ═══════════════════════════════════════════════════════════ */ /* Reusable pastel rainbow mesh — shifts slowly */ .creq-rainbow-bg { background: radial-gradient(ellipse 60% 60% at 10% 20%, rgba(255,107,107,0.35), transparent 55%), radial-gradient(ellipse 60% 60% at 90% 15%, rgba(254,202,87,0.35), transparent 55%), radial-gradient(ellipse 60% 60% at 15% 90%, rgba(72,219,251,0.32), transparent 55%), radial-gradient(ellipse 60% 60% at 90% 85%, rgba(162,155,254,0.38), transparent 55%), radial-gradient(ellipse 50% 50% at 50% 50%, rgba(29,209,161,0.20), transparent 60%), linear-gradient(135deg, #fff8f0 0%, #f0f9ff 50%, #fdf4ff 100%); background-size: 300% 300%; animation: creqMeshShift 22s ease-in-out infinite; } @keyframes creqMeshShift { 0%, 100% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } } /* Floating blobs — drop into a section, they'll drift on their own */ .creq-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .creq-blob { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(80px); opacity: 0.55; animation: creqBlobFloat 14s ease-in-out infinite alternate; } .creq-blob--1 { top: -80px; inset-inline-start: -100px; background: var(--creq-r1); animation-duration: 16s; } .creq-blob--2 { top: 20%; inset-inline-end: -140px; background: var(--creq-r4); animation-duration: 19s; animation-delay: -3s; } .creq-blob--3 { bottom: -100px; inset-inline-start: 30%; background: var(--creq-r5); animation-duration: 22s; animation-delay: -6s; opacity: 0.35; } .creq-blob--4 { bottom: 10%; inset-inline-start: 15%; background: var(--creq-r3); width: 220px; height: 220px; animation-duration: 17s; animation-delay: -9s; } .creq-blob--5 { top: 40%; inset-inline-start: 55%; background: var(--creq-r6); width: 260px; height: 260px; animation-duration: 20s; animation-delay: -12s; opacity: 0.40; } @keyframes creqBlobFloat { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.08); } 66% { transform: translate(-25px, 30px) scale(0.95); } 100% { transform: translate(15px, -20px) scale(1.03); } } /* Floating icon particles — decorative FA icons drifting slowly */ .creq-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .creq-particle { position: absolute; color: var(--_c, var(--creq-c-green)); opacity: 0.55; font-size: 26px; animation: creqParticleFloat 12s ease-in-out infinite; filter: drop-shadow(0 4px 12px rgba(15,23,42,0.15)); } @keyframes creqParticleFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(20px, -20px) rotate(8deg); } 50% { transform: translate(-15px, 25px) rotate(-6deg); } 75% { transform: translate(25px, 15px) rotate(4deg); } } /* Pulse animation for interactive elements */ @keyframes creqPulseRing { 0% { box-shadow: 0 0 0 0 var(--_pulse, rgba(255,107,107,0.5)); } 70% { box-shadow: 0 0 0 20px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* Confetti dots — decorative sparkle animation */ @keyframes creqSparkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; } 50% { transform: scale(1.4) rotate(180deg); opacity: 1; } } /* Bounce entrance */ @keyframes creqBounceIn { 0% { opacity: 0; transform: scale(0.6) translateY(20px); } 60% { opacity: 1; transform: scale(1.08) translateY(-4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Wiggle on hover */ @keyframes creqWiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } } /* Honor reduced motion */ @media (prefers-reduced-motion: reduce) { .creq-blob, .creq-particle, .creq-rainbow-bg, .creq-hero__mesh { animation: none !important; } } /* ─── Reading progress bar ─── */ .creq-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 9999; background: rgba(15,23,42,0.06); pointer-events: none; } .creq-progress > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--creq-c-green), var(--creq-c-violet), var(--creq-c-sky), var(--creq-c-rose)); box-shadow: 0 0 12px rgba(15,23,42,0.15); transition: width 0.08s linear; } /* ═══════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════ */ .creq-hero { position: relative; padding: clamp(110px, 12vw, 170px) 0 clamp(80px, 9vw, 130px); color: var(--creq-navy); overflow: hidden; isolation: isolate; text-align: center; min-height: 640px; display: flex; align-items: center; background: radial-gradient(ellipse 60% 50% at 5% 10%, rgba(255,159,67,0.45), transparent 55%), radial-gradient(ellipse 55% 55% at 95% 15%, rgba(72,219,251,0.45), transparent 55%), radial-gradient(ellipse 55% 55% at 10% 90%, rgba(29,209,161,0.40), transparent 55%), radial-gradient(ellipse 55% 55% at 95% 85%, rgba(162,155,254,0.55), transparent 55%), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(254,202,87,0.30), transparent 60%), linear-gradient(135deg, #fff8f0 0%, #f0f9ff 50%, #fdf4ff 100%); background-size: 300% 300%; animation: creqMeshShift 22s ease-in-out infinite; } /* Hidden legacy layers — no longer part of the light rainbow design */ .creq-hero__photo, .creq-hero__bg, .creq-hero__grid { display: none; } .creq-hero__inner { max-width: 960px; margin: 0 auto; position: relative; animation: creqHeroIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes creqHeroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .creq-hero__inner::before { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 500px; height: 400px; background: radial-gradient(circle, rgba(245,158,11,0.18) 0%, transparent 60%); border-radius: 50%; z-index: -1; filter: blur(40px); pointer-events: none; } .creq-hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 24px; background: linear-gradient(135deg, #ff9f43, #ee5a6f); border: 2px solid rgba(255,255,255,0.60); border-radius: 99px; font-size: 13.5px; font-weight: 900; margin-bottom: 26px; color: #fff; box-shadow: 0 16px 34px -8px rgba(238,90,111,0.55), inset 0 1px 0 rgba(255,255,255,0.40); animation: creqBounceIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; text-shadow: 0 1px 2px rgba(0,0,0,0.20); } .creq-hero__badge i { color: #fef3c7; font-size: 15px; } .creq-hero__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: clamp(32px, 5vw, 56px); font-weight: 900; line-height: 1.25; margin: 0 0 24px; color: var(--creq-navy); letter-spacing: -0.6px; background: linear-gradient(135deg, #5f27cd 0%, #ee5a6f 50%, #ff9f43 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: creqBounceIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both; } .creq-hero__intro { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.95; color: var(--creq-ink); margin: 0 auto 30px; max-width: 820px; font-weight: 600; animation: creqBounceIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both; } .creq-hero__motto { display: inline-flex; align-items: center; gap: 14px; padding: 18px 28px; background: linear-gradient(135deg, #feca57, #ff9f43); border: 2px solid #fff; border-radius: 22px; color: #7c3200; font-size: 15px; font-weight: 800; line-height: 1.6; max-width: 780px; text-align: start; box-shadow: 0 20px 44px -12px rgba(255,159,67,0.55); animation: creqBounceIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.60s both; } .creq-hero__motto i { color: #fff; font-size: 22px; flex-shrink: 0; padding: 10px; background: linear-gradient(135deg, #ee5a6f, #a29bfe); border-radius: 14px; box-shadow: 0 8px 18px -4px rgba(238,90,111,0.55); animation: creqSparkle 2.4s ease-in-out infinite; } /* Scroll cue */ .creq-hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--creq-c-violet); font-size: 22px; animation: creqBounce 2s ease-in-out infinite; pointer-events: none; } @keyframes creqBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ═══════════════════════════════════════════════════════════ SECTION HEAD (shared) ═══════════════════════════════════════════════════════════ */ .creq-section__head { text-align: center; max-width: 760px; margin: 0 auto 40px; } .creq-section__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; background: rgba(15,23,42,0.05); color: var(--creq-navy); border-radius: 99px; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .creq-section__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.3; color: var(--creq-navy); margin: 0 0 12px; letter-spacing: -0.3px; } .creq-section__title--light { color: #fff; } .creq-section__sub { font-size: 15.5px; line-height: 1.75; color: var(--creq-mut); margin: 0; font-weight: 500; } /* ═══════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════ */ .creq-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 99px; font-size: 15px; font-weight: 800; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .creq-btn--primary { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 12px 28px rgba(245,158,11,0.35); } .creq-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(245,158,11,0.50); color: #fff; } .creq-btn--lg { padding: 16px 34px; font-size: 16.5px; } /* ═══════════════════════════════════════════════════════════ CARDS SECTION ═══════════════════════════════════════════════════════════ */ .creq-cards { padding: clamp(60px, 7vw, 90px) 0 clamp(50px, 5vw, 70px); position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 55% 55% at 5% 10%, rgba(72,219,251,0.28), transparent 55%), radial-gradient(ellipse 55% 55% at 95% 10%, rgba(255,107,107,0.28), transparent 55%), radial-gradient(ellipse 60% 40% at 50% 100%,rgba(254,202,87,0.30), transparent 60%), linear-gradient(180deg, #fff 0%, #f7f9fc 100%); } .creq-cards .creq-section__title { background: linear-gradient(135deg, #5f27cd, #ee5a6f, #ff9f43); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .creq-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; } [data-creq-reveal].is-visible .creq-card { animation: creqBounceIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; } [data-creq-reveal].is-visible .creq-card:nth-child(1) { animation-delay: 0s; } [data-creq-reveal].is-visible .creq-card:nth-child(2) { animation-delay: 0.1s; } [data-creq-reveal].is-visible .creq-card:nth-child(3) { animation-delay: 0.2s; } [data-creq-reveal].is-visible .creq-card:nth-child(4) { animation-delay: 0.3s; } .creq-card { --_c: var(--creq-c-green); --_cd: var(--creq-c-green-d); --creq-card-bg: none; display: flex; flex-direction: column; align-items: flex-start; text-align: start; gap: 12px; padding: 34px 32px 28px; background: /* Colored gradient overlay (dominates) */ linear-gradient(135deg, color-mix(in oklab, var(--_c) 90%, transparent) 0%, color-mix(in oklab, var(--_cd) 94%, transparent) 100%), /* Background image behind */ var(--creq-card-bg) center/cover no-repeat, var(--_c); border: 2px solid rgba(255,255,255,0.20); border-radius: 22px; box-shadow: 0 16px 34px -10px var(--_c); cursor: pointer; font-family: inherit; color: #fff; position: relative; overflow: hidden; isolation: isolate; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .creq-card--green { --_c: var(--creq-c-green); --_cd: var(--creq-c-green-d); } .creq-card--violet { --_c: var(--creq-c-violet); --_cd: var(--creq-c-violet-d); } .creq-card--sky { --_c: var(--creq-c-sky); --_cd: var(--creq-c-sky-d); } .creq-card--rose { --_c: var(--creq-c-rose); --_cd: var(--creq-c-rose-d); } .creq-card--amber { --_c: var(--creq-c-amber); --_cd: var(--creq-c-amber-d); } /* GMAPS card — stylized Google Maps view (roads + green park + pin) with a * 3-color triangular overlay in Google's palette (Blue / Green / Red). * The whole scene is inlined as a single data-URI SVG so no extra HTTP hop. * Card text stays white with a soft shadow so it reads over any zone. */ .creq-card--amber { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 340' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='400' height='340' fill='%23e8ecef'/%3E%3Cpath d='M0 210 Q120 190 180 220 T400 240 L400 340 L0 340 Z' fill='%23c8e6c9'/%3E%3Cpath d='M0 60 Q200 40 400 90' stroke='%23fff' stroke-width='7' fill='none'/%3E%3Cline x1='0' y1='130' x2='400' y2='145' stroke='%23fff' stroke-width='14'/%3E%3Cline x1='190' y1='0' x2='230' y2='340' stroke='%23fff' stroke-width='11'/%3E%3Cline x1='0' y1='260' x2='400' y2='270' stroke='%23fff' stroke-width='7'/%3E%3Cline x1='80' y1='0' x2='100' y2='340' stroke='%23fff' stroke-width='5'/%3E%3Cline x1='320' y1='0' x2='340' y2='340' stroke='%23fff' stroke-width='5'/%3E%3Cpath d='M0 110 Q200 140 400 108' stroke='%23fdd835' stroke-width='9' fill='none'/%3E%3Cg transform='translate(200,150)'%3E%3Cpath d='M0 0 C-14 -18 -14 -40 0 -50 C14 -40 14 -18 0 0 Z' fill='%23ea4335' stroke='%23fff' stroke-width='2.5'/%3E%3Ccircle cx='0' cy='-32' r='6' fill='%23fff'/%3E%3C/g%3E%3Cpolygon points='0,0 400,0 200,340' fill='%231a73e8' fill-opacity='0.72'/%3E%3Cpolygon points='0,0 200,340 0,340' fill='%2334a853' fill-opacity='0.72'/%3E%3Cpolygon points='400,0 400,340 200,340' fill='%23ea4335' fill-opacity='0.72'/%3E%3C/svg%3E") center/cover no-repeat, var(--_c); border-color: rgba(255,255,255,0.32); } /* Make card text pop against the tricolor + map layers */ .creq-card--amber .creq-card__title, .creq-card--amber .creq-card__sub, .creq-card--amber .creq-card__desc { text-shadow: 0 2px 10px rgba(0,0,0,0.35); } .creq-card::before { content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--_c), var(--_cd)); transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; } .creq-card:hover, .creq-card.is-selected { transform: translateY(-8px); box-shadow: 0 28px 56px -14px var(--_c); border-color: rgba(255,255,255,0.60); } .creq-card:hover::before, .creq-card.is-selected::before { transform: scaleX(1); } .creq-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 22px; background: rgba(255,255,255,0.22); color: #fff; font-size: 32px; line-height: 1; margin-bottom: 4px; border: 2px solid rgba(255,255,255,0.42); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.30); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.35s ease, background 0.35s ease; } .creq-card__icon i { line-height: 1; } .creq-card:hover .creq-card__icon { background: rgba(255,255,255,0.34); transform: scale(1.10) rotate(-6deg); } .creq-card__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: 22px; font-weight: 900; color: #fff; margin: 0; line-height: 1.3; text-shadow: 0 4px 16px rgba(0,0,0,0.30); } .creq-card__sub { font-size: 14px; font-weight: 800; color: #fef3c7; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.25); } .creq-card__desc { font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,0.90); margin: 0; font-weight: 500; flex: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.20); } .creq-card__btn { display: inline-flex; align-items: center; gap: 10px; align-self: stretch; justify-content: center; padding: 13px 22px; margin-top: 6px; background: rgba(255,255,255,0.22); color: #fff; font-size: 14.5px; font-weight: 900; border-radius: 99px; border: 2px solid rgba(255,255,255,0.40); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 22px -8px rgba(0,0,0,0.35); transition: gap 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .creq-card:hover .creq-card__btn { gap: 16px; background: rgba(255,255,255,0.36); border-color: rgba(255,255,255,0.65); } .creq-card__note { font-size: 12.5px; color: #fff; display: flex; align-items: flex-start; gap: 6px; line-height: 1.6; padding: 10px 14px; background: rgba(0,0,0,0.28); border-radius: 10px; border-inline-start: 3px solid rgba(255,255,255,0.60); font-weight: 600; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .creq-card__note i { color: #fef3c7; font-size: 13px; margin-top: 2px; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════ STICKY TABS BAR — polished pills with icon + label ═══════════════════════════════════════════════════════════ */ .creq-tabs-bar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--creq-line); box-shadow: 0 6px 24px rgba(15,23,42,0.08); padding: 12px 0; animation: creqBarSlide 0.35s ease; } @keyframes creqBarSlide { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .creq-tabs-bar__inner { display: flex; gap: 10px; justify-content: center; overflow-x: auto; padding: 2px; -ms-overflow-style: none; scrollbar-width: none; } .creq-tabs-bar__inner::-webkit-scrollbar { display: none; } .creq-tab { --_c: var(--creq-c-green); --_cd: var(--creq-c-green-d); display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: #fff; border: 1.5px solid var(--creq-line); border-radius: 14px; color: var(--creq-navy); font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 6px rgba(15,23,42,0.03); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; position: relative; isolation: isolate; } .creq-tab--green { --_c: var(--creq-c-green); --_cd: var(--creq-c-green-d); } .creq-tab--violet { --_c: var(--creq-c-violet); --_cd: var(--creq-c-violet-d); } .creq-tab--sky { --_c: var(--creq-c-sky); --_cd: var(--creq-c-sky-d); } .creq-tab--rose { --_c: var(--creq-c-rose); --_cd: var(--creq-c-rose-d); } .creq-tab--amber { --_c: var(--creq-c-amber); --_cd: var(--creq-c-amber-d); } .creq-tab__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in oklab, var(--_c) 14%, transparent); color: var(--_c); font-size: 14px; line-height: 1; flex-shrink: 0; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .creq-tab:hover { border-color: var(--_c); color: var(--_c); transform: translateY(-2px); box-shadow: 0 12px 24px -8px var(--_c); } .creq-tab:hover .creq-tab__icon { background: var(--_c); color: #fff; transform: scale(1.05); } .creq-tab.is-active { background: linear-gradient(135deg, var(--_c), var(--_cd)); color: #fff; border-color: var(--_c); box-shadow: 0 12px 28px -6px var(--_c); transform: translateY(-2px); } .creq-tab.is-active .creq-tab__icon { background: rgba(255,255,255,0.28); color: #fff; } /* ═══════════════════════════════════════════════════════════ FORM PANELS ═══════════════════════════════════════════════════════════ */ .creq-forms-section { background: var(--creq-bg); padding-bottom: clamp(50px, 6vw, 80px); } .creq-forms { padding: 40px 0; } .creq-forms__prelude { display: flex; align-items: flex-start; gap: 12px; max-width: 900px; margin: 0 auto 30px; padding: 16px 22px; background: rgba(14,165,233,0.08); border: 1px solid rgba(14,165,233,0.22); color: #0369a1; border-radius: 14px; font-size: 14px; line-height: 1.75; font-weight: 600; } .creq-forms__prelude i { font-size: 18px; margin-top: 2px; flex-shrink: 0; } .creq-form-panel { --_c: var(--creq-c-green); --_cd: var(--creq-c-green-d); max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--creq-line); border-radius: 24px; padding: clamp(28px, 4vw, 44px); box-shadow: var(--creq-shadow); position: relative; overflow: hidden; isolation: isolate; animation: creqPanelIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .creq-form-panel--green { --_c: var(--creq-c-green); --_cd: var(--creq-c-green-d); } .creq-form-panel--violet { --_c: var(--creq-c-violet); --_cd: var(--creq-c-violet-d); } .creq-form-panel--sky { --_c: var(--creq-c-sky); --_cd: var(--creq-c-sky-d); } .creq-form-panel--rose { --_c: var(--creq-c-rose); --_cd: var(--creq-c-rose-d); } .creq-form-panel--amber { --_c: var(--creq-c-amber); --_cd: var(--creq-c-amber-d); } /* GMAPS form panel — transparent Google Maps pin watermark bottom-inline-end. * Very low opacity so it reads as a hint, not a background image. */ .creq-form-panel--amber { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea4335'%3E%3Cpath opacity='0.06' d='M12 2C7.58 2 4 5.58 4 10c0 4.5 5.4 10.36 7.34 12.24.37.36.94.36 1.31 0C14.6 20.36 20 14.5 20 10c0-4.42-3.58-8-8-8zm0 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E") no-repeat right -40px bottom -40px / 280px 280px, #fff; } .creq-page--en .creq-form-panel--amber { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea4335'%3E%3Cpath opacity='0.06' d='M12 2C7.58 2 4 5.58 4 10c0 4.5 5.4 10.36 7.34 12.24.37.36.94.36 1.31 0C14.6 20.36 20 14.5 20 10c0-4.42-3.58-8-8-8zm0 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z'/%3E%3C/svg%3E") no-repeat left -40px bottom -40px / 280px 280px, #fff; } .creq-form-panel::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px; background: linear-gradient(90deg, var(--_c), var(--_cd)); } @keyframes creqPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .creq-form-panel__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px dashed var(--creq-line); } .creq-form-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--_c), var(--_cd)); color: #fff; font-size: 26px; line-height: 1; flex-shrink: 0; box-shadow: 0 10px 22px -6px var(--_c); } .creq-form-panel__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; color: var(--creq-navy); margin: 0 0 4px; line-height: 1.3; } .creq-form-panel__sub { font-size: 14px; font-weight: 600; color: var(--creq-mut); margin: 0; } .creq-form-placeholder { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, color-mix(in oklab, var(--_c) 6%, #fff), #fff); border: 2px dashed color-mix(in oklab, var(--_c) 30%, var(--creq-line)); border-radius: 16px; } .creq-form-placeholder__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, var(--_c), var(--_cd)); color: #fff; font-size: 26px; margin-bottom: 16px; box-shadow: 0 10px 22px -6px var(--_c); } .creq-form-placeholder h3 { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: 22px; font-weight: 900; color: var(--creq-navy); margin: 0 0 8px; } .creq-form-placeholder p { font-size: 14.5px; line-height: 1.8; color: var(--creq-mut); margin: 0 auto; max-width: 500px; font-weight: 500; } /* Gold eyebrow — reusable across sections */ .creq-eyebrow--gold { display: inline-flex; align-items: center; gap: 10px; padding: 9px 22px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%); color: #fff; border: 1px solid rgba(217,119,6,0.55); border-radius: 99px; font-size: 12.5px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 12px 26px -6px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.35); text-shadow: 0 1px 1px rgba(0,0,0,0.15); position: relative; } .creq-eyebrow--gold i { color: #fef3c7; font-size: 13px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.20)); } /* ═══════════════════════════════════════════════════════════ WHY WE ASK — dark split with 3 perception→reality rows ═══════════════════════════════════════════════════════════ */ .creq-why { padding: clamp(70px, 8vw, 110px) 0; color: var(--creq-navy); position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 55% 55% at 8% 12%, rgba(255,107,107,0.30), transparent 55%), radial-gradient(ellipse 55% 55% at 92% 12%, rgba(72,219,251,0.32), transparent 55%), radial-gradient(ellipse 50% 50% at 15% 88%, rgba(29,209,161,0.30), transparent 55%), radial-gradient(ellipse 50% 50% at 88% 92%, rgba(162,155,254,0.38), transparent 55%), linear-gradient(135deg, #fdf4ff 0%, #f0fdf4 50%, #fff8f0 100%); background-size: 300% 300%; animation: creqMeshShift 26s ease-in-out infinite; } .creq-why__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .creq-why__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: start; } .creq-why__side { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; position: sticky; top: 20px; } .creq-why__eyebrow { margin: 0; padding: 9px 22px; } .creq-why__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: clamp(24px, 3.2vw, 36px); font-weight: 900; margin: 0; line-height: 1.25; background: linear-gradient(135deg, #5f27cd 0%, #ee5a6f 60%, #ff9f43 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .creq-why__lead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: var(--creq-ink); margin: 0; font-weight: 800; padding-inline-start: 16px; border-inline-start: 3px solid #ff9f43; } .creq-why__callout { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; background: linear-gradient(135deg, #fff8f0, #fef3c7); border: 2px solid rgba(255,159,67,0.45); border-radius: 20px; box-shadow: 0 16px 34px -10px rgba(255,159,67,0.30); } .creq-why__callout-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #ff9f43, #ee5a6f); color: #fff; font-size: 18px; flex-shrink: 0; box-shadow: 0 10px 22px -4px rgba(238,90,111,0.50); } .creq-why__callout p { font-size: 14.5px; line-height: 1.75; color: var(--creq-ink); margin: 0; font-weight: 600; } /* Right column — scenarios */ .creq-why__scenarios { display: flex; flex-direction: column; gap: 16px; } .creq-why__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; opacity: 0; transform: translateY(20px); } [data-creq-reveal].is-visible .creq-why__row { animation: creqWhyRowIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--_d, 0s) forwards; } @keyframes creqWhyRowIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .creq-why__cell { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: #fff; border: 2px solid transparent; border-radius: 16px; box-shadow: 0 8px 20px -8px rgba(15,23,42,0.10); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .creq-why__cell--perc { border-color: rgba(239,68,68,0.35); background: linear-gradient(135deg, #fff, #fef2f2); } .creq-why__cell--real { border-color: rgba(29,209,161,0.45); background: linear-gradient(135deg, #fff, #f0fdfa); } .creq-why__row:hover .creq-why__cell--real { transform: translateY(-3px); border-color: #1dd1a1; box-shadow: 0 18px 34px -12px rgba(29,209,161,0.45); } .creq-why__row:hover .creq-why__cell--perc { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(239,68,68,0.30); } .creq-why__label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 900; color: #dc2626; letter-spacing: 0.06em; text-transform: uppercase; } .creq-why__label i { font-size: 12px; } .creq-why__label--real { color: #0d9488; } .creq-why__text { font-size: 14.5px; line-height: 1.5; color: var(--creq-ink-mut, #64748b); margin: 0; font-weight: 600; text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.55); text-decoration-thickness: 2px; } .creq-why__text--real { color: var(--creq-navy); text-decoration: none; font-weight: 800; } /* Arrow between perception + reality cells */ .creq-why__arrow { display: flex; align-items: center; justify-content: center; align-self: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 13px; box-shadow: 0 8px 20px -4px rgba(34,197,94,0.55); flex-shrink: 0; animation: creqArrowPulse 2.4s ease-in-out infinite; } @keyframes creqArrowPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.10); } } /* ═══════════════════════════════════════════════════════════ AFTER — 5 colorful steps on light rainbow bg ═══════════════════════════════════════════════════════════ */ .creq-after { padding: clamp(70px, 8vw, 100px) 0; background: radial-gradient(ellipse 55% 55% at 10% 15%, rgba(254,202,87,0.40), transparent 55%), radial-gradient(ellipse 55% 55% at 90% 15%, rgba(72,219,251,0.42), transparent 55%), radial-gradient(ellipse 55% 55% at 15% 90%, rgba(29,209,161,0.38), transparent 55%), radial-gradient(ellipse 55% 55% at 90% 88%, rgba(238,90,111,0.38), transparent 55%), linear-gradient(135deg, #fff8f0 0%, #f0f9ff 50%, #fdf4ff 100%); background-size: 300% 300%; animation: creqMeshShift 24s ease-in-out infinite; color: var(--creq-navy); position: relative; isolation: isolate; overflow: hidden; } .creq-after__photo { display: none; } .creq-after .creq-section__title--light { color: var(--creq-navy) !important; background: linear-gradient(135deg, #5f27cd, #ee5a6f, #ff9f43); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .creq-after .creq-section__eyebrow { background: linear-gradient(135deg, #ff9f43, #ee5a6f); color: #fff; border: 2px solid #fff; box-shadow: 0 12px 26px -6px rgba(238,90,111,0.45); } .creq-after .creq-section__eyebrow i { color: #fef3c7; } /* Steps grid with a horizontal connector line running behind the icons */ .creq-after__steps { list-style: none; padding: 0; margin: 0 auto; max-width: 1200px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; counter-reset: creqafter; } .creq-after__steps::before { content: ''; position: absolute; top: 62px; left: 6%; right: 6%; height: 3px; background: linear-gradient(90deg, #ff6b6b 0%, #ff9f43 25%, #feca57 50%, #48dbfb 75%, #5f27cd 100%); z-index: 0; pointer-events: none; border-radius: 3px; opacity: 0.55; } .creq-after__step { --_stepc: #ff6b6b; --_stepc2: #ff9f43; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px 22px; background: #fff; border: 2px solid transparent; border-radius: 22px; text-align: center; position: relative; z-index: 1; opacity: 0; transform: translateY(24px); box-shadow: 0 10px 26px -12px rgba(15,23,42,0.15); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .creq-after__step:nth-child(1) { --_stepc: #ff6b6b; --_stepc2: #ee5a6f; } .creq-after__step:nth-child(2) { --_stepc: #ff9f43; --_stepc2: #f97316; } .creq-after__step:nth-child(3) { --_stepc: #feca57; --_stepc2: #f59e0b; } .creq-after__step:nth-child(4) { --_stepc: #48dbfb; --_stepc2: #0ea5e9; } .creq-after__step:nth-child(5) { --_stepc: #5f27cd; --_stepc2: #a29bfe; } [data-creq-reveal].is-visible .creq-after__step { animation: creqAfterIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--_d, 0s) forwards; } @keyframes creqAfterIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .creq-after__step:hover { border-color: var(--_stepc); box-shadow: 0 22px 50px -14px var(--_stepc); transform: translateY(-6px); } .creq-after__step:hover .creq-after__icon { transform: scale(1.10) rotate(-6deg); animation: creqWiggle 0.6s ease; } .creq-after__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 22px; background: linear-gradient(135deg, var(--_stepc), var(--_stepc2)); color: #fff; font-size: 28px; box-shadow: 0 16px 34px -8px var(--_stepc), inset 0 1px 0 rgba(255,255,255,0.30); transition: transform 0.35s ease, box-shadow 0.35s ease; position: relative; } .creq-after__icon::after { content: ''; position: absolute; inset: -6px; border-radius: 28px; border: 2px dashed color-mix(in oklab, var(--_stepc) 60%, transparent); pointer-events: none; animation: creqIconRing 8s linear infinite; } @keyframes creqIconRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .creq-after__num { display: inline-block; padding: 4px 14px; background: linear-gradient(135deg, var(--_stepc), var(--_stepc2)); border-radius: 99px; font-family: 'Cairo', 'Tajawal', sans-serif; font-size: 12px; font-weight: 900; color: #fff; letter-spacing: 0.14em; box-shadow: 0 6px 14px -3px var(--_stepc); } .creq-after__body { display: flex; flex-direction: column; gap: 6px; } .creq-after__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: 16.5px; font-weight: 900; color: var(--creq-navy); margin: 0; line-height: 1.3; } .creq-after__desc { font-size: 13.5px; line-height: 1.7; color: var(--creq-mut); margin: 0; font-weight: 500; } /* ═══════════════════════════════════════════════════════════ MOTIVATIONAL — dark split section with 3 feature pillars ═══════════════════════════════════════════════════════════ */ .creq-motiv { padding: clamp(70px, 8vw, 110px) 0; color: var(--creq-navy); position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 55% 55% at 8% 20%, rgba(255,107,107,0.36), transparent 55%), radial-gradient(ellipse 55% 55% at 92% 20%, rgba(254,202,87,0.40), transparent 55%), radial-gradient(ellipse 55% 55% at 15% 88%, rgba(72,219,251,0.36), transparent 55%), radial-gradient(ellipse 55% 55% at 92% 88%, rgba(95,39,205,0.34), transparent 55%), linear-gradient(135deg, #fff8f0 0%, #f0f9ff 50%, #fdf4ff 100%); background-size: 300% 300%; animation: creqMeshShift 28s ease-in-out infinite; } .creq-motiv__photo { display: none; } .creq-motiv__veil { display: none; } .creq-motiv__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: center; } .creq-motiv__col--text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .creq-motiv__eyebrow { margin: 0 !important; padding: 9px 22px; } .creq-motiv__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: clamp(24px, 3.2vw, 38px); font-weight: 900; line-height: 1.25; margin: 0; background: linear-gradient(135deg, #5f27cd 0%, #ee5a6f 60%, #ff9f43 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .creq-motiv__body { font-size: 15.5px; line-height: 1.9; color: var(--creq-ink); margin: 0; font-weight: 600; max-width: 560px; } /* Right column — 3 vibrant pillars */ .creq-motiv__col--pillars { display: flex; flex-direction: column; gap: 14px; } .creq-pillar { --_pc: #ff6b6b; --_pc2: #ee5a6f; display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; background: #fff; border: 2px solid transparent; border-radius: 20px; box-shadow: 0 12px 26px -12px rgba(15,23,42,0.15); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .creq-pillar:nth-child(1) { --_pc: #ff6b6b; --_pc2: #ee5a6f; } .creq-pillar:nth-child(2) { --_pc: #48dbfb; --_pc2: #0ea5e9; } .creq-pillar:nth-child(3) { --_pc: #1dd1a1; --_pc2: #10b981; } .creq-pillar:hover { transform: translateY(-6px) translateX(-3px); border-color: var(--_pc); box-shadow: 0 22px 46px -14px var(--_pc); } .creq-pillar:hover .creq-pillar__icon { animation: creqWiggle 0.6s ease; } .creq-pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--_pc), var(--_pc2)); color: #fff; font-size: 22px; flex-shrink: 0; box-shadow: 0 12px 26px -6px var(--_pc); } .creq-pillar__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: 17px; font-weight: 900; color: var(--creq-navy); margin: 0 0 4px; line-height: 1.3; } .creq-pillar__desc { font-size: 14px; line-height: 1.65; color: var(--creq-mut); margin: 0; font-weight: 500; } /* ═══════════════════════════════════════════════════════════ FAQ — details/summary accordion ═══════════════════════════════════════════════════════════ */ .creq-faq { padding: clamp(60px, 7vw, 90px) 0; position: relative; background: radial-gradient(ellipse 55% 40% at 5% 5%, rgba(162,155,254,0.28), transparent 55%), radial-gradient(ellipse 55% 40% at 95% 95%, rgba(254,202,87,0.28), transparent 55%), linear-gradient(180deg, #fff 0%, #fdf4ff 100%); } .creq-faq .creq-section__title { background: linear-gradient(135deg, #5f27cd, #ee5a6f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .creq-faq__list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .creq-faq__item { background: var(--creq-bg); border: 1.5px solid var(--creq-line); border-radius: 16px; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .creq-faq__item[open] { background: #fff; border-color: var(--creq-c-violet); box-shadow: 0 12px 24px -8px rgba(139,92,246,0.20); } .creq-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-size: 15.5px; font-weight: 800; color: var(--creq-navy); list-style: none; line-height: 1.5; } .creq-faq__q::-webkit-details-marker { display: none; } .creq-faq__q i { color: var(--creq-c-violet); font-size: 14px; transition: transform 0.25s ease; flex-shrink: 0; } .creq-faq__item[open] .creq-faq__q i { transform: rotate(180deg); } .creq-faq__a { padding: 0 22px 20px; color: var(--creq-ink); font-size: 14.5px; line-height: 1.85; font-weight: 500; } /* ═══════════════════════════════════════════════════════════ FINAL CTA — with 4 pathway pills + primary button ═══════════════════════════════════════════════════════════ */ .creq-cta { padding: clamp(80px, 9vw, 130px) 0; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 55% 55% at 8% 15%, rgba(255,159,67,0.42), transparent 55%), radial-gradient(ellipse 55% 55% at 92% 15%, rgba(29,209,161,0.40), transparent 55%), radial-gradient(ellipse 55% 55% at 15% 90%, rgba(72,219,251,0.38), transparent 55%), radial-gradient(ellipse 55% 55% at 92% 90%, rgba(238,90,111,0.40), transparent 55%), radial-gradient(ellipse 40% 40% at 50% 50%, rgba(254,202,87,0.30), transparent 60%), linear-gradient(135deg, #fff8f0 0%, #f0f9ff 50%, #fdf4ff 100%); background-size: 300% 300%; animation: creqMeshShift 26s ease-in-out infinite; } .creq-cta__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .creq-cta__title { background: linear-gradient(135deg, #5f27cd 0%, #ee5a6f 60%, #ff9f43 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .creq-cta__inner { max-width: 900px; margin: 0 auto; text-align: center; } .creq-cta__eyebrow { display: inline-flex !important; margin: 0 auto 24px !important; padding: 10px 24px !important; position: relative; z-index: 2; } .creq-cta__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; color: var(--creq-navy); margin: 0 0 18px; line-height: 1.25; letter-spacing: -0.3px; position: relative; z-index: 1; } .creq-cta__body { font-size: 15.5px; line-height: 1.9; color: var(--creq-mut); margin: 0 auto 32px; max-width: 700px; font-weight: 500; } /* 4 pathway pills */ .creq-cta__pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 860px; margin: 0 auto 36px; } .creq-cta__pill { --_c: var(--creq-c-green); --_cd: var(--creq-c-green-d); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; background: #fff; border: 1.5px solid var(--creq-line); border-radius: 18px; cursor: pointer; font-family: inherit; color: var(--creq-navy); text-align: center; box-shadow: 0 6px 18px rgba(15,23,42,0.06); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; position: relative; overflow: hidden; isolation: isolate; } .creq-cta__pill::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--_c), var(--_cd)); opacity: 0; transition: opacity 0.3s ease; } .creq-cta__pill:hover::before { opacity: 0.05; } .creq-cta__pill--green { --_c: var(--creq-c-green); --_cd: var(--creq-c-green-d); } .creq-cta__pill--violet { --_c: var(--creq-c-violet); --_cd: var(--creq-c-violet-d); } .creq-cta__pill--sky { --_c: var(--creq-c-sky); --_cd: var(--creq-c-sky-d); } .creq-cta__pill--rose { --_c: var(--creq-c-rose); --_cd: var(--creq-c-rose-d); } .creq-cta__pill:hover { transform: translateY(-5px); border-color: var(--_c); box-shadow: 0 18px 40px -12px var(--_c); } .creq-cta__pill:hover .creq-cta__pill-icon { transform: scale(1.10) rotate(-4deg); } .creq-cta__pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--_c), var(--_cd)); color: #fff; font-size: 22px; box-shadow: 0 10px 22px -6px var(--_c); transition: transform 0.3s ease; } .creq-cta__pill-label { font-size: 13px; font-weight: 800; color: var(--creq-navy); line-height: 1.35; } /* ═══════════════════════════════════════════════════════════ WIZARD — progress bar, steps, form fields, controls Generic for all 4 forms; picks up --_c/--_cd from its parent panel. ═══════════════════════════════════════════════════════════ */ /* Hide the "under construction" placeholder when a real wizard is present */ .creq-form-panel:has(.creq-wizard) .creq-form-placeholder { display: none; } .creq-wizard { display: flex; flex-direction: column; gap: 24px; } /* Progress bar — bigger badge for current step, thicker bar, dot indicators */ .creq-wizard__progress { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; background: linear-gradient(135deg, color-mix(in oklab, var(--_c, var(--creq-c-green)) 8%, #fff), color-mix(in oklab, var(--_c, var(--creq-c-green)) 3%, var(--creq-bg))); border-radius: 16px; border: 1px solid color-mix(in oklab, var(--_c, var(--creq-c-green)) 20%, var(--creq-line)); box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--_c, var(--creq-c-green)) 25%, transparent); } .creq-wizard__progress-bar { position: relative; height: 10px; background: rgba(15,23,42,0.06); border-radius: 99px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,23,42,0.05); } .creq-wizard__progress-bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--_c, var(--creq-c-green)), var(--_cd, var(--creq-c-green-d))); border-radius: 99px; box-shadow: 0 0 12px color-mix(in oklab, var(--_c, var(--creq-c-green)) 60%, transparent); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); position: relative; } .creq-wizard__progress-bar > span::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 8px; background: rgba(255,255,255,0.6); border-radius: 99px; filter: blur(3px); } .creq-wizard__progress-text { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; color: var(--creq-navy); } .creq-wizard__progress-nums { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: #fff; border-radius: 99px; box-shadow: 0 2px 6px rgba(15,23,42,0.08); border: 1px solid color-mix(in oklab, var(--_c, var(--creq-c-green)) 20%, var(--creq-line)); } .creq-wizard__progress-current { color: var(--_c, var(--creq-c-green)); font-size: 20px; font-family: 'Cairo', 'Tajawal', sans-serif; line-height: 1; } .creq-wizard__progress-title { color: var(--creq-mut); font-weight: 700; font-size: 12.5px; } .creq-wizard__step-label { padding: 6px 14px; background: var(--_c, var(--creq-c-green)); color: #fff; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 4px 12px -4px var(--_c, var(--creq-c-green)); } /* Steps */ .creq-form { display: flex; flex-direction: column; gap: 24px; } .creq-step { display: flex; flex-direction: column; gap: 20px; animation: creqStepIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes creqStepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .creq-step__head { display: flex; flex-direction: column; gap: 4px; } .creq-step__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: 20px; font-weight: 900; color: var(--creq-navy); margin: 0; line-height: 1.35; display: flex; align-items: center; gap: 10px; } .creq-step__title::before { content: ''; display: inline-block; width: 6px; height: 24px; background: linear-gradient(180deg, var(--_c, var(--creq-c-green)), var(--_cd, var(--creq-c-green-d))); border-radius: 4px; } .creq-step__desc { font-size: 13.5px; font-weight: 600; color: var(--creq-mut); margin: 0 0 0 16px; line-height: 1.7; } /* Form grid */ .creq-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .creq-field { display: flex; flex-direction: column; gap: 6px; } .creq-field--full { grid-column: 1 / -1; } .creq-field__label { font-size: 13.5px; font-weight: 800; color: var(--creq-navy); display: flex; align-items: center; gap: 6px; } .creq-field__label em { color: #dc2626; font-style: normal; margin-inline-start: 3px; } .creq-field__hint { font-size: 12px; font-weight: 500; color: var(--creq-mut); line-height: 1.6; } .creq-field input[type=text], .creq-field input[type=tel], .creq-field input[type=email], .creq-field input[type=url], .creq-field input[type=number], .creq-field input[type=date], .creq-field input[type=time], .creq-field select, .creq-field textarea { font-family: inherit; font-size: 14.5px; padding: 13px 16px; border: 1.5px solid var(--creq-line); border-radius: 12px; background: #fff; color: var(--creq-ink); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; outline: none; width: 100%; box-sizing: border-box; box-shadow: 0 1px 3px rgba(15,23,42,0.03); } .creq-field input:hover:not(:focus):not([disabled]), .creq-field select:hover:not(:focus):not([disabled]), .creq-field textarea:hover:not(:focus):not([disabled]) { border-color: color-mix(in oklab, var(--_c, var(--creq-c-green)) 40%, var(--creq-line)); } .creq-field input:focus, .creq-field select:focus, .creq-field textarea:focus { border-color: var(--_c, var(--creq-c-green)); background: #fff; box-shadow: 0 0 0 4px color-mix(in oklab, var(--_c, var(--creq-c-green)) 18%, transparent), 0 4px 12px -2px color-mix(in oklab, var(--_c, var(--creq-c-green)) 25%, transparent); transform: translateY(-1px); } .creq-field input::placeholder, .creq-field textarea::placeholder { color: color-mix(in oklab, var(--creq-mut) 60%, transparent); font-weight: 500; } .creq-field.is-error input, .creq-field.is-error select, .creq-field.is-error textarea, .creq-field input.is-error, .creq-field select.is-error, .creq-field textarea.is-error { border-color: #dc2626; background: #fef2f2; } .creq-field textarea { resize: vertical; min-height: 100px; font-family: inherit; } .creq-field select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: left 16px center; background-size: 12px 8px; padding-inline-start: 44px; cursor: pointer; } .creq-field select::-ms-expand { display: none; } .creq-field select:focus { background-image: url("data:image/svg+xml;utf8,"); } /* Radio / checkbox — pill style */ .creq-choice-group { display: flex; flex-wrap: wrap; gap: 10px; } .creq-choice { display: block; cursor: pointer; position: relative; } .creq-choice input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .creq-choice span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--creq-bg); border: 1.5px solid var(--creq-line); border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--creq-navy); transition: all 0.2s ease; line-height: 1.4; } .creq-choice:hover span { border-color: var(--_c, var(--creq-c-green)); color: var(--_c, var(--creq-c-green)); transform: translateY(-1px); } .creq-choice input:checked + span { background: linear-gradient(135deg, var(--_c, var(--creq-c-green)), var(--_cd, var(--creq-c-green-d))); border-color: var(--_c, var(--creq-c-green)); color: #fff; box-shadow: 0 6px 16px -6px var(--_c, var(--creq-c-green)); } .creq-choice input:focus-visible + span { outline: 2px solid var(--_c, var(--creq-c-green)); outline-offset: 3px; } /* Radio group with vertical layout (e.g. budget) */ .creq-choice-group--stack { flex-direction: column; align-items: stretch; gap: 8px; } .creq-choice-group--stack .creq-choice span { width: 100%; box-sizing: border-box; padding: 14px 18px; justify-content: flex-start; font-size: 14px; } /* Checkbox visual — same as radio but with a check icon on checked */ .creq-choice--check input:checked + span::before { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: rgba(255,255,255,0.28); border-radius: 50%; } /* Conditional block — shown only when [data-creq-if] matches */ .creq-conditional { display: none; padding: 16px 18px; background: color-mix(in oklab, var(--_c, var(--creq-c-green)) 5%, var(--creq-bg)); border-radius: 14px; border: 1px dashed color-mix(in oklab, var(--_c, var(--creq-c-green)) 30%, var(--creq-line)); margin-top: 4px; animation: creqCondIn 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .creq-conditional.is-visible { display: flex; flex-direction: column; gap: 12px; } @keyframes creqCondIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Wizard nav (buttons row) */ .creq-wizard__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px dashed var(--creq-line); flex-wrap: wrap; } .creq-wizard__step-label { font-size: 12.5px; font-weight: 700; color: var(--creq-mut); padding: 6px 14px; background: var(--creq-bg); border-radius: 99px; } .creq-wizard__actions { display: flex; gap: 10px; margin-inline-start: auto; } .creq-wiz-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-family: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; border: 1.5px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .creq-wiz-btn--prev { background: #fff; border-color: var(--creq-line); color: var(--creq-mut); } .creq-wiz-btn--prev:hover { border-color: var(--creq-navy); color: var(--creq-navy); } .creq-wiz-btn--prev[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .creq-wiz-btn--next, .creq-wiz-btn--submit { background: linear-gradient(135deg, var(--_c, var(--creq-c-green)), var(--_cd, var(--creq-c-green-d))); color: #fff; box-shadow: 0 10px 22px -8px var(--_c, var(--creq-c-green)); } .creq-wiz-btn--next:hover, .creq-wiz-btn--submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px var(--_c, var(--creq-c-green)); } .creq-wiz-btn[disabled] { opacity: 0.6; cursor: wait; pointer-events: none; } /* Field-group label above the choices */ .creq-fgroup { display: flex; flex-direction: column; gap: 10px; } /* Honeypot */ .creq-form__hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* Status area */ .creq-form__status { display: none; margin-top: 14px; padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1.6; } .creq-form__status.is-visible { display: flex; align-items: center; gap: 10px; } .creq-form__status.is-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .creq-form__status.is-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } /* Success screen (replaces the wizard after submit) */ .creq-success { display: none; text-align: center; padding: 48px 32px; background: linear-gradient(135deg, color-mix(in oklab, var(--_c, var(--creq-c-green)) 8%, #fff), #fff); border-radius: 20px; border: 2px dashed color-mix(in oklab, var(--_c, var(--creq-c-green)) 30%, var(--creq-line)); animation: creqStepIn 0.5s ease; } .creq-success.is-visible { display: block; } .creq-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 24px; background: linear-gradient(135deg, var(--_c, var(--creq-c-green)), var(--_cd, var(--creq-c-green-d))); color: #fff; font-size: 34px; margin-bottom: 18px; box-shadow: 0 16px 32px -10px var(--_c, var(--creq-c-green)); } .creq-success__title { font-family: 'Cairo', 'Tajawal', sans-serif; font-size: 22px; font-weight: 900; color: var(--creq-navy); margin: 0 0 10px; } .creq-success__msg { font-size: 15px; line-height: 1.9; color: var(--creq-mut); margin: 0 auto 20px; max-width: 500px; font-weight: 500; } .creq-success__id { display: inline-block; padding: 6px 16px; background: rgba(15,23,42,0.06); color: var(--creq-navy); border-radius: 99px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; } /* Responsive */ @media (max-width: 640px) { .creq-form-grid { grid-template-columns: 1fr; } .creq-wizard__nav { flex-direction: column-reverse; align-items: stretch; } .creq-wizard__actions { justify-content: stretch; } .creq-wiz-btn { flex: 1; justify-content: center; } .creq-wizard__step-label { text-align: center; } } /* ═══════════════════════════════════════════════════════════ Universal toast ═══════════════════════════════════════════════════════════ */ .creq-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--creq-navy); color: #fff; font-size: 14.5px; font-weight: 700; border-radius: 99px; box-shadow: 0 20px 40px rgba(0,0,0,0.30); z-index: 10000; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .creq-toast i { color: #34d399; font-size: 18px; } .creq-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ═══════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .creq-cards__grid { grid-template-columns: 1fr; } .creq-after__steps { grid-template-columns: 1fr 1fr; } .creq-after__steps::before { display: none; } .creq-tab__label { font-size: 13px; } .creq-motiv__grid { grid-template-columns: 1fr; gap: 32px; } .creq-cta__pills { grid-template-columns: repeat(2, 1fr); } /* WHY: side ↕ scenarios stack, side no longer sticky */ .creq-why__grid { grid-template-columns: 1fr; gap: 30px; } .creq-why__side { position: static !important; } } @media (max-width: 640px) { /* WHY rows go vertical — perception ↑, arrow ↓, reality ↓ */ .creq-why__row { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; gap: 10px !important; justify-items: stretch; } .creq-why__arrow { /* Disable the pulse animation so our rotate isn't overridden */ animation: none !important; transform: rotate(-90deg) !important; /* point downward in vertical layout */ justify-self: center; margin: 2px 0; } .creq-why__cell { width: 100%; box-sizing: border-box; } } @media (max-width: 640px) { .creq-after__steps { grid-template-columns: 1fr; } .creq-tabs-bar__inner { justify-content: flex-start; padding: 0 4px; } .creq-tab { padding: 8px 14px; font-size: 12.5px; } .creq-tab__label { display: none; } .creq-tab__icon { font-size: 18px; } .creq-form-panel__head { flex-direction: column; align-items: flex-start; gap: 12px; } .creq-hero__motto { flex-direction: column; text-align: center; padding: 14px 20px; } } @media (prefers-reduced-motion: reduce) { .creq-tabs-bar, .creq-form-panel { animation: none !important; } .creq-card, .creq-tab, .creq-btn { transition: none !important; } }