/* int.sa original landing — shared theme. * * Dark/light is controlled by `data-theme="dark"` or `data-theme="light"` on * . Both are also defined under prefers-color-scheme so the page is * usable even before theme.js runs (avoids a flash of wrong theme). * * Every color, border, and surface goes through a variable. Menus and dropdowns * pull their fg/bg from variables too — so there's no path for the system * (or a stylesheet load order glitch) to render foreground=white on background= * white. The contrast pairs are explicit. */ :root { --bg: #ffffff; --bg-soft: #f8fafc; --bg-tint: #eff6ff; --bg-elev: #ffffff; --surface: #ffffff; --ink: #0f172a; --ink-2: #334155; --ink-3: #64748b; --line: #e2e8f0; --line-2: #cbd5e1; --primary: #2563eb; --primary-hover: #1d4ed8; --primary-soft: #dbeafe; --on-primary: #ffffff; --accent: #7c3aed; --success: #16a34a; --danger: #dc2626; --warning: #d97706; --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow: 0 4px 14px rgba(15,23,42,0.08); --shadow-lg: 0 20px 50px -20px rgba(15,23,42,0.18); --radius: 12px; --radius-lg: 18px; color-scheme: light; } [data-theme="dark"] { --bg: #0b1220; --bg-soft: #111a2e; --bg-tint: #15233e; --bg-elev: #0f1a30; --surface: #111a2e; --ink: #e8ecf4; --ink-2: #b6c2d6; --ink-3: #8b97ac; --line: #1f2a44; --line-2: #2a3a5e; --primary: #60a5fa; --primary-hover: #93c5fd; --primary-soft: #1e3a8a; --on-primary: #061226; --accent: #a78bfa; --success: #22c55e; --danger: #f87171; --warning: #fbbf24; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 4px 14px rgba(0,0,0,0.5); --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.7); color-scheme: dark; } /* OS preference fallback if no data-theme is set yet (e.g. JS disabled). */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0b1220; --bg-soft: #111a2e; --bg-tint: #15233e; --bg-elev: #0f1a30; --surface: #111a2e; --ink: #e8ecf4; --ink-2: #b6c2d6; --ink-3: #8b97ac; --line: #1f2a44; --line-2: #2a3a5e; --primary: #60a5fa; --primary-hover: #93c5fd; --primary-soft: #1e3a8a; --on-primary: #061226; --accent: #a78bfa; --success: #22c55e; --danger: #f87171; --warning: #fbbf24; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 4px 14px rgba(0,0,0,0.5); --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.7); color-scheme: dark; } } /* --------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); } html { scroll-behavior: smooth; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* No transition on first paint so the saved theme appears instantly. */ } body.theme-ready, body.theme-ready * { /* Smooth transitions only after JS has applied the saved theme. */ transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } html[dir="rtl"] body { font-family: "Inter", "Noto Sans Arabic", -apple-system, sans-serif; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); } img, svg { max-width: 100%; display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* --------------------------------------------------- nav */ nav.site { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } nav.site .row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 24px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); } .logo:hover { color: var(--ink); } .logo-mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--primary) 70%, transparent); flex-shrink: 0; } .nav-links { display: flex; gap: 28px; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 6px 2px; border-bottom: 2px solid transparent; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--primary); border-bottom-color: var(--primary); } .nav-cta { display: flex; align-items: center; gap: 10px; } @media (max-width: 880px) { .nav-links { display: none; } } /* Mobile menu toggle */ .nav-mobile-toggle { display: none; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 6px 10px; cursor: pointer; font-family: inherit; font-size: 18px; line-height: 1; } @media (max-width: 880px) { .nav-mobile-toggle { display: inline-flex; } } .nav-mobile-panel { display: none; position: fixed; top: 60px; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px 24px; z-index: 55; } .nav-mobile-panel.open { display: block; } .nav-mobile-panel a { display: block; padding: 10px 0; color: var(--ink); font-size: 16px; border-bottom: 1px solid var(--line); } .nav-mobile-panel a:last-child { border-bottom: 0; } /* --------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; text-decoration: none; } .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 14px -4px color-mix(in srgb, var(--primary) 55%, transparent); } .btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--bg-soft); color: var(--ink); } .btn-light { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-light:hover { background: var(--bg-soft); } .arrow { transition: transform 0.2s; display: inline-block; } .btn:hover .arrow { transform: translateX(2px); } html[dir="rtl"] .arrow { transform: scaleX(-1); } html[dir="rtl"] .btn:hover .arrow { transform: translateX(-2px) scaleX(-1); } /* --------------------------------------------------- icon button (theme + lang) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px solid var(--line); color: var(--ink-2); border-radius: 10px; padding: 7px 10px; font-size: 14px; font-family: inherit; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .icon-btn:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--line-2); } .icon-btn .caret { font-size: 10px; opacity: 0.6; } /* --------------------------------------------------- dropdown (THE WHITE-ON-WHITE FIX) */ /* Every dropdown surface explicitly has background, foreground, and border * pulled from theme variables. In dark mode the menu uses dark bg + light text; * in light it's light bg + dark text. Neither mode inherits from . */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 80; display: none; } .dropdown.open .dropdown-menu { display: block; } html[dir="rtl"] .dropdown-menu { right: auto; left: 0; } .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; background: transparent; color: var(--ink); border: 0; text-align: start; font-family: inherit; font-size: 14px; cursor: pointer; text-decoration: none; } .dropdown-item:hover { background: var(--bg-soft); color: var(--ink); } .dropdown-item.active { background: var(--primary-soft); color: var(--primary); } .dropdown-item .check { margin-left: auto; opacity: 0.8; } html[dir="rtl"] .dropdown-item .check { margin-left: 0; margin-right: auto; } /* --------------------------------------------------- hero */ .hero { padding: 80px 0 60px; position: relative; overflow: hidden; background: var(--bg); } .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%), radial-gradient(circle 400px at 18% 78%, color-mix(in srgb, var(--accent) 10%, transparent), transparent); } .hero.compact { padding: 60px 0 40px; } .hero-inner { position: relative; text-align: center; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); font-size: 13px; font-weight: 500; color: var(--primary); margin-bottom: 22px; } .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); } .hero h1 { font-size: clamp(36px, 5.8vw, 64px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; margin: 0 auto 22px; max-width: 880px; color: var(--ink); } .hero h1 .accent { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero .lead { color: var(--ink-2); font-size: clamp(16px, 1.7vw, 19px); max-width: 660px; margin: 0 auto 32px; } .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; } .trust-row { color: var(--ink-3); font-size: 13.5px; display: inline-flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; } .trust-row span { display: inline-flex; align-items: center; gap: 6px; } .trust-row .ck { color: var(--success); font-weight: 700; } /* --------------------------------------------------- sections */ .section { padding: 90px 0; background: var(--bg); } .section.tinted { background: var(--bg-soft); } .section-head { text-align: center; max-width: 720px; margin: 0 auto 50px; } .eyebrow { display: inline-block; color: var(--primary); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; } .section h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 800; margin: 0 0 14px; color: var(--ink); } .section .sub { color: var(--ink-2); font-size: 17px; margin: 0; } /* --------------------------------------------------- stat strip */ .stat-strip { padding: 36px 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } @media (max-width: 760px) { .stat-row { grid-template-columns: 1fr 1fr; gap: 28px; } } .stat-row .num { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); } .stat-row .num .accent { color: var(--primary); } .stat-row .lbl { color: var(--ink-3); font-size: 13px; margin-top: 2px; } /* --------------------------------------------------- pillars */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 920px) { .pillars { grid-template-columns: 1fr; } } .pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; color: var(--ink); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); } .pillar .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--primary-soft); color: var(--primary); margin-bottom: 16px; } .pillar h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .pillar p.desc { color: var(--ink-2); margin: 0 0 20px; font-size: 14.5px; } .pillar ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); padding-top: 16px; } .pillar li { padding: 7px 0; color: var(--ink-2); font-size: 13.5px; display: flex; align-items: center; gap: 10px; } .check { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; } /* --------------------------------------------------- feature grid */ .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); } @media (max-width: 920px) { .feat-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } } .feat-cell { background: var(--surface); padding: 26px; color: var(--ink); } .feat-cell .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--bg-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 14px; font-weight: 800; } .feat-cell h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); } .feat-cell p { margin: 0; color: var(--ink-2); font-size: 13.5px; } /* --------------------------------------------------- pricing */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 920px) { .pricing { grid-template-columns: 1fr; } } .plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; position: relative; color: var(--ink); } .plan.popular { border-color: var(--primary); border-width: 2px; box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--primary) 30%, transparent); } .plan .pop-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--on-primary); padding: 4px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .plan h4 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); } .plan .blurb { color: var(--ink-3); font-size: 13.5px; margin: 0 0 22px; } .plan .price { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); } .plan .price span { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-inline-start: 4px; } .plan ul { list-style: none; padding: 20px 0 24px; margin: 22px 0 0; border-top: 1px solid var(--line); } .plan li { padding: 7px 0; color: var(--ink-2); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; } /* --------------------------------------------------- final cta */ .final-cta { margin: 80px auto; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 28px; padding: 70px 40px; text-align: center; color: var(--on-primary); position: relative; overflow: hidden; } .final-cta h2 { color: var(--on-primary); font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; letter-spacing: -0.025em; } .final-cta p { color: var(--on-primary); opacity: 0.95; font-size: 17px; max-width: 540px; margin: 0 auto 28px; } .final-cta .btn-light { background: var(--surface); color: var(--ink); } .final-cta .btn-ghost { background: transparent; color: var(--on-primary); border-color: color-mix(in srgb, var(--on-primary) 30%, transparent); } .final-cta .btn-ghost:hover { background: color-mix(in srgb, var(--on-primary) 12%, transparent); color: var(--on-primary); } /* --------------------------------------------------- footer */ footer.site { background: var(--bg-soft); border-top: 1px solid var(--line); color: var(--ink-3); padding: 56px 0 28px; } footer.site .f-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; } @media (max-width: 760px) { footer.site .f-grid { grid-template-columns: 1fr 1fr; } } footer.site h5 { color: var(--ink); font-size: 14px; margin: 0 0 12px; font-weight: 600; } footer.site ul { list-style: none; padding: 0; margin: 0; } footer.site li { margin-bottom: 8px; font-size: 13.5px; } footer.site a { color: var(--ink-2); } footer.site a:hover { color: var(--ink); } footer.site .logo { color: var(--ink); margin-bottom: 14px; } footer.site .blurb { color: var(--ink-3); font-size: 13.5px; max-width: 320px; line-height: 1.55; } footer.site .bot { padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* --------------------------------------------------- forms */ input, select, textarea, button { font-family: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface); } input[type="text"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; } input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); } ::placeholder { color: var(--ink-3); } /* --------------------------------------------------- testimonials */ .tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 920px) { .tg { grid-template-columns: 1fr; } } .quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; color: var(--ink); } .quote .stars { color: var(--warning); margin-bottom: 12px; letter-spacing: 2px; } .quote p { font-size: 15px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.6; } .quote .who { display: flex; align-items: center; gap: 12px; } .quote .who .av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), var(--accent)); } .quote .who .nm { font-weight: 600; font-size: 14px; color: var(--ink); } .quote .who .rl { color: var(--ink-3); font-size: 12.5px; } /* --------------------------------------------------- faq */ .faq { max-width: 760px; margin: 0 auto; } details.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; color: var(--ink); } details.faq-item summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } details.faq-item summary::-webkit-details-marker { display: none; } details.faq-item summary::after { content: '+'; font-size: 22px; color: var(--ink-3); transition: transform 0.2s; } details.faq-item[open] summary::after { transform: rotate(45deg); } details.faq-item .answer { padding-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.6; } /* --------------------------------------------------- compare table */ .compare { width: 100%; border-collapse: collapse; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-top: 40px; } .compare th, .compare td { padding: 14px 18px; text-align: start; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); } .compare thead th { background: var(--bg-soft); font-weight: 700; color: var(--ink); } .compare tbody tr:last-child td { border-bottom: 0; } .compare td.cen { text-align: center; } .compare .yes { color: var(--success); font-weight: 700; } .compare .no { color: var(--ink-3); } /* --------------------------------------------------- alternating feature blocks */ .feat-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 100px; } .feat-block:last-child { margin-bottom: 0; } .feat-block.reverse .feat-text { order: 2; } @media (max-width: 920px) { .feat-block { grid-template-columns: 1fr; gap: 32px; margin-bottom: 70px; } .feat-block.reverse .feat-text { order: 0; } } .feat-text h3 { font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -0.02em; margin: 10px 0 16px; line-height: 1.18; font-weight: 800; color: var(--ink); } .feat-text p { color: var(--ink-2); font-size: 16px; margin: 0 0 22px; max-width: 480px; } .feat-text ul.bullets { list-style: none; padding: 0; margin: 0 0 28px; } .feat-text ul.bullets li { padding: 7px 0; color: var(--ink); font-size: 14.5px; display: flex; align-items: flex-start; gap: 10px; } .feat-mock { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; min-height: 320px; color: var(--ink); } /* --------------------------------------------------- mock illustrations */ .mock-pad { padding: 26px; min-height: 320px; background: var(--surface); color: var(--ink); } .mock-chip { display: inline-block; background: var(--bg-tint); color: var(--primary); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .mock-line { height: 10px; border-radius: 6px; background: var(--bg-tint); margin: 6px 0; } .mock-line.long { width: 100%; } .mock-line.med { width: 70%; } .mock-line.short { width: 40%; } /* --------------------------------------------------- utilities */ .text-muted { color: var(--ink-3); } .text-center { text-align: center; } hr.rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0; } /* visually-hidden but accessible */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }