/* ============================================= WhatBox Landing Page - style.css ============================================= */ /* --- Variables --- */ :root { --green: #25D366; --green-dark: #1aab52; --green-dim: rgba(37, 211, 102, 0.12); --navy: #0f172a; --navy-light: #1e293b; --navy-mid: #334155; --gray: #64748b; --gray-light: #f1f5f9; --gray-border: #e2e8f0; --white: #ffffff; --text: #0f172a; --text-muted: #64748b; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.10); --shadow-lg: 0 12px 40px rgba(0,0,0,.14); --transition: 0.2s ease; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* Offset for the fixed nav when jumping to in-page anchors. */ scroll-padding-top: 88px; } body { font-family: var(--font); color: var(--text); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Belt-and-suspenders: never allow accidental horizontal scroll/cutoff. */ overflow-x: hidden; width: 100%; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* --- Keyboard focus visibility (accessibility) --- */ :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; } /* On the dark nav, use a brighter ring for contrast. */ .nav a:focus-visible, .nav button:focus-visible { outline-color: #ffffff; } /* Anti-flash / anti-CLS cloak: an Arabic load is hidden until main.js applies the text swap, so the English -> Arabic reflow never paints (no flash, no layout shift). lang-init.js adds the class in ; main.js removes it right after the swap, with a 1200ms safety timeout. English loads are never cloaked. */ html.wbx-cloak body { visibility: hidden; } /* --- Respect reduced-motion preferences --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Duration:0.01ms only makes the displacement instant, not absent; suppress the positional hover transforms outright for motion-sensitive users. */ .industry-badge:hover, .feature-card:hover, .plan:hover, .plan-featured:hover, .topup-card:hover { transform: none; } } /* --- Utility --- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: 8px; font-family: var(--font); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all var(--transition); border: 2px solid transparent; text-decoration: none; white-space: nowrap; min-height: 44px; /* WCAG 2.2 touch target: inline-flex already centers content */ } .btn-primary { background: var(--green); color: var(--white); border-color: var(--green); } .btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,211,102,.35); } .btn-outline { background: transparent; color: var(--text); border-color: var(--gray-border); } .btn-outline:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); } .btn-ghost { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.25); } .btn-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); transform: translateY(-1px); } .btn-lg { padding: 14px 32px; font-size: 1.05rem; } /* --- Nav --- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.07); transition: box-shadow var(--transition); } .nav.scrolled { box-shadow: var(--shadow-md); } .nav-inner { display: flex; align-items: center; gap: 32px; height: 76px; /* Lock the nav bar to LTR so the chrome (logo on the leading edge, language toggle on the trailing edge) keeps the SAME physical position in both languages. Without this, switching to Arabic flips dir=rtl and the toggle jumps to the opposite side. The page body still mirrors RTL; only the top bar is pinned. Arabic menu text still shapes RTL within each item. */ direction: ltr; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; } .logo-mark { width: 36px; height: 36px; background: var(--green); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; color: var(--white); letter-spacing: 0.05em; } .logo-text { font-weight: 800; font-size: 1.4rem; color: var(--white); letter-spacing: -0.02em; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex: 1; } .nav-links a { color: rgba(255,255,255,.75); font-size: 0.95rem; font-weight: 500; padding: 8px 12px; border-radius: 6px; transition: all var(--transition); } .nav-links a:hover { color: var(--white); background: rgba(255,255,255,.08); } .nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; order: 4; /* WCAG 2.2 touch target: bars stay 22px, hit area is 44px */ min-width: 44px; min-height: 44px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--transition); } /* --- Hero --- */ .hero { background: var(--navy); min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px; position: relative; overflow: hidden; } .hero-glow { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(ellipse at center, rgba(37,211,102,.15) 0%, transparent 70%); pointer-events: none; } .hero-inner { position: relative; text-align: center; max-width: 800px; margin: 0 auto; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.3); color: var(--green); font-size: 0.85rem; font-weight: 600; padding: 6px 16px; border-radius: 100px; margin-bottom: 28px; letter-spacing: 0.01em; } .badge-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; } .verified-icon { width: 16px; height: 16px; flex-shrink: 0; } .logo-mark-img { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; } /* Footer logo a touch larger for brand presence */ .footer-logo .logo-mark-img { width: 60px; height: 60px; } .footer-verified { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 6px 14px; border-radius: 100px; background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.28); color: var(--green); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.3); } } /* --- Scroll fade-in (toggled by main.js; defined here for CSP compliance) --- Opacity-only: no translateY, so revealing a section never moves the layout (the slide-up read as the page "jumping" on load and scroll). */ .fade-target { opacity: 0; transition: opacity .5s ease; } .fade-target.visible { opacity: 1; } /* Reduced-motion (and a safety floor): show content outright, never fade-hidden. */ @media (prefers-reduced-motion: reduce) { .fade-target { opacity: 1; transition: none; } } .hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; color: var(--white); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 24px; } .hero h1 em { font-style: normal; color: var(--green); } .hero-sub { font-size: 1.15rem; color: rgba(255,255,255,.65); max-width: 620px; margin: 0 auto 40px; line-height: 1.7; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 60px; flex-wrap: wrap; } .hero-stats { display: inline-flex; align-items: center; justify-content: center; gap: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); overflow: hidden; } .stat { display: flex; flex-direction: column; align-items: center; padding: 20px 40px; } .stat-num { font-size: 1.75rem; font-weight: 800; color: var(--green); line-height: 1; margin-bottom: 4px; } .stat-label { font-size: 0.78rem; color: rgba(255,255,255,.5); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } .stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,.1); flex-shrink: 0; } /* --- Trusted --- */ .trusted { background: var(--gray-light); padding: 40px 0; border-top: 1px solid var(--gray-border); border-bottom: 1px solid var(--gray-border); } .trusted-label { text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 24px; } .trusted-logos { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .industry-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 600; color: var(--navy-mid); background: var(--white); border: 1px solid var(--gray-border); padding: 9px 18px 9px 14px; border-radius: 100px; letter-spacing: 0.01em; box-shadow: var(--shadow-sm); transition: color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .industry-badge:hover { color: var(--green-dark); border-color: rgba(37,211,102,.45); box-shadow: 0 4px 14px rgba(37,211,102,.12); transform: translateY(-2px); } .industry-icon { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; } /* --- Sections --- */ .section-header { text-align: center; max-width: 620px; margin: 0 auto 64px; } .section-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; } .section-header h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; line-height: 1.2; } .section-header p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; } /* --- Features --- */ .features { padding: 100px 0; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 32px; transition: all var(--transition); /* Centered composition: icon, heading and copy aligned to the card's axis. */ display: flex; flex-direction: column; align-items: center; text-align: center; } .feature-card:hover { border-color: var(--green); box-shadow: 0 8px 32px rgba(37,211,102,.1); transform: translateY(-2px); } .feature-icon-wrap { width: 48px; height: 48px; background: var(--green-dim); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .feature-icon { width: 22px; height: 22px; color: var(--green); } .feature-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; } .feature-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; } /* --- How It Works --- */ .how { background: var(--navy); padding: 100px 0; } .how .section-header h2, .how .section-header .section-tag { color: var(--green); } .how .section-header h2 { color: var(--white); } .how .section-header p { color: rgba(255,255,255,.55); } .steps { display: flex; align-items: center; gap: 24px; max-width: 1000px; margin: 0 auto; } .step { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 36px 32px; transition: all var(--transition); text-align: center; } .step:hover { background: rgba(255,255,255,.08); border-color: rgba(37,211,102,.35); } .step-num { font-size: 2.5rem; font-weight: 900; color: var(--green); opacity: 0.5; line-height: 1; margin-bottom: 16px; font-variant-numeric: tabular-nums; } .step-content h3 { font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 10px; } .step-content p { font-size: 0.95rem; color: rgba(255,255,255,.55); line-height: 1.65; } .step-connector { flex-shrink: 0; width: 80px; color: rgba(37,211,102,.4); } .step-connector svg { width: 100%; height: 24px; } /* --- Pricing --- */ .pricing { padding: 100px 0; background: var(--gray-light); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; } .plan { background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 36px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; position: relative; transition: all var(--transition); } .plan:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .plan-featured { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--shadow-md); transform: scale(1.02); } .plan-featured:hover { transform: scale(1.02) translateY(-2px); } .plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--green); color: var(--white); font-size: 0.75rem; font-weight: 700; padding: 4px 14px; border-radius: 100px; white-space: nowrap; letter-spacing: 0.04em; } .plan-name { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray); } .plan-price { font-size: 2.8rem; font-weight: 900; color: var(--navy); line-height: 1; letter-spacing: -0.04em; } .plan-price-custom { font-size: 2rem; } .currency { font-size: 1.15rem; font-weight: 700; vertical-align: baseline; margin-right: 6px; letter-spacing: 0.01em; color: var(--gray); } .period { font-size: 1rem; font-weight: 500; color: var(--gray); } .plan-desc { font-size: 0.9rem; color: var(--text-muted); } .plan-features { list-style: none; flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; } .plan-features li { font-size: 0.92rem; color: var(--text); display: flex; align-items: flex-start; gap: 10px; text-align: left; } .plan-features li::before { content: ''; width: 16px; height: 16px; margin-top: 1px; background: var(--green-dim); border-radius: 50%; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 4' stroke='%2325D366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; } .plan .btn { width: 100%; } /* "How credits work" panel — replaces the dense bullet list with scannable cards and a worked example. */ .pricing-info { max-width: 1000px; margin: 48px auto 0; } .pricing-info-title { font-size: 1.15rem; font-weight: 700; color: var(--text); text-align: center; margin: 0 0 24px; } .pricing-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .info-card { background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 22px 22px 24px; box-shadow: var(--shadow-sm); /* Centered icon + heading + copy at every breakpoint (the .info-icon is inline-flex, so text-align centers it too). */ text-align: center; } .info-card h4 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 12px 0 8px; } .info-card p { font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); margin: 0; } .info-card p strong { color: var(--text); font-weight: 700; } .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--green-dim); color: var(--green-dark); } .info-icon svg { width: 20px; height: 20px; } .info-card.info-example { background: var(--green-dim); border-color: rgba(37,211,102,0.35); } .info-card.info-example .info-icon { background: var(--green); color: #fff; } .pricing-fineprint { max-width: 1000px; margin: 22px auto 0; display: flex; flex-direction: column; gap: 10px; } .pricing-fineprint p { font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); margin: 0; text-align: center; } .pricing-fineprint a { color: var(--green-dark); font-weight: 600; } /* Message-cost calculator: per-country template pricing, fed by the public pricing API (main.js). Hidden until the first successful fetch. Logical text-align (start/end) keeps the table correct in RTL/Arabic. */ .msgcost { max-width: 640px; margin: 48px auto 0; text-align: center; } .msgcost-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 8px; } .msgcost-sub { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 18px; } .msgcost-controls { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; } .msgcost-field { display: flex; flex-direction: column; gap: 6px; text-align: start; flex: 0 1 260px; min-width: 200px; } .msgcost-field > span { font-size: 0.8rem; font-weight: 700; color: var(--navy); } .msgcost-field select { border: 1px solid var(--gray-border); border-radius: 10px; padding: 11px 12px; font: inherit; background: var(--white); color: var(--text); outline: none; width: 100%; min-width: 0; transition: border-color var(--transition), box-shadow var(--transition); } .msgcost-field select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(37,211,102,.15); } .msgcost-card { background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .msgcost-scroll { overflow-x: auto; } .msgcost-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .msgcost-table th { text-align: start; background: var(--gray-light); color: var(--gray); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 16px; border-bottom: 1px solid var(--gray-border); white-space: nowrap; } .msgcost-table td { padding: 11px 16px; border-bottom: 1px solid var(--gray-border); text-align: start; color: var(--text); } .msgcost-table tr:last-child td { border-bottom: none; } .msgcost-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .msgcost-freerow td { color: var(--green-dark); font-weight: 600; background: var(--green-dim); } .msgcost-note { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; margin: 12px auto 0; max-width: 560px; } .msgcost-note.msgcost-indicative { color: #b45309; } @media (max-width: 640px) { .msgcost-controls { flex-direction: column; align-items: stretch; } .msgcost-field { flex: 1 1 auto; min-width: 0; } .msgcost-table th, .msgcost-table td { padding: 9px 10px; font-size: 0.84rem; } .msgcost-table th { font-size: 0.68rem; } } /* --- CTA Section --- */ .cta-section { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); padding: 100px 0; text-align: center; } .cta-inner { max-width: 700px; margin: 0 auto; } .cta-inner h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; color: var(--white); margin-bottom: 16px; letter-spacing: -0.02em; line-height: 1.2; } .cta-inner p { color: rgba(255,255,255,.6); font-size: 1.05rem; margin-bottom: 36px; line-height: 1.7; } /* --- Footer --- */ .footer { background: var(--navy); border-top: 1px solid rgba(255,255,255,.07); padding: 72px 0 0; } .footer-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,.07); } .footer-brand .logo { margin-bottom: 16px; } .footer-brand p { font-size: 0.92rem; color: rgba(255,255,255,.6); line-height: 1.7; max-width: 340px; margin-bottom: 16px; } .footer-email { font-size: 0.9rem; color: var(--green); font-weight: 500; transition: opacity var(--transition); } .footer-email:hover { opacity: 0.8; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .footer-col h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,.55); margin-bottom: 16px; } .footer-col ul { display: flex; flex-direction: column; gap: 10px; } .footer-col li a { font-size: 0.9rem; color: rgba(255,255,255,.6); transition: color var(--transition); } .footer-col li a:hover { color: var(--white); } .footer-bottom { padding: 24px 0; } .footer-bottom-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; flex-wrap: wrap; } .footer-bottom p { font-size: 0.82rem; color: rgba(255,255,255,.55); } .footer-bottom a { color: rgba(255,255,255,.55); transition: color var(--transition); } .footer-bottom a:hover { color: var(--white); } .disclaimer { text-align: center; } .footer-logo .logo-mark { background: var(--green); color: var(--white); } /* --- Responsive --- */ @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: 1fr; max-width: 420px; } .plan-featured { transform: none; } .plan-featured:hover { transform: translateY(-2px); } .steps { flex-direction: column; gap: 12px; } .step { width: 100%; } /* Rotate the arrow to point downward between stacked steps and give it a real vertical footprint so it centers cleanly. */ .step-connector { width: 24px; height: 40px; display: flex; align-items: center; justify-content: center; } .step-connector svg { width: 60px; transform: rotate(90deg); } .footer-inner { grid-template-columns: 1fr; gap: 40px; } .footer-links { grid-template-columns: repeat(3, 1fr); } .footer-bottom-inner { flex-direction: column; text-align: center; } .disclaimer { text-align: center; } /* Footer collapses to one column here, so center the brand block (logo, description, Meta-verified badge, email) so it matches the centered page and the centered footer-bottom, instead of hugging the left edge. */ .footer-brand { text-align: center; } .footer-brand .logo { justify-content: center; } /* The description has max-width:340px; auto side-margins center the block on the wider tablet column (at mobile it filled the width so it already read centered, but on tablet the narrower block hugged the left). */ .footer-brand p { margin-inline: auto; } /* Center the contact submit so it matches the centered "Prefer email?" link below it, at tablet as well as mobile. */ .contact-actions { justify-content: center; } } /* Collapse the nav to a hamburger below 860px so the full horizontal row (logo + links + CTA) never crams or overflows at medium widths. */ @media (max-width: 860px) { /* Once the links collapse to a hamburger, the row is just logo + lang + burger; the 32px desktop gap then overflows at 320px and clipped the burger. */ .nav-inner { gap: 12px; } .nav-links { display: none; flex-direction: column; gap: 0; } .nav-links.open { display: flex; position: absolute; top: 76px; left: 0; right: 0; background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-md); padding: 12px 0; } .nav-links.open a { display: block; padding: 14px 24px; border-radius: 0; } .nav-inner .nav-cta { display: none; } .nav-toggle { display: flex; } /* CTA is hidden here, so the auto-margin that right-anchors the cluster moves to the language toggle (keeps it pinned right, toggle to its trailing side). */ .lang-btn { margin-inline-start: auto; } } @media (max-width: 640px) { .hero { padding: 96px 0 60px; min-height: auto; } /* The hero clips overflow; the longer Arabic headline needs a smaller floor than the English one so it never gets cut on a phone. */ .hero h1 { font-size: clamp(1.85rem, 8vw, 2.6rem); } .hero-stats { display: flex; flex-direction: column; width: 100%; max-width: 280px; margin-inline: auto; } .stat { padding: 16px 24px; width: 100%; } .stat-divider { width: 100%; height: 1px; } .feature-grid { grid-template-columns: 1fr; } .footer-links { grid-template-columns: 1fr 1fr; } /* Center the stacked footer link columns to match the centered brand block. */ .footer-col { text-align: center; } .hero-actions { flex-direction: column; width: 100%; } .hero-actions .btn { width: 100%; max-width: 300px; } /* The top-up CTA stacks (column); cap width so the long "Go to dashboard to top up" label (white-space:nowrap) never clips on a 320px viewport. */ .topups-cta .btn { width: 100%; max-width: 300px; } } /* Narrowest phones: footer link columns drop to a single column so the longer labels ("How It Works", "Privacy Policy") stop wrapping raggedly two-up. */ @media (max-width: 400px) { .footer-links { grid-template-columns: 1fr; } } /* --- Multi-channel (WhatsApp / Instagram / Messenger) --- */ /* Channel brand colors are Meta's official palette, intentionally literal, not theme tokens, so they stay correct across theme changes. */ .hero-channels { list-style: none; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 4px 0 8px; padding: 0; } .channel-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 100px; font-size: 0.88rem; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--white, #fff); } .channel-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .channel-whatsapp .channel-dot { background: #25D366; box-shadow: 0 0 10px rgba(37,211,102,.65); } .channel-instagram .channel-dot { background: #C13584; box-shadow: 0 0 10px rgba(193,53,132,.65); } .channel-messenger .channel-dot { background: #0084FF; box-shadow: 0 0 10px rgba(0,132,255,.65); } /* --- Pricing: 4-plan grid + enterprise strip + top-ups --- */ .pricing-grid-4 { grid-template-columns: repeat(4, 1fr); max-width: 1160px; gap: 20px; } .pricing-grid-4 .plan { padding: 32px 24px; } .pricing-grid-4 .plan-price { font-size: 2.4rem; } /* Five-tier strip (Starter / Business / Pro / Pro+ / Premium). Tighter cards so all five fit one desktop row; falls back to 3-up then 1-up like the 4-grid. */ .pricing-grid-5 { grid-template-columns: repeat(5, 1fr); max-width: 1340px; gap: 16px; } .pricing-grid-5 .plan { padding: 28px 18px; } .pricing-grid-5 .plan-name { font-size: 1.1rem; } .pricing-grid-5 .plan-price { font-size: 1.9rem; } .pricing-grid-5 .plan-desc { font-size: 0.84rem; } .pricing-grid-5 .plan-features { font-size: 0.85rem; } /* Enterprise custom price: TBD text, not the giant numeric price font. */ /* Enterprise: a premium, value-led card that stands apart from the white tier cards (dark surface, light text, green accents) — no "TBD" as the hero. */ .plan-enterprise { max-width: 1160px; margin: 28px auto 0; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; padding: 40px 44px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); border: 1px solid var(--navy-mid); border-radius: 16px; box-shadow: var(--shadow-lg); text-align: left; } .ent-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; } .ent-title { font-size: 1.7rem; font-weight: 800; color: #fff; margin: 0 0 12px; line-height: 1.15; } .ent-desc { font-size: 0.95rem; line-height: 1.6; color: #cbd5e1; margin: 0 0 22px; max-width: 460px; } .ent-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ent-cta-row .btn { width: auto; } .ent-price-note { font-size: 0.85rem; color: #94a3b8; } .ent-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .ent-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: #e2e8f0; line-height: 1.4; } .ent-features svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--green); margin-top: 1px; } .topups { max-width: 860px; margin: 56px auto 0; text-align: center; } .topups-title { font-size: 1.25rem; font-weight: 800; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.02em; } .topups-sub { font-size: 0.92rem; color: var(--text-muted); max-width: 620px; margin: 0 auto 24px; line-height: 1.6; } .topups-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; } .topup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .topup-card { position: relative; background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; transition: all var(--transition); } .topup-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .topup-featured { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); } .topup-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--green); color: var(--white); font-size: 0.68rem; font-weight: 700; padding: 3px 12px; border-radius: 100px; white-space: nowrap; letter-spacing: 0.04em; } .topup-amount { font-weight: 800; color: var(--navy); font-size: 1.05rem; } .topup-price { font-size: 1.5rem; font-weight: 900; color: var(--navy); letter-spacing: -0.03em; } .topup-rate { font-size: 0.8rem; color: var(--text-muted); } .topup-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 20px; } @media (max-width: 1100px) { .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); max-width: 720px; } .pricing-grid-5 { grid-template-columns: repeat(3, 1fr); max-width: 760px; } } @media (max-width: 900px) { .plan-enterprise { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; } .pricing-info-grid { grid-template-columns: 1fr; } .topup-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } } @media (max-width: 640px) { .pricing-grid-4 { grid-template-columns: 1fr; max-width: 420px; } .pricing-grid-5 { grid-template-columns: 1fr; max-width: 420px; } } /* --- Contact section --- */ .contact-section { padding: 100px 0; background: var(--white); } .contact-form { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-field { display: flex; flex-direction: column; gap: 6px; } .contact-field label { font-size: 0.85rem; font-weight: 700; color: var(--navy); } .contact-field .optional { color: var(--gray); font-weight: 400; } .contact-field input, .contact-field textarea { border: 1px solid var(--gray-border); border-radius: 10px; padding: 13px 16px; font: inherit; outline: none; background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); } .contact-field input:focus, .contact-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(37,211,102,.15); } .contact-field textarea { resize: vertical; min-height: 120px; } /* Honeypot: visually removed, still in the accessibility-hidden DOM for bots. Uses the clip visually-hidden pattern (not left:-9999px): the offscreen offset is direction-physical and pushed document scrollWidth out ~9999px in RTL/Arabic, breaking horizontal layout. clip takes zero space in any dir. */ .cf-hp { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .contact-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .contact-status { font-size: 0.9rem; font-weight: 600; } .contact-status.ok { color: var(--green-dark, #1ea952); } .contact-status.err { color: #dc2626; } .contact-alt { text-align: center; margin-top: 28px; font-size: 0.9rem; color: var(--text-muted); } @media (max-width: 640px) { .contact-row { grid-template-columns: 1fr; } } /* --- FAQ (AEO) --- */ .faq { padding: 80px 0; background: var(--gray-light); } .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 0 20px; box-shadow: var(--shadow-sm); } .faq-item summary { list-style: none; cursor: pointer; font-weight: 600; color: var(--text); padding: 18px 0; position: relative; padding-right: 28px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--green-dark); font-weight: 400; transition: transform var(--transition); } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { color: var(--text-muted); line-height: 1.65; padding: 0 0 20px; margin: 0; } /* --- Language toggle (EN/AR) + RTL --------------------------------------- */ /* Right-cluster ordering: the language toggle is the LAST item (rightmost) on desktop, so the translated "Get Started" CTA resizing sits to its left and never nudges it. The auto-margin that pushes the cluster right lives on the CTA here; on mobile (CTA hidden) it moves to .lang-btn via the nav media query so the toggle still anchors right. */ .nav-cta { order: 2; margin-inline-start: auto; } .lang-btn { order: 3; background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: var(--white); font-size: 0.85rem; font-weight: 600; border-radius: 8px; /* Fixed width so swapping the label (عربي <-> EN, different widths) never resizes the button or shifts its neighbours: the toggle stays put. */ width: 72px; min-height: 44px; padding: 0; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition), border-color var(--transition); } .lang-btn:hover { background: rgba(255, 255, 255, .12); } /* Arabic uses the platform's built-in Arabic typeface (no webfont, stays within the CSP). Flip the physical (non-logical) properties the LTR styles bake in. */ [dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif; } [dir="rtl"] .nav-links { margin-left: 0; margin-right: 8px; } [dir="rtl"] .currency { margin-right: 0; margin-left: 6px; } [dir="rtl"] .plan-features li, [dir="rtl"] .info-card, [dir="rtl"] .ent-desc, [dir="rtl"] .ent-title { text-align: right; } [dir="rtl"] .faq-item summary { padding-right: 0; padding-left: 28px; } [dir="rtl"] .faq-item summary::after { right: auto; left: 0; } /* --- Product showcase (framed inbox screenshot under the hero) --- */ .showcase { background: var(--navy); padding: clamp(8px, 2vw, 24px) 0 clamp(56px, 8vw, 104px); } .showcase-frame { max-width: 1080px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.35); background: var(--navy-light); line-height: 0; } .showcase-img { width: 100%; height: auto; display: block; } .showcase-caption { text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 0.95rem; line-height: 1.6; max-width: 620px; margin: 22px auto 0; } /* Solutions: a compact category list, deliberately demoted below the elevated icon-card Features grid so the two sections do not read as two identical card six-packs. Kept in the DOM for SEO/AEO coverage. */ .solutions-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .solutions-grid .feature-card { padding: 14px 18px; background: transparent; border-color: transparent; border-inline-start: 3px solid var(--green-dim); border-radius: 8px; align-items: flex-start; text-align: start; } .solutions-grid .feature-card:hover { transform: none; box-shadow: none; border-color: transparent; border-inline-start-color: var(--green); background: var(--green-dim); } .solutions-grid .feature-card h3 { font-size: 0.98rem; margin-bottom: 4px; } .solutions-grid .feature-card p { font-size: 0.86rem; line-height: 1.5; } @media (max-width: 640px) { .showcase-frame { border-radius: 10px; } .showcase-caption { font-size: 0.88rem; } }