/* ========================================================================= ReviewJalpi — Landing-page styles Scoped under so global styles aren't disturbed. ========================================================================= */ .rj-landing { background: #ffffff; } /* Make the marketing top nav blend onto the dark hero — pin it absolutely * over the hero so the white text sits on the dark band, not on white. */ .rj-landing { position: relative; } .rj-landing header.rj-nav { background: transparent; border-bottom: none !important; position: absolute; top: 0; left: 0; right: 0; z-index: 30; } .rj-landing main { position: relative; } .rj-landing header.rj-nav .rj-nav-link { color: rgba(255, 255, 255, .85); } .rj-landing header.rj-nav .rj-nav-link:hover, .rj-landing header.rj-nav .rj-nav-link[aria-current="page"] { color: #fff; } .rj-landing header.rj-nav .btn-outline-primary.rj-btn { color: #fff; border-color: rgba(255, 255, 255, .35); background: transparent; } .rj-landing header.rj-nav .btn-outline-primary.rj-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); color: #fff; } .rj-landing header.rj-nav .btn-primary.rj-btn { background: var(--rj-gold); border-color: var(--rj-gold); color: #0F172A; box-shadow: 0 8px 24px rgba(251, 191, 36, .35); } .rj-landing header.rj-nav .btn-primary.rj-btn:hover { background: #F59E0B; border-color: #F59E0B; } .rj-landing header.rj-nav .rj-nav-link[aria-current="page"]::after { background: #fff; } /* On the dark hero band, swap the colored horizontal lockup for the white-on-dark variant (white "Review" + gold "Jalpi" + white bubble). The mono-white SVG is icon-only -- using it here would drop the wordmark. */ .rj-landing header.rj-nav img[alt="ReviewJalpi"] { content: url("/brand/logo-horizontal-white.svg"); filter: drop-shadow(0 6px 14px rgba(8, 145, 178, .35)); } /* ===================================================================== 1. HERO — dark cyan/slate gradient + animated mesh + product mockup ===================================================================== */ .rj-lp-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(8, 145, 178, .55), transparent 60%), radial-gradient(ellipse 60% 50% at 90% 10%, rgba(251, 191, 36, .25), transparent 60%), radial-gradient(ellipse 70% 50% at 80% 100%, rgba(14, 116, 144, .55), transparent 60%), linear-gradient(180deg, #0B1220 0%, #0F172A 60%, #0B1220 100%); color: #fff; padding-top: 90px; /* clear the absolutely-positioned nav */ } /* Subtle moving mesh — pure CSS, GPU-cheap */ .rj-lp-hero::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 10% 30%, rgba(34, 211, 238, .14) 0, transparent 22%), radial-gradient(circle at 80% 20%, rgba(251, 191, 36, .12) 0, transparent 18%), radial-gradient(circle at 60% 80%, rgba(14, 116, 144, .35) 0, transparent 26%), radial-gradient(circle at 30% 70%, rgba(8, 145, 178, .25) 0, transparent 22%); filter: blur(20px); animation: rj-lp-mesh 18s ease-in-out infinite alternate; pointer-events: none; } @keyframes rj-lp-mesh { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-2%, -1%, 0) scale(1.05); } } /* Faint grid overlay for "modern app" feel */ .rj-lp-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%); pointer-events: none; } .rj-lp-hero-inner { position: relative; z-index: 2; padding: 2rem 0 6rem; } @media (min-width: 992px) { .rj-lp-hero-inner { padding: 2.5rem 0 8rem; } } .rj-lp-eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .85rem; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; font-size: .8rem; font-weight: 600; color: #ECFEFF; letter-spacing: .02em; } .rj-lp-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rj-gold); box-shadow: 0 0 12px rgba(251, 191, 36, .9); animation: rj-lp-pulse 2s ease-in-out infinite; } @keyframes rj-lp-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .55; } } .rj-lp-h1 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.05; letter-spacing: -0.025em; color: #fff; margin: 1rem 0 1.25rem; } .rj-lp-h1 .accent { background: linear-gradient(90deg, #FBBF24 0%, #FCD34D 50%, #FBBF24 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .rj-lp-sub { font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, .78); max-width: 38rem; margin-bottom: 2rem; } .rj-lp-cta-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; } .rj-lp-btn-primary { background: var(--rj-gold); color: #0F172A; border: none; font-weight: 700; padding: .85rem 1.6rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(251, 191, 36, .35), inset 0 -2px 0 rgba(0, 0, 0, .12); transition: transform .15s ease, box-shadow .2s ease; text-decoration: none; display: inline-block; } .rj-lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(251, 191, 36, .5), inset 0 -2px 0 rgba(0, 0, 0, .12); color: #0F172A; } .rj-lp-btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .25); font-weight: 600; padding: .85rem 1.4rem; border-radius: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-decoration: none; transition: background .15s ease, border-color .15s ease; display: inline-block; } .rj-lp-btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: #fff; } .rj-lp-trust-line { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.2rem; color: rgba(255, 255, 255, .65); font-size: .85rem; align-items: center; } .rj-lp-trust-line strong { color: #fff; font-weight: 600; } .rj-lp-trust-stars { color: var(--rj-gold); letter-spacing: .1em; } /* ----- Hero floating product mockup (pure CSS/SVG) ----- */ .rj-lp-mockup-stage { position: relative; perspective: 1600px; transform-style: preserve-3d; min-height: 420px; } .rj-lp-mockup { position: relative; width: 100%; max-width: 560px; margin-left: auto; background: linear-gradient(180deg, #ffffff 0%, #F7F7FA 100%); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 18px 30px -10px rgba(8, 145, 178, .25), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotateY(-8deg) rotateX(4deg); animation: rj-lp-float 6s ease-in-out infinite alternate; overflow: hidden; } @keyframes rj-lp-float { 0% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); } 100% { transform: rotateY(-6deg) rotateX(2deg) translateY(-10px); } } .rj-lp-mockup-bar { display: flex; align-items: center; gap: .35rem; padding: .65rem .85rem; background: #F1F5F9; border-bottom: 1px solid #E5E7EB; } .rj-lp-mockup-bar .dot { width: 10px; height: 10px; border-radius: 50%; } .rj-lp-mockup-bar .dot.r { background: #EF4444; } .rj-lp-mockup-bar .dot.y { background: #F59E0B; } .rj-lp-mockup-bar .dot.g { background: #10B981; } .rj-lp-mockup-url { margin-left: auto; background: #fff; color: #6B7280; font-size: .72rem; padding: .25rem .6rem; border-radius: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; border: 1px solid #E5E7EB; } .rj-lp-mockup-body { padding: 1rem; display: grid; grid-template-columns: 64px 1fr; gap: .85rem; min-height: 320px; } .rj-lp-mockup-side { background: #0F172A; border-radius: 10px; padding: .65rem .4rem; display: flex; flex-direction: column; gap: .5rem; align-items: center; } .rj-lp-mockup-side .ic { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .08); } .rj-lp-mockup-side .ic.active { background: var(--rj-primary); box-shadow: 0 6px 18px rgba(8, 145, 178, .55); } .rj-lp-mockup-content { display: flex; flex-direction: column; gap: .65rem; } .rj-lp-mockup-row { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; box-shadow: 0 2px 6px rgba(15, 23, 42, .04); } .rj-lp-mockup-row .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #0891B2, #FBBF24); flex-shrink: 0; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8rem; } .rj-lp-mockup-row .meta { flex: 1; min-width: 0; } .rj-lp-mockup-row .meta .l1 { height: 8px; background: #1F2937; border-radius: 4px; width: 50%; margin-bottom: 5px; } .rj-lp-mockup-row .meta .l2 { height: 6px; background: #E5E7EB; border-radius: 3px; width: 80%; } .rj-lp-mockup-row .stars { color: var(--rj-gold); font-size: .8rem; letter-spacing: 1px; flex-shrink: 0; } .rj-lp-mockup-row.new { border-color: var(--rj-primary); box-shadow: 0 4px 14px rgba(8, 145, 178, .18); } /* Floating chips around the mockup for life */ .rj-lp-chip { position: absolute; background: #fff; border-radius: 12px; padding: .55rem .8rem; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .1); display: flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 600; color: #0F172A; animation: rj-lp-float-chip 5s ease-in-out infinite alternate; } .rj-lp-chip .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: .85rem; } .rj-lp-chip-1 { top: 8%; left: -3%; animation-delay: .3s; } .rj-lp-chip-1 .ic { background: #4285F4; } /* Google blue */ .rj-lp-chip-2 { bottom: 14%; left: -6%; animation-delay: 1.1s; } .rj-lp-chip-2 .ic { background: #1877F2; } /* Facebook blue */ .rj-lp-chip-3 { top: 18%; right: -2%; animation-delay: .7s; } .rj-lp-chip-3 .ic { background: #00B67A; } /* Trustpilot green */ @keyframes rj-lp-float-chip { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } } @media (max-width: 991.98px) { .rj-lp-mockup-stage { min-height: 360px; margin-top: 3rem; } .rj-lp-mockup { transform: rotateY(-4deg) rotateX(2deg); margin: 0 auto; } } /* ===================================================================== 2. LOGO STRIP — "Connects with" ===================================================================== */ .rj-lp-logos { background: #fff; border-top: 1px solid var(--rj-border); border-bottom: 1px solid var(--rj-border); padding: 1.75rem 0; } .rj-lp-logos-label { color: var(--rj-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; text-align: center; margin-bottom: 1rem; } .rj-lp-logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; color: var(--rj-muted); font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; font-size: 1.05rem; opacity: .85; } .rj-lp-logos-row span { display: inline-flex; align-items: center; gap: .55rem; transition: color .15s ease, opacity .15s ease; } .rj-lp-logos-row span:hover { color: var(--rj-ink); opacity: 1; } .rj-lp-logos-row .badge-letter { width: 26px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; color: #fff; font-size: .8rem; } /* ===================================================================== 3. FEATURE GRID — "Everything to win reviews" ===================================================================== */ .rj-lp-section { padding: 5rem 0; background: #fff; } .rj-lp-section.alt { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(8, 145, 178, .07), transparent 60%), var(--rj-surface); } .rj-lp-section-head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; } .rj-lp-section-eyebrow { color: var(--rj-primary); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: .75rem; } .rj-lp-h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--rj-ink); margin-bottom: 1rem; } .rj-lp-section-sub { color: var(--rj-muted); font-size: 1.05rem; line-height: 1.6; } /* ---- Feature category tokens (shared by hero + compact cards) ---------- */ :root { --rj-cat-collect-bg: rgba(8, 145, 178, .10); --rj-cat-collect-fg: #0E7490; --rj-cat-collect-ring: rgba(8, 145, 178, .25); /* Outbound asks (SMS/email/WhatsApp campaigns). Violet sits between the cyan and gold halves of the palette so the 5 categories scan distinct. */ --rj-cat-request-bg: rgba(139, 92, 246, .12); --rj-cat-request-fg: #6D28D9; --rj-cat-request-ring: rgba(139, 92, 246, .30); --rj-cat-engage-bg: rgba(251, 191, 36, .14); --rj-cat-engage-fg: #B45309; --rj-cat-engage-ring: rgba(251, 191, 36, .35); --rj-cat-showcase-bg: rgba(14, 116, 144, .10); --rj-cat-showcase-fg: #0E7490; --rj-cat-showcase-ring:rgba(14, 116, 144, .28); --rj-cat-measure-bg: rgba(245, 158, 11, .10); --rj-cat-measure-fg: #B45309; --rj-cat-measure-ring: rgba(245, 158, 11, .28); } /* ---- Two big hero feature cards row (Inbox + Widgets) ----------------- */ .rj-lp-feature-hero-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; } @media (min-width: 900px) { .rj-lp-feature-hero-row { grid-template-columns: 1fr 1fr; } } .rj-lp-feature-hero { position: relative; background: #fff; border-radius: 20px; padding: 1.75rem; border: 1px solid var(--rj-border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; display: grid; grid-template-rows: auto 1fr; gap: 1.25rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .rj-lp-feature-hero:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(8, 145, 178, .22), 0 6px 14px rgba(15, 23, 42, .06); } .rj-lp-feature-hero h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--rj-ink); margin: 0 0 .35rem; } .rj-lp-feature-hero p { color: var(--rj-muted); font-size: .98rem; line-height: 1.55; margin: 0; max-width: 36ch; } .rj-lp-feature-hero-preview { background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%); border: 1px solid var(--rj-border); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; min-height: 168px; justify-content: center; } /* Mini inbox preview rows */ .rj-lp-preview-row { display: flex; align-items: center; gap: .65rem; background: #fff; border: 1px solid var(--rj-border); border-radius: 10px; padding: .55rem .7rem; font-size: .82rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .rj-lp-preview-row .nm { color: var(--rj-ink); font-weight: 600; flex: 1; } .rj-lp-preview-row .st { color: var(--rj-gold); letter-spacing: 1px; font-size: .78rem; } .rj-lp-preview-row.new { border-color: var(--rj-primary); box-shadow: 0 4px 12px rgba(8, 145, 178, .18); } .rj-lp-preview-row.muted { opacity: .55; } /* Mini widget preview */ .rj-lp-preview-badge { display: flex; align-items: center; gap: .65rem; background: #fff; border: 1px solid var(--rj-border); border-radius: 10px; padding: .65rem .8rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .rj-lp-preview-badge .t { font-size: .75rem; font-weight: 600; color: var(--rj-muted); } .rj-lp-preview-badge .r { font-size: 1.1rem; font-weight: 800; color: var(--rj-ink); display: flex; align-items: center; gap: .35rem; } .rj-lp-preview-badge .r span { color: var(--rj-gold); letter-spacing: 1px; font-size: .85rem; } .rj-lp-preview-layouts { display: flex; gap: .5rem; margin-top: .5rem; justify-content: center; } .rj-lp-preview-layouts .layout { width: 64px; height: 42px; background: #fff; border: 1px solid var(--rj-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .rj-lp-preview-layouts .layout i { width: 14px; height: 100%; background: #E5E7EB; border-radius: 3px; } .rj-lp-preview-layouts .layout.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; } .rj-lp-preview-layouts .layout.grid i { width: 100%; } .rj-lp-preview-layouts .layout.sel { border-color: var(--rj-primary); box-shadow: 0 4px 10px rgba(8, 145, 178, .25); } .rj-lp-preview-layouts .layout.sel i { background: var(--rj-primary); } /* ---- Category pill above feature title (Collect/Engage/Showcase/Measure) ---- */ .rj-lp-feature-cat { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: .9rem; } .rj-lp-feature-cat-lbl { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--rj-muted); } /* ---- Compact 4-up feature grid (now sized for 4 cols on desktop) ------- */ .rj-lp-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .rj-lp-feature { position: relative; background: #fff; border-radius: 18px; padding: 1.5rem 1.4rem; border: 1px solid var(--rj-border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow: hidden; } .rj-lp-feature::before { /* corner glow accent — color overridden per category */ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(8, 145, 178, .12), transparent 60%); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .rj-lp-feature:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(8, 145, 178, .22), 0 6px 14px rgba(15, 23, 42, .06); } .rj-lp-feature:hover::before { opacity: 1; } .rj-lp-feature-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(8, 145, 178, .12), rgba(251, 191, 36, .12)); color: var(--rj-primary); box-shadow: inset 0 0 0 1px rgba(8, 145, 178, .15); flex-shrink: 0; } .rj-lp-feature-ic svg { width: 22px; height: 22px; stroke: currentColor; } .rj-lp-feature-hero .rj-lp-feature-ic { width: 48px; height: 48px; border-radius: 14px; } .rj-lp-feature-hero .rj-lp-feature-ic svg { width: 24px; height: 24px; } .rj-lp-feature h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--rj-ink); margin-bottom: .35rem; } .rj-lp-feature p { color: var(--rj-muted); font-size: .88rem; line-height: 1.5; margin: 0; } /* ---- Per-category palette: tint the icon tile + hover-glow per card ---- */ .cat-collect .rj-lp-feature-ic { background: var(--rj-cat-collect-bg); color: var(--rj-cat-collect-fg); box-shadow: inset 0 0 0 1px var(--rj-cat-collect-ring); } .cat-request .rj-lp-feature-ic { background: var(--rj-cat-request-bg); color: var(--rj-cat-request-fg); box-shadow: inset 0 0 0 1px var(--rj-cat-request-ring); } .cat-engage .rj-lp-feature-ic { background: var(--rj-cat-engage-bg); color: var(--rj-cat-engage-fg); box-shadow: inset 0 0 0 1px var(--rj-cat-engage-ring); } .cat-showcase .rj-lp-feature-ic { background: var(--rj-cat-showcase-bg); color: var(--rj-cat-showcase-fg); box-shadow: inset 0 0 0 1px var(--rj-cat-showcase-ring); } .cat-measure .rj-lp-feature-ic { background: var(--rj-cat-measure-bg); color: var(--rj-cat-measure-fg); box-shadow: inset 0 0 0 1px var(--rj-cat-measure-ring); } .cat-collect .rj-lp-feature-cat-lbl { color: var(--rj-cat-collect-fg); } .cat-request .rj-lp-feature-cat-lbl { color: var(--rj-cat-request-fg); } .cat-engage .rj-lp-feature-cat-lbl { color: var(--rj-cat-engage-fg); } .cat-showcase .rj-lp-feature-cat-lbl { color: var(--rj-cat-showcase-fg); } .cat-measure .rj-lp-feature-cat-lbl { color: var(--rj-cat-measure-fg); } .cat-collect::before { background: radial-gradient(ellipse 60% 50% at 100% 0%, var(--rj-cat-collect-bg), transparent 60%); } .cat-request::before { background: radial-gradient(ellipse 60% 50% at 100% 0%, var(--rj-cat-request-bg), transparent 60%); } .cat-engage::before { background: radial-gradient(ellipse 60% 50% at 100% 0%, var(--rj-cat-engage-bg), transparent 60%); } .cat-showcase::before { background: radial-gradient(ellipse 60% 50% at 100% 0%, var(--rj-cat-showcase-bg), transparent 60%); } .cat-measure::before { background: radial-gradient(ellipse 60% 50% at 100% 0%, var(--rj-cat-measure-bg), transparent 60%); } .cat-collect:hover { border-color: var(--rj-cat-collect-ring); } .cat-request:hover { border-color: var(--rj-cat-request-ring); } .cat-engage:hover { border-color: var(--rj-cat-engage-ring); } .cat-showcase:hover { border-color: var(--rj-cat-showcase-ring); } .cat-measure:hover { border-color: var(--rj-cat-measure-ring); } /* ===================================================================== 4. HOW IT WORKS — 3 steps with connector ===================================================================== */ .rj-lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; position: relative; } .rj-lp-step { position: relative; background: #fff; border-radius: 18px; padding: 2rem 1.75rem; border: 1px solid var(--rj-border); box-shadow: 0 10px 30px -15px rgba(15, 23, 42, .15); transition: transform .25s ease, box-shadow .25s ease; } .rj-lp-step:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -15px rgba(8, 145, 178, .25); } .rj-lp-step-num { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--rj-primary), var(--rj-primary-600)); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.6rem; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(8, 145, 178, .4); margin-bottom: 1.25rem; } .rj-lp-step h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; font-size: 1.2rem; margin-bottom: .5rem; color: var(--rj-ink); } .rj-lp-step p { color: var(--rj-muted); margin: 0; font-size: .95rem; line-height: 1.55; } /* ===================================================================== 5. SOCIAL PROOF — testimonial marquee ===================================================================== */ .rj-lp-proof-strip { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; align-items: center; padding: 1.5rem 0 2.5rem; } .rj-lp-proof-strip .stat { text-align: center; } .rj-lp-proof-strip .stat .n { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2rem; color: var(--rj-ink); line-height: 1; } .rj-lp-proof-strip .stat .n .star { color: var(--rj-gold); } .rj-lp-proof-strip .stat .l { color: var(--rj-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .35rem; font-weight: 600; } .rj-lp-marquee { overflow: hidden; position: relative; padding: 1rem 0; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .rj-lp-marquee-track { display: flex; gap: 1.25rem; width: max-content; animation: rj-lp-marquee 40s linear infinite; } .rj-lp-marquee:hover .rj-lp-marquee-track { animation-play-state: paused; } @keyframes rj-lp-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .rj-lp-quote { flex: 0 0 360px; background: #fff; border: 1px solid var(--rj-border); border-radius: 16px; padding: 1.5rem; box-shadow: 0 8px 24px -10px rgba(15, 23, 42, .12); display: flex; flex-direction: column; gap: .75rem; } .rj-lp-quote .stars { color: var(--rj-gold); letter-spacing: 2px; } .rj-lp-quote .body { color: var(--rj-ink); font-size: .98rem; line-height: 1.5; flex: 1; } .rj-lp-quote .by { display: flex; align-items: center; gap: .65rem; margin-top: .25rem; } .rj-lp-quote .by .av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #0891B2, #FBBF24); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .rj-lp-quote .by .nm { font-weight: 700; color: var(--rj-ink); font-size: .9rem; line-height: 1.1; } .rj-lp-quote .by .ro { color: var(--rj-muted); font-size: .8rem; } /* ===================================================================== 6. BIG CTA BAND ===================================================================== */ .rj-lp-cta-band { position: relative; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 20% 100%, rgba(251, 191, 36, .25), transparent 60%), linear-gradient(135deg, var(--rj-primary) 0%, var(--rj-primary-600) 100%); color: #fff; padding: 5rem 0; border-radius: 28px; margin: 0 1rem; } .rj-lp-cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%); pointer-events: none; } .rj-lp-cta-band .inner { position: relative; z-index: 2; text-align: center; max-width: 36rem; margin: 0 auto; } .rj-lp-cta-band h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.02em; color: #fff; margin-bottom: 1rem; } .rj-lp-cta-band p { color: rgba(255, 255, 255, .85); font-size: 1.05rem; margin-bottom: 2rem; } /* ===================================================================== 7. BIG FOOTER ===================================================================== */ .rj-lp-footer { background: radial-gradient(ellipse 60% 40% at 80% 0%, rgba(8, 145, 178, .35), transparent 60%), radial-gradient(ellipse 60% 40% at 10% 100%, rgba(251, 191, 36, .12), transparent 60%), linear-gradient(180deg, #0B1220 0%, #060A14 100%); color: rgba(255, 255, 255, .75); padding: 5rem 0 2rem; margin-top: 5rem; position: relative; overflow: hidden; } .rj-lp-footer::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 30%, transparent 80%); pointer-events: none; } .rj-lp-footer .inner { position: relative; z-index: 2; } .rj-lp-footer-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem; margin-bottom: 3rem; } @media (max-width: 991.98px) { .rj-lp-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 575.98px) { .rj-lp-footer-top { grid-template-columns: 1fr; } } .rj-lp-footer-brand img { height: 36px; } .rj-lp-footer-brand p { color: rgba(255, 255, 255, .65); font-size: .9rem; line-height: 1.55; margin: 1rem 0 1.25rem; max-width: 18rem; } .rj-lp-footer-social { display: flex; gap: .5rem; } .rj-lp-footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #fff; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .rj-lp-footer-social a:hover { background: var(--rj-primary); border-color: var(--rj-primary); transform: translateY(-2px); } .rj-lp-footer-social svg { width: 18px; height: 18px; } .rj-lp-footer-col h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 1rem; } .rj-lp-footer-col ul { list-style: none; padding: 0; margin: 0; } .rj-lp-footer-col li { margin-bottom: .6rem; } .rj-lp-footer-col a { color: rgba(255, 255, 255, .65); text-decoration: none; font-size: .92rem; transition: color .15s ease; } .rj-lp-footer-col a:hover { color: #fff; } .rj-lp-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, .55); font-size: .85rem; } .rj-lp-footer-status { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); color: #6EE7B7; border-radius: 999px; font-size: .8rem; font-weight: 600; } .rj-lp-footer-status .pulse { width: 8px; height: 8px; background: #10B981; border-radius: 50%; box-shadow: 0 0 10px #10B981; animation: rj-lp-pulse 2s ease-in-out infinite; } /* ===================================================================== Reveal-on-scroll (light JS hook) ===================================================================== */ .rj-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); } .rj-reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .rj-reveal { opacity: 1; transform: none; transition: none; } .rj-lp-mockup, .rj-lp-hero::before, .rj-lp-chip, .rj-lp-eyebrow .dot, .rj-lp-footer-status .pulse, .rj-lp-marquee-track, .rj-lp-widget-pill { animation: none !important; } } /* ========================================================================= ENTERPRISE POLISH — Phase E (landing v2) Adds: source-branded review cards (used in hero + widget mockup), widget showcase split, multi-platform rating band, award ribbons, testimonial card grid. Typography rhythm tightened. ========================================================================= */ /* ----- Source-branded square badge (G, f, ★, C, G²) used in cards & ratings ----- */ .rj-lp-card-src { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: #fff; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); } .rj-lp-card-src.sm { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 10px; } .rj-lp-card-src.xs { width: 22px; height: 22px; font-size: .72rem; border-radius: 6px; } .rj-lp-card-src.google { background: #4285F4; } .rj-lp-card-src.facebook { background: #1877F2; } .rj-lp-card-src.trustpilot { background: #00B67A; } /* Initial-circle avatar used on testimonial cards (no fake platform badges). */ .rj-lp-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0891B2, #0E7490); color: #fff; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: .95rem; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); } /* ----- Hero inbox cards (replaces old .rj-lp-mockup-row) ----- */ .rj-lp-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: .8rem .9rem; box-shadow: 0 2px 6px rgba(15, 23, 42, .04); } .rj-lp-card header { display: flex; align-items: center; gap: .65rem; margin-bottom: .4rem; } .rj-lp-card .who { flex: 1; min-width: 0; } .rj-lp-card .who .nm { font-size: .85rem; font-weight: 700; color: #0F172A; line-height: 1.2; } .rj-lp-card .who .sub { font-size: .7rem; color: #6B7280; margin-top: 2px; } .rj-lp-card .rating { font-size: .8rem; color: #FBBF24; letter-spacing: 1px; font-weight: 700; } .rj-lp-card .rating span { color: #0F172A; margin-left: 4px; } .rj-lp-card .body { font-size: .82rem; line-height: 1.45; color: #374151; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rj-lp-card.new { border-color: var(--rj-primary); box-shadow: 0 4px 14px rgba(8, 145, 178, .22), 0 0 0 3px rgba(8, 145, 178, .08); position: relative; } .rj-lp-card.new::after { content: "NEW"; position: absolute; top: -8px; right: 10px; background: var(--rj-primary); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 4px; box-shadow: 0 4px 10px rgba(8, 145, 178, .35); } /* ----- Richer floating chips (2-line, with sub label) ----- */ .rj-lp-chip .sub { display: block; font-weight: 500; font-size: .68rem; color: #6B7280; margin-top: 1px; } /* ===================================================================== Widget-showcase split section ===================================================================== */ .rj-lp-widget-stage { position: relative; padding: 2rem 0; min-height: 460px; } .rj-lp-widget-mock { background: #fff; border: 1px solid #E5E7EB; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .25), 0 8px 20px -8px rgba(8, 145, 178, .15); padding: 1.25rem; max-width: 540px; margin: 0 auto; } .rj-lp-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #F1F5F9; } .rj-lp-widget-headline { display: flex; align-items: center; gap: .75rem; } .rj-lp-widget-headline .t { font-size: .85rem; font-weight: 700; color: #0F172A; } .rj-lp-widget-headline .r { font-size: 1.05rem; font-weight: 800; color: #0F172A; display: flex; align-items: center; gap: .35rem; } .rj-lp-widget-headline .r span { color: #FBBF24; letter-spacing: 1px; font-size: .85rem; } .rj-lp-widget-headline .r small { color: #6B7280; font-weight: 500; font-size: .72rem; margin-left: 4px; } .rj-lp-widget-cta { background: var(--rj-primary); color: #fff !important; padding: .45rem .85rem; border-radius: 8px; font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .rj-lp-widget-cards { display: grid; grid-template-columns: 1fr; gap: .75rem; padding: 1rem 0 .5rem; } @media (min-width: 480px) { .rj-lp-widget-cards { grid-template-columns: 1fr 1fr; } } .rj-lp-widget-card { background: #F8FAFC; border: 1px solid #E5E7EB; border-radius: 10px; padding: .75rem .85rem; } .rj-lp-widget-card .hd { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; font-size: .75rem; } .rj-lp-widget-card .hd strong { color: #0F172A; } .rj-lp-widget-card .hd small { color: #6B7280; margin-left: auto; font-size: .68rem; } .rj-lp-widget-card .stars { color: #FBBF24; letter-spacing: 1px; font-size: .8rem; margin-bottom: .25rem; } .rj-lp-widget-card p { font-size: .76rem; line-height: 1.45; color: #374151; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rj-lp-widget-foot { display: flex; gap: 6px; justify-content: center; padding-top: .85rem; } .rj-lp-widget-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: #E5E7EB; } .rj-lp-widget-foot .dot.a { background: var(--rj-primary); width: 18px; border-radius: 3px; } /* Floating widget pills (Elfsight-style) */ .rj-lp-widget-pill { position: absolute; background: #fff; border: 1px solid #E5E7EB; border-radius: 999px; padding: .5rem .95rem; font-size: .78rem; color: #0F172A; box-shadow: 0 14px 30px -10px rgba(15, 23, 42, .25); animation: rj-lp-float-chip 6s ease-in-out infinite alternate; } .rj-lp-widget-pill strong { color: var(--rj-primary); font-weight: 800; } .rj-lp-widget-pill.p-1 { top: 5%; left: -2%; animation-delay: 0s; } .rj-lp-widget-pill.p-2 { top: 18%; right: -4%; animation-delay: .9s; } .rj-lp-widget-pill.p-3 { bottom: 18%; left: -4%; animation-delay: .4s; background: linear-gradient(135deg, #0891B2, #0E7490); color: #fff; border-color: transparent; } .rj-lp-widget-pill.p-3 strong { color: #FBBF24; } .rj-lp-widget-pill.p-4 { bottom: 6%; right: -2%; animation-delay: 1.3s; background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #0F172A; border-color: transparent; } .rj-lp-widget-pill.p-4 strong { color: #0F172A; } /* Bullet list used in widget-showcase copy column */ .rj-lp-bullet-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .rj-lp-bullet-list li { display: flex; align-items: center; gap: .65rem; font-size: 1rem; color: #1F2937; } .rj-lp-bullet-list .bul { width: 22px; height: 22px; border-radius: 50%; background: rgba(16, 185, 129, .15); color: #059669; display: grid; place-items: center; font-size: .8rem; font-weight: 800; flex-shrink: 0; } /* ===================================================================== "Loved by businesses worldwide" — dark band with ratings, awards, cards ===================================================================== */ .rj-lp-loved { position: relative; padding: 5rem 0 5.5rem; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(8, 145, 178, .35), transparent 60%), linear-gradient(180deg, #0B1220 0%, #0F172A 100%); color: #fff; overflow: hidden; } .rj-lp-loved::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 80%); pointer-events: none; } .rj-lp-loved .container { position: relative; z-index: 1; } /* Real trust signals -- replaces the old award ribbon + multi-platform rating rows. Five pills sitting side-by-side on dark, each anchored by an icon. */ .rj-lp-trust-row { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1080px; margin: 2.5rem auto 0; } @media (min-width: 560px) { .rj-lp-trust-row { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .rj-lp-trust-row { grid-template-columns: repeat(5, 1fr); } } .rj-lp-trust-pill { text-align: center; padding: 1.25rem 1rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .rj-lp-trust-pill:hover { background: rgba(255, 255, 255, .07); border-color: rgba(251, 191, 36, .35); transform: translateY(-2px); } .rj-lp-trust-pill .ic { width: 36px; height: 36px; border-radius: 10px; background: rgba(251, 191, 36, .15); color: var(--rj-gold); display: inline-grid; place-items: center; margin-bottom: .65rem; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .3); } .rj-lp-trust-pill .ic svg { width: 18px; height: 18px; } .rj-lp-trust-pill .t { font-size: .95rem; font-weight: 800; color: #fff; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; margin-bottom: .25rem; } .rj-lp-trust-pill .s { font-size: .78rem; color: rgba(255, 255, 255, .65); line-height: 1.4; } /* Testimonial cards (4 visible, no carousel) */ .rj-lp-testimonials { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 3.5rem auto 0; max-width: 1080px; } @media (min-width: 640px) { .rj-lp-testimonials { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .rj-lp-testimonials { grid-template-columns: repeat(4, 1fr); } } .rj-lp-testimonial { background: #fff; color: #0F172A; border-radius: 14px; padding: 1.25rem 1.15rem; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: .65rem; } .rj-lp-testimonial .hd { display: flex; align-items: center; gap: .65rem; font-size: .8rem; } .rj-lp-testimonial .hd strong { color: #0F172A; font-size: .85rem; line-height: 1.2; } .rj-lp-testimonial .hd small { color: #6B7280; font-size: .7rem; } .rj-lp-testimonial .stars { color: var(--rj-gold); letter-spacing: 2px; font-size: .9rem; } .rj-lp-testimonial p { font-size: .85rem; line-height: 1.5; color: #374151; margin: 0; } /* Honest "these are illustrative" line below the testimonial grid. */ .rj-lp-testimonial-disclaimer { text-align: center; margin: 1.5rem 0 0; font-size: .75rem; color: rgba(255, 255, 255, .5); font-style: italic; } /* ===================================================================== Typography rhythm — tighter eyebrow → headline → sub stack ===================================================================== */ .rj-lp-section-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: var(--rj-primary); margin-bottom: .55rem; } .rj-lp-h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.85rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: #0F172A; margin: 0 0 .75rem; } /* ========================================================================= Legal pages -- /privacy, /terms, /cookies. Long-form prose, comfy reading. ========================================================================= */ .rj-legal { max-width: 760px; margin: 0 auto; padding: 4rem 1.25rem 5rem; font-size: 1rem; line-height: 1.7; color: #1F2937; } .rj-legal-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: var(--rj-primary); margin-bottom: .65rem; } .rj-legal h1 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--rj-ink); margin: 0 0 .5rem; } .rj-legal .updated { color: var(--rj-muted); font-size: .9rem; margin: 0 0 2.5rem; } .rj-legal h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--rj-ink); margin: 2.25rem 0 .65rem; padding-top: .5rem; } .rj-legal h3 { font-weight: 700; font-size: 1.05rem; color: var(--rj-ink); margin: 1.5rem 0 .5rem; } .rj-legal p, .rj-legal li { color: #374151; } .rj-legal ul { padding-left: 1.25rem; } .rj-legal li { margin-bottom: .35rem; } .rj-legal a { color: var(--rj-primary); text-decoration: underline; } .rj-legal strong { color: var(--rj-ink); } .rj-legal code { background: #F1F5F9; padding: 1px 6px; border-radius: 4px; font-size: .9em; font-family: ui-monospace, monospace; } .rj-legal .rj-legal-disclaimer { margin-top: 3rem; padding: 1.25rem 1.5rem; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; font-size: .9rem; color: #78350F; }