/* * crm-lite-public.css — the Risper Lite shop front (home, pricing, and every page * that extends layouts/lite-public). Hand-written, like every crm-*.css. * * ── THE DESIGN IS THE RPS MARKETING SITE (rispercrm.com), ON PURPOSE ──────── * The shop front and the marketing site are the same product to a visitor, so * they use one design language. These are the RPS values, read off the live site * and its theme (public/themes/orisa) on 06/09/2026 — copy them, do not re-invent: * * font body "Inter", headings "Roboto" (RPS :root --primary-font / --heading-font) * scale h1 60 · h2 40 · h3 30 · h4 25 · body 16 * brand linear-gradient(92deg, #6E12A8 0%, #530383 100%) * brand glow 0 6px 16px rgba(83,3,131,.22) → 0 10px 22px rgba(83,3,131,.30) on hover * pills border-radius 50px on every CTA and tag * neutrals #FEFEFE #F2F2F2 #DFDFDF #B7B7B7 #585959 #303030 #1D1D1D #0F0F0F * rhythm 120px section padding on desktop * glass translucent fill + backdrop-filter: blur() (RPS .cilent-word-wide-content) * motion fade-and-rise on scroll, honouring prefers-reduced-motion — RPS's own * custom CSS disables its heavier GSAP text-splitting for readability, * so this file never animates the COLOUR or the VISIBILITY of body copy. * * --primary / --secondary still come from the platform theme (the layout sets them), * so a white-label reseller re-skins this page exactly as it re-skins the CRM. * * Responsive rules (laravel.md §6): every control bar is flex + wrap with a * min-height, every long text is nowrap + ellipsis on a min-width:0 parent, the * comparison table scrolls inside its own wrapper, and nothing lets the body * scroll sideways at 360 px or at 150 % zoom. */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ .lite-public { --lite-heading: 'Roboto', 'Jost', system-ui, sans-serif; --n-0: #FEFEFE; --n-50: #F2F2F2; --n-100: #DFDFDF; --n-300: #B7B7B7; --n-500: #585959; --n-700: #303030; --n-900: #1D1D1D; --n-950: #0F0F0F; --ink: #16111f; --ink-soft: #5c5470; --brand-grad: linear-gradient(92deg, #6E12A8 0%, var(--primary) 100%); --brand-soft: #faf8ff; --brand-line: #ece6f5; --brand-glow: 0 6px 16px rgba(83, 3, 131, .22); --brand-glow-lift: 0 10px 22px rgba(83, 3, 131, .30); --good: #0f8a51; --glass-bg: rgba(255, 255, 255, .68); --glass-brd: rgba(255, 255, 255, .55); --glass-blur: saturate(1.6) blur(18px); --card-shadow: 0 6px 22px rgba(20, 10, 40, .07); --card-shadow-lift: 0 18px 44px rgba(83, 3, 131, .14); --ease: cubic-bezier(.625, .05, 0, 1); --pad-y: 120px; } html, body.lite-public { margin: 0; background: var(--n-0); color: var(--ink); overflow-x: hidden; } body.lite-public { display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; } .lite-main { flex: 1 0 auto; } .lite-public *, .lite-public *::before, .lite-public *::after { box-sizing: border-box; } .lite-public h1, .lite-public h2, .lite-public h3, .lite-public h4 { font-family: var(--lite-heading); letter-spacing: -.02em; } .lite-shell { max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* ── Scroll reveal — the RPS at_fade_anim, minus the text splitting ────────── OPT-IN, and deliberately so: the hiding rule lives behind .lite-anim, which crm-lite-public.js adds to only once it has an IntersectionObserver to reveal them again. A blocked, failed or unsupported script therefore leaves every section VISIBLE — hiding content behind a script that may never run is how an animation turns into a blank page. */ .lite-anim .lite-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .lite-anim .lite-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lite-public *, .lite-public *::before, .lite-public *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .lite-anim .lite-reveal { opacity: 1; transform: none; } } /* ── Header — sticky glass ──────────────────────────────────────────────── */ .lite-nav-wrap { position: sticky; top: 0; z-index: 1030; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid rgba(83, 3, 131, .08); transition: box-shadow .25s var(--ease), background .25s var(--ease); } /* Browsers with no backdrop-filter get an opaque bar rather than unreadable text. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lite-nav-wrap { background: #fff; } } .lite-nav-wrap.is-scrolled { background: rgba(255, 255, 255, .88); box-shadow: 0 8px 28px rgba(20, 10, 40, .10); } .lite-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 20px; max-width: 1180px; margin: 0 auto; min-height: 68px; } .lite-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--primary); } .lite-brand-logo { max-height: 40px; max-width: 160px; object-fit: contain; } .lite-brand-name { font-family: var(--lite-heading); font-size: 1.25rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .lite-nav-links { display: flex; align-items: center; gap: 6px 18px; min-width: 0; } .lite-nav-link { color: var(--n-700); font-weight: 600; text-decoration: none; font-size: .93rem; white-space: nowrap; padding: 8px 2px; position: relative; transition: color .2s var(--ease); } .lite-nav-link::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px; background: var(--brand-grad); border-radius: 2px; transition: right .28s var(--ease); } .lite-nav-link:hover { color: var(--primary); } .lite-nav-link:hover::after { right: 0; } /* Hamburger — hidden on desktop, the only nav control below 960px. */ .lite-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--brand-line); background: rgba(255, 255, 255, .7); border-radius: 12px; cursor: pointer; flex: 0 0 auto; padding: 0 10px; } .lite-burger-bar { display: block; height: 2px; width: 100%; background: var(--primary); border-radius: 2px; transition: transform .28s var(--ease), opacity .2s var(--ease); } .lite-burger[aria-expanded="true"] .lite-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .lite-burger[aria-expanded="true"] .lite-burger-bar:nth-child(2) { opacity: 0; } .lite-burger[aria-expanded="true"] .lite-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Country switch ─────────────────────────────────────────────────────── */ .lite-country { position: relative; min-width: 0; } .lite-country-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--brand-line); background: rgba(255, 255, 255, .75); color: #3b2a4f; border-radius: 50px; padding: 7px 13px; font-size: .84rem; font-weight: 600; cursor: pointer; max-width: 240px; min-width: 0; line-height: 1.2; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .lite-country-btn:hover, .lite-country-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: var(--brand-glow); } .lite-country-caret { transition: transform .25s var(--ease); flex: 0 0 auto; } .lite-country-btn[aria-expanded="true"] .lite-country-caret { transform: rotate(180deg); } /* One market configured: a label, not a button. Nothing may look clickable and do nothing. */ .lite-country-static { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--n-500); max-width: 240px; min-width: 0; } .lite-country-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .lite-flag { font-size: 1.05rem; line-height: 1; flex: 0 0 auto; } .lite-country-menu { border-radius: 18px; border: 1px solid var(--glass-brd); padding: 8px; min-width: 262px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 20px 46px rgba(20, 10, 40, .18); } .lite-country-head { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--n-300); padding: 6px 10px 8px; } .lite-country-menu form { margin: 0; } .lite-country-item { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 9px 10px; font-size: .88rem; color: var(--n-700); background: transparent; border: 0; width: 100%; text-align: left; transition: background .18s var(--ease), color .18s var(--ease); } .lite-country-item:hover, .lite-country-item:focus { background: var(--brand-soft); color: var(--primary); } .lite-country-item.active { background: var(--brand-grad); color: #fff; } .lite-country-item.active .lite-country-cur { opacity: .85; } .lite-country-item-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lite-country-cur { font-size: .72rem; font-weight: 700; opacity: .7; flex: 0 0 auto; } /* ── Buttons — RPS gradient pills ───────────────────────────────────────── */ .lite-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 50px; padding: 14px 30px; font-weight: 600; font-size: .97rem; text-decoration: none; border: 1px solid transparent; white-space: nowrap; max-width: 100%; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); } .lite-btn-sm { padding: 9px 18px; font-size: .87rem; } .lite-btn-primary { background: var(--brand-grad); color: #fff; box-shadow: var(--brand-glow); } .lite-btn-primary:hover { color: #fff; filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--brand-glow-lift); } .lite-btn-light { background: #fff; color: var(--primary); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .lite-btn-light:hover { color: var(--primary); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .24); } .lite-btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lite-btn-ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-2px); } /* ── Flash (partials.flash) ─────────────────────────────────────────────── */ .lite-flash { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .lite-flash .alert { margin-top: 16px; } .lite-flash:empty { display: none; } /* ── Eyebrow — the RPS category-tag pill ────────────────────────────────── */ .lite-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; border-radius: 50px; padding: 8px 15px; max-width: 100%; min-width: 0; } .lite-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #45a557; flex: 0 0 auto; } .lite-eyebrow-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* On the dark hero */ .lite-hero .lite-eyebrow { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; margin-bottom: 22px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* On a light section */ .lite-sec-head .lite-eyebrow { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--primary); } /* ── Section heads ──────────────────────────────────────────────────────── */ .lite-sec { padding: var(--pad-y) 0; } .lite-sec-tight { padding: 76px 0; } .lite-sec-head { max-width: 720px; margin: 0 auto 52px; text-align: center; } .lite-sec-head h2 { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.5rem); font-weight: 800; color: var(--ink); margin: 16px 0 12px; } .lite-sec-head p { font-size: 1rem; color: var(--ink-soft); margin: 0; line-height: 1.65; } /* ── Home hero ──────────────────────────────────────────────────────────── */ .lite-hero { background: linear-gradient(145deg, #6E12A8 0%, #320066 52%, #0F0F0F 100%); color: #fff; padding: 104px 20px 116px; text-align: center; position: relative; overflow: hidden; } .lite-hero::before { content: ''; position: absolute; top: -160px; right: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(160, 32, 240, .38) 0%, transparent 70%); pointer-events: none; animation: lite-drift 18s ease-in-out infinite alternate; } .lite-hero::after { content: ''; position: absolute; bottom: -140px; left: -110px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 255, 209, .16) 0%, transparent 70%); pointer-events: none; animation: lite-drift 22s ease-in-out infinite alternate-reverse; } @keyframes lite-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-40px, 30px, 0) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .lite-hero::before, .lite-hero::after { animation: none; } } /* ── The optional banner photograph (Super Admin → Settings → Application) ── The picture is a LAYER OVER the gradient, never a swap for it: the gradient stays as the background colour, so a banner that is slow, 404s or is simply never uploaded leaves the hero exactly as it shipped rather than blank. The scrim re-lays the brand gradient over the photo at high opacity — white heading text has to stay readable on a picture the page never gets to vet. */ .lite-hero-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .lite-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(145deg, rgba(110, 18, 168, .86) 0%, rgba(50, 0, 102, .84) 52%, rgba(15, 15, 15, .88) 100%); } /* Above BOTH the photo and its scrim — z-index 1 would put the copy under the scrim. */ .lite-hero-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; } .lite-hero h1 { font-size: clamp(2.1rem, 1.1rem + 4vw, 3.75rem); font-weight: 800; line-height: 1.06; margin: 0 0 18px; overflow-wrap: anywhere; } .lite-hero h1 .grad { background: linear-gradient(90deg, #d9a7ff 0%, #7ffbe4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .lite-hero p { font-size: 1.08rem; color: rgba(255, 255, 255, .84); margin: 0 auto 30px; max-width: 660px; line-height: 1.68; } .lite-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 52px; } .lite-hero-note { font-size: .85rem; color: rgba(255, 255, 255, .74); margin-top: 22px; line-height: 1.6; } /* Glass strip of proof points under the hero copy. */ .lite-hero-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; } .lite-hero-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20); border-radius: 50px; padding: 9px 16px; min-width: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lite-hero-chip i { font-size: 1.05rem; flex: 0 0 auto; } .lite-hero-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Feature cards — RPS numbered modules, in glass ─────────────────────── */ .lite-audience { background: linear-gradient(180deg, var(--n-50) 0%, #fff 100%); } .feat-card { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: 22px; padding: 30px 26px 26px; height: 100%; box-shadow: var(--card-shadow); min-width: 0; overflow: hidden; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .feat-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand-grad); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .feat-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-lift); border-color: rgba(83, 3, 131, .18); } .feat-card:hover::before { transform: scaleX(1); } .feat-num { position: absolute; top: 22px; right: 24px; font-family: var(--lite-heading); font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: var(--n-100); } .feat-icon { width: 54px; height: 54px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; background: var(--brand-grad); margin-bottom: 18px; flex: 0 0 auto; box-shadow: var(--brand-glow); } .feat-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; } .feat-card p { font-size: .9rem; color: var(--ink-soft); margin: 0; line-height: 1.65; } /* ── Proof band — every figure is read from the catalogue, never typed ───── */ .lite-proof { background: var(--n-950); color: #fff; } .lite-proof .lite-sec-head h2 { color: #fff; } .lite-proof .lite-sec-head p { color: rgba(255, 255, 255, .68); } .lite-proof .lite-eyebrow { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20); color: #fff; } .proof-card { text-align: center; padding: 30px 18px; border-radius: 22px; height: 100%; min-width: 0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .3s var(--ease), background .3s var(--ease); } .proof-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .09); } .proof-figure { font-family: var(--lite-heading); font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); font-weight: 800; line-height: 1.05; background: linear-gradient(90deg, #d9a7ff 0%, #7ffbe4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; } .proof-label { font-size: .86rem; color: rgba(255, 255, 255, .70); margin-top: 8px; line-height: 1.5; } /* ── Pricing hero ───────────────────────────────────────────────────────── */ .price-hero { background: linear-gradient(145deg, #6E12A8 0%, #320066 52%, #0F0F0F 100%); color: #fff; padding: 84px 20px 140px; text-align: center; position: relative; overflow: hidden; } .price-hero::before { content: ''; position: absolute; top: -150px; left: 50%; width: 640px; height: 460px; margin-left: -320px; border-radius: 50%; background: radial-gradient(circle, rgba(160, 32, 240, .34) 0%, transparent 70%); pointer-events: none; } .price-hero > * { position: relative; z-index: 1; } .price-hero h1 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3rem); font-weight: 800; margin: 0 0 14px; line-height: 1.08; } .price-hero p { font-size: 1.02rem; color: rgba(255, 255, 255, .84); margin: 0 auto; max-width: 660px; line-height: 1.68; } /* ── Period switch ──────────────────────────────────────────────────────── */ .period-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); border-radius: 50px; padding: 5px; max-width: 100%; min-height: 50px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .price-hero .period-switch { margin-top: 30px; } .period-btn { border: 0; background: transparent; color: #fff; font-weight: 600; font-size: .89rem; border-radius: 50px; padding: 10px 22px; cursor: pointer; white-space: nowrap; transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease); } .period-btn[aria-pressed="true"] { background: #fff; color: var(--primary); box-shadow: 0 3px 12px rgba(0, 0, 0, .2); } .period-note { font-size: .82rem; color: rgba(255, 255, 255, .72); margin-top: 14px; } /* The same switch on a light panel inverts. */ .plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 30px; min-height: 56px; } .plan-head-text { min-width: 0; } .plan-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; color: var(--ink); margin: 0 0 6px; } .plan-head p { font-size: .93rem; color: var(--ink-soft); margin: 0; } .plan-head .period-switch { background: var(--n-50); border-color: var(--n-100); -webkit-backdrop-filter: none; backdrop-filter: none; } .plan-head .period-btn { color: var(--n-500); } .plan-head .period-btn[aria-pressed="true"] { background: var(--brand-grad); color: #fff; box-shadow: var(--brand-glow); } /* ── Plan cards ─────────────────────────────────────────────────────────── */ .plan-wrap { max-width: 1180px; margin: 0 auto; padding: 76px 20px 10px; } .plan-wrap-raised { padding-top: 0; margin-top: -96px; } .plan-card { position: relative; background: rgba(255, 255, 255, .82); border: 1px solid var(--glass-brd); border-radius: 24px; padding: 30px 26px; height: 100%; display: flex; flex-direction: column; box-shadow: var(--card-shadow); min-width: 0; overflow: hidden; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .plan-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-lift); border-color: rgba(83, 3, 131, .16); } .plan-card.featured { border-color: rgba(83, 3, 131, .30); box-shadow: 0 16px 44px rgba(83, 3, 131, .18); } .plan-card.featured::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--brand-grad); } .plan-card-contact { border-style: dashed; background: rgba(255, 255, 255, .6); } /* Reserved on EVERY card, badge or not — otherwise the featured card's name and price sit a badge-height lower than its neighbours' and the prices no longer read as one row. */ .plan-flag-row { min-height: 27px; margin-bottom: 12px; } .plan-flag { display: inline-block; background: var(--brand-grad); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; border-radius: 50px; padding: 5px 13px; box-shadow: var(--brand-glow); } .plan-name { font-size: 1.22rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; overflow-wrap: anywhere; } .plan-desc { font-size: .87rem; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.6; min-height: 40px; } .plan-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; min-width: 0; } .plan-price { font-family: var(--lite-heading); font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 800; color: var(--ink); line-height: 1.05; overflow-wrap: anywhere; } .plan-price-contact { font-size: 1.55rem; color: var(--primary); } .plan-suffix { font-size: .84rem; color: var(--ink-soft); font-weight: 600; white-space: nowrap; } /* "charged as AED 185" — reserved height so cards in AED and cards in SAR line up. */ .plan-aed { font-size: .79rem; color: var(--ink-soft); min-height: 18px; margin-top: 5px; } .plan-saving { font-size: .79rem; font-weight: 700; color: var(--good); min-height: 18px; margin-top: 2px; } /* A live promotion: the list rate struck through beside the offer rate, and a ribbon with the countdown. Both collapse to nothing when the server prints no promotion — :empty, never an inline display, so the stylesheet keeps the say. */ .plan-was { font-size: .98rem; font-weight: 600; color: var(--n-500); text-decoration: line-through; white-space: nowrap; } .plan-was:empty { display: none; } .plan-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding: 8px 12px; min-width: 0; background: var(--brand-soft); border: 1px dashed var(--brand-line); border-radius: 14px; font-size: .78rem; color: #3b2a4f; } .plan-promo-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-grad); color: #fff; font-weight: 700; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; border-radius: 50px; padding: 4px 10px; white-space: nowrap; } .plan-promo-name { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .plan-promo-count { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--primary); } .plan-promo-count .seg { background: #fff; border: 1px solid var(--brand-line); border-radius: 7px; padding: 2px 6px; min-width: 30px; text-align: center; } .plan-promo-count small { font-size: .68rem; font-weight: 600; color: var(--ink-soft); margin-right: 3px; } .plan-caps { font-size: .78rem; color: var(--n-500); margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .cap-chip { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 50px; padding: 5px 11px; white-space: nowrap; } .plan-domain { display: flex; align-items: center; gap: 7px; font-size: .81rem; font-weight: 600; color: #3b2a4f; margin-top: 12px; padding: 9px 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 14px; min-width: 0; } .plan-domain i { color: var(--primary); font-size: 1rem; flex: 0 0 auto; } .plan-mods { list-style: none; padding: 0; margin: 18px 0 20px; flex: 1 1 auto; } .plan-mods li { font-size: .86rem; color: var(--n-700); padding: 5px 0 5px 25px; position: relative; line-height: 1.5; } .plan-mods li::before { content: '\e182'; font-family: 'Phosphor-Light'; position: absolute; left: 0; top: 5px; color: var(--good); font-size: .95rem; } .plan-mods .group-head { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--n-300); padding: 13px 0 2px; } .plan-mods .group-head::before { content: none; } .btn-choose { background: var(--brand-grad); color: #fff; border: 0; border-radius: 50px; padding: 13px 20px; font-weight: 600; font-size: .93rem; width: 100%; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; box-shadow: var(--brand-glow); transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); } .btn-choose:hover { filter: brightness(1.08); color: #fff; transform: translateY(-2px); box-shadow: var(--brand-glow-lift); } .btn-choose:disabled { background: var(--n-50); color: var(--n-300); cursor: not-allowed; filter: none; box-shadow: none; transform: none; } .btn-choose-contact { background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 11px 20px; box-shadow: none; } .btn-choose-contact:hover { background: var(--brand-soft); color: var(--primary); box-shadow: var(--brand-glow); } .btn-choose-inline { width: auto; padding: 14px 30px; } .plan-trial { font-size: .77rem; color: var(--ink-soft); text-align: center; margin-top: 10px; min-height: 16px; } .unavailable-note { font-size: .77rem; color: var(--n-300); text-align: center; margin-top: 4px; min-height: 16px; } .plan-foot-note { text-align: center; margin-top: 34px; font-size: .93rem; } .plan-foot-note a { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; text-decoration: none; } .plan-foot-note a i { transition: transform .25s var(--ease); } .plan-foot-note a:hover i { transform: translateX(4px); } /* A market the owner has not priced at all. */ .country-note { max-width: 720px; margin: 0 auto 30px; text-align: center; font-size: .92rem; color: var(--ink-soft); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 18px; padding: 16px 20px; } /* ── Comparison table — scrolls inside its own wrapper, never the page ──── */ .compare-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; scroll-margin-top: 90px; } .lite-public .crm-table-wrap { border: 1px solid var(--brand-line); border-radius: 22px; background: #fff; box-shadow: var(--card-shadow); overflow: hidden; } /* position:relative — anything positioned inside the table (a hidden label, a tooltip) is contained by the scroll wrapper instead of widening the page. */ .lite-public .crm-table-inner { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; } .compare-table { margin: 0; min-width: 620px; font-size: .87rem; } .compare-table th, .compare-table td { padding: 13px 16px; vertical-align: middle; border-color: #f4f0fa; } /* A PLAN COLUMN IS CENTRED, HEAD AND BODY, OR IT READS AS BROKEN. The tick / dash cells were centred and the plan-name headers above them were not, so every heading sat hard left of the column it labels — the wider the screen, the further the drift. Head and body now take the same rule from the same place, and `table-layout: fixed` gives the plan columns one equal width each so the ticks queue up in a straight line instead of drifting with the longest feature label. The feature column (first) stays left-aligned: it is prose. */ .compare-table { table-layout: fixed; } .compare-table thead th { background: var(--brand-soft); color: var(--primary); font-weight: 800; white-space: nowrap; position: sticky; top: 0; z-index: 2; font-family: var(--lite-heading); text-align: center; } .compare-table thead th:first-child, .compare-table tbody th { text-align: left; } .compare-table thead th:first-child { min-width: 200px; width: 34%; } .compare-table tbody th { font-weight: 600; color: var(--n-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; background: #fff; } .compare-table tbody tr:nth-child(even) th, .compare-table tbody tr:nth-child(even) td { background: #fcfaff; } .compare-table tbody tr:hover th, .compare-table tbody tr:hover td { background: var(--brand-soft); } .compare-table td { text-align: center; color: var(--n-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .compare-tick { color: var(--good); font-size: 1.2rem; } .compare-dash { color: var(--n-100); } /* ── Build Your Own ─────────────────────────────────────────────────────── */ .byo { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .byo-card { background: rgba(255, 255, 255, .82); border: 1px solid var(--glass-brd); border-radius: 24px; overflow: hidden; box-shadow: var(--card-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .byo-head { background: var(--brand-soft); padding: 26px 28px; border-bottom: 1px solid var(--brand-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; } .byo-head > div:first-child { min-width: 0; } .byo-head h2 { font-size: 1.3rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; } .byo-head p { font-size: .87rem; color: var(--ink-soft); margin: 0; max-width: 560px; line-height: 1.6; } .byo-total { text-align: right; min-width: 200px; } .byo-total .amount { font-family: var(--lite-heading); font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.05; overflow-wrap: anywhere; } .byo-total .meta { font-size: .79rem; color: var(--ink-soft); } .byo-body { padding: 26px 28px 30px; } .byo-empty { font-size: .89rem; } .mod-group { margin-bottom: 22px; } .mod-group h3 { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--n-300); margin: 0 0 11px; } .mod-tick { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--n-100); border-radius: 16px; padding: 12px 14px; height: 100%; cursor: pointer; min-width: 0; background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .mod-tick:hover { border-color: rgba(83, 3, 131, .28); background: var(--brand-soft); transform: translateY(-2px); } .mod-tick input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--primary); } .mod-tick .t { font-size: .88rem; font-weight: 600; color: var(--n-700); display: block; } .mod-tick .d { font-size: .77rem; color: var(--n-300); display: block; line-height: 1.45; } .mod-tick .txt { min-width: 0; } .byo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--brand-line); padding-top: 20px; min-height: 56px; } .byo-foot .picked { font-size: .85rem; color: var(--ink-soft); min-width: 0; } .byo-foot .btn-choose { width: auto; min-width: 230px; } /* ── FAQ accordion —

, so it works with no JS at all ───────────── */ .lite-faq { max-width: 820px; margin: 0 auto; padding: 0 20px; } .faq-item { background: #fff; border: 1px solid var(--n-100); border-radius: 18px; margin-bottom: 12px; overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .faq-item[open] { border-color: rgba(83, 3, 131, .22); box-shadow: var(--card-shadow); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; padding: 19px 22px; font-size: .98rem; font-weight: 600; color: var(--ink); min-width: 0; } .faq-q::-webkit-details-marker { display: none; } .faq-q span { min-width: 0; } .faq-q i { color: var(--primary); font-size: 1.15rem; flex: 0 0 auto; transition: transform .28s var(--ease); } .faq-item[open] .faq-q i { transform: rotate(45deg); } .faq-a { padding: 0 22px 20px; font-size: .91rem; color: var(--ink-soft); line-height: 1.7; margin: 0; } /* ── Closing CTA band ───────────────────────────────────────────────────── */ .lite-cta { background: var(--n-950); color: #fff; text-align: center; position: relative; overflow: hidden; } .lite-cta::before { content: ''; position: absolute; top: 50%; left: 50%; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; background: radial-gradient(circle, rgba(160, 32, 240, .26) 0%, transparent 65%); pointer-events: none; } .lite-cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 20px; } .lite-cta h2 { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.6rem); font-weight: 800; margin: 0 0 14px; line-height: 1.1; } .lite-cta p { font-size: 1rem; color: rgba(255, 255, 255, .74); margin: 0 auto 30px; max-width: 560px; line-height: 1.7; } .lite-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 52px; } /* ── Empty state, footers ───────────────────────────────────────────────── */ .price-empty { max-width: 640px; margin: 0 auto; padding: 38px 28px; background: rgba(255, 255, 255, .86); text-align: center; border: 1px solid var(--glass-brd); border-radius: 24px; box-shadow: var(--card-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } .price-empty-raised { margin-top: -80px; } .price-empty h2 { font-size: 1.28rem; font-weight: 800; color: var(--ink); margin: 0 0 10px; } .price-empty p { font-size: .92rem; color: var(--ink-soft); margin: 0 0 20px; } .price-foot { text-align: center; padding: 54px 20px 10px; color: var(--n-300); font-size: .81rem; } .price-foot .no-lifetime { color: var(--ink-soft); font-size: .86rem; } .lite-foot { border-top: 1px solid var(--brand-line); background: var(--n-50); } .lite-foot-inner { max-width: 1180px; margin: 0 auto; padding: 24px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; min-height: 56px; color: var(--n-500); font-size: .82rem; } .lite-foot-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lite-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .lite-foot-links a { color: var(--n-500); text-decoration: none; white-space: nowrap; transition: color .2s var(--ease); } .lite-foot-links a:hover { color: var(--primary); } /* ── Narrow and zoomed ──────────────────────────────────────────────────── */ @media (max-width: 960px) { .lite-public { --pad-y: 76px; } .lite-burger { display: flex; } /* The bar becomes a panel: one column, full width, every control at full size. display is toggled by the .is-open class, never by an inline style — jQuery's show()/hide() would strip the rules below (bug class, 05/09/2026). */ .lite-nav { flex-wrap: wrap; } .lite-nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 0 14px; border-top: 1px solid var(--brand-line); margin-top: 8px; } .lite-nav-links.is-open { display: flex; } .lite-nav-link { padding: 12px 4px; font-size: 1rem; } .lite-nav-link::after { display: none; } .lite-country, .lite-country-btn, .lite-country-static { width: 100%; max-width: none; } .lite-country-btn { justify-content: space-between; padding: 12px 16px; } .lite-country-menu { width: 100%; } .lite-nav-links .lite-btn { width: 100%; margin-top: 6px; padding: 13px 20px; font-size: .95rem; } } @media (max-width: 760px) { .lite-nav { padding: 10px 14px; } .lite-hero { padding: 64px 16px 76px; } .price-hero { padding: 56px 16px 116px; } .plan-wrap-raised { margin-top: -84px; } .lite-sec-head { margin-bottom: 36px; } .plan-wrap, .compare-wrap, .byo, .lite-shell, .lite-faq, .lite-flash { padding-left: 14px; padding-right: 14px; } .byo-head, .byo-body { padding-left: 18px; padding-right: 18px; } .byo-total { text-align: left; } .byo-foot .btn-choose { width: 100%; min-width: 0; } .lite-foot-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 420px) { .lite-btn { padding: 12px 22px; font-size: .9rem; } .period-btn { padding: 9px 14px; font-size: .83rem; } .feat-card, .plan-card { padding: 24px 20px; } } /* ── Beyond the plans: Standalone Server / Self-Hosted ───────────────────── The two editions that are not bought on a card. They reuse .plan-card so they sit in the same visual family as the ladder, with a dashed edge (the established "talk to us" cue, borrowed from .plan-card-contact) to say the button asks a question rather than starting a checkout. */ .edition-card { border-style: dashed; background: rgba(255, 255, 255, .66); } .edition-card .plan-price-figure { font-size: 1.45rem; } .lite-sec-lead { max-width: 62ch; margin: 8px auto 0; color: var(--muted, #5b6472); } /*

: the marker is removed on every engine — WebKit needs its own pseudo-element — so the summary can be styled as the button it reads as. */ .edition-ask { margin-top: 4px; } .edition-ask > summary { list-style: none; cursor: pointer; display: inline-block; text-align: center; } .edition-ask > summary::-webkit-details-marker { display: none; } .edition-ask > summary::marker { content: ''; } .edition-ask[open] > summary { opacity: .72; } .edition-ask > summary:focus-visible { outline: 2px solid rgba(83, 3, 131, .55); outline-offset: 3px; } .edition-form { margin-top: 14px; text-align: left; } .edition-form .form-label { font-size: .82rem; font-weight: 600; margin-bottom: 3px; } .edition-form .form-control { border-radius: 12px; font-size: .9rem; } /* The honeypot. Off-screen rather than display:none — a bot that skips hidden inputs still fills this one — and never reachable by keyboard or reader. */ .edition-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── Panel pages — checkout, "confirming", the fake gateway ───────────────── One centred, rounded box on the plain ground: the same shape as the signup steps' card, so paying reads as the step after signing up. The checkout used to sit flush against the left edge with no wrapper at all. */ .lite-panel-wrap { max-width: 600px; margin: 0 auto; padding: 36px 16px 64px; min-width: 0; } .lite-panel { background: #fff; border: 1px solid var(--brand-line); border-radius: 20px; padding: 28px; box-shadow: var(--card-shadow); min-width: 0; } .lite-panel-wrap .card { border: 1px solid var(--brand-line); border-radius: 20px; box-shadow: var(--card-shadow); margin-top: 16px; } .lite-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 14px; margin-bottom: 18px; min-width: 0; } .lite-panel-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9ca3af; margin-bottom: 4px; } .lite-panel-title { font-size: 1.45rem; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lite-panel-sub { font-size: .9rem; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.55; } .lite-panel-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--primary); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 50px; padding: 6px 12px; max-width: 100%; min-width: 0; } .lite-panel-tag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lite-panel-icon { font-size: 2.8rem; line-height: 1; margin-bottom: 8px; } .lite-panel-foot { text-align: center; margin-top: 16px; font-size: .84rem; color: var(--ink-soft); } .lite-panel-foot a { color: var(--ink-soft); } .lite-btn-quiet { background: #fff; color: var(--primary); border-color: var(--brand-line); } .lite-btn-quiet:hover { color: var(--primary); background: var(--brand-soft); transform: translateY(-2px); } /* The period toggle — a pill group, the active period in the brand gradient. */ .lite-period { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 50px; padding: 4px; margin-bottom: 18px; max-width: 100%; } .lite-period a { border-radius: 50px; padding: 7px 16px; font-size: .86rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background .18s var(--ease), color .18s var(--ease); } .lite-period a:hover { color: var(--primary); } .lite-period a.active { background: var(--brand-grad); color: #fff; box-shadow: var(--brand-glow); } /* The quote — rate, seats, coupon, the sum. */ .lite-quote { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 16px; padding: 20px; margin-bottom: 18px; min-width: 0; } .lite-quote-rate { font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; } .lite-quote-aed { font-size: .84rem; color: var(--ink-soft); margin-top: 4px; } .lite-quote-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; min-height: 2.4rem; } .lite-quote-row label { font-size: .84rem; font-weight: 700; margin: 0; white-space: nowrap; } .lite-quote-row .form-control { border-radius: 10px; border-color: #e0dbe8; font-size: .88rem; height: 36px; background: #fff; } .lite-quote-row .form-control::placeholder { text-transform: none; color: #a9a3b8; } .lite-quote-row .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83, 3, 131, .12); } .lite-quote-row .hint { font-size: .8rem; color: var(--ink-soft); min-width: 0; } .lite-quote-btn { border-radius: 50px; border: 1px solid var(--brand-line); background: #fff; color: var(--primary); font-size: .82rem; font-weight: 600; padding: 7px 14px; white-space: nowrap; cursor: pointer; transition: background .18s var(--ease); } .lite-quote-btn:hover { background: #f1eaf9; } .lite-quote-divider { border-top: 1px solid var(--brand-line); margin-top: 14px; padding-top: 14px; } .lite-sum { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 10px; } .lite-sum td { padding: 5px 0; vertical-align: top; } .lite-sum td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 12px; } .lite-sum .muted { color: var(--ink-soft); } .lite-sum .total td { border-top: 1px solid var(--brand-line); padding-top: 10px; font-size: 1.1rem; font-weight: 800; } .lite-quote-note { font-size: .8rem; color: var(--ink-soft); line-height: 1.55; margin-top: 12px; } /* "Pay with" — one row per way the country may pay. A row is a label around a radio; the ticked row is outlined. The list grows by one row per gateway the owner switches on (Tabby, Tamara later) and nothing else here changes. */ .lite-methods { margin: 0 0 14px; } .lite-methods-title { font-size: .84rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .lite-method { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 3.2rem; padding: 10px 14px; margin: 0 0 8px; border: 1px solid var(--brand-line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .lite-method:hover { border-color: var(--primary); } .lite-method input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .lite-method-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #f1eaf9; color: var(--primary); font-size: 1.25rem; } .lite-method-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .lite-method-label { font-size: .92rem; font-weight: 700; color: var(--ink); } .lite-method-hint { font-size: .78rem; color: var(--ink-soft); line-height: 1.45; } .lite-method-tick { flex: 0 0 auto; font-size: 1.3rem; color: var(--brand-line); } .lite-method.is-selected, .lite-method:has(input:checked) { border-color: var(--primary); background: #faf7fd; box-shadow: 0 0 0 3px rgba(83, 3, 131, .10); } .lite-method.is-selected .lite-method-tick, .lite-method:has(input:checked) .lite-method-tick { color: var(--primary); } .lite-method:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; } /* The consent line and the one button that takes money. */ .lite-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 8px; } .lite-consent input { margin: 3px 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--primary); } .lite-consent label { min-width: 0; } .lite-consent a { color: var(--primary); font-weight: 600; } .lite-pay-btn { width: 100%; padding: 15px 22px; font-size: 1.02rem; margin-top: 8px; } .lite-pay-secure { text-align: center; font-size: .78rem; color: var(--ink-soft); margin: 12px 0 0; } @media (max-width: 520px) { .lite-panel-wrap { padding: 20px 12px 48px; } .lite-panel { padding: 20px 16px; border-radius: 16px; } .lite-quote { padding: 16px; } .lite-quote-rate { font-size: 1.4rem; } }