/* Tabby & Tamara for Odoo, by Kerneltics. Arabic is the canonical language, so the sheet is written RTL-first and uses logical properties (inline-start / inline-end) throughout; the English build only flips `dir` on and needs no separate rules. */ :root { --ink: #0B1220; --ink-2: #131F35; --paper: #FFFFFF; --bg: #F7F9FC; --line: #E3E8F0; --text: #1B2436; --muted: #5A6478; --faint: #8A94A6; --tabby: #6CFF93; --tabby-ink: #1A1919; --tamara-a: #FE9F7A; --tamara-b: #D467BD; --odoo: #714B67; --ok: #0A7D4F; --radius: 16px; --shell: 1120px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; /* Belt and braces: a single overflowing child must never shift the whole RTL document sideways. Real overflow is fixed at the source above. */ overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "Tajawal", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; } html[lang="en"] body { font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; margin: 0; font-weight: 800; } h1 { font-size: clamp(32px, 5.2vw, 54px); } h2 { font-size: clamp(25px, 3.4vw, 36px); } h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; } p { margin: 0 0 1em; } .shell { max-width: var(--shell); margin-inline: auto; padding-inline: 22px; } .section { padding-block: clamp(54px, 8vw, 96px); } .section--tint { background: var(--paper); } .eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ok); margin-bottom: 12px; } .lede { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 62ch; } /* ---------- header ---------- */ .nav { position: sticky; top: 0; z-index: 30; background: rgba(247, 249, 252, .86); backdrop-filter: saturate(140%) blur(12px); border-block-end: 1px solid var(--line); } .nav__in { display: flex; align-items: center; gap: 18px; height: 62px; } .nav__brand { font-weight: 800; letter-spacing: -.02em; text-decoration: none; font-size: 16.5px; } .nav__spacer { margin-inline-start: auto; } .nav a.nav__link { text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 600; } .nav a.nav__link:hover { color: var(--text); } /* Below ~720px the five nav items plus the CTA are wider than the viewport, which pushed the whole document sideways and clipped the RTL layout. Keep only the brand, the language switch and the CTA. */ @media (max-width: 720px) { .nav__in { gap: 10px; height: 58px; } .nav__brand { font-size: 14.5px; } .nav a.nav__link:not(.nav__link--lang) { display: none; } .nav .btn--sm { padding-inline: 13px; font-size: 13.5px; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding-inline: 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 1px solid transparent; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--ink); color: #fff; } .btn--primary:hover { box-shadow: 0 12px 28px -12px rgba(11, 18, 32, .7); } .btn--wa { background: #25D366; color: #06301A; } .btn--wa:hover { box-shadow: 0 12px 28px -12px rgba(37, 211, 102, .8); } .btn--ghost { background: transparent; border-color: var(--line); color: var(--text); } .btn--ghost:hover { border-color: var(--faint); } .btn--sm { height: 40px; font-size: 14.5px; padding-inline: 17px; } /* ---------- hero ---------- */ .hero { background: var(--ink); color: #fff; padding-block: clamp(52px, 8vw, 92px); } .hero h1 { color: #fff; } .hero .lede { color: #AEB9CB; } .hero__grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 940px) { .hero__grid { grid-template-columns: 1.02fr 1fr; gap: 52px; } } .brandword--tabby { color: var(--tabby); } .brandword--tamara { background: linear-gradient(90deg, var(--tamara-a), var(--tamara-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; } .chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding-inline: 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #D5DEEC; font-size: 13px; font-weight: 600; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* --ink on the ink hero is invisible; invert the primary button here. */ .hero .btn--primary { background: #fff; color: var(--ink); } .hero .btn--primary:hover { box-shadow: 0 12px 30px -12px rgba(255, 255, 255, .45); } .hero__note { margin-top: 16px; color: #7E8CA3; font-size: 13.5px; } /* No background: these GIFs carry their own, and a white plate behind a rounded dark frame showed as pale notches at the corners. */ .shot { border-radius: var(--radius); overflow: hidden; display: block; } .shot__cap { margin-top: 10px; font-size: 13px; color: #7E8CA3; } /* ---------- cards / grid ---------- */ .grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } .card h3 { margin-bottom: 8px; } .card p { color: var(--muted); font-size: 15.5px; margin: 0; } .card__ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #ECFDF3; color: var(--ok); margin-bottom: 14px; } /* ---------- feature rows ---------- */ .feat { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: center; } @media (min-width: 940px) { .feat { grid-template-columns: 1fr 1fr; gap: 52px; } } .feat--flip > :first-child { order: 2; } @media (max-width: 939px) { .feat--flip > :first-child { order: 0; } } .ticks { list-style: none; margin: 18px 0 0; padding: 0; } .ticks li { position: relative; padding-inline-start: 27px; margin-bottom: 10px; color: var(--muted); } .ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); } /* ---------- comparison ---------- */ .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } table.cmp { width: 100%; border-collapse: collapse; min-width: 620px; } table.cmp th, table.cmp td { padding: 15px 18px; text-align: start; border-block-end: 1px solid var(--line); font-size: 15.5px; } table.cmp thead th { background: #F3F6FA; font-weight: 700; font-size: 14px; color: var(--muted); } table.cmp tbody tr:last-child td { border-block-end: 0; } table.cmp td.yes { color: var(--ok); font-weight: 700; } table.cmp td.no { color: #B4BCC9; } .cmp__note { margin-top: 12px; font-size: 13px; color: var(--faint); } /* ---------- price ---------- */ .price { background: var(--ink); color: #fff; border-radius: 22px; padding: clamp(30px, 5vw, 52px); text-align: center; } .price__fig { font-size: clamp(44px, 7vw, 68px); font-weight: 900; letter-spacing: -.04em; } .price__sub { color: #AEB9CB; margin-bottom: 26px; } .price .btn--ghost { border-color: rgba(255,255,255,.26); color: #fff; } /* ---------- faq ---------- */ .faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 13px; padding: 16px 20px; margin-bottom: 11px; } .faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: inline-end; color: var(--faint); font-weight: 400; font-size: 22px; line-height: 1; } .faq details[open] summary::after { content: "\2212"; } .faq details p { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; } /* ---------- posts ---------- */ .postlist { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .postlist a { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: border-color .16s ease, transform .16s ease; } .postlist a:hover { border-color: var(--faint); transform: translateY(-2px); } .postlist h3 { margin-bottom: 7px; } .postlist p { color: var(--muted); font-size: 15px; margin: 0; } .prose { max-width: 74ch; } .prose h2 { margin: 2em 0 .5em; } .prose h3 { margin: 1.6em 0 .4em; } .prose ul, .prose ol { padding-inline-start: 1.3em; color: var(--muted); } .prose li { margin-bottom: .45em; } .prose code { background: #EEF1F6; border-radius: 5px; padding: .12em .4em; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .prose pre { background: var(--ink); color: #E6EDF7; padding: 18px; border-radius: 12px; overflow-x: auto; } .prose pre code { background: none; padding: 0; color: inherit; } .prose blockquote { margin: 1.4em 0; padding-inline-start: 18px; border-inline-start: 3px solid var(--tabby); color: var(--muted); } .prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; } .prose th, .prose td { border: 1px solid var(--line); padding: 10px 13px; text-align: start; font-size: 15.5px; } .prose img { border-radius: 12px; border: 1px solid var(--line); } /* ---------- footer ---------- */ .foot { background: var(--ink); color: #AEB9CB; padding-block: 52px; font-size: 14.5px; } .foot a { color: #D5DEEC; text-decoration: none; } .foot a:hover { text-decoration: underline; } .foot__grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .foot h4 { color: #fff; font-size: 15px; margin: 0 0 10px; } .foot__legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10); font-size: 13px; color: #7E8CA3; } /* ---------- floating whatsapp ---------- */ .wa-float { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(37,211,102,.75); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }