/* ========================================================================== Yimken — public website Design tokens ported 1:1 from the Flutter app: lib/theme/app_colors.dart · app_spacing.dart · app_typography.dart Layout uses CSS logical properties throughout, so a single stylesheet serves Arabic (RTL) and English (LTR) without a mirrored variant. ========================================================================== */ /* ---------- Tajawal, subset from assets/fonts/*.ttf ---------- */ @font-face { font-family: 'Tajawal'; src: url('../fonts/tajawal-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../fonts/tajawal-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../fonts/tajawal-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../fonts/tajawal-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } :root { /* Brand — AppColors */ --accent: #0066ff; --accent-pressed: #0052cc; --accent-soft: #e6f0ff; --primary: #0a0a0a; /* Surfaces */ --bg: #f8f9fa; --surface: #ffffff; --surface-alt: #f3f4f6; /* Text */ --text-main: #111827; --text-muted: #4b5563; --text-light: #9ca3af; /* Borders */ --border: #e5e7eb; --border-strong: #d1d5db; /* Status */ --error: #dc2626; --success: #15803d; --warning: #d97706; /* Spacing — AppSpacing */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-xxl: 32px; /* Radius — AppRadius */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-card: 18px; --r-control: 14px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06); --shadow-md: 0 4px 16px rgba(17, 24, 39, .07); --shadow-lg: 0 12px 40px rgba(17, 24, 39, .10); --maxw: 1120px; --header-h: 68px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 800; color: var(--text-main); } p { margin: 0; } ul, ol { margin: 0; padding-inline-start: 1.35em; } li { margin-block: 6px; } a { color: var(--accent); text-decoration: none; border-radius: var(--r-sm); } a:hover { text-decoration: underline; } /* ---------- Bilingual visibility ---------- Both languages ship in the HTML source so crawlers and reviewers can read either one; CSS shows the language the attribute selects. */ html[lang='ar'] [data-lang='en'] { display: none; } html[lang='en'] [data-lang='ar'] { display: none; } /* ---------- Accessibility ---------- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .skip-link { position: absolute; inset-inline-start: var(--sp-lg); inset-block-start: -100px; z-index: 200; background: var(--accent); color: #fff; padding: 10px 18px; border-radius: var(--r-md); font-weight: 700; transition: inset-block-start .15s ease; } .skip-link:focus { inset-block-start: var(--sp-md); text-decoration: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-xl); } .section { padding-block: clamp(48px, 7vw, 88px); } .section--tight { padding-block: clamp(36px, 5vw, 60px); } .section--alt { background: var(--surface); border-block: 1px solid var(--border); } .section-head { max-width: 720px; margin-block-end: var(--sp-xxl); } .section-head p { color: var(--text-muted); margin-block-start: var(--sp-md); font-size: 1.0625rem; } .eyebrow { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: 5px 14px; border-radius: var(--r-pill); margin-block-end: var(--sp-lg); } h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); letter-spacing: -.01em; } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em; } h3 { font-size: clamp(1.125rem, 1.7vw, 1.3rem); } /* ---------- Header ---------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block-end: 1px solid var(--border); } .site-header .wrap { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-lg); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text-main); font-size: 1.25rem; flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand img { width: 34px; height: 34px; border-radius: 9px; } .nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; } .nav a { color: var(--text-muted); font-weight: 500; font-size: .9375rem; padding: 8px 12px; border-radius: var(--r-md); white-space: nowrap; } .nav a:hover { color: var(--text-main); background: var(--surface-alt); text-decoration: none; } .nav a[aria-current='page'] { color: var(--accent); font-weight: 700; } .header-actions { display: flex; align-items: center; gap: var(--sp-sm); margin-inline-start: var(--sp-sm); } .lang-toggle { font-family: inherit; font-size: .875rem; font-weight: 700; color: var(--text-main); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 7px 16px; cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } .lang-toggle:hover { background: var(--surface-alt); border-color: var(--text-light); } .nav-toggle { display: none; font-family: inherit; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); width: 40px; height: 38px; cursor: pointer; padding: 0; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 17px; height: 2px; background: var(--text-main); border-radius: 2px; position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; inset-inline-start: 0; width: 17px; height: 2px; background: var(--text-main); border-radius: 2px; } .nav-toggle span::before { inset-block-start: -6px; } .nav-toggle span::after { inset-block-start: 6px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm); font-family: inherit; font-size: 1rem; font-weight: 700; padding: 13px 26px; border-radius: var(--r-control); border: 1px solid transparent; cursor: pointer; transition: background .15s ease, transform .1s ease, border-color .15s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-pressed); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .btn--ghost:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .6); } .btn--outline { background: var(--surface); color: var(--text-main); border-color: var(--border-strong); } .btn--outline:hover { background: var(--surface-alt); } .btn svg { width: 19px; height: 19px; flex-shrink: 0; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 80% -10%, rgba(0, 102, 255, .40), transparent 60%), linear-gradient(160deg, #0a0a0a 0%, #06255e 58%, #0052cc 100%); color: #fff; padding-block: clamp(64px, 10vw, 116px); } .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%); -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; } .hero h1 { color: #fff; max-width: 17ch; } .hero-lead { margin-block-start: var(--sp-xl); font-size: clamp(1.0625rem, 1.9vw, 1.25rem); color: #cddcf7; max-width: 62ch; line-height: 1.8; } .hero .eyebrow { background: rgba(255, 255, 255, .12); color: #bcd4ff; border: 1px solid rgba(255, 255, 255, .18); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-block-start: var(--sp-xxl); } .hero-pills { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-block-start: var(--sp-xxl); padding-block-start: var(--sp-xl); border-block-start: 1px solid rgba(255, 255, 255, .14); } .hero-pills span { font-size: .875rem; font-weight: 500; color: #cddcf7; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r-pill); padding: 7px 16px; } /* ---------- Cards ---------- */ .grid { display: grid; gap: var(--sp-xl); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-xl); box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); } .card h3 { margin-block-end: var(--sp-md); } .card p { color: var(--text-muted); font-size: .9688rem; } .card ul { color: var(--text-muted); font-size: .9375rem; margin-block-start: var(--sp-md); } .card-icon { width: 46px; height: 46px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-block-end: var(--sp-lg); } .card-icon svg { width: 24px; height: 24px; } /* ---------- Numbered steps ---------- */ .steps { counter-reset: step; display: grid; gap: var(--sp-xl); list-style: none; padding: 0; } .step { display: flex; gap: var(--sp-lg); align-items: flex-start; } .step-num { counter-increment: step; flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .9375rem; } .step-num::before { content: counter(step); } .step h3 { font-size: 1.0625rem; margin-block-end: 4px; } .step p { color: var(--text-muted); font-size: .9688rem; } /* ---------- Trust list ---------- */ .checks { list-style: none; padding: 0; display: grid; gap: var(--sp-lg); } .checks li { display: flex; gap: var(--sp-md); align-items: flex-start; margin: 0; } .checks svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--success); margin-block-start: 3px; } .checks strong { display: block; color: var(--text-main); } .checks span { color: var(--text-muted); font-size: .9688rem; } /* ---------- Contact ---------- */ .contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-xxl); box-shadow: var(--shadow-sm); } .contact-value { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; color: var(--text-main); direction: ltr; unicode-bidi: isolate; display: inline-block; margin-block: var(--sp-sm) var(--sp-lg); } /* ---------- Notices ---------- */ .notice { border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-lg) var(--sp-xl); color: var(--text-muted); font-size: .9375rem; } .notice--warn { border-inline-start-color: var(--warning); background: #fffbf5; } .notice strong { color: var(--text-main); } /* ---------- Legal documents ---------- */ .doc-header { background: var(--surface); border-block-end: 1px solid var(--border); padding-block: clamp(36px, 5vw, 60px); } .doc-meta { display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-xl); margin-block-start: var(--sp-lg); color: var(--text-muted); font-size: .875rem; } .doc-meta b { color: var(--text-main); font-weight: 700; } .doc { max-width: 800px; margin-inline: auto; padding-block: clamp(36px, 5vw, 56px); } .doc section { margin-block-end: var(--sp-xxl); scroll-margin-top: calc(var(--header-h) + 16px); } .doc h2 { font-size: 1.3rem; padding-block-end: var(--sp-md); border-block-end: 1px solid var(--border); margin-block-end: var(--sp-lg); } .doc p { color: var(--text-muted); margin-block-end: var(--sp-md); } .doc ul { color: var(--text-muted); margin-block-end: var(--sp-md); } .doc strong { color: var(--text-main); } .toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-xl); margin-block-end: var(--sp-xxl); } .toc h2 { font-size: 1rem; border: 0; padding: 0; margin-block-end: var(--sp-md); } .toc ol { columns: 2; column-gap: var(--sp-xl); font-size: .9375rem; } .toc li { break-inside: avoid; } /* ---------- Footer ---------- */ .site-footer { background: var(--primary); color: #cbd5e1; padding-block: var(--sp-xxl) var(--sp-xl); margin-block-start: auto; } .footer-grid { display: grid; gap: var(--sp-xxl); grid-template-columns: 1.4fr 1fr 1fr; padding-block-end: var(--sp-xxl); border-block-end: 1px solid rgba(255, 255, 255, .12); } .site-footer .brand { color: #fff; } .site-footer p { color: #94a3b8; font-size: .9375rem; margin-block-start: var(--sp-md); max-width: 46ch; } .site-footer h4 { color: #fff; font-size: .9375rem; margin-block-end: var(--sp-md); } .site-footer ul { list-style: none; padding: 0; } .site-footer li { margin-block: 8px; } .site-footer a { color: #cbd5e1; font-size: .9375rem; } .site-footer a:hover { color: #fff; } .footer-bottom { padding-block-start: var(--sp-xl); display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: space-between; color: #94a3b8; font-size: .875rem; } /* ---------- 404 ---------- */ .notfound { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: var(--sp-xxl); } .notfound .code { font-size: clamp(4rem, 14vw, 7.5rem); font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -.03em; } .notfound p { color: var(--text-muted); margin-block: var(--sp-lg) var(--sp-xl); } .notfound-links { display: flex; flex-wrap: wrap; gap: var(--sp-md); justify-content: center; } /* ---------- Page shell ---------- */ .page { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } /* ---------- Utilities ---------- Kept as classes rather than style="" attributes so the site can ship a strict Content-Security-Policy with no 'unsafe-inline' in style-src. */ .u-mt-0 { margin-block-start: 0; } .u-mt-xl { margin-block-start: var(--sp-xl); } .u-my-lg { margin-block: var(--sp-lg); } .u-pt-0 { padding-block-start: 0; } .u-lead { font-size: 1.0625rem; } .u-h2-sm { font-size: 1.25rem; } .u-intro { color: var(--text-muted); margin-block-start: var(--sp-md); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .toc ol { columns: 1; } } @media (max-width: 760px) { .wrap { padding-inline: var(--sp-lg); } .nav-toggle { display: inline-flex; } .nav { position: absolute; inset-block-start: var(--header-h); inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-block-end: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--sp-sm); display: none; } .nav[data-open='true'] { display: flex; } .nav a { padding: 12px var(--sp-lg); font-size: 1rem; } .header-actions { margin-inline-start: auto; } .hero-actions .btn { width: 100%; } .footer-grid { grid-template-columns: 1fr; gap: var(--sp-xl); } .contact-card { padding: var(--sp-xl); } } @media (max-width: 420px) { .brand span { display: none; } } /* ---------- Motion / print ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media print { .site-header, .site-footer, .skip-link, .toc { display: none; } body { background: #fff; font-size: 12pt; } .doc { max-width: none; } }