/* ══════════════════════════════════════════════════════════════════════════ Baytii — "Ishtar & Kashi" The palette is the product's own, not a generic SaaS teal: the glazed lapis of the Ishtar Gate and the Kashi gold of Iraqi tilework, on ivory paper. The type is the brand kit's — Latin first in each stack so Latin takes Bricolage or Plex and Arabic falls through to Reem Kufi or Plex Arabic, one stack, two scripts, no lang switching in CSS. RTL: every rule below is logical (margin-inline, padding-inline, inset-inline, text-align:start). Switching is the whole implementation. ══════════════════════════════════════════════════════════════════════════ */ :root { --lapis: #23388C; --lapis-2: #1B2C73; --lapis-soft: #E4E8F7; --night: #141A38; --night-2: #0D1229; --gold: #D89A2B; /* Kashi gold is 2.19:1 on ivory — the brand kit says so itself: decorative or warning only on light, never copy. Small uppercase kickers ARE copy, so light sections use a darkened gold that clears 4.5:1 on both grounds (5.14 on paper, 4.66 on sand) while still reading as the same colour. */ --gold-ink: #8A5D18; --gold-soft: #F5E7CB; --paper: #F6F2EA; --sand: #EDE7DB; --ink: #232B45; --muted: #5C6379; --line: #E2DED4; --palm: #2E7D5B; --pom: #B3402E; --display: "Bricolage Grotesque", "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif; --body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif; --r: 18px; --r-sm: 12px; --shadow: 0 1px 2px rgba(20,26,56,.04), 0 12px 32px rgba(20,26,56,.08); --shadow-lg: 0 2px 8px rgba(20,26,56,.06), 0 28px 60px rgba(20,26,56,.14); --wrap: 1120px; --z-nav: 50; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--display); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: clamp(2.2rem, 5.5vw, 3.9rem); letter-spacing: -.02em; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.01em; } h3 { font-size: 1.15rem; } p { margin: 0 0 1rem; } /* Arabic is a connected script: negative tracking drags the joins together. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: normal; line-height: 1.35; } a { color: var(--lapis); text-decoration: none; } a:hover { color: var(--lapis-2); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; } .lede { font-size: 1.2rem; color: var(--muted); max-width: 58ch; } .muted { color: var(--muted); } .center { text-align: center; } .center .lede { margin-inline: auto; } .nums { font-variant-numeric: tabular-nums; } /* ─── language switching: one DOM, both languages ─────────────────────────── */ [data-lang="en"] .ar, [data-lang="ar"] .en { display: none; } /* ─── nav ─────────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(20,26,56,.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(246,242,234,.1); } .nav .wrap { display: flex; align-items: center; gap: 1.5rem; height: 68px; } .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--paper); font-family: var(--display); font-weight: 700; font-size: 1.2rem; } .brand:hover { color: #fff; } .nav-links { display: flex; gap: 1.4rem; margin-inline-start: auto; align-items: center; } .nav-links a { color: rgba(246,242,234,.82); font-size: .95rem; } .nav-links a:hover { color: #fff; } @media (max-width: 860px) { .nav-links .hide-sm { display: none; } } .lang { display: inline-flex; border: 1px solid rgba(246,242,234,.28); border-radius: 999px; overflow: hidden; background: rgba(246,242,234,.06); } .lang button { font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; background: transparent; color: rgba(246,242,234,.8); border: 0; padding: .4rem .85rem; min-height: 34px; transition: background .2s, color .2s; } .lang button:hover { color: #fff; } .lang button[aria-pressed="true"] { background: var(--gold); color: #1c1608; } /* ─── buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--body); font-weight: 700; font-size: 1rem; cursor: pointer; padding: .85rem 1.6rem; border-radius: 999px; border: 1px solid transparent; min-height: 48px; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; } .btn-gold { background: var(--gold); color: #1c1608; } .btn-gold:hover { background: #c98d24; color: #1c1608; box-shadow: 0 8px 24px rgba(216,154,43,.3); } .btn-ghost { background: transparent; color: var(--paper); border-color: rgba(246,242,234,.35); } .btn-ghost:hover { background: rgba(246,242,234,.1); color: #fff; } .btn-lapis { background: var(--lapis); color: #fff; } .btn-lapis:hover { background: var(--lapis-2); color: #fff; box-shadow: 0 8px 24px rgba(35,56,140,.28); } .btn-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; } /* ─── hero ────────────────────────────────────────────────────────────────── */ .hero { background: radial-gradient(1100px 520px at 78% -10%, rgba(35,56,140,.55), transparent 60%), linear-gradient(160deg, var(--night) 0%, var(--night-2) 100%); color: var(--paper); padding: clamp(3rem, 7vw, 5.5rem) 0 0; overflow: hidden; } [dir="rtl"] .hero { background: radial-gradient(1100px 520px at 22% -10%, rgba(35,56,140,.55), transparent 60%), linear-gradient(200deg, var(--night) 0%, var(--night-2) 100%); } .hero h1 { color: var(--paper); max-width: 16ch; } .hero .gold { color: var(--gold); } .hero .lede { color: #C4CCE8; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); background: rgba(216,154,43,.12); border: 1px solid rgba(216,154,43,.3); padding: .35rem .9rem; border-radius: 999px; margin-bottom: 1.2rem; } [dir="rtl"] .eyebrow { letter-spacing: normal; } .hero-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; } } .hero-shot { position: relative; margin-top: 1rem; } .hero-shot img.screen { border-radius: 14px; border: 1px solid rgba(246,242,234,.16); box-shadow: 0 30px 70px rgba(0,0,0,.45); } .hero-shot img.phone { position: absolute; width: 27%; inset-inline-end: -4%; bottom: -8%; border-radius: 20px; border: 3px solid rgba(246,242,234,.9); box-shadow: 0 24px 50px rgba(0,0,0,.5); } @media (max-width: 640px) { .hero-shot img.phone { display: none; } } /* stat strip */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(246,242,234,.14); border-radius: var(--r); overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { background: rgba(13,18,41,.85); padding: 1.4rem 1.2rem; } .stat b { display: block; font-family: var(--display); font-size: 1.9rem; color: var(--paper); line-height: 1.1; } .stat span { font-size: .88rem; color: #9AA6CC; } /* ─── sections ────────────────────────────────────────────────────────────── */ section { padding: clamp(3.5rem, 7vw, 6rem) 0; } .section-head { max-width: 62ch; margin-bottom: 2.5rem; } .section-head.center { margin-inline: auto; } .kicker { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); display: block; margin-bottom: .7rem; } /* On a dark ground the full gold clears 6.95:1, so it keeps its brightness. */ .dark .kicker, .hero .kicker { color: var(--gold); } [dir="rtl"] .kicker { letter-spacing: normal; } .alt { background: var(--sand); } .dark { background: linear-gradient(165deg, var(--night), var(--night-2)); color: var(--paper); } .dark h2, .dark h3 { color: var(--paper); } .dark .lede, .dark p { color: #C4CCE8; } /* ─── cards ───────────────────────────────────────────────────────────────── */ .grid { display: grid; gap: 1.2rem; } .g2 { grid-template-columns: 1fr; } .g3 { grid-template-columns: 1fr; } @media (min-width: 720px) { .g2, .g3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .g3 { grid-template-columns: repeat(3, 1fr); } } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.6rem 1.7rem; box-shadow: var(--shadow); transition: box-shadow .25s ease, border-color .25s ease; } .card:hover { box-shadow: var(--shadow-lg); border-color: #CFD6EC; } .card h3 { margin-bottom: .4rem; } .card p { color: var(--muted); margin-bottom: 0; font-size: .97rem; } .dark .card { background: rgba(246,242,234,.05); border-color: rgba(246,242,234,.14); box-shadow: none; } .dark .card:hover { background: rgba(246,242,234,.09); border-color: rgba(246,242,234,.26); } .dark .card p { color: #B4BEDD; } .ico { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--lapis-soft); color: var(--lapis); margin-bottom: 1rem; } .ico svg { width: 22px; height: 22px; } .ico.gold { background: var(--gold-soft); color: #8A6A20; } .dark .ico { background: rgba(157,174,240,.14); color: #9DAEF0; } /* problem → solution */ .pair { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow); } @media (min-width: 760px) { .pair { grid-template-columns: 1fr 1fr; } } .pair > div { padding: 1.5rem 1.6rem; } .pair .prob { background: #FBF4F2; border-inline-end: 1px solid var(--line); } @media (max-width: 759px) { .pair .prob { border-inline-end: 0; border-bottom: 1px solid var(--line); } } .pair h3 { font-size: 1.02rem; } .pair .prob h3 { color: var(--pom); } .pair .sol h3 { color: var(--palm); } .pair p { margin-bottom: 0; color: var(--muted); font-size: .96rem; } /* ─── screenshot showcase ─────────────────────────────────────────────────── */ .shot { border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; } .dark .shot { border-color: rgba(246,242,234,.16); } figure { margin: 0; } figcaption { font-size: .92rem; color: var(--muted); margin-top: .8rem; } .dark figcaption { color: #A9B4D6; } figcaption b { display: block; color: var(--ink); font-family: var(--display); font-size: 1.02rem; } .dark figcaption b { color: var(--paper); } .split { display: grid; gap: 2.2rem; align-items: center; grid-template-columns: 1fr; } @media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; } } .split.rev .split-media { order: -1; } @media (max-width: 939px) { .split.rev .split-media { order: 0; } } .phones { display: flex; gap: 1rem; justify-content: center; align-items: flex-end; } .phones img { width: 30%; max-width: 210px; border-radius: 22px; border: 3px solid rgba(246,242,234,.9); box-shadow: 0 22px 46px rgba(0,0,0,.35); } .phones img:nth-child(2) { width: 34%; max-width: 240px; } .checks { list-style: none; padding: 0; margin: 1.2rem 0 0; } .checks li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; font-size: .98rem; } .checks svg { width: 20px; height: 20px; flex: none; margin-top: .25rem; color: var(--palm); } .dark .checks svg { color: #6FD3A5; } /* module pills */ .pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; } .pill { font-size: .88rem; font-weight: 600; padding: .4rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); } .pill.on { background: var(--lapis); border-color: var(--lapis); color: #fff; } .dark .pill { background: rgba(246,242,234,.07); border-color: rgba(246,242,234,.18); color: var(--paper); } /* CTA */ .cta { background: linear-gradient(150deg, var(--lapis) 0%, var(--night) 100%); color: var(--paper); border-radius: var(--r); padding: clamp(2.2rem, 5vw, 3.5rem); text-align: center; } .cta h2 { color: var(--paper); } .cta p { color: #C4CCE8; max-width: 52ch; margin-inline: auto; } .cta .btn-row { justify-content: center; } /* ─── footer ──────────────────────────────────────────────────────────────── */ .foot { background: var(--night-2); color: #9AA6CC; padding: 2.5rem 0; font-size: .92rem; } .foot a { color: #C4CCE8; } .foot a:hover { color: #fff; } .foot-grid { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; } .foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-inline-start: auto; } /* ─── legal pages (privacy / terms / contact) ─────────────────────────────── */ .doc { max-width: 760px; } .doc table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; } .doc th, .doc td { text-align: start; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; } .doc th { background: var(--sand); font-weight: 700; } .note { background: var(--sand); border-radius: var(--r-sm); padding: 1rem 1.2rem; margin: 1.5rem 0; } .note p:last-child { margin-bottom: 0; } /* ─── motion, honoured ────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ─── the name and the mark ───────────────────────────────────────────────── */ .brandstory { background: radial-gradient(900px 400px at 80% 0%, rgba(216,154,43,.10), transparent 62%), var(--sand); } [dir="rtl"] .brandstory { background: radial-gradient(900px 400px at 20% 0%, rgba(216,154,43,.10), transparent 62%), var(--sand); } .seal-holder { display: grid; place-items: center; } .seal-holder svg { border-radius: 28px; box-shadow: 0 24px 60px rgba(35,56,140,.28); width: clamp(110px, 22vw, 168px); height: auto; } .brandstory p { max-width: 56ch; } .brandstory b { color: var(--ink); font-weight: 700; } .voice { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--lapis); border-inline-start: 3px solid var(--gold); padding-inline-start: 1rem; margin-top: 1.6rem; }