/* ============================================================================= * recharge-theme.css — Custom override / enhancement layer * Pages: all 14 assets_v6 service landing pages (Recharge_service.php, * DTH_service.php, … , BBPS_service.php) — every page whose * carries the `rc-page` class. * Created 26/07/2026 by Vivek Singh. * ----------------------------------------------------------------------------- * This is an ADD-ON layer loaded AFTER assets_v6/css/main.css. It does NOT * modify any vendor theme file — main.css and friends stay pristine for reuse. * Every rule is scoped under `.rc-page` (set on ) so these enhancements * apply ONLY to the service landing pages and never leak into other pages that * share the assets_v6 theme. * * To revert on any page: remove the to this file and the `rc-page` body * class — that page falls back to the untouched vendor theme. (The hero markup * is image-free, so a reverted page shows a flat vendor banner, not the photo.) * ========================================================================== */ /* ── Design tokens ───────────────────────────────────────────────────────── */ .rc-page { --rc-grad: linear-gradient(135deg, #1153fc 0%, #5a6bff 52%, #c165dd 100%); --rc-grad-soft: linear-gradient(135deg, #2b56ff, #6a8bff); --rc-blue: #1153fc; --rc-violet: #c165dd; --rc-accent: #ff8a00; --rc-green: #22b07d; --rc-ink: #1c2333; --rc-muted: #5b6273; --rc-line: #eef0f5; --rc-card: #ffffff; --rc-below-hero: #f0f5fc; /* bg of the section under the hero — the hero's bottom curve matches it */ --rc-shadow: 0 10px 30px rgba(20, 30, 60, .08); --rc-shadow-lg: 0 22px 48px rgba(20, 30, 60, .14); --rc-glow: 0 18px 40px rgba(17, 83, 252, .30); --rc-radius: 16px; scroll-behavior: smooth; } /* ── Keyframes ───────────────────────────────────────────────────────────── */ @keyframes rc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes rc-pulse-glow { 0%, 100% { box-shadow: 0 10px 26px rgba(37, 211, 102, .45); } 50% { box-shadow: 0 14px 40px rgba(37, 211, 102, .75); } } @keyframes rc-fade-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @keyframes rc-check-pop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } } /* Hero: slow drift of the three radial layers (the flat linear base stays put) */ @keyframes rc-hero-drift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } 100% { background-position: 22% 14%, 76% 10%, 44% 86%, 0 0; } } @keyframes rc-orb-float { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(38px, -34px, 0) scale(1.12); } } @keyframes rc-ring-out { 0% { transform: scale(.35); opacity: 0; } 12% { opacity: .34; } 100% { transform: scale(2.6); opacity: 0; } } /* Background service glyphs: a slow vertical float with a touch of rotation, so * the scatter breathes with the orbs instead of sitting frozen on them. */ @keyframes rc-fx-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -24px, 0) rotate(5deg); } } /* Gentle entrance for card-based sections (fires once, on load) */ @media (prefers-reduced-motion: no-preference) { .rc-page .rc-op-card, .rc-page .rc-feat-card { animation: rc-fade-up .6s cubic-bezier(.2, .7, .2, 1) both; } .rc-page .rc-op-grid .rc-op-card:nth-child(2) { animation-delay: .06s; } .rc-page .rc-op-grid .rc-op-card:nth-child(3) { animation-delay: .12s; } .rc-page .rc-op-grid .rc-op-card:nth-child(4) { animation-delay: .18s; } .rc-page .rc-op-grid .rc-op-card:nth-child(5) { animation-delay: .24s; } .rc-page .rc-feat-grid .rc-feat-card:nth-child(2) { animation-delay: .08s; } .rc-page .rc-feat-grid .rc-feat-card:nth-child(3) { animation-delay: .16s; } .rc-page .rc-feat-grid .rc-feat-card:nth-child(4) { animation-delay: .24s; } .rc-page .rc-feat-grid .rc-feat-card:nth-child(5) { animation-delay: .32s; } .rc-page .rc-feat-grid .rc-feat-card:nth-child(6) { animation-delay: .40s; } } /* ── Animated gradient headline ──────────────────────────────────────────── */ /* Retuned for the image-free hero below: the old ramp was mixed with olive/amber * stops that were picked to sit on the dark photo; against the deep indigo → * violet CSS backdrop it read muddy. This one stays in-brand (white → sky → * lilac → cyan), keeps white as the dominant stop so the headline is legible at * every point of the sweep, and runs slower so it reads as a sheen, not a strobe. */ .rc-page .rc-gradient-text { display: inline-block; background: linear-gradient(100deg, #ffffff 0%, #9fc6ff 18%, #ffffff 38%, #e6c2ff 58%, #ffffff 76%, #8fe9ff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 26px rgba(80, 120, 255, .35)); animation: rc-shimmer 6s linear infinite; } /* ── Hero/banner — image-free, pure CSS ──────────────────────────────────── */ /* Replaces the vendor hero art: `banner-bg-15.jpg` (background photo), * `banner-15.png` (stock illustration) and `banner-15-bottom.png` (wave shape) * are all gone from the markup — ~330 KB and 3 requests off every service page. * The backdrop is now a drifting multi-radial gradient + blurred orbs + two * expanding "request" rings, and the copy is centred full-width. * * Still true: do NOT put a shadow/backdrop-filter on the transparent * `.header-section` bar — a bar shadow paints a band across the hero. * (The header CTA button further down is safe: it styles only the button.) */ .rc-page .rc-hero { position: relative; isolation: isolate; overflow: hidden; padding: 195px 0 150px; background-color: #060a24; background-image: radial-gradient(1200px 620px at 8% -12%, rgba(17, 83, 252, .60), transparent 62%), radial-gradient(1000px 560px at 92% -6%, rgba(193, 101, 221, .48), transparent 64%), radial-gradient(900px 620px at 50% 118%, rgba(34, 176, 125, .20), transparent 62%), linear-gradient(140deg, #060a24 0%, #10164a 46%, #1b1146 100%); background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; } /* Faint tech grid, masked so it fades out well before the edges */ .rc-page .rc-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 68% at 50% 34%, #000 28%, transparent 76%); mask-image: radial-gradient(ellipse 80% 68% at 50% 34%, #000 28%, transparent 76%); } /* Bottom curve — CSS replacement for the `banner-15-bottom.png` wave. Painted in * `--rc-below-hero`, the colour of the section that follows (the feature-tabs * block), so hero → page reads as one continuous surface. */ .rc-page .rc-hero::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -2px; height: 104px; z-index: 1; background: var(--rc-below-hero); border-radius: 100% 100% 0 0 / 104px 104px 0 0; } @media (max-width: 991px) { .rc-page .rc-hero { padding: 165px 0 120px; } .rc-page .rc-hero::after { height: 64px; border-radius: 100% 100% 0 0 / 64px 64px 0 0; } } @media (max-width: 575px) { .rc-page .rc-hero { padding: 145px 0 96px; } .rc-page .rc-hero .banner-content-15 .cate { font-size: .72rem; letter-spacing: .08em; padding: 8px 16px; } .rc-page .rc-hero .banner-content-15 p { margin-bottom: 30px; } } /* ── Hero FX layer (decorative, aria-hidden in the markup) ───────────────── */ .rc-page .rc-hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .rc-page .rc-hero-fx .rc-orb { position: absolute; border-radius: 50%; filter: blur(58px); opacity: .55; } .rc-page .rc-hero-fx .rc-orb-1 { width: 460px; height: 460px; top: 4%; left: -110px; background: radial-gradient(circle at 32% 30%, #2f6bff 0%, rgba(47, 107, 255, 0) 70%); } .rc-page .rc-hero-fx .rc-orb-2 { width: 420px; height: 420px; top: -60px; right: -90px; background: radial-gradient(circle at 60% 40%, #c165dd 0%, rgba(193, 101, 221, 0) 70%); } .rc-page .rc-hero-fx .rc-orb-3 { width: 360px; height: 360px; bottom: -40px; left: 46%; background: radial-gradient(circle at 50% 50%, #22b07d 0%, rgba(34, 176, 125, 0) 72%); opacity: .38; } /* Two concentric rings pulsing out of the centre — reads as a live API call */ .rc-page .rc-hero-fx .rc-ring { position: absolute; top: 50%; left: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border: 1px solid rgba(160, 195, 255, .20); border-radius: 50%; opacity: 0; filter: blur(.4px); } /* ── Hero content ────────────────────────────────────────────────────────── */ .rc-page .rc-hero .container { position: relative; z-index: 2; } .rc-page .rc-hero .banner-content-15 { text-align: center; margin-bottom: 0; } .rc-page .rc-hero .banner-content-15 .title { font-size: clamp(2.05rem, 4.4vw, 4rem); line-height: 1.14; margin-bottom: 22px; } .rc-page .rc-hero .banner-content-15 p { font-size: clamp(1rem, 1.35vw, 1.3rem); line-height: 1.72; color: rgba(228, 235, 255, .82); max-width: 780px; margin: 0 auto 38px; } /* Eyebrow — glass pill with a live status dot (replaces the gradient-text run) */ .rc-page .rc-hero .banner-content-15 .cate { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #dde5ff; margin-bottom: 24px; padding: 9px 22px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 30px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* The eyebrow pill used to carry a pulsing green "live status" dot * (`.cate::before` + the `rc-dot-pulse` keyframes). Removed 31/07/2026 — the * blinking read as a notification/alert rather than as decoration, and it pulled * the eye away from the headline on every service page. The pill keeps its glass * treatment; only the dot and its animation are gone. */ /* ── Hero background service icons ───────────────────────────────────────── */ /* A scatter of small, service-relevant glyphs living INSIDE the `.rc-hero-fx` * layer, next to the orbs and rings — DTH gets a dish, a TV and a broadcast * tower; Electricity gets a bolt, a plug and a meter; and so on. They are part * of the backdrop, not a badge on the copy: they sit in the outer gutters at low * opacity, drift on the same slow cadence as the orbs, and never sit on top of * the headline. * * They are tinted with the hero's own gradient (blue → violet → mint, the same * three hues as the orbs) via `background-clip: text`, so they read as part of * the existing gradient effect rather than as flat white icons dropped on it. * * `.rc-hero-fx` is already `aria-hidden="true"` and `pointer-events: none`, so * every glyph inside it inherits both — they are invisible to screen readers and * cannot swallow clicks. Markup, 7 per page: * * Glyphs are Font Awesome 5.12 Free Solid, already loaded via * assets_v6/css/all.min.css — no new request, no new asset. */ .rc-page .rc-hero-fx .rc-fx-icon { position: absolute; line-height: 1; background: linear-gradient(140deg, #7ba6ff 0%, #c9a2ff 52%, #74e8c6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* non-webkit fallback for the clip */ opacity: .22; filter: drop-shadow(0 6px 18px rgba(110, 160, 255, .30)); } /* Placement — kept in the left/right gutters and the top/bottom bands so the * centred hero copy always has clear space. Sizes are deliberately uneven so the * scatter reads as depth rather than as a row of icons. */ .rc-page .rc-hero-fx .rc-fx-1 { top: 17%; left: 6%; font-size: 34px; } .rc-page .rc-hero-fx .rc-fx-2 { top: 45%; left: 12%; font-size: 22px; opacity: .17; } .rc-page .rc-hero-fx .rc-fx-3 { top: 71%; left: 7%; font-size: 28px; } .rc-page .rc-hero-fx .rc-fx-4 { top: 14%; right: 8%; font-size: 30px; } .rc-page .rc-hero-fx .rc-fx-5 { top: 47%; right: 13%; font-size: 20px; opacity: .17; } .rc-page .rc-hero-fx .rc-fx-6 { top: 70%; right: 6%; font-size: 32px; } .rc-page .rc-hero-fx .rc-fx-7 { top: 7%; left: 33%; font-size: 18px; opacity: .15; } /* Narrower viewports: drop the inner glyphs first (they are the ones that would * crowd the copy as the gutters shrink), then the rest. Below 767px the hero is * effectively full-bleed text, so the scatter is hidden entirely. */ @media (max-width: 1199px) { .rc-page .rc-hero-fx .rc-fx-2, .rc-page .rc-hero-fx .rc-fx-5, .rc-page .rc-hero-fx .rc-fx-7 { display: none; } } @media (max-width: 991px) { .rc-page .rc-hero-fx .rc-fx-icon { opacity: .14; font-size: 22px; } } @media (max-width: 767px) { .rc-page .rc-hero-fx .rc-fx-icon { display: none; } } /* ── Hero buttons ────────────────────────────────────────────────────────── */ .rc-page .rc-hero .banner-button-group { display: flex; flex-wrap: wrap; justify-content: center; } .rc-page .rc-hero .button-4 { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 14px 34px rgba(17, 83, 252, .34); transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, background .28s ease; } .rc-page .rc-hero .button-4::before { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-20deg); transition: left .6s ease; } .rc-page .rc-hero .button-4:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(17, 83, 252, .48); } .rc-page .rc-hero .button-4:hover::before { left: 150%; } .rc-page .rc-hero .button-4 i { margin-right: 8px; } /* Secondary CTA — glass, so the primary "Get API Key" keeps the gradient */ .rc-page .rc-hero .button-4.rc-btn-ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .rc-page .rc-hero .button-4.rc-btn-ghost:hover { background: rgba(255, 255, 255, .16); box-shadow: 0 18px 36px rgba(6, 10, 36, .45); } /* ── Hero motion (all of it opt-out via prefers-reduced-motion) ──────────── */ @media (prefers-reduced-motion: no-preference) { .rc-page .rc-hero { animation: rc-hero-drift 26s ease-in-out infinite alternate; } .rc-page .rc-hero-fx .rc-orb-1 { animation: rc-orb-float 19s ease-in-out infinite; } .rc-page .rc-hero-fx .rc-orb-2 { animation: rc-orb-float 23s ease-in-out infinite reverse; } .rc-page .rc-hero-fx .rc-orb-3 { animation: rc-orb-float 27s ease-in-out infinite; } .rc-page .rc-hero-fx .rc-ring { animation: rc-ring-out 6s ease-out infinite; } .rc-page .rc-hero-fx .rc-ring-2 { animation-delay: 3s; } /* Background glyphs drift on the same slow, long-period cadence as the orbs, * with staggered durations/delays so they never move as one block. */ .rc-page .rc-hero-fx .rc-fx-icon { animation: rc-fx-drift 20s ease-in-out infinite; } .rc-page .rc-hero-fx .rc-fx-2 { animation-duration: 24s; animation-delay: -3s; } .rc-page .rc-hero-fx .rc-fx-3 { animation-duration: 27s; animation-delay: -8s; } .rc-page .rc-hero-fx .rc-fx-4 { animation-duration: 22s; animation-delay: -5s; animation-direction: reverse; } .rc-page .rc-hero-fx .rc-fx-5 { animation-duration: 26s; animation-delay: -11s; } .rc-page .rc-hero-fx .rc-fx-6 { animation-duration: 30s; animation-delay: -2s; animation-direction: reverse; } .rc-page .rc-hero-fx .rc-fx-7 { animation-duration: 23s; animation-delay: -14s; } .rc-page .rc-hero .banner-content-15 > * { animation: rc-fade-up .8s cubic-bezier(.2, .7, .2, 1) both; } .rc-page .rc-hero .banner-content-15 .cate { animation-delay: .05s; } .rc-page .rc-hero .banner-content-15 .title { animation-delay: .16s; } .rc-page .rc-hero .banner-content-15 p { animation-delay: .28s; } .rc-page .rc-hero .banner-button-group { animation-delay: .40s; } } /* ── Header CTA button (Get API Key) — button-scoped only, never the bar ───── */ .rc-page .header-section .header-button { background: var(--rc-grad); color: #fff; border: none; border-radius: 26px; padding: 11px 30px; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease; } /* The vendor's own hover flips this button to a WHITE background (`.header-section .header-wrapper .header-button:hover`), which on our gradient pill left white text on white. Re-assert the gradient here so hover only lifts + glows. */ .rc-page .header-section .header-button:hover, .rc-page .header-section .header-button:focus, .rc-page .header-section .header-button:focus-visible { background: var(--rc-grad); color: #fff; border: none; transform: translateY(-2px); box-shadow: var(--rc-glow); } /* BBPS_service.php's header chip holds the Bharat Connect certification logo, not a CTA — it must stay a white chip, the brand gradient would swallow the mark. */ .rc-page .header-section .header-button.rc-logo-pill, .rc-page .header-section .header-button.rc-logo-pill:hover, .rc-page .header-section .header-button.rc-logo-pill:focus { background: #fff; padding: 6px 16px; box-shadow: 0 8px 22px rgba(6, 10, 36, .22); } .rc-page .header-section .header-button.rc-logo-pill:hover { box-shadow: 0 12px 28px rgba(6, 10, 36, .30); } /* ── Secondary buttons (.get-button) — hero `.button-4` left to the vendor ──── */ .rc-page .get-button { position: relative; overflow: hidden; isolation: isolate; background: #fff; color: var(--rc-blue); border: 1px solid #d4cff4; transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, color .28s ease, background .28s ease; } .rc-page .get-button::before { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); transition: left .6s ease; } .rc-page .get-button i { transition: transform .3s ease; } .rc-page .get-button:hover { transform: translateY(-3px); box-shadow: var(--rc-glow); color: #fff; border-color: transparent; background: var(--rc-grad); } .rc-page .get-button:hover::before { left: 140%; } .rc-page .get-button:hover i { transform: translateX(6px); } /* ── Feature category tabs — round icon badges, no card behind them ───────── */ /* No background on the tab in ANY state (rest / hover / active / focus): the * circular `.thumb` icon carries the colour, and hover/active are expressed with * a lift + scale only. A tinted panel behind the icon re-introduced the boxy * card look this section is meant to avoid. */ .rc-page .feature-tabs .nav-link, .rc-page .feature-tabs .nav-link:hover, .rc-page .feature-tabs .nav-link:focus, .rc-page .feature-tabs .nav-link:focus-visible, .rc-page .feature-tabs .nav-link.active { background: transparent; border: none; box-shadow: none; } .rc-page .feature-tabs .nav-link { padding: 14px 8px; border-radius: 26px; transition: transform .28s ease; } .rc-page .feature-tabs .nav-link .thumb { transition: transform .35s ease; display: inline-block; } .rc-page .feature-tabs .nav-link .subtitle { transition: color .28s ease; font-weight: 600; } .rc-page .feature-tabs .nav-link:hover { transform: translateY(-6px); } .rc-page .feature-tabs .nav-link:hover .thumb { transform: scale(1.1); } .rc-page .feature-tabs .nav-link.active .thumb { transform: scale(1.06); } .rc-page .feature-tabs .nav-link.active .subtitle { color: var(--rc-blue); } /* ── Counters (gradient numbers) ─────────────────────────────────────────── */ /* The single card is the vendor `.counter-wrapper-area-2` (white, radius 30px, * shadow). Do NOT add a card to the inner `.counter-wrapper-2` — that stacks a * second box inside the first (the "double wrapper"). Only enhance the items. */ .rc-page .counter-item-2 { border-right-color: #dfe4f3; transition: transform .3s ease; } .rc-page .counter-item-2:hover { transform: translateY(-5px); } .rc-page .counter-item-2 .title { background: var(--rc-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } .rc-page .counter-item-2 .name { color: var(--rc-muted); font-weight: 600; } /* ── Section headers (gradient accents) ──────────────────────────────────── */ .rc-page .section-header .cate { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .8rem; color: var(--rc-blue); padding: 6px 16px; border-radius: 30px; background: rgba(17, 83, 252, .08); } .rc-page .section-header.text-center .title { position: relative; padding-bottom: 18px; } .rc-page .section-header.text-center .title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 66px; height: 4px; border-radius: 4px; background: var(--rc-grad); } .rc-page .advance-feature-content .section-header .title { color: var(--rc-ink); } /* Hero eyebrow is styled as a glass pill in the hero block above (`.rc-page .rc-hero .banner-content-15 .cate`). It stays a , not an

, so headings run h1 -> h2 with no skipped level for SEO/a11y. / / ── Footer — image-free, compact ────────────────────────────────────────── / / Was the vendor `footer-bg.jpg` photo plus a `footer-shape.png` top overlay, * with 80–100px `.padding-top/.padding-bottom` utilities that left a large empty * band between the logo and the link row. Now: the hero's own gradient (so the * page opens and closes on the same surface), a CSS top curve, and one tight * vertical rhythm — logo → links → trademark note → copyright. / .rc-page .rc-footer { position: relative; background: linear-gradient(160deg, #0b1030 0%, #141a4b 55%, #241553 100%); } .rc-page .rc-footer::before { / kills the vendor footer-shape.png overlay / display: none; } .rc-page .rc-footer::after { / CSS top curve, mirrors the hero's bottom one / content: ""; position: absolute; left: -6%; right: -6%; top: -2px; height: 76px; background: var(--rc-below-hero); border-radius: 0 0 100% 100% / 0 0 76px 76px; } .rc-page .rc-footer .container { position: relative; z-index: 2; } .rc-page .rc-footer .footer-top { padding: 92px 0 0; } .rc-page .rc-footer .footer-top .logo { max-width: 124px; margin: 0 auto 26px; } .rc-page .rc-footer .footer-bottom { padding-bottom: 0; } .rc-page .rc-footer .footer-link { margin: -6px -18px; } .rc-page .rc-footer .footer-link li { padding: 6px 18px; } .rc-page .rc-footer .footer-link li a { font-size: .92rem; font-weight: 500; color: rgba(226, 233, 255, .78); transition: color .25s ease; } .rc-page .rc-footer .footer-link li a:hover { color: #fff; } .rc-page .rc-footer .footer-link li::after { background: rgba(255, 255, 255, .16); height: 14px; top: 13px; } .rc-page .rc-footer .copyright { margin-top: 26px; padding: 18px 0 22px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; color: rgba(226, 233, 255, .62); } @media (max-width: 767px) { .rc-page .rc-footer .footer-top { padding-top: 68px; } / Drop the -6% side overhang on phones. At desktop widths that overhang keeps * the arc's steep ends off-screen so the curve reads as a gentle sweep; on a * ~390px screen it left only ~12px of sag across the entire width, so the * curve flattened out and the light-to-dark boundary rendered as a hard, * straight line — a "black border" across the top of the footer. Pinning the * shape to the viewport edges puts the whole half-ellipse on screen, so it * reads as the intended curve again. / .rc-page .rc-footer::after { left: 0; right: 0; height: 42px; border-radius: 0 0 100% 100% / 0 0 42px 42px; } } / ── Legal: operator trademark disclaimer ────────────────────────────────── / .rc-page .rc-tm-note { max-width: 860px; margin: 22px auto 0; text-align: center; font-size: .72rem; line-height: 1.65; color: rgba(226, 233, 255, .42); } / ── Supported operators grid (DB-driven) ────────────────────────────────── / .rc-page .rc-op-block { padding: 70px 0 20px; } .rc-page .rc-op-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; } .rc-page .rc-op-card { position: relative; overflow: hidden; background: var(--rc-card); border: 1px solid var(--rc-line); border-radius: 14px; padding: 18px 24px; min-width: 148px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: var(--rc-shadow); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } / gradient top strip reveals on hover / .rc-page .rc-op-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--rc-grad); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .rc-page .rc-op-card:hover { transform: translateY(-8px); box-shadow: var(--rc-shadow-lg); border-color: #cdd6ff; } .rc-page .rc-op-card:hover::after { transform: scaleX(1); } .rc-page .rc-op-card img { height: 42px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(55%); opacity: .85; transition: filter .35s ease, opacity .35s ease, transform .35s ease; } .rc-page .rc-op-card:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.06); } .rc-page .rc-op-card .op-name { font-size: .82rem; font-weight: 700; color: #3a4256; text-align: center; line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; } / name-only biller tiles (utility billers in the DB carry a name but no logo) / .rc-page .rc-op-card--name { min-width: 160px; } / full biller names are kept (no truncation) for SEO — cap tile width so long names wrap neatly instead of stretching the grid. / .rc-page .rc-op-card { max-width: 230px; } .rc-page .rc-op-ic { font-size: 26px; line-height: 1; color: #5b63d3; background: linear-gradient(135deg, #eef1ff, #f6f4ff); width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: transform .35s ease, color .35s ease; } .rc-page .rc-op-card--name:hover .rc-op-ic { transform: scale(1.08); color: #3b319e; } .rc-page .rc-op-sub { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--rc-blue); margin: 40px 0 22px; } .rc-page .rc-op-sub::before, .rc-page .rc-op-sub::after { content: ""; height: 2px; width: 60px; border-radius: 2px; background: linear-gradient(90deg, transparent, #c7d0f5); } .rc-page .rc-op-sub::after { background: linear-gradient(90deg, #c7d0f5, transparent); } / ── Advance feature rows ────────────────────────────────────────────────── / .rc-page .advance-feature-thumb img { transition: transform .5s ease, filter .5s ease; filter: drop-shadow(0 20px 40px rgba(20, 30, 60, .12)); } .rc-page .advance-feature-item:hover .advance-feature-thumb img { transform: translateY(-10px) scale(1.02); } / ── Step slider ─────────────────────────────────────────────────────────── / / NOTE: the vendor `.serial` is a big faint watermark number that sits BEHIND the * step title (Register/Configure/Integrate). Do NOT give it a background/opaque * colour — that covers the label. Left to the vendor theme on purpose. We only * tint the active step's title, which is safe (no overlap). / .rc-page .count-slider .count-item.active .title { color: var(--rc-blue); } / ── Feature grid cards ──────────────────────────────────────────────────── / .rc-page .rc-feat-grid { display: flex; flex-wrap: wrap; gap: 22px; } .rc-page .rc-feat-card { position: relative; overflow: hidden; flex: 1 1 300px; background: var(--rc-card); border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 28px; box-shadow: var(--rc-shadow); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .rc-page .rc-feat-card::before { content: ""; position: absolute; inset: 0 auto auto 0; height: 4px; width: 100%; background: var(--rc-grad); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; } .rc-page .rc-feat-card:hover { transform: translateY(-8px); box-shadow: var(--rc-shadow-lg); border-color: #cdd6ff; } .rc-page .rc-feat-card:hover::before { transform: scaleX(1); } .rc-page .rc-feat-card .ic { width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; margin-bottom: 18px; background: var(--rc-grad); box-shadow: 0 10px 22px rgba(17, 83, 252, .28); transition: transform .35s ease; } .rc-page .rc-feat-card:hover .ic { transform: translateY(-4px) rotate(-6deg) scale(1.06); } .rc-page .rc-feat-card h3 { font-size: 1.06rem; font-weight: 700; margin-bottom: 8px; color: var(--rc-ink); } .rc-page .rc-feat-card p { color: var(--rc-muted); font-size: .92rem; margin: 0; } / ── Benefits list ───────────────────────────────────────────────────────── / .rc-page .rc-benefits { display: flex; flex-wrap: wrap; gap: 14px 30px; padding: 0; margin: 0; } .rc-page .rc-benefits li { flex: 1 1 320px; list-style: none; color: #3a4256; font-size: .96rem; padding: 10px 10px 10px 42px; position: relative; border-radius: 12px; transition: background .28s ease, transform .28s ease; } .rc-page .rc-benefits li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: .7rem; color: #fff; background: var(--rc-green); border-radius: 50%; } .rc-page .rc-benefits li:hover { background: #f4f7ff; transform: translateX(6px); } .rc-page .rc-benefits li:hover::before { animation: rc-check-pop .4s ease; } / ── FAQ (animated accordion) ────────────────────────────────────────────── / .rc-page .rc-faq details { background: #fff; border: 1px solid var(--rc-line); border-left: 4px solid transparent; border-radius: 12px; padding: 16px 22px; margin-bottom: 14px; box-shadow: var(--rc-shadow); transition: border-color .3s ease, box-shadow .3s ease; } .rc-page .rc-faq details:hover { box-shadow: var(--rc-shadow-lg); } .rc-page .rc-faq details[open] { border-left-color: var(--rc-blue); } .rc-page .rc-faq summary { cursor: pointer; font-weight: 700; color: var(--rc-ink); font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .rc-page .rc-faq summary::-webkit-details-marker { display: none; } .rc-page .rc-faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--rc-blue); transition: transform .3s ease; flex-shrink: 0; } .rc-page .rc-faq details[open] summary::after { content: "\2212"; transform: rotate(180deg); } .rc-page .rc-faq details[open] summary { margin-bottom: 10px; } .rc-page .rc-faq details[open] p { animation: rc-fade-up .35s ease both; } .rc-page .rc-faq p { color: var(--rc-muted); font-size: .93rem; margin: 0; line-height: 1.7; } / ── Custom-plan / WhatsApp CTA ──────────────────────────────────────────── / / Outer spacing for the CTA blob section. The vendor `.custom-wrapper` inside it * already carries 220px of internal top padding (180px ≤1199px) — that padding is * structural, it seats the copy inside the `calculate-bg.png` blob artwork, which * is absolutely centred and sized to the wrapper's height. * * The markup used to stack `.padding-top` (120px) + `.mt-120` (120px) on the outer * wrapper as well. That was harmless when this section followed the FAQ directly, * but once the "Available SDKs" block was inserted above it the three paddings * compounded into ~300px of blank page between the SDK footer and the blob. The * wrapper now carries `.rc-cta-block` instead, and its rhythm is owned here so it * can be tuned in one place. The 60px bottom padding of `.svc-sdk-block` is the * whole separation now. / .rc-page .rc-cta-block { padding-top: 0; margin-top: 0; } / `.custom-plan` previously carried `bg_img`, but never had a `data-background`. * assets_v6/js/main.js applies `url()` to EVERY `.bg_img`, so it * was setting `background-image: url(undefined)` and firing a 404 on each page * load. The class is gone from the markup; the blob `` is the real backdrop, * so no background-image (and no `background-blend-mode`) is wanted here. / .rc-page .custom-button.large-button { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%); border: none; color: #fff; border-radius: 30px; font-weight: 700; animation: rc-pulse-glow 2.6s ease-in-out infinite; transition: transform .28s ease; } .rc-page .custom-button.large-button:hover { transform: translateY(-3px) scale(1.02); color: #fff; background: linear-gradient(135deg, #2be072 0%, #149a8a 100%); } .rc-page .custom-button.large-button i { margin-right: 8px; } / ── Scroll-to-top ───────────────────────────────────────────────────────── / .rc-page .scrollToTop { background: var(--rc-grad); color: #fff; border: none; box-shadow: var(--rc-glow); transition: transform .3s ease; } .rc-page .scrollToTop:hover { transform: translateY(-4px); color: #fff; } / ── Responsive polish ───────────────────────────────────────────────────── */ @media (max-width: 767px) { .rc-page .rc-op-card { min-width: 132px; padding: 16px 18px; } }