/* ========================================================================== Digital Line Media — landing page Design tokens first, then primitives, then sections. Mobile-first throughout. Direction-aware: only logical properties (margin-inline, padding-inline, inset-inline) so RTL needs no overrides. ========================================================================== */ /* ---------- Tokens ------------------------------------------------------ */ :root { --primary: #5d28f8; --primary-hover: #4c1fd6; --primary-soft: #ede9fe; --primary-softer: #f5f3ff; --secondary: #4338ca; --tertiary: #6366f1; --on-primary: #ffffff; --bg: #ffffff; --bg-dim: #f8f9fc; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --fg: #0b0c2e; --fg-muted: #4b5563; --fg-subtle: #6b7280; --border: #e5e7eb; --border-strong: #c7d2fe; --success: #15803d; --success-soft: #dcfce7; --danger: #ba1a1a; --danger-soft: #ffdad6; --warning: #92400e; --warning-soft: #fef3c7; --whatsapp: #25d366; --radius-sm: 0.625rem; --radius: 1rem; --radius-lg: 1.5rem; --radius-pill: 999px; --shadow-soft: 0 1px 2px rgb(11 12 46 / 0.04), 0 8px 24px -12px rgb(11 12 46 / 0.12); --shadow-lift: 0 2px 4px rgb(11 12 46 / 0.05), 0 18px 40px -18px rgb(11 12 46 / 0.22); --font-latin: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-arabic: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; /* Height of the sticky mobile CTA bar; sections pad past it. */ --sticky-cta-h: 76px; } /* ---------- Reset ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: var(--font-latin); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums tabular-nums; overflow-x: hidden; } html[lang='ar'] body { font-family: var(--font-arabic), var(--font-latin); } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } /* ---------- Bilingual switching ---------------------------------------- Both languages ship in the HTML; CSS (render-blocking) picks one before first paint. No flash, no layout jump, and the page still reads correctly with JavaScript disabled. An inline script sets data-lang from the cookie, so a returning visitor never sees the wrong language. ----------------------------------------------------------------------- */ html[data-lang='ar'] [data-t='en'] { display: none !important; } html[data-lang='en'] [data-t='ar'] { display: none !important; } /* ---------- Accessibility ---------------------------------------------- */ :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 200; background: var(--primary); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; font-weight: 600; } .skip-link:focus { top: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- Layout ------------------------------------------------------ */ .wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 1.25rem; } .section { padding-block: 3.5rem; } @media (min-width: 768px) { .section { padding-block: 5.5rem; } } .section--tint { background: var(--bg-dim); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary-soft); color: var(--secondary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); margin-bottom: 1rem; } html[lang='ar'] .eyebrow { letter-spacing: normal; text-transform: none; font-size: 0.8125rem; } h1, h2, h3 { line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; } html[lang='ar'] h1, html[lang='ar'] h2, html[lang='ar'] h3 { letter-spacing: 0; line-height: 1.4; } h1 { font-size: clamp(1.9rem, 6vw, 3.4rem); } h2 { font-size: clamp(1.55rem, 4.4vw, 2.5rem); } h3 { font-size: 1.125rem; font-weight: 700; } .lede { color: var(--fg-muted); font-size: 1.0625rem; max-width: 62ch; } @media (min-width: 768px) { .lede { font-size: 1.1875rem; } } .section__head { margin-bottom: 2.5rem; } .section__head--center { text-align: center; } .section__head--center .lede { margin-inline: auto; } /* ---------- Buttons ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0.75rem 1.75rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: 0.55; cursor: not-allowed; } .btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 10px 24px -12px rgb(93 40 248 / 0.7); } .btn--primary:hover { background: var(--primary-hover); } .btn--outline { background: transparent; color: var(--fg); border-color: var(--border-strong); } .btn--outline:hover { background: var(--primary-softer); border-color: var(--primary); } .btn--whatsapp { background: var(--whatsapp); color: #04310f; } .btn--whatsapp:hover { filter: brightness(0.95); } .btn--block { width: 100%; } .btn--sm { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.9375rem; } /* Directional glyph. In RTL the arrow must point the other way, so the icon is mirrored and the hover nudge follows the reading direction. */ .btn__arrow { transition: transform 0.18s ease; } html[dir='ltr'] .btn:hover .btn__arrow { transform: translateX(3px); } html[dir='rtl'] .btn__arrow { transform: scaleX(-1); } html[dir='rtl'] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); } /* ---------- Header ------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 60; background: rgb(255 255 255 / 0.86); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; } .site-header__logo { height: 34px; width: auto; } /* Three groups: brand · nav · actions. Brand and actions each take an equal share of the free space, which puts the nav on the true centre line rather than merely between two unequal neighbours. */ .site-header__brand { flex: 1 1 0; display: flex; align-items: center; } .site-header__actions { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .nav { display: none; gap: 1.75rem; white-space: nowrap; } @media (min-width: 1024px) { .nav { display: flex; flex: 0 0 auto; } } .nav a { text-decoration: none; color: var(--fg-muted); font-weight: 600; font-size: 0.9375rem; padding-block: 0.25rem; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .nav a:hover { color: var(--primary); border-bottom-color: var(--primary); } .lang-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 62px; padding-inline: 0.9rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-weight: 700; font-size: 0.875rem; cursor: pointer; color: var(--fg); transition: border-color 0.15s ease, background-color 0.15s ease; } .lang-toggle:hover { border-color: var(--primary); background: var(--primary-softer); } .site-header .btn { display: none; } @media (min-width: 768px) { .site-header .btn { display: inline-flex; } } /* ---------- Hero -------------------------------------------------------- */ .hero { position: relative; padding-block: 3rem 3.5rem; overflow: hidden; } @media (min-width: 768px) { .hero { padding-block: 5rem 6rem; } } .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(46rem 30rem at 15% -10%, #ede9fe 0%, transparent 62%), radial-gradient(38rem 26rem at 95% 0%, #e0e7ff 0%, transparent 58%), radial-gradient(34rem 24rem at 70% 100%, #f5f3ff 0%, transparent 60%); } .hero__inner { text-align: center; } .hero h1 { margin-bottom: 1.25rem; } .hero h1 .accent { color: var(--primary); } .hero .lede { margin-inline: auto; margin-bottom: 1rem; } .hero .lede + .lede { margin-bottom: 2rem; } .hero__actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; } @media (min-width: 560px) { .hero__actions { flex-direction: row; justify-content: center; } } .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--border); } .hero__stat { text-align: center; } .hero__stat b { display: block; font-size: clamp(1.4rem, 5vw, 2rem); color: var(--primary); font-weight: 800; } .hero__stat span { font-size: 0.8125rem; color: var(--fg-subtle); } /* ---------- Cards ------------------------------------------------------- */ .grid { display: grid; gap: 1rem; } @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .case { height: 100%; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); } .card h3 { margin-bottom: 0.6rem; } .card p { color: var(--fg-muted); font-size: 0.9375rem; } .card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); margin-bottom: 1.1rem; } .card__icon svg { width: 26px; height: 26px; } .card__list { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: 0.5rem; } .card__list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.875rem; color: var(--fg-muted); } .card__list li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.6rem; border-radius: 50%; background: var(--primary); } /* Case studies. Cards stretch to equal height so the scope block always sits at the bottom of the row regardless of how long each story runs. */ .case { background: linear-gradient(160deg, #faf8ff 0%, #f4f2ff 100%); border-color: var(--border-strong); display: flex; flex-direction: column; } .case p + p { margin-top: 0.75rem; } .case__tagline { color: var(--primary); font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.85rem; margin-top: -0.2rem; } .case__scope { margin-top: auto; padding-top: 1.1rem; border-top: 1px dashed var(--border-strong); } .case__scope h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 0.5rem; } html[lang='ar'] .case__scope h4 { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; } .case__scope ul { list-style: none; padding: 0; display: grid; gap: 0.4rem; } .case__scope li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.875rem; color: var(--fg-muted); } .case__scope li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.55rem; border-radius: 50%; background: var(--primary); } /* Process steps */ .steps { counter-reset: step; display: grid; gap: 1rem; } @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } } .step { position: relative; padding-top: 1rem; } .step__num { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 1.05rem; } .step h3 { margin-bottom: 0.45rem; } .step p { color: var(--fg-muted); font-size: 0.9375rem; } /* Why-us */ .why { display: grid; gap: 1rem; } @media (min-width: 900px) { .why { grid-template-columns: repeat(3, 1fr); } } /* ---------- FAQ accordion ---------------------------------------------- */ .faq { display: grid; gap: 0.75rem; max-width: 860px; margin-inline: auto; } .faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: 1rem 1.25rem; background: none; border: 0; text-align: start; font-weight: 700; font-size: 1rem; cursor: pointer; } .faq__q:hover { background: var(--surface-2); } .faq__chevron { flex: none; transition: transform 0.22s ease; color: var(--primary); } .faq__q[aria-expanded='true'] .faq__chevron { transform: rotate(180deg); } .faq__a { padding: 0 1.25rem 1.25rem; color: var(--fg-muted); font-size: 0.9375rem; } .faq__a[hidden] { display: none; } /* ---------- Forms ------------------------------------------------------- */ .form { display: grid; gap: 1rem; } .field { display: grid; gap: 0.4rem; } .label { font-size: 0.8125rem; font-weight: 700; color: var(--fg-muted); } .label .req { color: var(--danger); } .input, .select { width: 100%; min-height: 52px; padding: 0.7rem 1rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(93 40 248 / 0.16); } .input[aria-invalid='true'], .select[aria-invalid='true'] { border-color: var(--danger); } /* Phone and other Latin-only values stay LTR even inside the Arabic layout. */ .input--ltr { direction: ltr; text-align: start; } html[dir='rtl'] .input--ltr { text-align: right; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px; background-position: right 1rem center; padding-right: 2.75rem; } html[dir='rtl'] .select { background-position: left 1rem center; padding-right: 1rem; padding-left: 2.75rem; } .field__error { font-size: 0.8125rem; color: var(--danger); min-height: 1.2em; } .field__error:empty { display: none; } .form__note { font-size: 0.8125rem; color: var(--fg-subtle); } .form__status { border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; font-size: 0.9375rem; font-weight: 600; } .form__status--error { background: var(--danger-soft); color: var(--danger); } .form__status--success { background: var(--success-soft); color: var(--success); } .form__status[hidden] { display: none; } /* Honeypot: off-screen but reachable to the bots that fill everything in. */ .hp { position: absolute; inset-inline-start: -9999px; opacity: 0; pointer-events: none; height: 0; } .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lift); max-width: 560px; margin-inline: auto; } @media (min-width: 768px) { .form-card { padding: 2rem; } } /* ---------- Modal ------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: end center; } .modal[hidden] { display: none; } @media (min-width: 640px) { .modal { place-items: center; } } .modal__backdrop { position: absolute; inset: 0; background: rgb(11 12 46 / 0.55); backdrop-filter: blur(3px); } .modal__panel { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); animation: sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 640px) { .modal__panel { border-radius: var(--radius-lg); padding: 2rem; animation: fade-up 0.24s ease; } } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .modal__close { position: absolute; inset-inline-end: 0.9rem; top: 0.9rem; width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface-3); border: 0; border-radius: 50%; cursor: pointer; color: var(--fg-muted); } .modal__close:hover { background: var(--border); } .modal__title { font-size: 1.375rem; margin-bottom: 0.4rem; padding-inline-end: 3rem; } .modal__sub { color: var(--fg-muted); font-size: 0.9375rem; margin-bottom: 1.5rem; } body.is-locked { overflow: hidden; } /* ---------- Sticky CTA -------------------------------------------------- */ .sticky-cta { position: fixed; inset-inline: 0; bottom: 0; z-index: 55; display: flex; gap: 0.6rem; align-items: center; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: rgb(255 255 255 / 0.94); backdrop-filter: blur(14px); border-top: 1px solid var(--border); transform: translateY(120%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .sticky-cta.is-visible { transform: translateY(0); } .sticky-cta .btn--primary { flex: 1; } .sticky-cta .btn--whatsapp { flex: none; width: 52px; padding: 0; } /* Keep the last section clear of the bar. */ body { padding-bottom: 0; } body.has-sticky-cta { padding-bottom: var(--sticky-cta-h); } @media (min-width: 1024px) { .sticky-cta { display: none; } body.has-sticky-cta { padding-bottom: 0; } } /* ---------- Final CTA --------------------------------------------------- */ .final-cta { background: linear-gradient(135deg, #5d28f8 0%, #6366f1 55%, #8b5cf6 100%); color: #fff; text-align: center; border-radius: var(--radius-lg); padding: 3rem 1.5rem; } @media (min-width: 768px) { .final-cta { padding: 4.5rem 3rem; } } .final-cta h2 { color: #fff; margin-bottom: 1rem; } .final-cta p { color: rgb(255 255 255 / 0.88); max-width: 56ch; margin-inline: auto; margin-bottom: 2rem; } .final-cta .btn--primary { background: #fff; color: var(--primary); box-shadow: none; } .final-cta .btn--primary:hover { background: #f5f3ff; } .final-cta .btn--outline { color: #fff; border-color: rgb(255 255 255 / 0.5); } .final-cta .btn--outline:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; } .final-cta__actions { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 560px) { .final-cta__actions { flex-direction: row; justify-content: center; } } /* ---------- Footer ------------------------------------------------------ */ .site-footer { background: var(--bg-dim); border-top: 1px solid var(--border); padding-block: 3rem 2rem; } .site-footer__grid { display: grid; gap: 2rem; } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } } .site-footer h4 { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); margin-bottom: 0.9rem; } html[lang='ar'] .site-footer h4 { text-transform: none; letter-spacing: 0; font-size: 0.9375rem; } .site-footer__logo { height: 46px; width: auto; margin-bottom: 1rem; } .site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.65rem; } .site-footer a { color: var(--fg-muted); text-decoration: none; font-size: 0.9375rem; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 32px; } .site-footer a:hover { color: var(--primary); } .site-footer svg { width: 18px; height: 18px; flex: none; } .site-footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; font-size: 0.8125rem; color: var(--fg-subtle); } .social { display: flex; gap: 0.6rem; } .social a { width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 50%; } .social a:hover { border-color: var(--primary); background: var(--primary-softer); }