/* ============================================================ Super Clone App Development (/service/super-clone-app-development) Lavender-white hero, blue primary, pink -> purple accent word. BEM-ish `scl-` prefix; scroll-reveal via `.scl-anim` on , mirroring social-media.css / ai-app-builder.css. ============================================================ */ /* Global stylesheets set `overflow-x: hidden` on , which makes it a scroll container and disables `position: sticky` inside it. `clip` stops the same overflow without creating one. Scoped with :has() to this page. */ body:has(.scl-page) { overflow-x: clip; } .scl-page { --scl-blue: #0072f6; --scl-pink: #ef4dd7; --scl-purple: #814cec; --scl-ink: #0b0b0f; --scl-body: #5c5e66; --scl-muted: #8a8a94; --scl-bg: #f5f6fe; position: relative; background: var(--scl-bg); color: var(--scl-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .scl-page .container { max-width: 1240px; } .scl-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--scl-ink); } .scl-page :where(p) { margin: 0; color: var(--scl-body); } .scl-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } /* Pink -> purple wash used on highlighted words. */ .scl-grad { background: linear-gradient(90deg, var(--scl-pink) 0%, var(--scl-purple) 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- pill button (label + arrow disc swap on hover) ---------- */ .scl-btn { --scl-btn-icon-w: 44px; --scl-btn-gap: 14px; --scl-btn-pad-l: 30px; --scl-btn-pad-r: 10px; position: relative; display: inline-flex; align-items: center; gap: var(--scl-btn-gap); width: max-content; max-width: 100%; padding: 10px var(--scl-btn-pad-r) 10px var(--scl-btn-pad-l); border-radius: 999px; background: var(--scl-blue); color: #fff; overflow: hidden; text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .scl-btn:hover, .scl-btn:focus-visible { padding-left: var(--scl-btn-pad-r); padding-right: var(--scl-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 114, 246, 0.35); } .scl-btn__label { display: inline-block; flex: none; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .scl-btn__icon { display: grid; place-items: center; flex: none; width: var(--scl-btn-icon-w); height: var(--scl-btn-icon-w); border-radius: 50%; background: #0b0b0f; color: #fff; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.25s ease; } .scl-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .scl-btn:hover .scl-btn__icon svg, .scl-btn:focus-visible .scl-btn__icon svg { transform: rotate(45deg); } /* Label and disc trade sides; the blade script publishes the measured label width as --scl-btn-label-w so the disc knows how far to travel. */ .scl-btn:hover .scl-btn__label, .scl-btn:focus-visible .scl-btn__label { transform: translateX(calc(var(--scl-btn-icon-w) + var(--scl-btn-gap))); } .scl-btn:hover .scl-btn__icon, .scl-btn:focus-visible .scl-btn__icon { transform: translateX(calc(-1 * (var(--scl-btn-label-w, 200px) + var(--scl-btn-gap)))); } @media (prefers-reduced-motion: reduce) { .scl-btn__label, .scl-btn__icon { transition: none; } .scl-btn:hover .scl-btn__label, .scl-btn:focus-visible .scl-btn__label, .scl-btn:hover .scl-btn__icon, .scl-btn:focus-visible .scl-btn__icon, .scl-btn:hover .scl-btn__icon svg, .scl-btn:focus-visible .scl-btn__icon svg { transform: none; } } /* ============================================================ 1. HERO ============================================================ */ .scl-hero { position: relative; padding: 56px 0 72px; /* Near-white lavender wash, deepening to periwinkle behind the phone. */ background: radial-gradient(46% 60% at 86% 46%, rgba(199, 205, 251, 0.55) 0%, rgba(199, 205, 251, 0) 70%), radial-gradient(34% 40% at 4% 8%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(120deg, #f7f7fd 0%, #f4f5fe 55%, #eceffd 100%); overflow: hidden; } /* Dot grids in the bottom-left and top-right corners, as in the comp. */ .scl-hero::before, .scl-hero::after { content: ""; position: absolute; width: 260px; height: 200px; background-image: radial-gradient(rgba(120, 110, 220, 0.22) 1.6px, transparent 1.6px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); pointer-events: none; } .scl-hero::before { left: -40px; bottom: -30px; } .scl-hero::after { right: -50px; top: 40px; } .scl-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; } .scl-hero__copy { padding: 20px 0; } .scl-hero h1 { font-weight: 700; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.16; } /* Gradient disc tucked behind the tail of "App". */ .scl-hero__app { position: relative; z-index: 0; } .scl-hero__app img { position: absolute; z-index: -1; top: -0.14em; right: -0.18em; width: 1.32em; height: 1.32em; } /* "Company" — italic gradient word with a pink underline bar and spark. */ .scl-hero__company { position: relative; display: inline-block; font-style: italic; font-weight: 600; padding-right: 0.15em; /* keep the italic overhang out of the clip */ } .scl-hero__company::after { content: ""; position: absolute; left: 0; bottom: -0.22em; width: 42%; height: 4px; border-radius: 999px; background: var(--scl-pink); } .scl-hero__spark { position: absolute; top: -0.1em; right: -0.9em; width: 0.55em; height: 0.55em; color: var(--scl-purple); } .scl-hero__text { margin-top: 26px; max-width: 540px; font-size: 15.5px; line-height: 27px; color: #55575e; } .scl-hero__actions { position: relative; margin-top: 36px; } /* Dashed loop + paper plane doodle riding below the CTA. */ .scl-hero__doodle { position: absolute; left: -36px; top: calc(100% + 18px); width: 168px; height: auto; pointer-events: none; } .scl-hero__art { position: relative; display: flex; justify-content: center; } /* Soft halo behind the phone-and-orbit composition. */ .scl-hero__art::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 68%); pointer-events: none; } .scl-hero__art img { position: relative; width: min(100%, 620px); height: auto; } /* ---------- responsive ---------- */ @media (max-width: 991.98px) { .scl-hero { padding: 40px 0 56px; } .scl-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .scl-hero__copy { padding: 0; text-align: center; } .scl-hero__text { margin-inline: auto; } .scl-hero__actions { display: flex; justify-content: center; } .scl-hero__doodle { display: none; } .scl-hero__art img { width: min(100%, 520px); } } @media (max-width: 379.98px) { /* The long label can't swap-animate at this width; let it wrap instead. */ .scl-btn__label { white-space: normal; flex: 1 1 auto; text-align: left; } .scl-btn:hover .scl-btn__label, .scl-btn:focus-visible .scl-btn__label, .scl-btn:hover .scl-btn__icon, .scl-btn:focus-visible .scl-btn__icon { transform: none; } .scl-btn:hover, .scl-btn:focus-visible { padding-left: var(--scl-btn-pad-l); padding-right: var(--scl-btn-pad-r); } } /* ---------- scroll reveal ---------- */ .scl-anim .scl-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .scl-anim .scl-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .scl-anim .scl-reveal { opacity: 1; transform: none; transition: none; } } /* ---------- shared section furniture ---------- */ .scl-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 0 auto 52px; max-width: 1080px; } .scl-title { font-weight: 700; font-size: clamp(27px, 2.9vw, 40px); line-height: 1.3; } /* Purple accent word in section titles. */ .scl-title .scl-accent { background: linear-gradient(90deg, #c04ae2 0%, #814cec 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .scl-lead { max-width: 1040px; font-size: 16px; line-height: 27px; color: var(--scl-muted); } /* ============================================================ 2. STATS ============================================================ */ .scl-stats { padding: 26px 0; background: #fff; } .scl-stats__card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 26px 18px; border-radius: 18px; background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%); box-shadow: 0 6px 26px rgba(21, 27, 60, 0.06); } .scl-stat { display: flex; align-items: center; justify-content: center; gap: 16px; } .scl-stat + .scl-stat { border-left: 1px solid #e7e9f2; } .scl-stat__icon img { width: 54px; height: auto; } .scl-stat__num { display: block; font-weight: 700; font-size: 27px; line-height: 1.15; color: #4b3df6; } .scl-stat__label { display: block; margin-top: 2px; font-size: 15px; color: #3c3f4a; } /* ============================================================ 3. SERVICES SLIDER ============================================================ */ .scl-services { padding: 78px 0 84px; background: #fff; /* The rail is full-bleed, so keep its overhang off the page scrollbar. */ overflow: hidden; } /* Full-bleed drag rail (ported from .ca-industries__rail on the Canada page). */ .scl-services__rail { /* No scroll-snap: it fights the continuous auto-scroll. */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; /* Stop scroll re-anchoring on image load, which fights the drag. */ overflow-anchor: none; padding: 6px 0 10px; cursor: grab; } .scl-services__rail::-webkit-scrollbar { display: none; } .scl-services__rail.is-grabbing { cursor: grabbing; user-select: none; } .scl-services__rail.is-grabbing img { pointer-events: none; } .scl-services__track { display: flex; gap: 23px; /* Aligns the first card with the container's left edge while the rail itself stays full-bleed. */ padding: 0 max(20px, calc((100vw - 1240px) / 2)); } .scl-service { flex: none; width: 380px; max-width: 86vw; } .scl-service__media { position: relative; width: 100%; height: 380px; border-radius: 24px; overflow: hidden; box-shadow: 0 14px 30px rgba(17, 19, 24, 0.14); } .scl-service__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .scl-service:hover .scl-service__media img { transform: scale(1.05); } .scl-service__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 78%); pointer-events: none; } .scl-service__label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 30px; text-align: center; font-weight: 600; font-size: clamp(22px, 2vw, 30px); color: #fff; } /* ============================================================ 4. KEY FEATURES (solution cards) ============================================================ */ .scl-solution { padding: 40px 0 90px; background: #fff; } .scl-solution__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; } /* Card + gradient icon disc ported from .sma-benefit on the social media page. */ .scl-solution__card { display: flex; align-items: center; gap: 24px; padding: 26px 30px; border: 1px solid #ededf3; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -34px rgba(24, 32, 62, 0.5); transition: transform 0.28s ease, box-shadow 0.28s ease; } .scl-solution__card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -32px rgba(224, 33, 140, 0.45); } /* The source icons are white glyphs on transparent — this disc is what makes them legible on the white card. */ .scl-solution__icon { display: grid; place-items: center; flex: none; width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(140deg, #e0218c 0%, #a41fd1 100%); } .scl-solution__icon img { width: 34px; height: 34px; object-fit: contain; } .scl-solution__card h3 { font-weight: 700; font-size: clamp(19px, 1.8vw, 25px); } /* ============================================================ 5. CTA 1 (Build a Super App Like Gojek, Grab, or Uber) ============================================================ */ .scl-cta1 { padding: 90px 0; background: #e2f2ff; } .scl-cta1__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; } /* Phone standing on a solid blue block, overlapping its top edge. */ .scl-cta1__art { position: relative; display: flex; justify-content: center; padding: 40px 0 0; } .scl-cta1__art::before { content: ""; position: absolute; left: 0; right: 0; top: 40%; bottom: 0; background: var(--scl-blue); } .scl-cta1__art img { position: relative; width: min(58%, 260px); height: auto; filter: drop-shadow(0 24px 40px rgba(9, 30, 66, 0.28)); } .scl-cta1__copy h2 { font-weight: 700; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.25; } .scl-cta1__copy p { margin: 22px 0 40px; max-width: 620px; font-size: 16.5px; line-height: 28px; color: #4a4f5b; } /* ============================================================ 6. FEATURE COLUMNS (User / Partner / Admin) ============================================================ */ .scl-features { /* Republished by the blade script from the active tab, so the chips, the window chrome and every tick move together. */ --scl-panel-accent: #18a939; position: relative; padding: 90px 0; background: radial-gradient(60% 50% at 0% 30%, rgba(214, 227, 250, 0.5) 0%, rgba(214, 227, 250, 0) 70%), radial-gradient(50% 45% at 100% 85%, rgba(214, 227, 250, 0.55) 0%, rgba(214, 227, 250, 0) 70%), #fff; overflow: hidden; } /* Faint dot field, so the card has something to sit on rather than floating on flat colour. */ .scl-features::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(16, 16, 16, 0.055) 1.1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%); pointer-events: none; } .scl-features > .container { position: relative; } /* Chip row and the phone/stage grid share one card, ported from .fd-panels on the food delivery page. Each panel carries its own accent, republished on the section by the blade script so the chips, the chrome and every tick agree. */ .scl-features__card { padding: 28px; /* Frosted glass: the wash and the dot field behind stay visible but blurred, so the card reads as a pane over the section rather than a white block cut out of it. The inset highlight is the lit top edge. */ border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 26px; background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 30px 70px rgba(17, 19, 24, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.85); } /* Without backdrop-filter there is nothing to frost, and 58% white over the dot field would just look dirty — fall back to the opaque card. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .scl-features__card { border-color: rgba(16, 16, 16, 0.07); background: #fff; } } .scl-features__layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 22px; } /* Stage and CTA share the column. The stage stays exactly as tall as its six rows; the CTA takes up the slack beside the device rather than the stage stretching to fill it. */ .scl-features__col { display: grid; gap: 18px; align-content: center; } /* ---- chip rail ---- */ .scl-features__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .scl-features__tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; /* Translucent so the frost shows through, but the edge has to be a dark hairline — a white border on a white card is invisible. */ border: 1px solid rgba(16, 16, 16, 0.09); border-radius: 16px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 6px 18px rgba(17, 19, 24, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } /* Accent bar that grows across the bottom edge as the chip takes over. */ .scl-features__tab::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--tab-accent); transform: translateX(-50%); transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .scl-features__tab:hover { border-color: rgba(16, 16, 16, 0.16); background: rgba(255, 255, 255, 0.82); box-shadow: 0 14px 30px rgba(17, 19, 24, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95); transform: translateY(-3px); } .scl-features__tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--tab-accent) 42%, transparent); background: color-mix(in srgb, var(--tab-accent) 7%, #fff); box-shadow: 0 14px 30px color-mix(in srgb, var(--tab-accent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.95); transform: none; } .scl-features__tab[aria-selected="true"]::before { width: 64%; } /* Hollow numeral, matching the process step numerals. */ .scl-features__num { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 26px; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px rgba(16, 16, 16, 0.32); transition: -webkit-text-stroke-color 0.3s ease; } .scl-features__tab[aria-selected="true"] .scl-features__num { -webkit-text-stroke-color: var(--tab-accent); } .scl-features__name { display: block; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--scl-ink); } .scl-features__count { display: block; margin-top: 3px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 12.5px; font-weight: 500; color: var(--scl-muted); } /* Tick that fades in on the chosen chip. */ .scl-features__go { width: 18px; height: 18px; color: var(--tab-accent); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .scl-features__tab[aria-selected="true"] .scl-features__go { opacity: 1; transform: none; } /* ---- device ---- */ .scl-features__device { position: relative; display: grid; place-items: center; } /* Accent halo behind the handset, recoloured with the chosen panel. */ .scl-features__device::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient( circle, color-mix(in srgb, var(--scl-panel-accent) 22%, transparent) 0%, transparent 68% ); transition: background 0.4s ease; pointer-events: none; } .scl-features__device img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 26px 48px rgba(17, 19, 24, 0.16)); } /* ---- stage ---- */ .scl-features__stage { position: relative; border: 1px solid rgba(16, 16, 16, 0.09); border-radius: 18px; background: rgba(255, 255, 255, 0.42); box-shadow: 0 12px 34px rgba(17, 19, 24, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); overflow: hidden; } /* Accent wash bleeding down from the chrome bar. */ .scl-features__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; background: linear-gradient( 180deg, color-mix(in srgb, var(--scl-panel-accent) 9%, transparent), transparent ); pointer-events: none; transition: background 0.4s ease; } /* Window chrome: the section is about app panels, so the stage is dressed as one. */ .scl-features__chrome { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid rgba(16, 16, 16, 0.07); background: rgba(255, 255, 255, 0.75); } .scl-features__dots { display: flex; gap: 6px; } .scl-features__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(16, 16, 16, 0.12); } .scl-features__dots i:first-child { background: var(--scl-panel-accent); transition: background 0.4s ease; } .scl-features__crumb { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 14.5px; color: var(--scl-ink); } .scl-features__crumb span { color: var(--scl-muted); font-weight: 500; } .scl-features__pill { margin-left: auto; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--scl-panel-accent) 12%, transparent); color: var(--scl-panel-accent); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 12.5px; white-space: nowrap; transition: background 0.4s ease, color 0.4s ease; } /* Every set is rendered up front and stacked in one grid cell, so switching neither reflows the section nor changes its height. */ .scl-features__sets { display: grid; padding: 30px 28px 34px; } .scl-features__set { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 26px; align-content: start; visibility: hidden; transition: visibility 0.3s ease; } .scl-features__set.is-on { visibility: visible; } .scl-features__set li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15.5px; line-height: 1.45; color: #1a1a1a; /* Rows fly in one after the next when their set opens; `--i` is the row index, written by the blade. */ opacity: 0; transform: translateY(9px); transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease; } .scl-features__set.is-on li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 26ms); } .scl-features__set li:hover { background: color-mix(in srgb, var(--scl-panel-accent) 7%, transparent); } /* ---- CTA pane ---- */ /* Same glass surface as the stage so the two read as one stack, tinted with the active panel's accent so it moves with the chips. */ .scl-features__cta { position: relative; display: flex; align-items: center; gap: 24px; padding: 22px 26px; border: 1px solid color-mix(in srgb, var(--scl-panel-accent) 26%, rgba(16, 16, 16, 0.09)); border-radius: 18px; background: linear-gradient( 120deg, color-mix(in srgb, var(--scl-panel-accent) 10%, transparent), transparent 62% ), rgba(255, 255, 255, 0.42); box-shadow: 0 12px 34px rgba(17, 19, 24, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: background 0.4s ease, border-color 0.4s ease; } .scl-features__cta-copy { min-width: 0; } .scl-features__cta h3 { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 19px; line-height: 1.3; } .scl-features__cta p { margin-top: 6px; font-size: 14.5px; line-height: 22px; color: var(--scl-muted); } .scl-features__cta .scl-btn { flex: none; margin-left: auto; } /* Tick drawn in CSS — one glyph per row would be two dozen identical images. */ .scl-features__set li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--scl-panel-accent) 14%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat; transition: background-color 0.4s ease; } @media (prefers-reduced-motion: reduce) { .scl-features__set li { opacity: 1; transform: none; transition: none; } } /* ============================================================ 7. MONETIZE ============================================================ */ .scl-monetize { padding: 40px 0 90px; background: #fff; } .scl-monetize__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } /* Border + hover lift ported from .sma-why__card on the social media page. */ .scl-monetize__card { display: flex; flex-direction: column; padding: 30px 32px 36px; border: 1px solid #ececf2; border-radius: 4px; background: #fff; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .scl-monetize__card:hover { transform: translateY(-4px); border-color: rgba(224, 33, 140, 0.28); box-shadow: 0 24px 44px -32px rgba(224, 33, 140, 0.5); } /* CTA cell closing the grid — inverted so it reads as the odd one out. */ .scl-monetize__card--cta { justify-content: center; border-color: transparent; background: linear-gradient(238deg, #196dff 20%, #001da0 100%); } .scl-monetize__card--cta:hover { border-color: transparent; box-shadow: 0 24px 44px -30px rgba(0, 60, 200, 0.75); } .scl-monetize__card--cta h3 { margin: 0 0 14px; color: #fff; } .scl-monetize__card--cta p { margin-bottom: 28px; color: rgba(255, 255, 255, 0.9); } .scl-monetize__card img { width: 46px; height: 46px; } .scl-monetize__card h3 { margin: 26px 0 16px; font-weight: 600; font-size: 24px; line-height: 1.3; } .scl-monetize__card p { font-size: 15px; line-height: 24px; } /* ============================================================ 8. PROCESS (zig-zag, outlined numerals) ============================================================ */ .scl-process { padding: 90px 0 70px; background: #fff; } .scl-process__step { display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); gap: clamp(30px, 8vw, 130px); align-items: center; } .scl-process__num { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: clamp(90px, 12vw, 180px); line-height: 1; color: transparent; -webkit-text-stroke: 1px #d4d7e4; text-align: center; letter-spacing: -0.06em; } .scl-process__art { display: flex; justify-content: center; } .scl-process__art img { width: min(100%, 175px); height: auto; } .scl-process__body h3 { font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); } .scl-process__body p { margin-top: 10px; max-width: 460px; font-size: 16px; line-height: 26px; color: var(--scl-muted); } /* Even steps flip: numeral right, copy left (right-aligned). */ .scl-process__step--flip .scl-process__num { order: 3; } .scl-process__step--flip .scl-process__art { order: 2; } .scl-process__step--flip .scl-process__body { order: 1; text-align: right; } .scl-process__step--flip .scl-process__body p { margin-left: auto; } .scl-process__arrow { display: flex; justify-content: center; padding: 26px 0; color: #101010; } .scl-process__arrow svg { width: 16px; height: 60px; } /* ============================================================ 9. CTA 2 (Turn Your Multi-Service App Idea ...) ============================================================ */ /* The artwork URL comes from the blade via --scl-cta2-bg so it goes through asset(), like every other image on the page. The flat colour behind it is the fallback if the variable is ever absent. */ .scl-cta2 { padding: 110px 0; background: var(--scl-cta2-bg) center / cover no-repeat, #dcebfb; text-align: center; } .scl-cta2 h2 { font-weight: 700; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.3; } .scl-cta2 p { margin: 20px auto 42px; max-width: 1040px; font-size: 17px; line-height: 28px; color: #3c414d; } .scl-cta2 .scl-btn { margin-inline: auto; } /* ============================================================ 10. WHY CHOOSE US ============================================================ */ .scl-why { padding: 100px 0; background: #fff; } .scl-why__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 70px; align-items: start; } /* Left column tracks the list while it scrolls. */ .scl-why__aside { position: sticky; top: 110px; } .scl-why__aside h2 { font-weight: 700; font-size: clamp(30px, 3.3vw, 47px); line-height: 1.3; } .scl-why__aside > p { margin: 24px 0 44px; max-width: 440px; font-size: 17px; line-height: 28px; color: #4a4f5b; } .scl-btn--purple { background: #6d2aeb; } .scl-btn--purple:hover, .scl-btn--purple:focus-visible { box-shadow: 0 14px 32px rgba(109, 42, 235, 0.35); } .scl-why__list { display: flex; flex-direction: column; gap: 44px; } .scl-why__item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 26px; align-items: center; } .scl-why__item img { width: 100%; height: auto; } .scl-why__item h3 { font-weight: 700; font-size: clamp(20px, 2vw, 27px); } .scl-why__item p { margin-top: 10px; font-size: 16px; line-height: 27px; color: #4a4f5b; } /* ============================================================ 11. FAQ ============================================================ */ .scl-faq { padding: 80px 0 110px; background: linear-gradient(140deg, #f2f5fc 0%, #eef2fb 45%, #f5f6fc 100%); } .scl-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: start; } /* Heading + promo track the list while it scrolls. */ .scl-faq__aside { position: sticky; top: 110px; } .scl-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .scl-faq__title span { color: #1a5cf0; } .scl-faq__promo { margin-top: 120px; padding: 32px 30px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; background: linear-gradient(241deg, #196dff 30%, #001da0 100%); color: #fff; } .scl-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; color: #ececec; } .scl-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .scl-btn--white { --scl-btn-icon-w: 38px; --scl-btn-pad-l: 24px; --scl-btn-pad-r: 8px; background: #fff; color: #0b1220; padding: 8px var(--scl-btn-pad-r) 8px var(--scl-btn-pad-l); } .scl-btn--white:hover, .scl-btn--white:focus-visible { color: #0b1220; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); } .scl-btn--white .scl-btn__label { font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; } .scl-btn--white .scl-btn__icon { background: #fff; color: #0b1220; box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.12); } .scl-faq__list { display: flex; flex-direction: column; gap: 18px; } .scl-faq__item { padding: 24px 40px; border: 1px solid rgba(16, 16, 16, 0.06); border-radius: 26px; background: rgba(255, 255, 255, 0.86); overflow: hidden; transition: background 0.2s ease, box-shadow 0.2s ease; } .scl-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .scl-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 19px; line-height: 1.5; color: #000; } .scl-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .scl-faq__mark { position: relative; flex: none; width: 26px; height: 26px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .scl-faq__mark::before, .scl-faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: #101010; transform: translate(-50%, -50%); transition: transform 0.25s ease, opacity 0.25s ease; } .scl-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .scl-faq__item[open] .scl-faq__mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(180deg); } /*

cannot transition its own height, so this wrapper is what animates — driven from 0 to its measured height and back by the blade script. */ .scl-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .scl-faq__item[open] .scl-faq__a-wrap { height: auto; opacity: 1; } .scl-faq__a { padding-top: 14px; max-width: 523px; font-size: 17px; line-height: 25px; color: #7d7d7d; } /* ============================================================ RESPONSIVE (sections 2-11) ============================================================ */ @media (max-width: 1199.98px) { .scl-features__layout { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; } .scl-features__tab { gap: 12px; padding: 16px 16px; } .scl-features__sets { padding: 26px 20px 30px; } /* Copy and button stop sharing a row before the button's fixed width starts eating the copy. */ .scl-features__cta { flex-direction: column; align-items: flex-start; gap: 18px; } /* `width: 100%`, not `max-width`: the base button is `width: max-content`, which keeps reserving the unwrapped label's width and pushes the pane wider than the card it sits in. */ .scl-features__cta .scl-btn { margin-left: 0; width: 100%; justify-content: space-between; } .scl-why__grid, .scl-faq__layout { gap: 44px; } } @media (max-width: 991.98px) { .scl-stats__card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; } .scl-stat:nth-child(3) { border-left: 0; } .scl-solution__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .scl-cta1__grid { grid-template-columns: minmax(0, 1fr); } .scl-cta1__copy { text-align: center; } .scl-cta1__copy p { margin-inline: auto; } .scl-cta1__copy .scl-btn { margin-inline: auto; } /* The phone drops below the stage and the chip row scrolls: four chips and a 300px device column leave the feature list too narrow to read here. */ .scl-features__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .scl-features__device { order: 1; } .scl-features__device::before { width: 280px; height: 280px; } .scl-features__nav { display: flex; gap: 10px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; } .scl-features__nav::-webkit-scrollbar { display: none; } /* `width: 100%` from the rail layout would make flex-basis:auto resolve to the full row, so each chip has to be told to size to its own content. */ .scl-features__tab { flex: 0 0 auto; width: auto; gap: 12px; padding: 14px 18px; } .scl-features__tab:hover { transform: none; } .scl-features__go { display: none; } /* The chip row scrolls, so a bar pinned to a chip's own width is the only active cue that stays visible. */ .scl-features__tab[aria-selected="true"]::before { width: 50%; } .scl-monetize__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .scl-process__step { grid-template-columns: minmax(0, 0.6fr) 150px minmax(0, 1.4fr); gap: 24px; } .scl-why__grid { grid-template-columns: minmax(0, 1fr); } .scl-why__aside { position: static; text-align: center; } .scl-why__aside > p { margin-inline: auto; } .scl-why__aside .scl-btn { margin-inline: auto; } .scl-faq__layout { grid-template-columns: minmax(0, 1fr); } .scl-faq__aside { position: static; } .scl-faq__promo { margin-top: 40px; } } @media (max-width: 767.98px) { .scl-services__track { gap: 16px; } .scl-service { width: 300px; } .scl-service__label { bottom: 20px; } .scl-solution__card { gap: 18px; padding: 20px 22px; } .scl-solution__icon { width: 56px; height: 56px; } .scl-solution__icon img { width: 28px; height: 28px; } .scl-monetize__grid { grid-template-columns: minmax(0, 1fr); } /* Steps stack: numeral becomes a small caption above the card. */ .scl-process__step, .scl-process__step--flip { grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: center; } .scl-process__step--flip .scl-process__num { order: 1; } .scl-process__step--flip .scl-process__art { order: 2; } .scl-process__step--flip .scl-process__body { order: 3; text-align: center; } .scl-process__num { font-size: 64px; } .scl-process__body p { margin-inline: auto; } .scl-process__step--flip .scl-process__body p { margin-inline: auto; } .scl-process__arrow { padding: 20px 0; } .scl-why__item { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; } .scl-faq__item { padding: 18px 22px; } .scl-faq__q { font-size: 17px; } } @media (max-width: 575.98px) { .scl-stats__card { grid-template-columns: minmax(0, 1fr); } .scl-stat { justify-content: flex-start; } .scl-stat + .scl-stat { border-left: 0; border-top: 1px solid #e7e9f2; padding-top: 18px; } /* One column of rows: two 15.5px columns inside a 296px card is unreadable. */ .scl-features__set { grid-template-columns: minmax(0, 1fr); gap: 2px; } .scl-features__card { padding: 16px; border-radius: 20px; } .scl-features__sets { padding: 20px 14px 24px; } .scl-features__chrome { padding: 14px 16px; gap: 10px; } .scl-features__crumb span { display: none; } /* The button's label is `nowrap` so its swap animation has a stable width, which squeezed the copy to a sliver here. Let it wrap and drop the swap, matching what the sub-380px block already does site-wide. */ .scl-features__cta .scl-btn__label { white-space: normal; flex: 1 1 auto; text-align: left; } .scl-features__cta .scl-btn:hover, .scl-features__cta .scl-btn:focus-visible { padding-left: var(--scl-btn-pad-l); padding-right: var(--scl-btn-pad-r); } .scl-features__cta .scl-btn:hover .scl-btn__label, .scl-features__cta .scl-btn:focus-visible .scl-btn__label, .scl-features__cta .scl-btn:hover .scl-btn__icon, .scl-features__cta .scl-btn:focus-visible .scl-btn__icon { transform: none; } .scl-cta1__art img { width: min(64%, 230px); } } /* ============================================================ TYPOGRAPHY — justified body copy Multi-line body copy is justified. Centred blocks (.scl-head, .scl-cta2, the service labels) keep their own alignment, and single-line rows are left out since justify cannot affect them. ============================================================ */ .scl-hero__text, .scl-cta1__copy p, .scl-features__cta p, .scl-monetize__card p, .scl-why__aside > p, .scl-why__item p, .scl-process__body p, .scl-faq__a { text-align: justify; } /* Flipped steps are right-aligned, so justify has to keep the closing line flush right or the step loses the edge it is built on. */ .scl-process__step--flip .scl-process__body p { text-align: justify; text-align-last: right; } /* Where the layout re-centres below a breakpoint, centring wins. */ @media (max-width: 991.98px) { .scl-hero__text, .scl-cta1__copy p, .scl-why__aside > p { text-align: center; } } @media (max-width: 767.98px) { .scl-process__body p, .scl-process__step--flip .scl-process__body p { text-align: center; text-align-last: auto; } }