/* ============================================================ Social Media App Development (/service/social-media-app-development) Pastel gradient hero + near-white body, violet -> pink accent. BEM-ish `sma-` prefix; scroll-reveal via `.sma-anim` on , mirroring ai-app-builder.css / canada.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(.sma-page) { overflow-x: clip; } .sma-page { --sma-violet: #6532f7; --sma-indigo: #6136fd; --sma-pink: #f61e6a; --sma-magenta: #e0218c; --sma-blue: #1a5cf0; --sma-ink: #101010; --sma-body: #6b6b6b; --sma-muted: #8a8a8a; --sma-line: #ececec; --sma-bg: #f8f9fd; position: relative; background: var(--sma-bg); color: var(--sma-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .sma-page .container { max-width: 1240px; } .sma-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--sma-ink); } .sma-page :where(p) { margin: 0; color: var(--sma-body); } .sma-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } /* ---------- shared section furniture ---------- */ .sma-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 0 auto 52px; max-width: 1000px; } .sma-title { font-weight: 700; font-size: clamp(27px, 2.9vw, 38px); line-height: 1.3; } /* Violet -> pink wash used on the highlighted words of every section title. */ .sma-grad { background: linear-gradient(90deg, var(--sma-violet) 0%, var(--sma-pink) 62%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .sma-pinkword { color: var(--sma-pink); } .sma-lead { max-width: 800px; font-size: 16px; line-height: 26px; color: var(--sma-muted); } /* ---------- pill button (label + arrow disc swap on hover) ---------- */ .sma-btn { --sma-btn-icon-w: 42px; --sma-btn-gap: 14px; --sma-btn-pad-l: 30px; --sma-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; gap: var(--sma-btn-gap); width: max-content; max-width: 100%; padding: 9px var(--sma-btn-pad-r) 9px var(--sma-btn-pad-l); border-radius: 999px; background: linear-gradient(90deg, #6136fd 0%, #7a4bff 100%); 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); } .sma-btn:hover, .sma-btn:focus-visible { padding-left: var(--sma-btn-pad-r); padding-right: var(--sma-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(97, 54, 253, 0.34); } .sma-btn__label { display: inline-block; flex: none; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .sma-btn__icon { display: grid; place-items: center; flex: none; width: var(--sma-btn-icon-w); height: var(--sma-btn-icon-w); border-radius: 50%; background: #101010; color: #fff; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.25s ease; } .sma-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .sma-btn:hover .sma-btn__icon svg, .sma-btn:focus-visible .sma-btn__icon svg { transform: rotate(45deg); } /* Label and disc trade sides; the blade script publishes the measured label width as --sma-btn-label-w so the disc knows how far to travel. */ .sma-btn:hover .sma-btn__label, .sma-btn:focus-visible .sma-btn__label { transform: translateX(calc(var(--sma-btn-icon-w) + var(--sma-btn-gap))); } .sma-btn:hover .sma-btn__icon, .sma-btn:focus-visible .sma-btn__icon { transform: translateX(calc(-1 * (var(--sma-btn-label-w, 200px) + var(--sma-btn-gap)))); } .sma-btn--white { --sma-btn-icon-w: 38px; --sma-btn-pad-l: 24px; --sma-btn-pad-r: 8px; background: #fff; color: #0b1220; padding: 8px var(--sma-btn-pad-r) 8px var(--sma-btn-pad-l); } .sma-btn--white:hover, .sma-btn--white:focus-visible { color: #0b1220; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); } .sma-btn--white .sma-btn__label { font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; } .sma-btn--white .sma-btn__icon { background: #fff; color: #0b1220; box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.12); } @media (prefers-reduced-motion: reduce) { .sma-btn__label, .sma-btn__icon { transition: none; } .sma-btn:hover .sma-btn__label, .sma-btn:focus-visible .sma-btn__label, .sma-btn:hover .sma-btn__icon, .sma-btn:focus-visible .sma-btn__icon, .sma-btn:hover .sma-btn__icon svg, .sma-btn:focus-visible .sma-btn__icon svg { transform: none; } } /* ============================================================ 1. HERO ============================================================ */ .sma-hero { position: relative; padding: 64px 0 0; /* Cream -> sky -> periwinkle, matching the design's corner-to-corner wash. */ background: radial-gradient(58% 70% at 88% 82%, rgba(154, 183, 254, 0.75) 0%, rgba(154, 183, 254, 0) 62%), radial-gradient(46% 52% at 96% 4%, rgba(186, 231, 254, 0.9) 0%, rgba(186, 231, 254, 0) 70%), radial-gradient(40% 46% at 2% 0%, rgba(250, 244, 210, 0.95) 0%, rgba(250, 244, 210, 0) 68%), linear-gradient(160deg, #fbfaf3 0%, #f6f8fd 42%, #eef3fe 100%); overflow: hidden; } /* Pale outlined disc bleeding off the left edge, behind the stats card. */ .sma-hero::after { content: ""; position: absolute; left: -230px; bottom: -190px; width: 470px; height: 470px; border-radius: 50%; border: 1px solid rgba(120, 96, 240, 0.14); background: radial-gradient(circle at 50% 50%, rgba(146, 122, 244, 0.08) 0%, rgba(146, 122, 244, 0) 70%); pointer-events: none; } .sma-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 28px; align-items: center; } .sma-hero__copy { padding: 24px 0 90px; } .sma-hero h1 { position: relative; font-weight: 700; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.2; } .sma-hero h1 .sma-grad { background: linear-gradient(90deg, #6532f7 0%, #b043bf 28%, #f61e6a 58%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Megaphone sits at the end of the first heading line. */ .sma-hero__mega { width: 74px; height: auto; margin: 0 0 10px 12px; vertical-align: middle; } .sma-hero__text { margin-top: 22px; max-width: 530px; font-size: 15.5px; line-height: 27px; color: #55575e; } .sma-hero__actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; } .sma-hero__doodle { width: 58px; height: auto; opacity: 0.9; } .sma-hero__art { position: relative; align-self: end; justify-self: end; width: 100%; max-width: 620px; } .sma-hero__art img { display: block; width: 100%; height: auto; } .sma-hero__benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; margin-top: 16px; padding: 0; list-style: none; text-align: left; } .sma-hero__benefits li { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: "Poppins", "Gabarito", sans-serif; font-size: 13px; line-height: 20px; font-weight: 400; color: #5f6268; } .sma-hero__check { display: inline-grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(90deg, #6136fd 0%, #7a4bff 100%); color: #fff; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; } @media (max-width: 700px) { .sma-hero__benefits { grid-template-columns: 1fr; width: min(100%, 520px); row-gap: 10px; } } /* ============================================================ 2. STATS ============================================================ */ .sma-stats { position: relative; z-index: 3; margin-top: -62px; padding-bottom: 60px; } .sma-stats__card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 26px 10px; border-radius: 22px; background: #fff; box-shadow: 0 28px 60px -40px rgba(24, 32, 62, 0.45); } .sma-stat { display: flex; align-items: center; gap: 18px; padding: 6px 24px; } /* Hairline between cells, drawn on the cell so the grid stays even. */ .sma-stat + .sma-stat { border-left: 1px solid #eef0f6; } .sma-stat__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #f3efff; } .sma-stat__icon img { width: 24px; height: 24px; object-fit: contain; } .sma-stat:nth-child(2) .sma-stat__icon { background: #e8f8ee; } .sma-stat:nth-child(3) .sma-stat__icon { background: #fdeee2; } .sma-stat:nth-child(4) .sma-stat__icon { background: #e4f0fe; } .sma-stat__num { display: block; font-weight: 700; font-size: 28px; line-height: 1.1; } .sma-stat__num i { font-style: normal; color: var(--sma-violet); } .sma-stat:nth-child(2) .sma-stat__num i { color: #22a15a; } .sma-stat:nth-child(3) .sma-stat__num i { color: #f07a1e; } .sma-stat:nth-child(4) .sma-stat__num i { color: #2f86f0; } .sma-stat__label { display: block; margin-top: 4px; font-size: 15px; color: #61636b; } /* ============================================================ 3. AWARDS ============================================================ */ .sma-awards { padding: 40px 0 80px; background: linear-gradient(180deg, #f8f9fd 0%, #f7f5ff 40%, #faf8ff 100%); } .sma-awards h2 { max-width: 860px; margin: 0 auto 46px; text-align: center; font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; } .sma-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .sma-marquee__track { display: flex; gap: 22px; width: max-content; padding: 4px 0; animation: sma-scroll 46s linear infinite; } .sma-marquee:hover .sma-marquee__track { animation-play-state: paused; } @keyframes sma-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .sma-marquee__track { animation: none; } } .sma-badge { display: flex; flex-direction: column; flex: 0 0 auto; width: 178px; margin: 0; padding: 22px 18px 18px; border-radius: 14px; background: #fff; text-align: center; } .sma-badge img { height: 118px; width: auto; margin: 0 auto 14px; object-fit: contain; } .sma-badge figcaption { margin-top: auto; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--sma-ink); } .sma-badge figcaption small { display: block; margin-top: 4px; font-weight: 500; font-size: 12px; color: var(--sma-muted); } .sma-badge__rule { display: block; width: 34px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: #2b3a4d; } .sma-badge__rule--blue { background: #2f8bd6; } /* ============================================================ 4. CASE STUDY ============================================================ */ .sma-case { padding: 50px 0 90px; } /* Swiper container. Deliberately NOT class `swiper`: layouts/app.blade.php runs a global `new Swiper('.swiper', {direction:'vertical'})` that would hijack it. Swiper's own `.swiper-wrapper` / `.swiper-slide` rules are class-standalone, so only the container box needs styling here. */ /* min-width:0 — grid items default to min-content, which kept the art column at the slide's intrinsic width and pushed it past the viewport on phones. */ .sma-case__art { min-width: 0; width: 100%; } .sma-case__slider { position: relative; width: 100%; overflow: hidden; } .sma-case__slider .swiper-slide { height: auto; } .sma-case__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; } .sma-case__nav { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid #dfe1ec; border-radius: 50%; background: #fff; color: #3c3f4c; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .sma-case__nav:hover { background: #7860f0; border-color: #7860f0; color: #fff; } .sma-case__nav.swiper-button-disabled { opacity: 0.45; cursor: default; } /* Swiper stamps .swiper-pagination-horizontal on this node, which carries position:absolute + width:100% — that would shove the arrows to the edges. swiper-bundle.min.css loads AFTER this file, so the selector needs three classes to outrank it. */ .sma-case__art .sma-case__controls .sma-case__dots { position: static; width: auto; display: flex; justify-content: center; gap: 9px; } .sma-case__dots .swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 999px; background: #d4d7e2; opacity: 1; cursor: pointer; transition: width 0.3s ease, background 0.3s ease; } .sma-case__dots .swiper-pagination-bullet-active { width: 26px; background: #7860f0; } .sma-case__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 60px; align-items: center; } .sma-case__art img { display: block; width: 100%; height: auto; } .sma-case__panel { display: none; } .sma-case__panel.is-active { display: block; animation: sma-case-fade 0.45s ease both; } @keyframes sma-case-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .sma-case__body h3 { max-width: 440px; font-weight: 700; font-size: clamp(21px, 2vw, 26px); line-height: 1.42; } .sma-case__body p { margin-top: 22px; font-size: 16px; line-height: 27px; color: #5d5f66; } /* ---------- justified body copy ---------- Multi-line paragraphs that run left-aligned in a fixed-width column read cleaner justified. Centred copy (.sma-lead, .sma-cta p, card/badge text) and the right-aligned flipped life rows are deliberately excluded, as are the two-to-three-line card blurbs (benefit / why / tech items) where justifying only opens ugly gaps. `hyphens` keeps word spacing tight. */ .sma-hero__text, .sma-case__body p, .sma-life__body p, .sma-tech__aside p, .sma-faq__promo p, .sma-faq__a { text-align: justify; hyphens: auto; } /* ============================================================ 5. RANGE ============================================================ */ .sma-range { padding: 40px 0 90px; } .sma-range__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .sma-range__card { position: relative; display: block; aspect-ratio: 285 / 220; border-radius: 16px; overflow: hidden; text-decoration: none; } .sma-range__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .sma-range__card:hover img, .sma-range__card:focus-visible img { transform: scale(1.06); } /* Bottom scrim so the white caption stays legible over any photo. It deepens and covers the whole card on hover, when the blurb slides in under the title. */ .sma-range__card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(180deg, rgba(9, 10, 20, 0) 0%, rgba(9, 10, 20, 0.72) 100%); pointer-events: none; transition: height 0.45s ease, background 0.45s ease; } .sma-range__card:hover::after, .sma-range__card:focus-within::after { height: 100%; background: linear-gradient(180deg, rgba(9, 10, 20, 0.3) 0%, rgba(9, 10, 20, 0.88) 55%); } .sma-range__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 26px; } .sma-range__card h3 { font-weight: 700; font-size: 20px; line-height: 1.3; color: #fff; } /* Blurb is collapsed until hover / keyboard focus. Clamped so the longest copy still fits the fixed 285:220 card instead of pushing the title off the top. */ .sma-range__card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; max-height: 0; margin-top: 0; opacity: 0; transform: translateY(6px); font-size: 13.5px; line-height: 20px; color: rgba(255, 255, 255, 0.86); transition: max-height 0.45s ease, margin-top 0.45s ease, opacity 0.35s ease, transform 0.45s ease; } .sma-range__card:hover p, .sma-range__card:focus-within p { max-height: 130px; margin-top: 10px; opacity: 1; transform: none; } .sma-range__card:focus-visible { outline: 2px solid #7860f0; outline-offset: 3px; } /* Touch devices get no hover, so the blurb stays open. The card drops its fixed 285:220 ratio and grows to fit the copy — otherwise the caption, which is bottom-anchored, runs off the top and bottom of a short card. */ @media (hover: none) { .sma-range__card { aspect-ratio: auto; min-height: 230px; display: flex; align-items: flex-end; } .sma-range__card img { position: absolute; inset: 0; } .sma-range__card::after { height: 100%; background: linear-gradient(180deg, rgba(9, 10, 20, 0.3) 0%, rgba(9, 10, 20, 0.88) 55%); } .sma-range__caption { position: static; width: 100%; } .sma-range__card p { -webkit-line-clamp: unset; max-height: none; margin-top: 10px; opacity: 1; transform: none; } } /* ============================================================ 6. CTA BAND ============================================================ */ .sma-cta { position: relative; padding: 150px 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.35) 100%), var(--sma-cta-bg) center / cover no-repeat; border-top: 1px solid rgba(120, 96, 240, 0.1); border-bottom: 1px solid rgba(120, 96, 240, 0.1); text-align: center; } .sma-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 660px; margin: 0 auto; } .sma-cta h2 { font-weight: 700; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.25; } .sma-cta p { max-width: 580px; font-size: 16px; line-height: 26px; color: #55575e; } .sma-cta .sma-btn { margin-top: 14px; } /* ============================================================ 7. PROCESS ("How we bring your social app to life") ============================================================ */ .sma-life { padding: 90px 0 80px; } .sma-life__steps { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 1000px; margin: 0 auto; } .sma-life__row { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); align-items: center; gap: 24px; width: 100%; } .sma-life__num { font-family: Poppins, Gabarito, sans-serif; font-weight: 700; font-size: clamp(64px, 8vw, 104px); line-height: 1; letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1.5px #dcdfe9; text-align: center; } .sma-life__art { display: grid; place-items: center; } .sma-life__art img { width: 118px; height: auto; } .sma-life__body h3 { font-weight: 700; font-size: 19px; line-height: 1.4; } .sma-life__body p { margin-top: 8px; max-width: 330px; font-size: 14.5px; line-height: 24px; color: var(--sma-muted); } /* Even rows mirror: copy on the left, numeral on the right. */ .sma-life__row--flip .sma-life__body { order: 1; text-align: right; /* copy runs right-to-left: justified, with the last line flush right */ text-align-last: right; justify-self: end; } .sma-life__row--flip .sma-life__body p { text-align: justify; text-align-last: right; margin-left: auto; } .sma-life__row--flip .sma-life__art { order: 2; } .sma-life__row--flip .sma-life__num { order: 3; } /* Connector between consecutive steps. */ .sma-life__link { display: grid; place-items: center; width: 100%; height: 74px; } .sma-life__link svg { width: 16px; height: 60px; color: #101010; } /* ============================================================ 8. BENEFITS ============================================================ */ .sma-benefits { padding: 50px 0 90px; } .sma-benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; } .sma-benefit { display: flex; align-items: flex-start; gap: 20px; padding: 28px 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; } .sma-benefit:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -32px rgba(224, 33, 140, 0.45); } .sma-benefit__icon { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(140deg, #e0218c 0%, #a41fd1 100%); } .sma-benefit__icon img { width: 30px; height: 30px; object-fit: contain; } .sma-benefit h3 { font-weight: 700; font-size: 19px; line-height: 1.35; } .sma-benefit p { margin-top: 8px; font-size: 15px; line-height: 24px; color: #5d5f66; } /* ============================================================ 9. TECH STACK ============================================================ */ .sma-tech { padding: 40px 0 90px; } .sma-tech__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; } .sma-tech__aside { position: sticky; top: 120px; } .sma-tech__aside h2 { max-width: 400px; font-weight: 700; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.3; } .sma-tech__aside p { margin: 20px 0 34px; max-width: 420px; font-size: 16px; line-height: 26px; color: #5d5f66; } .sma-tech__list { display: flex; flex-direction: column; gap: 34px; } .sma-tech__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 20px; } .sma-tech__item img { width: 100%; max-width: 76px; height: auto; justify-self: center; } .sma-tech__item h3 { font-weight: 700; font-size: 20px; line-height: 1.35; } .sma-tech__item p { margin-top: 8px; max-width: 420px; font-size: 14.5px; line-height: 24px; color: var(--sma-muted); } /* ============================================================ 10. WHY US ============================================================ */ .sma-why { padding: 40px 0 100px; } .sma-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1120px; margin: 0 auto; } .sma-why__card { display: flex; flex-direction: column; padding: 30px 28px 34px; border: 1px solid #ececf2; border-radius: 4px; background: #fff; transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } .sma-why__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); } .sma-why__card img { width: 34px; height: 34px; object-fit: contain; } .sma-why__card h3 { margin-top: 28px; max-width: 220px; font-weight: 700; font-size: 21px; line-height: 1.28; } .sma-why__card p { margin-top: 16px; font-size: 14px; line-height: 23px; color: var(--sma-muted); } /* ============================================================ 11. FAQ ============================================================ */ .sma-faq { padding: 70px 0 110px; background: linear-gradient(140deg, rgb(244, 246, 253) 0%, rgb(238, 242, 252) 45%, rgb(247, 248, 253) 100%); } .sma-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. */ .sma-faq__aside { position: sticky; top: 110px; } .sma-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .sma-faq__title span { color: var(--sma-blue); } .sma-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; } .sma-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; color: var(--sma-line); } .sma-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .sma-faq__list { display: flex; flex-direction: column; gap: 18px; } .sma-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; } .sma-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .sma-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; } .sma-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .sma-faq__mark { position: relative; flex: none; width: 26px; height: 26px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .sma-faq__mark::before, .sma-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; } .sma-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .sma-faq__item[open] .sma-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. */ .sma-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .sma-faq__item[open] .sma-faq__a-wrap { height: auto; opacity: 1; } .sma-faq__a { padding-top: 14px; max-width: 523px; font-size: 17px; line-height: 25px; color: #7d7d7d; } /* ============================================================ 9b. TECH STACK (single marquee lane, ported from the on-demand page so both pages present the stack the same way) ============================================================ */ .sma-stack { padding: clamp(60px, 7vw, 100px) 0; background: #fff; } /* Full-bleed lane. `overflow: hidden` clips the oversized track, so the block is padded (and pulled back by an equal negative margin) to leave room for the tiles' hover lift and shadow. */ .sma-stack__marquee { margin: -18px calc(50% - 50vw); padding: 18px 0; overflow: hidden; background: linear-gradient(180deg, #fbfcff 0%, #f5f8ff 100%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .sma-stack__track { display: flex; gap: 22px; width: max-content; padding: 22px 0; animation: sma-stack-marquee 40s linear infinite; } @keyframes sma-stack-marquee { to { transform: translateX(-50%); } } .sma-stack__marquee:hover .sma-stack__track { animation-play-state: paused; } /* Fixed width because the tiles sit in a flex track rather than a grid; flex `stretch` keeps every tile in the lane the same height. */ .sma-stack__item { display: flex; flex: none; width: clamp(172px, 15vw, 216px); flex-direction: column; align-items: center; gap: 18px; padding: 30px 14px 24px; border: 1px solid #eef1f6; border-radius: 18px; background: #fff; text-align: center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .sma-stack__item:hover { transform: translateY(-8px); border-color: rgba(26, 92, 240, 0.28); box-shadow: 0 18px 34px rgba(15, 40, 90, 0.12); } .sma-stack__disc { display: grid; place-items: center; } .sma-stack__item img { width: 72px; height: 72px; object-fit: contain; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .sma-stack__item:hover img { transform: scale(1.12); } .sma-stack__item span { font-size: 15px; font-weight: 600; color: var(--sma-ink); transition: color 0.35s ease; } .sma-stack__item:hover span { color: var(--sma-blue); } @media (prefers-reduced-motion: reduce) { .sma-stack__track { animation: none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199.98px) { .sma-hero__copy { padding-bottom: 70px; } .sma-stat { gap: 14px; padding: 6px 16px; } .sma-stat__num { font-size: 24px; } .sma-case__grid, .sma-tech__grid { gap: 40px; } .sma-life__row { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); } } @media (max-width: 991.98px) { .sma-hero { padding-top: 40px; } .sma-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .sma-hero__copy { padding-bottom: 0; text-align: center; } .sma-hero__text { margin-inline: auto; } .sma-hero__actions { justify-content: center; } .sma-hero__art { justify-self: center; max-width: 460px; } .sma-stats { margin-top: -40px; } .sma-stats__card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 0; } /* With two per row the vertical rules have to follow the new columns. */ .sma-stat + .sma-stat { border-left: 0; } .sma-stat:nth-child(even) { border-left: 1px solid #eef0f6; } .sma-stat:nth-child(n + 3) { border-top: 1px solid #eef0f6; padding-top: 20px; } .sma-stat:nth-child(-n + 2) { padding-bottom: 20px; } .sma-case__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } .sma-case__art { max-width: 500px; margin: 0 auto; } .sma-case__body h3 { max-width: none; } .sma-range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sma-benefits__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .sma-tech__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .sma-tech__aside { position: static; text-align: center; } .sma-tech__aside h2, .sma-tech__aside p { max-width: none; } .sma-tech__aside .sma-btn { margin: 0 auto; } .sma-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sma-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .sma-faq__aside { position: static; } .sma-faq__promo { margin-top: 34px; } } @media (max-width: 767.98px) { .sma-hero h1 { font-size: clamp(30px, 8vw, 40px); } .sma-hero__mega { width: 52px; margin-bottom: 6px; } .sma-hero__doodle { display: none; } .sma-awards, .sma-case, .sma-range, .sma-benefits, .sma-tech, .sma-why { padding-bottom: 64px; } .sma-cta { padding: 64px 0; } .sma-life { padding: 64px 0 50px; } /* The zig-zag collapses to a single centred column on phones. */ .sma-life__row, .sma-life__row--flip { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; text-align: center; } .sma-life__num { font-size: 58px; } .sma-life__row--flip .sma-life__body, .sma-life__row--flip .sma-life__art, .sma-life__row--flip .sma-life__num { order: 0; } .sma-life__row--flip .sma-life__body { text-align: center; justify-self: center; } .sma-life__body p { margin-inline: auto; } .sma-life__link { height: 52px; } .sma-life__link svg { height: 40px; } .sma-faq__item { padding: 20px 22px; } .sma-faq__q { font-size: 17px; } } @media (max-width: 575.98px) { .sma-stats__card { grid-template-columns: minmax(0, 1fr); padding: 14px 6px; } .sma-stat { padding: 16px 20px; } .sma-stat:nth-child(even), .sma-stat:nth-child(n + 3) { border-left: 0; } .sma-stat + .sma-stat { border-top: 1px solid #eef0f6; } .sma-stat:nth-child(-n + 2) { padding-bottom: 16px; } .sma-range__grid, .sma-why__grid { grid-template-columns: minmax(0, 1fr); } .sma-stack__item { width: 158px; } .sma-stack__item img { width: 60px; height: 60px; } .sma-range__card { aspect-ratio: 16 / 11; } .sma-benefit { flex-direction: column; padding: 24px 22px; } .sma-tech__item { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; } .sma-btn { --sma-btn-pad-l: 22px; } .sma-btn__label { font-size: 12.5px; } } /* At 320px the pill buttons stop trading sides — there is no room for the label to travel, and the swap clips. */ @media (max-width: 379.98px) { .sma-btn { width: 100%; justify-content: space-between; } .sma-btn__label { min-width: 0; flex: 1 1 auto; white-space: normal; text-align: left; } .sma-btn:hover, .sma-btn:focus-visible { padding-left: var(--sma-btn-pad-l); padding-right: var(--sma-btn-pad-r); } .sma-btn:hover .sma-btn__label, .sma-btn:focus-visible .sma-btn__label, .sma-btn:hover .sma-btn__icon, .sma-btn:focus-visible .sma-btn__icon { transform: none; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .sma-anim .sma-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .sma-anim .sma-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sma-anim .sma-reveal { opacity: 1; transform: none; transition: none; } } /* The ≤575.98px block above re-sets .sma-range__card's aspect-ratio, so the touch override has to be restated after it. */ @media (hover: none) { .sma-range__card { aspect-ratio: auto; min-height: 230px; } }