/* Tawseelat — one brand colour, the teal of the wordmark. */ :root { --teal: #458591; --teal-deep: #2f6570; --teal-soft: #e8f2f4; --ink: #14252b; --muted: #5f7a82; --bg: #f6fafb; --card: #ffffff; --line: #dde8eb; --radius: 16px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --ink: #e7f1f3; --muted: #9db5bc; --bg: #0f1c20; --card: #152a30; --line: #23404a; --teal-soft: #19353c; --teal-deep: #8cc4ce; color-scheme: dark; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.7; } img { max-width: 100%; display: block; } a { color: var(--teal-deep); } /* Both languages live in every page; the set by site.js hides the one not chosen. With no JavaScript, both remain visible. */ html[data-lang="ar"] .en { display: none !important; } html[data-lang="en"] .ar { display: none !important; } /* ---------------------------------------------------------------- header */ .topbar { position: absolute; inset-inline: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(18px, 4vw, 40px); z-index: 2; } .topbar nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .topbar a { color: #fff; text-decoration: none; font-size: 14px; padding: 6px 12px; border-radius: 999px; } .topbar a:hover { background: rgba(255,255,255,.14); } .topbar .lang { border: 1px solid rgba(255,255,255,.45); } .topbar .mark img { height: 34px; width: auto; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; color: #fff; text-align: center; padding: clamp(110px, 16vw, 170px) 20px clamp(64px, 9vw, 110px); background: radial-gradient(120% 90% at 50% 38%, #5a9aa5 0%, #458591 52%, #2f6570 100%); overflow: hidden; } .hero .logo { width: clamp(190px, 30vw, 300px); margin: 0 auto 28px; filter: drop-shadow(0 8px 30px rgba(0,0,0,.12)); } .hero h1 { font-size: clamp(26px, 4.4vw, 42px); font-weight: 700; margin: 0 0 12px; line-height: 1.35; } .hero p { font-size: clamp(16px, 2.2vw, 20px); margin: 0 auto; max-width: 620px; opacity: .92; } .stores { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .stores span { font-size: 14px; padding: 9px 16px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); } /* ------------------------------------------------------------- sections */ main { max-width: 1060px; margin: 0 auto; padding: 0 20px; } section.block { padding: clamp(48px, 7vw, 84px) 0 0; } section.block > h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 8px; text-align: center; } section.block > .lead { color: var(--muted); text-align: center; margin: 0 auto 32px; max-width: 640px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .card h3 { margin: 0 0 14px; font-size: 20px; color: var(--teal-deep); } .steps { margin: 0; padding: 0; list-style: none; counter-reset: s; } .steps li { position: relative; padding-inline-start: 42px; margin: 0 0 14px; } .steps li::before { counter-increment: s; content: counter(s); position: absolute; inset-inline-start: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; background: var(--teal); } .ar .steps li::before { content: counter(s, arabic-indic); } .points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .point { background: var(--teal-soft); border-radius: var(--radius); padding: 20px; } .point strong { display: block; margin-bottom: 4px; } .point span { color: var(--muted); font-size: 15px; } /* ------------------------------------------------------------ documents */ .doc-hero { background: radial-gradient(120% 120% at 50% 0%, #5a9aa5 0%, #458591 55%, #2f6570 100%); color: #fff; padding: 110px 20px 44px; text-align: center; } .doc-hero h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 38px); } .doc-hero p { margin: 0; opacity: .9; } article.doc { max-width: 780px; margin: 0 auto; padding: 36px 20px 20px; } article.doc h2 { font-size: 21px; margin: 34px 0 10px; color: var(--teal-deep); } article.doc h3 { font-size: 17px; margin: 20px 0 6px; } article.doc p, article.doc li { font-size: 16px; } article.doc ul { padding-inline-start: 22px; } article.doc li { margin-bottom: 6px; } .callout { background: var(--teal-soft); border-inline-start: 4px solid var(--teal); border-radius: 10px; padding: 14px 18px; margin: 18px 0; } .toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 22px; } .toc ol { margin: 0; padding-inline-start: 20px; } /* ---------------------------------------------------------------- footer */ footer.site { margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); padding: 28px 20px 40px; text-align: center; color: var(--muted); font-size: 14px; } footer.site nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; } footer.site a { color: var(--muted); } bdi, .ltr { unicode-bidi: isolate; direction: ltr; }