/* ═══════════════════════════════════════════════ MDD Direct — Landing Page Styles ═══════════════════════════════════════════════ */ /* ── Google Fonts (loaded here to avoid Razor @ parsing issues) ── */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&family=Barlow:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,800;1,900&display=swap'); /* ── Font families ── */ [lang="ar"] .landing-page { font-family: 'Tajawal', sans-serif; } [lang="en"] .landing-page { font-family: 'Barlow', sans-serif; } [lang="en"] .landing-page .ar-only { display: none; } [lang="ar"] .landing-page .en-only { display: none; } /* ── Smooth scroll ── */ .landing-page { scroll-behavior: smooth; } /* ── Fade-in-up animation (IntersectionObserver driven) ── */ /* JS adds .js-ready to on load; without it, content is visible immediately */ .landing-page .fade-up { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease, transform 0.7s ease; } .landing-page.js-ready .fade-up { opacity: 0; transform: translateY(30px); } .landing-page.js-ready .fade-up.visible, .landing-page .fade-up.visible { opacity: 1; transform: translateY(0); } .landing-page .fade-up-delay-1 { transition-delay: 0.1s; } .landing-page .fade-up-delay-2 { transition-delay: 0.2s; } .landing-page .fade-up-delay-3 { transition-delay: 0.3s; } /* ── Pulse animation (hero badge) ── */ @keyframes landing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .landing-page .badge-pulse { animation: landing-pulse 2s infinite; } /* ── Hero skew divider ── */ .landing-page .hero-skew::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-end: -60px; width: 120px; background: #fff; transform: skewX(-6deg); z-index: 2; } [dir="ltr"] .landing-page .hero-skew::after { transform: skewX(6deg); } /* ── CTA button clip-path ── */ .landing-page .btn-clip { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); } /* ── Mosaic tile hover zoom ── */ .landing-page .tile-img { transition: transform 0.5s ease; } .landing-page .tile:hover .tile-img { transform: scale(1.08); } /* ── Card lift on hover ── */ .landing-page .card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .landing-page .card-lift:hover { transform: translateY(-6px); } /* ── Mosaic grid layout ── */ .landing-page .mosaic-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; width: 100%; height: 100%; } .landing-page .tile-big { grid-row: span 2; } /* ── Stats tabular numbers ── */ .landing-page .stat-num { font-variant-numeric: tabular-nums; } /* ── Step card icon bounce on hover ── */ .landing-page .step-icon-bounce { transition: transform 0.3s ease; } .landing-page .step-icon-bounce:hover { transform: translateY(-4px); } .landing-page .step-icon-bounce:hover .step-icon-circle { transform: scale(1.1); box-shadow: 0 4px 20px rgba(218, 89, 41, 0.3); } .landing-page .step-icon-circle { transition: transform 0.3s ease, box-shadow 0.3s ease; } /* ── Section gradient transitions ── */ .landing-page .section-fade-top { position: relative; } .landing-page .section-fade-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); pointer-events: none; z-index: 1; } .landing-page .section-fade-dark::before { background: linear-gradient(to bottom, rgba(26,26,30,0.4), transparent); } /* ── Category auto-scroll strip ── */ .landing-page .category-strip { width: max-content; will-change: transform; } /* Fade edges */ .landing-page .fade-edge-start { background: linear-gradient(to right, #FFFFFF, transparent); } .landing-page .fade-edge-end { background: linear-gradient(to left, #FFFFFF, transparent); } [dir="rtl"] .landing-page .fade-edge-start { background: linear-gradient(to left, #FFFFFF, transparent); } [dir="rtl"] .landing-page .fade-edge-end { background: linear-gradient(to right, #FFFFFF, transparent); } /* ── Sticky header scrolled state ── */ .landing-page .header-scrolled { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06); } /* ── Payment card shimmer ── */ @keyframes landing-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .landing-page .pay-shimmer:hover { background: linear-gradient(90deg, transparent, rgba(218, 89, 41, 0.05), transparent); background-size: 200% 100%; animation: landing-shimmer 1.5s ease infinite; } /* ── FAQ accordion ── */ .landing-page .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 24px; } .landing-page .faq-item.open .faq-answer { max-height: 400px; padding: 16px 24px 20px; } .landing-page .faq-item.open .faq-chevron { transform: rotate(180deg); } .landing-page .faq-chevron { transition: transform 0.3s ease; } .landing-page .faq-item.open { border-inline-start: 3px solid #DA5929; } /* ── Mobile menu ── */ .landing-page .mobile-menu-enter { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .landing-page .mobile-menu-enter.open { max-height: 400px; } /* ── Journey connector line (How It Works) ── */ .landing-page .journey-line { position: relative; } .landing-page .journey-line::before { content: ''; position: absolute; top: 50%; inset-inline-start: 0; inset-inline-end: 0; height: 2px; background: repeating-linear-gradient(90deg, #DA5929 0, #DA5929 8px, transparent 8px, transparent 16px); z-index: 0; } /* ── Responsive overrides ── */ @media (max-width: 768px) { .landing-page .hero-skew::after { display: none; } .landing-page .journey-line::before { display: none; } } /* ── Accessible focus ring for clip-path buttons ── */ .landing-page .btn-clip:focus-visible { outline: 2px solid #DA5929; outline-offset: 2px; } /* ── FAQ keyboard accessibility ── */ .landing-page .faq-item:focus-visible { outline: 2px solid #DA5929; outline-offset: -2px; }