/* ============================================================ AI App Builder (/service/ai-app-builder) Pastel hero + white body, indigo/blue accent. BEM-ish `aib-` prefix; scroll-reveal via `.aib-anim` on , mirroring ai-clone.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(.aib-page) { overflow-x: clip; } .aib-page { --aib-blue: #1a8cf0; --aib-indigo: #4b3ff0; --aib-violet: #7b5cff; --aib-ink: #101010; --aib-body: #6b6b6b; --aib-muted: #8a8a8a; --aib-line: #ececec; position: relative; background: #fff; color: var(--aib-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .aib-page .container { max-width: 1240px; } .aib-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--aib-ink); } .aib-page :where(p) { margin: 0; color: var(--aib-body); } .aib-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } /* ---------- shared section furniture ---------- */ .aib-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin: 0 auto 54px; max-width: 900px; } .aib-title { font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.22; } .aib-lead { max-width: 720px; font-size: 16px; line-height: 26px; } /* ---------- pill button (label + arrow disc swap on hover) ---------- */ .aib-btn { --aib-btn-icon-w: 42px; --aib-btn-gap: 14px; --aib-btn-pad-l: 30px; --aib-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; gap: var(--aib-btn-gap); width: max-content; padding: 9px var(--aib-btn-pad-r) 9px var(--aib-btn-pad-l); border-radius: 999px; background: #101010; 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); } .aib-btn:hover, .aib-btn:focus-visible { padding-left: var(--aib-btn-pad-r); padding-right: var(--aib-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(16, 16, 16, 0.28); } .aib-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); } .aib-btn__icon { display: grid; place-items: center; flex: none; width: var(--aib-btn-icon-w); height: var(--aib-btn-icon-w); border-radius: 50%; background: #fff; color: #0b1220; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.25s ease; } /* The glyph points up-right, so 45deg lands it pointing straight right. */ .aib-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .aib-btn:hover .aib-btn__icon svg, .aib-btn:focus-visible .aib-btn__icon svg { transform: rotate(45deg); } /* Label and disc trade sides; the blade script publishes the measured label width as --aib-btn-label-w so the disc knows how far to travel. */ .aib-btn:hover .aib-btn__label, .aib-btn:focus-visible .aib-btn__label { transform: translateX(calc(var(--aib-btn-icon-w) + var(--aib-btn-gap))); } .aib-btn:hover .aib-btn__icon, .aib-btn:focus-visible .aib-btn__icon { transform: translateX(calc(-1 * (var(--aib-btn-label-w, 190px) + var(--aib-btn-gap)))); } .aib-btn--grad { background: linear-gradient(90deg, #5b4bff 0%, #3f2fd6 100%); } .aib-btn--grad:hover, .aib-btn--grad:focus-visible { box-shadow: 0 14px 32px rgba(75, 63, 240, 0.35); } .aib-btn--white { --aib-btn-icon-w: 38px; --aib-btn-pad-l: 24px; --aib-btn-pad-r: 8px; background: #fff; color: #0b1220; padding: 8px var(--aib-btn-pad-r) 8px var(--aib-btn-pad-l); } .aib-btn--white:hover, .aib-btn--white:focus-visible { color: #0b1220; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); } .aib-btn--white .aib-btn__label { font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; } .aib-btn--white .aib-btn__icon { box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.12); } @media (prefers-reduced-motion: reduce) { .aib-btn__label, .aib-btn__icon { transition: none; } .aib-btn:hover .aib-btn__label, .aib-btn:focus-visible .aib-btn__label, .aib-btn:hover .aib-btn__icon, .aib-btn:focus-visible .aib-btn__icon, .aib-btn:hover .aib-btn__icon svg, .aib-btn:focus-visible .aib-btn__icon svg { transform: none; } } /* ============================================================ 1. HERO ============================================================ */ /* The gradient stays under the art as the fallback: hero-bg.png carries both the wash and the constellation lines. */ .aib-hero { position: relative; padding: 90px 0 110px; background: url("../images/ai-app-builder/hero-bg.png") center / cover no-repeat, linear-gradient(160deg, #f3f1fb 0%, #f7f1f6 45%, #e9edfb 100%); overflow: hidden; } .aib-hero__star, .aib-hero__squiggle { position: absolute; pointer-events: none; user-select: none; } .aib-hero__star { top: 210px; left: 6%; width: 52px; } .aib-hero__squiggle { top: 96px; right: 6%; width: 78px; } .aib-hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; } .aib-hero__title { font-weight: 700; font-size: clamp(42px, 6.4vw, 88px); line-height: 1.06; } .aib-hero__title span { background: linear-gradient(90deg, #7b5cff 0%, #5b4bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .aib-hero__sub { margin: 22px auto 0; max-width: 620px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: #3a3a44; } /* Prompt mock: the centre card plus the two satellite cards that flank it. */ .aib-hero__mock { position: relative; margin: 46px auto 0; width: min(100%, 700px); } .aib-prompt { padding: 16px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 24px; background: linear-gradient(140deg, rgba(226, 226, 255, 0.85) 0%, rgba(238, 233, 255, 0.7) 100%); box-shadow: 0 24px 60px rgba(65, 55, 150, 0.14); text-align: left; } .aib-prompt__label { display: inline-flex; align-items: center; gap: 8px; padding: 2px 6px 12px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; color: var(--aib-indigo); } .aib-prompt__label svg { width: 15px; height: 15px; } .aib-prompt__field { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.85); } .aib-prompt__text { flex: 1; min-width: 0; font-size: clamp(15px, 1.5vw, 18px); color: #2b2b33; white-space: nowrap; overflow: hidden; } /* Blinking caret after the typed prompt. */ .aib-prompt__caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 3px; vertical-align: -0.16em; background: #2b2b33; animation: aib-caret 1.1s steps(1) infinite; } @keyframes aib-caret { 50% { opacity: 0; } } .aib-prompt__send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: linear-gradient(180deg, #5b8cff 0%, #3f5ce0 100%); color: #fff; box-shadow: 0 8px 18px rgba(63, 92, 224, 0.35); } .aib-prompt__send svg { width: 20px; height: 20px; } /* Satellite cards sit outside the prompt card on desktop, and are hidden on narrow screens where there is no room beside it. */ .aib-hero__card { position: absolute; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 16px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 18px 40px rgba(65, 55, 150, 0.12); text-align: left; backdrop-filter: blur(6px); } .aib-hero__card--suggest { top: -78px; left: -270px; width: 210px; transform: rotate(-6deg); } .aib-hero__chart { position: absolute; top: -46px; right: -230px; width: 168px; height: auto; pointer-events: none; user-select: none; } .aib-hero__card-top { display: flex; align-items: center; gap: 6px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 11px; color: var(--aib-indigo); } .aib-hero__card-top svg { width: 12px; height: 12px; } .aib-hero__card p { margin: 8px 0 10px; font-size: 12px; line-height: 1.45; color: #4a4a55; } .aib-hero__chip { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(123, 92, 255, 0.14); font-size: 11px; font-weight: 600; color: var(--aib-indigo); } .aib-hero__cta { margin-top: 54px; } /* ============================================================ 2. NUMBERS ============================================================ */ .aib-nums { padding: 84px 0 90px; background: #fff; } .aib-nums__title { margin-bottom: 46px; text-align: center; font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.25; } .aib-nums__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--aib-line); border-radius: 16px; overflow: hidden; } /* Hairline between cells, plus the tinted rule the design runs under the box. */ .aib-nums__grid::after { content: ""; grid-column: 1 / -1; height: 3px; background: linear-gradient(90deg, rgba(123, 92, 255, 0) 0%, rgba(123, 92, 255) 50%, rgba(123, 92, 255, 0) 100%); } .aib-num { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 26px 40px; text-align: center; } .aib-num + .aib-num { border-left: 1px solid var(--aib-line); } .aib-num__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, #6a4dff 0%, #4b3ff0 100%); color: #fff; } .aib-num__icon svg { width: 21px; height: 21px; stroke-width: 2.4; } .aib-num__value { font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); color: #16214a; } .aib-num__label { max-width: 220px; font-size: 15px; line-height: 1.6; color: #4d5b7c; } /* ============================================================ 3. CAPABILITIES ============================================================ */ .aib-caps { position: relative; padding: 90px 0 100px; background: radial-gradient(45% 60% at 6% 12%, rgba(206, 245, 219, 0.5) 0%, rgba(206, 245, 219, 0) 70%), radial-gradient(50% 60% at 95% 42%, rgba(255, 226, 210, 0.55) 0%, rgba(255, 226, 210, 0) 70%), #fff; overflow: hidden; } /* Big pale starburst behind the right edge of the section. */ .aib-caps__star { position: absolute; top: 60px; right: -80px; width: 420px; height: 420px; color: rgba(0, 0, 0, 0.035); pointer-events: none; } .aib-caps__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .aib-cap { display: flex; flex-direction: column; gap: 38px; padding: 30px 26px 32px; border: 1px solid rgba(16, 16, 16, 0.08); border-radius: 6px; background: rgba(255, 255, 255, 0.86); transition: transform 0.25s ease, box-shadow 0.25s ease; } .aib-cap:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16, 16, 16, 0.08); } .aib-cap__icon img { display: block; width: 44px; height: 44px; object-fit: contain; } .aib-cap__body h3 { margin-bottom: 12px; font-weight: 700; font-size: 21px; line-height: 1.25; } .aib-cap__body p { font-size: 15px; line-height: 1.6; text-align: justify; } .aib-caps__cta { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 44px; } /* ============================================================ 4. TEMPLATES ============================================================ */ .aib-tpl { padding: 20px 0 100px; background: #fff; } .aib-tpl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } /* Card is a tinted slab: the art bleeds to the top edge, the copy sits on a wash of the template's own accent, and the whole thing lifts on hover. */ .aib-tpl__card { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 16, 0.06), 0 14px 34px rgba(16, 16, 16, 0.06); overflow: hidden; text-decoration: none; transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.32s ease; } .aib-tpl__card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--aib-tpl-tint) 35%, transparent), 0 26px 54px rgba(16, 16, 16, 0.13); } .aib-tpl__shot { position: relative; display: block; overflow: hidden; background: color-mix(in srgb, var(--aib-tpl-tint) 12%, #fff); } .aib-tpl__shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } .aib-tpl__card:hover .aib-tpl__shot img { transform: scale(1.05); } .aib-tpl__tag { position: absolute; top: 16px; left: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 16px rgba(16, 16, 16, 0.12); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aib-tpl-tint); } .aib-tpl__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 24px 26px 26px; } .aib-tpl__name { font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--aib-ink); } .aib-tpl__text { font-size: 14px; line-height: 1.6; color: var(--aib-body); } /* Pushed to the bottom so the link row lines up across cards of unequal copy. */ .aib-tpl__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 14px; color: var(--aib-tpl-tint); } .aib-tpl__link svg { width: 17px; height: 17px; transition: transform 0.25s ease; } .aib-tpl__card:hover .aib-tpl__link svg { transform: translateX(5px); } /* ============================================================ 5. IDEAS ============================================================ */ .aib-ideas { position: relative; padding: 60px 0 120px; background: radial-gradient(40% 55% at 4% 88%, rgba(214, 240, 222, 0.55) 0%, rgba(214, 240, 222, 0) 70%), radial-gradient(45% 55% at 96% 8%, rgba(255, 236, 214, 0.5) 0%, rgba(255, 236, 214, 0) 70%), #fff; overflow: hidden; } .aib-ideas__sun { position: absolute; right: 60px; bottom: 40px; width: 320px; height: 320px; color: rgba(0, 0, 0, 0.04); pointer-events: none; } .aib-ideas__layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; } .aib-ideas__title { margin-bottom: 34px; font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.24; } .aib-idea { display: block; padding: 22px 4px; border-bottom: 1px solid rgba(16, 16, 16, 0.5); color: var(--aib-ink); text-decoration: none; transition: color 0.2s ease; } .aib-idea__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 19px; } .aib-idea:hover, .aib-idea:focus-visible { color: var(--aib-indigo); } .aib-idea svg { flex: none; width: 22px; height: 22px; transition: transform 0.25s ease; } .aib-idea:hover svg, .aib-idea:focus-visible svg { transform: translateX(5px); } /* `grid-template-rows: 0fr -> 1fr` is what animates: the panel's own height is unknown, and `height: auto` cannot be transitioned. */ .aib-idea__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .aib-idea:hover .aib-idea__panel, .aib-idea:focus-visible .aib-idea__panel { grid-template-rows: 1fr; } .aib-idea__text { overflow: hidden; max-width: 560px; font-size: 15px; line-height: 1.62; color: var(--aib-body); opacity: 0; transition: opacity 0.28s ease; } .aib-idea:hover .aib-idea__text, .aib-idea:focus-visible .aib-idea__text { padding-top: 12px; opacity: 1; } /* Touch has no hover, so the copy would be unreachable there — it stays open. */ @media (hover: none) { .aib-idea__panel { grid-template-rows: 1fr; } .aib-idea__text { padding-top: 12px; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .aib-idea__panel, .aib-idea__text { transition: none; } } /* ============================================================ 6 + 10. BLUE CTA BANDS ============================================================ */ /* cta-bg.png carries the swoosh arcs, and it is a pale lavender wash rather than the blue band in the original comp — so the copy on it is ink, not white. */ .aib-band { position: relative; padding: 74px 0 78px; background: url("../images/ai-app-builder/cta-bg.png") center / cover no-repeat, linear-gradient(120deg, #e8e9fa 0%, #f2eef6 55%, #e9eafb 100%); overflow: hidden; text-align: center; } .aib-band__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; } .aib-band h2 { font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.22; color: var(--aib-ink); } .aib-band p { max-width: 760px; font-size: 16px; line-height: 1.62; color: #4a4a55; } .aib-band .aib-btn { margin-top: 14px; } /* ============================================================ 7. STEPS ============================================================ */ .aib-steps { /* Site header is fixed at 76px; the extra 14px is the design's own gap. */ --aib-step-stick: 90px; position: relative; padding: 92px 0 0; background: #fff; } .aib-steps__title { margin-bottom: 0; text-align: center; font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); } .aib-steps__panel { padding-top: 60px; } /* Each step pins at the same offset, so the next one rides up and covers the previous — which is why the row needs an opaque fill. */ .aib-step { position: sticky; top: var(--aib-step-stick); width: 100%; background: #fff; } .aib-step__flex { display: flex; padding: 45px 0 65px; border-top: 1px solid var(--aib-line); } /* Oversized, faded numeral: a watermark for the step rather than a label. */ .aib-step__num { display: flex; align-items: center; flex: none; width: 200px; max-width: 100%; color: rgba(123, 92, 255, 0.2); font-size: 160px; font-weight: 800; line-height: 0.8; letter-spacing: -0.04em; } /* `min-width: 0` lets this flex child shrink below the paragraph's intrinsic width; without it the row overflows on mid-size screens. */ .aib-step__detail { flex: 1; min-width: 0; border-left: 1px solid var(--aib-line); padding-left: 52px; } .aib-step__title { margin: 0; font-weight: 600; font-size: 24px; line-height: 1.3; } .aib-step__text { margin: 24px 0 0; width: 700px; max-width: 100%; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 32px; text-align: justify; } /* ============================================================ 8. OTHER SERVICES ============================================================ */ .aib-other { padding: 90px 0 100px; background: linear-gradient(180deg, #f7f6fd 0%, #fbfaff 100%); } /* The viewport spans the full window so the neighbouring cards stay visible either side of the centred active one; the rail is what the script moves. */ .aib-other__viewport { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding: 30px 0 40px; overflow: hidden; cursor: grab; touch-action: pan-y; } .aib-other__viewport.is-grabbing { cursor: grabbing; } .aib-other__rail { display: flex; gap: 24px; width: max-content; padding: 0 24px; } /* Only once the script takes over does the rail animate and the cards recede — with JS off the row renders as a plain, fully legible strip. */ .aib-other__rail.is-live { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .aib-svc { position: relative; display: flex; flex-direction: column; gap: 18px; flex: none; width: 320px; padding: 30px 28px 28px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(20, 20, 60, 0.06); overflow: hidden; text-decoration: none; user-select: none; } .aib-other .aib-other__rail.is-live .aib-svc { opacity: 0.45; transform: scale(0.9); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease; } .aib-other .aib-other__rail.is-live .aib-svc.is-active { opacity: 1; transform: scale(1.06); box-shadow: 0 22px 48px rgba(20, 20, 60, 0.14); } /* Pale quarter-disc in the top-right corner, tinted per card. */ .aib-svc::before { content: ""; position: absolute; top: -60px; right: -50px; width: 150px; height: 150px; border-radius: 50%; background: var(--aib-svc-tint, rgba(123, 92, 255, 0.12)); } .aib-svc__icon { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--aib-svc-tint, rgba(123, 92, 255, 0.12)); color: var(--aib-svc-ink, var(--aib-indigo)); } .aib-svc__icon svg { width: 24px; height: 24px; } .aib-svc h3 { position: relative; font-weight: 500; font-size: 20px; } .aib-svc p { position: relative; font-size: 14px; line-height: 1.6; } .aib-svc img, .aib-svc svg { pointer-events: none; } .aib-svc { -webkit-user-drag: none; } @media (prefers-reduced-motion: reduce) { .aib-other__rail.is-live, .aib-other__rail.is-live .aib-svc { transition: none; } } /* ============================================================ 9. SECURITY ============================================================ */ .aib-sec { padding: 96px 0 100px; background: #fff; } .aib-sec__layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 60px; align-items: start; } .aib-sec__title { font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.22; } .aib-sec__lead { margin: 20px 0 34px; font-size: 15px; line-height: 1.65; text-align: justify; } .aib-sec__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; } /* Hairlines between the four cells, drawn on the cells themselves so the grid stays a plain 2x2 with no spacer elements. */ .aib-sec__item:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--aib-line); } .aib-sec__item:nth-child(-n + 2) { padding-bottom: 34px; border-bottom: 1px solid var(--aib-line); } .aib-sec__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 10px; background: rgba(123, 92, 255, 0.12); color: var(--aib-indigo); } .aib-sec__icon svg { width: 20px; height: 20px; } .aib-sec__item h3 { margin-bottom: 10px; font-weight: 700; font-size: 16px; } .aib-sec__item p { font-size: 15px; line-height: 1.6; } /* ============================================================ 11. FAQ ============================================================ */ .aib-faq { padding: 70px 0 110px; background: linear-gradient(140deg, rgb(244, 246, 253) 0%, rgb(238, 242, 252) 45%, rgb(247, 248, 253) 100%); } .aib-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. */ .aib-faq__aside { position: sticky; top: 110px; } .aib-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .aib-faq__title span { color: #1a5cf0; } .aib-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; } .aib-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; color: var(--aib-line); } .aib-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .aib-faq__list { display: flex; flex-direction: column; gap: 18px; } .aib-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; } .aib-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .aib-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; } .aib-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .aib-faq__mark { position: relative; flex: none; width: 26px; height: 26px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .aib-faq__mark::before, .aib-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; } .aib-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .aib-faq__item[open] .aib-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. */ .aib-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .aib-faq__item[open] .aib-faq__a-wrap { height: auto; opacity: 1; } .aib-faq__a { padding-top: 14px; max-width: 523px; font-size: 17px; line-height: 25px; color: #7d7d7d; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199.98px) { .aib-hero__card--suggest { left: -150px; width: 180px; } .aib-hero__star { left: 2%; } .aib-hero__squiggle { right: 2%; } .aib-hero__card--chart { right: -130px; width: 130px; } .aib-faq__layout { gap: 40px; } } @media (max-width: 991.98px) { .aib-hero { padding: 70px 0 84px; } .aib-hero__card, .aib-hero__star, .aib-hero__squiggle { display: none; } .aib-caps__grid, .aib-tpl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aib-ideas__layout, .aib-sec__layout, .aib-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } .aib-faq__aside { position: static; } .aib-faq__promo { margin-top: 40px; } .aib-ideas__sun { display: none; } } @media (max-width: 767.98px) { .aib-nums__grid { grid-template-columns: minmax(0, 1fr); } /* The 200px number gutter plus the indent leaves no room for copy on a phone, so the numeral moves above the detail and the divider goes with it. */ .aib-steps { --aib-step-stick: 76px; } .aib-steps__panel { padding-top: 34px; } .aib-step__flex { display: block; padding: 26px 0 34px; } .aib-step__num { width: auto; margin-bottom: 2px; font-size: 92px; } .aib-step__detail { border-left: 0; padding-left: 0; } .aib-step__title { font-size: 20px; } .aib-step__text { margin-top: 14px; font-size: 15px; line-height: 26px; } .aib-svc { width: 268px; } .aib-num + .aib-num { border-left: 0; border-top: 1px solid var(--aib-line); } .aib-caps__grid, .aib-tpl__grid { grid-template-columns: minmax(0, 1fr); } .aib-cap { gap: 28px; } .aib-sec__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } /* Stacked: one rule under every cell but the last, none on the sides. */ .aib-sec__item:nth-child(odd) { padding-right: 0; border-right: 0; } .aib-sec__item { padding: 26px 0; border-bottom: 1px solid var(--aib-line); } .aib-sec__item:last-child { border-bottom: 0; } .aib-sec__item:nth-child(-n + 2) { padding-bottom: 26px; } .aib-faq__item { padding: 20px 24px; } .aib-faq__q { font-size: 17px; } .aib-faq__a { font-size: 15px; } } @media (max-width: 575.98px) { .aib-page .container { padding-left: 18px; padding-right: 18px; } .aib-prompt__field { padding: 12px 12px 12px 16px; } /* Full-width CTAs so the pills do not vary with their parent's width. */ .aib-btn { width: 100%; justify-content: space-between; } .aib-btn:hover, .aib-btn:focus-visible { padding-left: var(--aib-btn-pad-l); padding-right: var(--aib-btn-pad-r); } .aib-btn:hover .aib-btn__label, .aib-btn:focus-visible .aib-btn__label, .aib-btn:hover .aib-btn__icon, .aib-btn:focus-visible .aib-btn__icon { transform: none; } .aib-band__inner .aib-btn { width: 100%; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .aib-anim .aib-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); } .aib-anim .aib-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .aib-anim .aib-reveal { opacity: 1; transform: none; transition: none; } }