/* ================================================ MenuOrders Landing Page — Custom CSS Works alongside Tailwind CDN Direction (rtl/ltr) is driven by the attribute, so layout-sensitive rules use CSS logical properties. ================================================ */ /* Base */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Pulse animation for hero badge dot */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.3); } } .pulse-dot { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; } /* Floating cards near the hero phone */ @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-card { animation: floatY 1.8s ease-in-out infinite; } .float-card--delay { animation-delay: -0.9s; } @media (prefers-reduced-motion: reduce) { .float-card { animation: none; } } /* Language switcher dropdown (
) */ .lang-menu summary { list-style: none; cursor: pointer; } .lang-menu summary::-webkit-details-marker { display: none; } .lang-menu[open] > summary svg:last-child { transform: rotate(180deg); } /* Form input base style — icon sits on the inline-start edge */ .form-input { width: 100%; border: 2px solid #d4c9b5; background: white; border-radius: 0.75rem; padding-block: 0.875rem; padding-inline-start: 2.5rem; padding-inline-end: 1rem; color: #1a1a1a; font-size: 0.875rem; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; transition: border-color 0.15s, box-shadow 0.15s; outline: none; appearance: none; } .form-input::placeholder { color: rgba(107,107,107,.50); } .form-input:focus { border-color: #0F2A44; box-shadow: 0 0 0 4px rgba(15,42,68,.10); } /* Field icon (absolute positioned inside relative wrapper) */ .field-icon { position: absolute; inset-inline-start: 0.875rem; top: 50%; transform: translateY(-50%); color: rgba(15,42,68,.30); pointer-events: none; display: flex; align-items: center; } /* Phone field is forced LTR — keep its icon + text on the left edge regardless of the page direction. */ .form-input[dir="ltr"] { text-align: left; padding-inline-start: 2.5rem; padding-inline-end: 1rem; } .field-icon:has(+ input[dir="ltr"]) { inset-inline-start: auto; left: 0.875rem; } /* Pro pricing card ring */ .ring-card { outline: 4px solid rgba(217,119,6,.40); outline-offset: -1px; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Scrollbar (optional styling) */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #F5F1EA; } ::-webkit-scrollbar-thumb { background: #d4c9b5; border-radius: 3px; } /* Mobile: hide desktop problem/solution grid, show stacked */ @media (max-width: 767px) { .grid[style*="grid-template-columns:1fr 56px 1fr"] { display: flex; flex-direction: column; } .grid[style*="grid-template-columns:1fr 56px 1fr"] > div:nth-child(2) { padding: 0.5rem; justify-content: center; } } /* ================================================ Hero phone — CSS phone mockup with a demo-screenshot carousel. The device is drawn entirely in CSS (no photo), so the slideshow inside the screen aligns perfectly at any size. ================================================ */ .phone-device { position: relative; width: 100%; padding: 0.6rem; border-radius: 2.9rem; background: linear-gradient(150deg, #2b3242 0%, #161a24 55%, #0d1018 100%); box-shadow: 0 30px 55px -15px rgba(0, 0, 0, 0.55), 0 0 0 1.5px rgba(255, 255, 255, 0.06), inset 0 0 0 2px rgba(0, 0, 0, 0.45); /* carousel math is LTR; pin direction so it survives the RTL page */ direction: ltr; } .phone-screen { position: relative; overflow: hidden; border-radius: 2.35rem; background: #000; aspect-ratio: 9 / 19; } /* Dynamic-island style pill */ .phone-notch { position: absolute; top: 0.95rem; left: 50%; transform: translateX(-50%); width: 26%; height: 1.05rem; background: #0d1018; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); z-index: 4; } .phone-track { display: flex; width: 100%; height: 100%; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .phone-slide { flex: 0 0 100%; height: 100%; } .phone-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* Carousel dots — pinned inside the screen, lower-centre */ .phone-dots { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(15, 42, 68, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 3; } .phone-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, 0.45); transition: background 0.2s, width 0.2s; } .phone-dot.is-active { width: 16px; background: #fff; } @media (prefers-reduced-motion: reduce) { .phone-track { transition: none; } }