/* ========================================================= Ammn landing (2026 design) — shared foundation Source: Figma kBD7wdVjTXL0xYclPhTBUo, node 190:55625. Everything the new landing draws is namespaced: - classes start with `al-` (landing.css still loads for the other public pages and owns .hero / .footer / .cta / .nav …) - custom properties start with `--al-` - every top-level block (nav, section, footer) carries class `al` so the reset below only touches the new markup. Markup is authored in READING order with logical properties, so the page renders as Figma under dir="rtl" and mirrors under dir="ltr". ========================================================= */ /* The font request that used to live here is now a in App.razor's , byte-identical. This file is loaded from a LAYOUT, i.e. from the body, so an @import here was discovered only after the body had begun parsing — two hops before the first glyph could arrive, on a site whose primary script is Arabic. Only App.razor renders this stylesheet's consumers, so nothing else depended on the import. Do not add it back: add the family to the head link instead. */ :root { /* Brand (theme-independent) */ --al-primary: #18c92f; --al-primary-hover: #16b52a; --al-primary-active: #13a126; --al-primary-light-active: #b7eebf; --al-secondary: #2863e4; --al-secondary-hover: #2459cd; --al-secondary-dark: #1e4aab; /* Surfaces & text (light) */ --al-bg: #ffffff; --al-surface: #ffffff; /* cards, nav pill, faq items */ --al-surface-hero: #f8f7f8; /* hero backdrop */ --al-panel: #f4f7fc; /* app section panel */ --al-muted-bg: #f7f7f7; /* gray light-active */ --al-primary-light: #e8faea; --al-secondary-light: #eaeffc; --al-secondary-light-hover: #dfe8fb; --al-footer-bg: #122d67; --al-footer-text: #fefdfb; /* Backing plate for third-party artwork on the footer's navy: the licence mark and Apple Pay are dark-on-transparent and vanish without it. Stays light in dark mode on purpose — these are other people's brand marks, not our surface. */ --al-footer-chip-bg: #fff; --al-text: #000000; --al-heading: #0e0c0e; --al-body: #47484a; --al-text-2: #515151; /* gray darker — section subtitles */ --al-text-3: #676767; --al-text-nav: #413941; --al-border: #e6e6e6; --al-shadow-soft: #efefef; --al-c-blue: #1e4aab; --al-c-green: #129723; --al-hero-bg-opacity: 0.72; --al-art-filter: none; /* applied to flat illustrations in dark mode */ /* Spacing */ --al-sp-xxs: 4px; --al-sp-xs: 8px; --al-sp-sm: 12px; --al-sp-md: 16px; --al-sp-lg: 24px; --al-sp-xl: 32px; --al-sp-2xl: 48px; --al-sp-4xl: 64px; --al-sp-128: 128px; /* Fonts */ --al-f-main: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; --al-f-plex: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif; --al-f-readex: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif; --al-f-cairo: 'Cairo', 'IBM Plex Sans Arabic', sans-serif; /* Motion — from the Figma prototype reactions */ --al-dur-card: 100ms; --al-dur-hover: 300ms; --al-ease-out: cubic-bezier(0, 0, 0.58, 1); --al-dur-faq: 744ms; --al-ease-quick: linear(0.0, 0.0457, 0.1592, 0.3097, 0.4728, 0.6306, 0.7711, 0.8876, 0.9776, 1.0415, 1.082, 1.1029, 1.1084, 1.1029, 1.0903, 1.0738, 1.0561, 1.0391, 1.024, 1.0115, 1.0019, 0.9952, 0.9909, 0.9888, 0.9882, 0.9889, 0.9903, 0.9921, 0.994, 0.9959, 0.9975, 0.9988, 0.9998, 1.0006, 1.001, 1.0012, 1.0013, 1.0012, 1.001, 1.0008, 1); /* Layout: content FILLS the viewport, held off the edges by a fixed margin. --al-content is no longer the landing's column — it survives only for the footer on the service-shell pages, whose content is still capped at 1100px (wizard.css). */ --al-content: 1280px; --al-gutter-min: 16px; /* Was max(--al-gutter-min, calc(50% - 640px)) — the half that centred a 1280 column. The nav (home-nav.css) and the partners heading (home-partners.css) read this, so dropping that half is what moves them out to the margin with everything else. */ --al-gutter: var(--al-gutter-min); --al-nav-h: 100px; } @media (min-width: 768px) { :root { --al-gutter-min: 40px; } } @media (min-width: 1440px) { :root { --al-gutter-min: 80px; } } @media (max-width: 1023.98px) { :root { --al-nav-h: 72px; } } /* ---------------- Dark theme ---------------- */ [data-theme="dark"] { --al-bg: #0d1220; --al-surface: #161d2e; --al-surface-hero: #0a0f1b; --al-panel: #131a2b; --al-muted-bg: #1b2336; --al-primary-light: rgba(24, 201, 47, 0.16); --al-secondary-light: rgba(40, 99, 228, 0.18); --al-secondary-light-hover: rgba(40, 99, 228, 0.28); --al-footer-bg: #0a1938; --al-footer-text: #eef1f7; --al-text: #f2f4f8; --al-heading: #ffffff; --al-body: #c3c8d2; --al-text-2: #aab1bf; --al-text-3: #9aa1ae; --al-text-nav: #dfe3ea; --al-border: #2a3348; --al-shadow-soft: rgba(0, 0, 0, 0.45); --al-c-blue: #7aa3ff; --al-c-green: #3ddc52; --al-hero-bg-opacity: 0.18; --al-art-filter: brightness(0.92); } /* ---------------- Scoped reset ---------------- */ .al, .al *, .al *::before, .al *::after { box-sizing: border-box; } .al { font-family: var(--al-f-main); color: var(--al-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :lang(en) .al { --al-f-main: 'IBM Plex Sans', 'IBM Plex Sans Arabic', sans-serif; } .al :where(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; padding: 0; font-weight: inherit; } .al :where(ul, ol) { list-style: none; } .al :where(a) { color: inherit; text-decoration: none; } .al :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .al :where(img) { display: block; max-width: 100%; } .al :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--al-secondary); outline-offset: 2px; } /* Landing page body wrapper (HomePage) */ .al-page { position: relative; width: 100%; overflow-x: clip; background: var(--al-bg); } /* Screen-reader only */ .al-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Generic stretch wrapper for inset-positioned artwork (replaced elements don't stretch) */ .al-fill { position: absolute; display: block; } .al-fill > img { width: 100%; height: 100%; max-width: none; } /* Full-width content column, held off the edges by a fixed margin. The margin stays PADDING, deliberately: home-blog.css:225-228 bleeds the mobile card strip back out to the screen edges with margin-inline: calc(-1 * var(--al-gutter-min)), and that only works against padding. Expressing the gutter as margin here collapses the bleed. */ .al-container { width: 100%; padding-inline: var(--al-gutter-min); } /* ---------------- Shared: CTA button (Figma Button CTA 1:121837) ---------------- */ .al-btn-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: var(--al-sp-sm) var(--al-sp-md); border-radius: 999px; background: linear-gradient(to bottom, var(--al-primary), var(--al-primary-hover)); box-shadow: 0 4px 8px 0 rgba(8, 70, 16, 0.05), 0 1px 1px 0 rgba(8, 70, 16, 0.12), 0 4px 4px 0 rgba(0, 0, 0, 0.02); font-family: var(--al-f-main); font-weight: 700; font-size: 14px; line-height: 16px; color: #fff; text-align: center; white-space: nowrap; isolation: isolate; cursor: pointer; transition: box-shadow var(--al-dur-hover) var(--al-ease-out); } .al .al-btn-cta { color: #fff; } .al-btn-cta::before, .al-btn-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: opacity var(--al-dur-hover) var(--al-ease-out); } .al-btn-cta::before { z-index: -1; opacity: 0; background: linear-gradient(to bottom, var(--al-secondary), var(--al-secondary-hover)); box-shadow: inset 0 2px 3.7px 0 rgba(255, 255, 255, 0.2), inset 0 4px 8px 0 var(--al-secondary), inset 0 2px 2px 0 #bccff7; } .al-btn-cta::after { box-shadow: inset 0 2px 3.7px 0 rgba(255, 255, 255, 0.2), inset 0 4px 8px 0 var(--al-primary), inset 0 2px 2px 0 var(--al-primary-light-active); } .al-btn-cta:hover { box-shadow: 0 4px 8px 0 rgba(14, 35, 80, 0.05), 0 1px 1px 0 rgba(14, 35, 80, 0.12), 0 4px 4px 0 rgba(0, 0, 0, 0.02); } .al-btn-cta:hover::before { opacity: 1; } .al-btn-cta:hover::after { opacity: 0; } .al-btn-cta:disabled, .al-btn-cta[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; } /* ---------------- Shared: section heading ---------------- */ .al-section-head { display: flex; flex-direction: column; align-items: center; gap: var(--al-sp-md); text-align: center; } .al-section-head__title { font-weight: 700; font-size: 24px; line-height: 32px; color: var(--al-text); } .al-section-head__sub { font-weight: 400; font-size: 16px; line-height: 24px; color: var(--al-text-2); } .al-c-blue { color: var(--al-c-blue); } .al-c-green { color: var(--al-c-green); } /* Horizontal rule drawn from the exported line asset */ .al-hline { position: relative; width: 100%; height: 0; flex-shrink: 0; } .al-hline img { position: absolute; inset-inline: 0; top: -1px; width: 100%; height: 1px; max-width: none; } /* ---------------- Shared: store badges (app section + footer) ---------------- */ .al-stores { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; } .al-store { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; padding: 10px 20px; border-radius: 8px; background: #000; color: #fff; direction: ltr; /* store badges are Latin artwork in every language */ } .al .al-store { color: #fff; } .al-store[aria-disabled="true"] { cursor: default; } .al-store__icon--apple { width: 19.682px; height: 24px; } .al-store__icon--google { width: 22.273px; height: 24px; } .al-store__text { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--al-f-readex); text-align: start; } .al-store__small { font-size: 12px; line-height: 15px; font-weight: 400; } .al-store__big { font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .al *, .al *::before, .al *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }