/* ============================================================ Custom Python Development (/service/custom-python-development) Python-derived system: ink navy, Python blue (#3776ab -> #2f6bd9), gold (#ffd43b) as the single accent, cool paper body, deep-navy bands. BEM-ish `py-` prefix; scroll-reveal armed by `.py-anim` on . Motion: hero load sequence (clip-reveal headline, drawn underline, rising art + breathing ring), stat count-up, services explorer with cross-fading detail panel, sticky-stacked case rows, counter-scrolling industry marquee, scroll-lit horizontal process stepper. ============================================================ */ @property --py-spin { syntax: ""; inherits: true; initial-value: 0deg; } body:has(.py-page) { overflow-x: clip; } .py-page { --py-blue: #2f6bd9; --py-blue-dk: #1f4fa8; --py-blue-lt: #e2ecfb; --py-gold: #ffd43b; --py-gold-dk: #e6b800; --py-ink: #101828; --py-body: #4f5a70; --py-muted: #8a93a8; --py-line: #e3e7ef; --py-paper: #f6f8fc; --py-navy: #0d1b2e; --py-navy-2: #132640; --py-grad: linear-gradient(120deg, #2f6bd9 0%, #3776ab 100%); --py-ease: cubic-bezier(0.22, 1, 0.36, 1); --py-ease-io: cubic-bezier(0.65, 0, 0.35, 1); position: relative; background: #fff; color: var(--py-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .py-page .container { max-width: 1240px; } .py-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.025em; color: var(--py-ink); } .py-page :where(p) { margin: 0; color: var(--py-body); } .py-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .py-page :where(img) { max-width: 100%; height: auto; } .py-page :where(dl, dd) { margin: 0; } .py-page :where(button) { font: inherit; } /* ---------- section furniture ---------- */ .py-head { max-width: 820px; margin: 0 auto 56px; text-align: center; } .py-title { font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.14; } .py-title--light { color: #fff; } .py-sub { margin-top: 18px; font-family: "Poppins", sans-serif; font-size: 16px; line-height: 1.75; } .py-sub + .py-sub { margin-top: 12px; } .py-sub--light { color: rgba(255, 255, 255, 0.72); } /* Body copy runs justified everywhere except the centred blocks (section heads above 768px, the stats band, the final CTA). Hyphenation only kicks in on narrow columns, where justify alone would open rivers. */ .py-page :where(p, dd) { text-align: justify; text-justify: inter-word; } .py-trust :where(p), .py-final :where(p) { text-align: center; } @media (min-width: 768px) { .py-head :where(p) { text-align: center; } } @media (max-width: 767.98px) { .py-page :where(p, dd) { hyphens: auto; } } /* Gold marker underline: a hand-drawn stroke that draws in on load. */ .py-ul { position: relative; font-style: normal; white-space: nowrap; } .py-ul::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.04em; z-index: -1; height: 0.28em; border-radius: 999px; background: var(--py-gold); transform: scaleX(0); transform-origin: left center; transition: transform 0.7s var(--py-ease) 0.7s; } .py-anim .py-hero.is-ready .py-ul::after, html:not(.py-anim) .py-ul::after { transform: scaleX(1); } /* ---------- pill button (label and disc swap sides on hover) ---------- */ .py-btn { --py-btn-icon-w: 46px; --py-btn-gap: 14px; --py-btn-pad-l: 30px; --py-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; gap: var(--py-btn-gap); width: max-content; max-width: 100%; padding: 9px var(--py-btn-pad-r) 9px var(--py-btn-pad-l); border: 0; border-radius: 999px; background: var(--py-blue); color: #fff; overflow: hidden; text-decoration: none; box-shadow: 0 10px 26px rgba(47, 107, 217, 0.28); transition: box-shadow 0.25s ease, transform 0.25s ease, padding 0.5s var(--py-ease-io); } .py-btn__label { display: inline-block; flex: none; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.01em; white-space: nowrap; will-change: transform; transition: transform 0.5s var(--py-ease-io); } .py-btn__icon { display: grid; place-items: center; flex: none; width: var(--py-btn-icon-w); height: var(--py-btn-icon-w); border-radius: 50%; background: var(--py-ink); color: #fff; will-change: transform; transition: transform 0.5s var(--py-ease-io); } .py-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s var(--py-ease-io); } .py-btn:hover, .py-btn:focus-visible { padding-left: var(--py-btn-pad-r); padding-right: var(--py-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(47, 107, 217, 0.4); } .py-btn:hover .py-btn__label, .py-btn:focus-visible .py-btn__label { transform: translateX(calc(var(--py-btn-icon-w) + var(--py-btn-gap))); } .py-btn:hover .py-btn__icon, .py-btn:focus-visible .py-btn__icon { transform: translateX( calc(-1 * (var(--py-btn-label-w, 190px) + var(--py-btn-gap))) ); } .py-btn:hover .py-btn__icon svg, .py-btn:focus-visible .py-btn__icon svg { transform: translateX(3px); } .py-btn:focus-visible { outline: 3px solid var(--py-gold); outline-offset: 3px; } .py-btn--light { background: #fff; color: var(--py-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); } .py-btn--light:hover, .py-btn--light:focus-visible { color: var(--py-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26); } .py-btn--light .py-btn__icon { background: var(--py-blue); } .py-btn--gold { background: var(--py-gold); color: var(--py-ink); box-shadow: 0 12px 30px rgba(255, 212, 59, 0.28); } .py-btn--gold:hover, .py-btn--gold:focus-visible { color: var(--py-ink); box-shadow: 0 18px 40px rgba(255, 212, 59, 0.4); outline-color: #fff; } .py-btn--gold .py-btn__icon { background: var(--py-ink); } .py-btn--sm { --py-btn-icon-w: 38px; --py-btn-pad-l: 22px; --py-btn-pad-r: 7px; padding-top: 7px; padding-bottom: 7px; } .py-btn--sm .py-btn__label { font-size: 13px; } .py-btn--sm .py-btn__icon svg { width: 16px; height: 16px; } /* ---------- scroll reveal ---------- */ /* `:where()` keeps this at one-class specificity so a component's own `transition` written later in the file wins; those components list `opacity` in their transitions so the reveal still fades. */ :where(.py-anim) .py-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.6s var(--py-ease); } :where(.py-anim) .py-reveal.is-in { opacity: 1; transform: none; } /* ============================================================ HERO -- one orchestrated load sequence ============================================================ */ .py-hero { position: relative; padding: 96px 0 64px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #fff 0%, var(--py-paper) 100%); } .py-hero__dots { position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(16, 24, 40, 0.11) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 60% 40%, #000 30%, transparent 100%); } .py-hero__blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: py-drift 14s ease-in-out infinite alternate; } .py-hero__blob--blue { width: 520px; height: 520px; right: -140px; top: -80px; background: radial-gradient(circle, rgba(47, 107, 217, 0.45), transparent 70%); } .py-hero__blob--gold { width: 380px; height: 380px; right: 22%; bottom: -160px; background: radial-gradient(circle, rgba(255, 212, 59, 0.5), transparent 70%); animation-delay: -6s; animation-direction: alternate-reverse; } @keyframes py-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-40px, 30px, 0) scale(1.12); } } .py-hero__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; } .py-hero__title { font-weight: 700; font-size: clamp(38px, 4.9vw, 66px); line-height: 1.05; letter-spacing: -0.035em; } .py-hero__line { display: block; overflow: hidden; padding-bottom: 0.08em; } .py-hero__line > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--py-ease); } .py-hero__line:nth-child(2) > span { transition-delay: 0.1s; } .py-hero__text, .py-hero__actions { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.8s var(--py-ease); } .py-hero__text { max-width: 560px; margin-top: 26px; font-family: "Poppins", sans-serif; font-size: 16.5px; line-height: 1.78; transition-delay: 0.35s; } .py-hero__actions { margin-top: 34px; transition-delay: 0.5s; } .py-hero__media { --px: 0px; --py: 0px; position: relative; display: grid; place-items: center; opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity 0.9s ease 0.25s, transform 1.1s var(--py-ease) 0.25s; } .py-hero__ring { position: absolute; width: min(78%, 480px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(47, 107, 217, 0.35); background: radial-gradient(circle, rgba(47, 107, 217, 0.1), transparent 68%); animation: py-ring 40s linear infinite; } .py-hero__ring::before { content: ""; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--py-gold); box-shadow: 0 0 0 6px rgba(255, 212, 59, 0.25); translate: -50% 0; } @keyframes py-ring { to { transform: rotate(360deg); } } .py-hero__art { position: relative; width: 100%; translate: var(--px) var(--py); transition: translate 0.4s var(--py-ease); filter: drop-shadow(0 30px 40px rgba(16, 24, 40, 0.18)); animation: py-float 7s ease-in-out infinite; } @keyframes py-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* armed state: everything above lands once .is-ready is set (or JS is off) */ .py-hero.is-ready .py-hero__line > span, html:not(.py-anim) .py-hero__line > span { transform: none; } .py-hero.is-ready .py-hero__text, .py-hero.is-ready .py-hero__actions, .py-hero.is-ready .py-hero__media, html:not(.py-anim) .py-hero__text, html:not(.py-anim) .py-hero__actions, html:not(.py-anim) .py-hero__media { opacity: 1; transform: none; } /* ============================================================ TRUST STATS -- count-up on reveal ============================================================ */ .py-trust { padding: 56px 0 40px; background: var(--py-paper); border-bottom: 1px solid var(--py-line); } .py-trust__title { font-size: clamp(20px, 2vw, 24px); font-weight: 600; text-align: center; color: var(--py-body); } .py-trust__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; } .py-trust__item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; text-align: center; } .py-trust__item + .py-trust__item { border-left: 1px solid var(--py-line); } .py-trust__num { font-size: clamp(40px, 4.6vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--py-blue); font-variant-numeric: tabular-nums; } .py-trust__label { font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500; color: var(--py-body); } /* ============================================================ SERVICES -- explorer: list on the left, sticky detail on the right ============================================================ */ .py-services { padding: 100px 0 110px; background: #fff; } .py-explorer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; align-items: start; } .py-explorer__list { border-top: 1px solid var(--py-line); } .py-explorer__item { border-bottom: 1px solid var(--py-line); } .py-explorer__btn { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 14px; width: 100%; padding: 18px 6px 18px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--py-ink); } .py-explorer__btn:focus-visible { outline: 3px solid var(--py-gold); outline-offset: -3px; border-radius: 8px; } .py-explorer__idx { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--py-muted); transition: color 0.3s ease; } .py-explorer__name { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; transition: color 0.3s ease, transform 0.4s var(--py-ease); } .py-explorer__caret { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--py-line); transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--py-ease); } .py-explorer__caret::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-right: 2px solid var(--py-ink); border-bottom: 2px solid var(--py-ink); translate: -60% -50%; rotate: -45deg; transition: border-color 0.3s ease; } .py-explorer__item.is-on .py-explorer__idx { color: var(--py-blue); } .py-explorer__item.is-on .py-explorer__name { color: var(--py-blue-dk); transform: translateX(6px); } .py-explorer__item.is-on .py-explorer__caret { background: var(--py-gold); border-color: var(--py-gold); } .py-explorer__item:not(.is-on) .py-explorer__btn:hover .py-explorer__name { transform: translateX(4px); } /* inline body only shows on narrow screens (accordion) */ .py-explorer__body { display: none; } .py-explorer__panel { position: sticky; top: 110px; } .py-explorer__card { position: relative; min-height: 380px; padding: 40px 40px 44px; border-radius: 28px; background: radial-gradient(420px 260px at 100% 0%, rgba(255, 212, 59, 0.22), transparent 70%), radial-gradient(360px 300px at 0% 100%, rgba(47, 107, 217, 0.22), transparent 70%), var(--py-navy); color: #fff; overflow: hidden; isolation: isolate; } .py-explorer__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.2px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%); } .py-explorer__big { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 72px; font-weight: 600; line-height: 1; color: var(--py-gold); letter-spacing: -0.04em; } .py-explorer__heading { margin-top: 26px; font-size: clamp(24px, 2.3vw, 30px); font-weight: 700; line-height: 1.18; color: #fff; } .py-explorer__text { margin-top: 16px; font-family: "Poppins", sans-serif; font-size: 15.5px; line-height: 1.78; color: rgba(255, 255, 255, 0.74); } .py-explorer__foot { margin-top: 30px; } .py-explorer__big, .py-explorer__heading, .py-explorer__text { transition: opacity 0.18s ease, transform 0.18s ease; } .py-explorer__card.is-swapping .py-explorer__big, .py-explorer__card.is-swapping .py-explorer__heading, .py-explorer__card.is-swapping .py-explorer__text { opacity: 0; transform: translateY(8px); } /* ============================================================ DEDICATED TEAM -- navy band ============================================================ */ .py-team { position: relative; padding: 100px 0; background: var(--py-navy); color: #fff; overflow: clip; isolation: isolate; } .py-team__glow { position: absolute; z-index: -1; left: -120px; top: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 107, 217, 0.45), transparent 68%); filter: blur(40px); } .py-team__layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 64px; align-items: start; } .py-team__intro { position: sticky; top: 110px; } .py-team__cta { margin-top: 32px; } .py-team__list { display: grid; gap: 10px; } .py-team__item { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); transition: opacity 0.55s ease, transform 0.6s var(--py-ease), background 0.3s ease, border-color 0.3s ease; } .py-team__item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 212, 59, 0.45); } .py-team__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--py-blue); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } .py-team__icon img { width: 32px; height: 32px; object-fit: contain; } .py-team__name { font-size: 19px; font-weight: 600; color: #fff; } .py-team__text { margin-top: 6px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.72; color: rgba(255, 255, 255, 0.68); } /* ============================================================ CASE STUDIES -- sticky-stacked rows ============================================================ */ .py-cases { padding: 100px 0 40px; background: var(--py-paper); } /* equal rows: a shorter last card would end the sticky container early and leave the previous card peeking 18px above it */ .py-cases__stack { display: grid; grid-auto-rows: 1fr; gap: 80px; } .py-case { position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border-radius: 28px; background: #fff; border: 1px solid var(--py-line); box-shadow: 0 24px 60px rgba(16, 24, 40, 0.1); overflow: hidden; } .py-case__media { position: relative; background: var(--py-blue-lt); } .py-case__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .py-case__body { display: flex; flex-direction: column; justify-content: center; padding: 44px 48px; } .py-case__name { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.16; } .py-case__psr { display: grid; gap: 16px; margin-top: 26px; } .py-case__row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding-left: 14px; border-left: 3px solid var(--py-line); } .py-case__row dt { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; padding-top: 2px; } .py-case__row--p { border-left-color: #e0364c; } .py-case__row--p dt { color: #e0364c; } .py-case__row--s { border-left-color: var(--py-blue); } .py-case__row--s dt { color: var(--py-blue); } .py-case__row--r { border-left-color: #16a34a; } .py-case__row--r dt { color: #16a34a; } .py-case__row dd { font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.72; color: var(--py-body); } /* ============================================================ TECH STACK -- tab box ============================================================ */ .py-stack { padding: 100px 0; background: #fff; } .py-stack__box { max-width: 1000px; margin: 0 auto; border: 1px solid var(--py-line); border-radius: 24px; background: #fff; box-shadow: 0 20px 50px rgba(16, 24, 40, 0.06); overflow: hidden; } .py-stack__tabs { display: flex; gap: 4px; padding: 10px; background: var(--py-paper); border-bottom: 1px solid var(--py-line); overflow-x: auto; scrollbar-width: none; } .py-stack__tabs::-webkit-scrollbar { display: none; } .py-stack__tab { flex: 1 0 auto; padding: 12px 18px; border: 0; border-radius: 14px; background: transparent; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 600; color: var(--py-body); white-space: nowrap; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .py-stack__tab:hover { color: var(--py-ink); } .py-stack__tab[aria-selected="true"] { background: #fff; color: var(--py-blue-dk); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08); } .py-stack__tab:focus-visible { outline: 3px solid var(--py-gold); outline-offset: -3px; } .py-stack__panels { display: grid; } /* inactive panels collapse so the box hugs the visible chips */ .py-stack__panel { grid-area: 1 / 1; height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .py-stack__panel.is-on { height: auto; opacity: 1; pointer-events: auto; } .py-stack__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 32px 36px; } .py-stack__chip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; border: 1px solid var(--py-line); background: #fff; font-family: "Poppins", sans-serif; font-size: 14.5px; font-weight: 500; color: var(--py-ink); transition: transform 0.35s var(--py-ease), box-shadow 0.35s ease, border-color 0.3s ease; } .py-stack__panel.is-on .py-stack__chip { animation: py-chip-in 0.5s var(--py-ease) both; animation-delay: calc(var(--k, 0) * 40ms); } .py-stack__chip:nth-child(2) { --k: 1; } .py-stack__chip:nth-child(3) { --k: 2; } .py-stack__chip:nth-child(4) { --k: 3; } .py-stack__chip:nth-child(5) { --k: 4; } .py-stack__chip:nth-child(6) { --k: 5; } @keyframes py-chip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .py-stack__chip:hover { transform: translateY(-3px); border-color: var(--py-blue-lt); box-shadow: 0 12px 24px rgba(47, 107, 217, 0.14); } .py-stack__chip img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; } /* ============================================================ INDUSTRIES -- two counter-scrolling marquee rows ============================================================ */ .py-ind { padding: 90px 0; background: var(--py-paper); overflow: hidden; } .py-ind .py-head { margin-bottom: 40px; } .py-marquee { display: grid; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .py-marquee__track { display: flex; width: max-content; animation: py-marquee 38s linear infinite; } .py-marquee__track--rev { animation-direction: reverse; animation-duration: 44s; } .py-marquee:hover .py-marquee__track { animation-play-state: paused; } @keyframes py-marquee { to { transform: translateX(-50%); } } .py-marquee__set { display: flex; gap: 16px; padding-right: 16px; } .py-ind__card { position: relative; width: 280px; aspect-ratio: 7 / 5; border-radius: 20px; overflow: hidden; isolation: isolate; background: var(--py-navy); } .py-ind__card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--py-ease), filter 0.4s ease; } .py-ind__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 27, 46, 0) 40%, rgba(13, 27, 46, 0.85) 100%); transition: opacity 0.4s ease; } .py-ind__label { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #fff; transition: transform 0.4s var(--py-ease), color 0.3s ease; } .py-ind__label::before { content: ""; display: block; width: 26px; height: 3px; margin-bottom: 8px; border-radius: 999px; background: var(--py-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--py-ease); } .py-ind__card:hover img { transform: scale(1.07); } .py-ind__card:hover .py-ind__label { transform: translateY(-4px); color: var(--py-gold); } .py-ind__card:hover .py-ind__label::before { transform: scaleX(1); } /* ============================================================ CTA 1 -- blue band with a gold stripe ============================================================ */ .py-cta { padding: 0 0 100px; background: var(--py-paper); } .py-cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 56px 60px; border-radius: 28px; background: var(--py-grad); color: #fff; overflow: hidden; isolation: isolate; } .py-cta__stripe { position: absolute; z-index: -1; right: -60px; top: -80px; width: 260px; height: 140%; background: var(--py-gold); opacity: 0.16; transform: rotate(18deg); animation: py-stripe 6s ease-in-out infinite alternate; } @keyframes py-stripe { to { transform: rotate(18deg) translateX(-40px); } } .py-cta__title { font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.16; color: #fff; } .py-cta__text { max-width: 640px; margin-top: 14px; font-family: "Poppins", sans-serif; font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.8); } /* ============================================================ PROCESS -- vertical timeline, central rail, cards alternate sides ============================================================ */ .py-proc { padding: 100px 0; background: #fff; } .py-steps { position: relative; display: grid; gap: 40px; max-width: 1040px; margin: 0 auto; } .py-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: start; column-gap: 32px; } /* connector: node centre -> next node centre */ .py-step::before, .py-step::after { content: ""; position: absolute; top: 72px; bottom: -40px; left: 50%; width: 2px; translate: -50% 0; } .py-step::before { background: var(--py-line); } .py-step::after { background: var(--py-blue); transform: scaleY(0); transform-origin: top center; transition: transform 0.7s var(--py-ease) 0.1s; } .py-step:last-child::before, .py-step:last-child::after { display: none; } .py-step.is-lit::after { transform: scaleY(1); } .py-step__node { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: #fff; border: 2px solid var(--py-line); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .py-step__node img { width: 34px; height: 34px; object-fit: contain; transition: filter 0.4s ease; } .py-step.is-lit .py-step__node { background: var(--py-blue); border-color: var(--py-blue); box-shadow: 0 0 0 4px var(--py-blue-lt); } .py-step.is-lit .py-step__node img { filter: brightness(0) invert(1); } .py-step__card { grid-row: 1; padding: 26px 28px 28px; border-radius: 20px; border: 1px solid var(--py-line); background: #fff; opacity: 0.55; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.6s var(--py-ease), border-color 0.4s ease, box-shadow 0.4s ease; } .py-step:nth-child(odd) .py-step__card { grid-column: 1; text-align: left; } /* Mirrored card: justified body still ends flush right, so the ragged last line does not break the rail-facing edge. */ .py-step:nth-child(even) .py-step__card { grid-column: 3; } .py-step.is-lit .py-step__card { opacity: 1; transform: none; border-color: rgba(47, 107, 217, 0.3); box-shadow: 0 18px 40px rgba(16, 24, 40, 0.08); } .py-step__num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--py-muted); transition: color 0.4s ease; } .py-step.is-lit .py-step__num { color: var(--py-blue); } .py-step__name { margin-top: 8px; font-size: 20px; font-weight: 600; line-height: 1.25; } .py-step__text { margin-top: 10px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.72; } /* ============================================================ WHY US -- sticky heading + list with the 3D icons ============================================================ */ .py-why { padding: 100px 0; background: var(--py-paper); } .py-why__layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 64px; align-items: start; } .py-why__aside { position: sticky; top: 110px; } .py-why__list { display: grid; gap: 14px; } .py-why__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--py-line); transition: opacity 0.55s ease, transform 0.6s var(--py-ease), box-shadow 0.35s ease, border-color 0.3s ease; } .py-why__item:hover { border-color: rgba(47, 107, 217, 0.3); box-shadow: 0 18px 40px rgba(16, 24, 40, 0.08); } .py-why__icon { width: 64px; height: auto; transition: transform 0.45s var(--py-ease); } .py-why__item:hover .py-why__icon { transform: rotate(-6deg) scale(1.06); } .py-why__name { font-size: 19px; font-weight: 600; } .py-why__text { margin-top: 6px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.72; } /* ============================================================ FINAL CTA -- navy, conic ring ============================================================ */ .py-final { position: relative; padding: 110px 0; background: var(--py-navy); color: #fff; overflow: clip; isolation: isolate; text-align: center; } .py-final__glow { position: absolute; z-index: -1; left: 50%; top: 50%; width: 720px; height: 720px; border-radius: 50%; translate: -50% -50%; background: conic-gradient(from var(--py-spin), transparent 0 70%, rgba(255, 212, 59, 0.55) 85%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%, #000 60%, transparent 61%); mask: radial-gradient(circle, transparent 58%, #000 59%, #000 60%, transparent 61%); animation: py-spin 8s linear infinite; } @keyframes py-spin { to { --py-spin: 360deg; } } .py-final__inner { max-width: 720px; margin: 0 auto; } .py-final__title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.14; color: #fff; } .py-final__text { margin: 18px auto 32px; font-family: "Poppins", sans-serif; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, 0.72); } .py-final .py-btn { margin: 0 auto; } /* ============================================================ FAQ ============================================================ */ .py-faq { padding: 100px 0 110px; background: #fff; } .py-faq__layout { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); align-items: start; gap: 56px; } .py-faq__aside { position: sticky; top: 120px; } .py-faq__promo { margin-top: 28px; padding: 30px 28px; border-radius: 22px; background: radial-gradient(300px 160px at 100% 0%, rgba(255, 212, 59, 0.28), transparent 70%), var(--py-navy); color: #fff; } .py-faq__promo h3 { font-size: 21px; font-weight: 700; color: #fff; } .py-faq__promo p { margin: 10px 0 22px; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.66); } .py-faq__item { border-bottom: 1px solid var(--py-line); } .py-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 17.5px; font-weight: 600; color: var(--py-ink); cursor: pointer; list-style: none; transition: color 0.25s ease; } .py-faq__q::-webkit-details-marker { display: none; } .py-faq__q:hover { color: var(--py-blue-dk); } .py-faq__mark { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--py-line); border-radius: 50%; transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--py-ease); } .py-faq__mark::before, .py-faq__mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--py-ink); translate: -50% -50%; transition: opacity 0.3s ease; } .py-faq__mark::after { rotate: 90deg; } .py-faq__item[open] .py-faq__mark { border-color: var(--py-gold); background: var(--py-gold); transform: rotate(180deg); } .py-faq__item[open] .py-faq__mark::after { opacity: 0; } .py-faq__a-wrap { overflow: hidden; } .py-faq__item[open] .py-faq__a { animation: py-faq-in 0.4s var(--py-ease); } @keyframes py-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .py-faq__a { padding: 0 60px 24px 0; font-family: "Poppins", sans-serif; font-size: 15px; line-height: 1.78; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { :where(.py-anim) .py-reveal, .py-hero__line > span, .py-hero__text, .py-hero__actions, .py-hero__media { opacity: 1; transform: none; transition: none; } .py-ul::after { transform: scaleX(1); transition: none; } .py-page *, .py-page *::before, .py-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199.98px) { .py-explorer { gap: 36px; } .py-explorer__card { padding: 32px; } .py-case__body { padding: 32px; } .py-cta__inner { padding: 44px; } } @media (max-width: 991.98px) { .py-hero { padding: 72px 0 48px; } .py-hero__layout { grid-template-columns: 1fr; gap: 32px; } .py-hero__media { order: -1; max-width: 560px; margin: 0 auto; } /* explorer -> accordion */ .py-explorer { grid-template-columns: 1fr; } .py-explorer__panel { display: none; } .py-explorer__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--py-ease); } .py-explorer__body > p { overflow: hidden; font-family: "Poppins", sans-serif; font-size: 14.5px; line-height: 1.72; padding-left: 58px; padding-right: 16px; opacity: 0; transition: opacity 0.3s ease; } .py-explorer__item.is-on .py-explorer__body { grid-template-rows: 1fr; } .py-explorer__item.is-on .py-explorer__body > p { padding-bottom: 20px; opacity: 1; } .py-explorer__item.is-on .py-explorer__caret { transform: rotate(180deg); } .py-team__layout, .py-why__layout, .py-faq__layout { grid-template-columns: 1fr; gap: 40px; } .py-team__intro, .py-why__aside, .py-faq__aside { position: static; } .py-case { grid-template-columns: 1fr; top: 84px; } .py-case__media img { aspect-ratio: 1; } /* timeline -> left rail */ .py-steps { gap: 32px; } .py-step { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; } .py-step::before, .py-step::after { top: 64px; bottom: -32px; left: 32px; } .py-step__node { grid-column: 1; width: 64px; height: 64px; border-radius: 18px; } .py-step:nth-child(odd) .py-step__card, .py-step:nth-child(even) .py-step__card { grid-column: 2; text-align: left; } .py-step:nth-child(odd) .py-step__text { text-align-last: auto; } .py-cta__inner { grid-template-columns: 1fr; justify-items: start; } } @media (max-width: 767.98px) { .py-hero { padding: 56px 0 40px; } .py-hero__title { font-size: clamp(34px, 9.5vw, 46px); } .py-trust__list { grid-template-columns: 1fr; gap: 6px; } .py-trust__item + .py-trust__item { border-left: 0; border-top: 1px solid var(--py-line); } .py-services, .py-team, .py-cases, .py-stack, .py-ind, .py-proc, .py-why, .py-final, .py-faq { padding-top: 72px; padding-bottom: 72px; } .py-cta { padding-bottom: 72px; } .py-head { margin-bottom: 36px; text-align: left; } .py-explorer__btn { grid-template-columns: 34px minmax(0, 1fr) 28px; gap: 10px; } .py-explorer__name { font-size: 16.5px; } .py-explorer__body > p { padding-left: 44px; } .py-team__item { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px; } .py-team__icon { width: 48px; height: 48px; border-radius: 12px; } .py-team__icon img { width: 26px; height: 26px; } .py-case { position: relative; top: auto; margin-bottom: 0; } .py-case__body { padding: 24px 22px 28px; } .py-case__row { grid-template-columns: 1fr; gap: 4px; } .py-stack__chips { padding: 22px 18px; gap: 10px; } .py-ind__card { width: 220px; border-radius: 16px; } .py-ind__label { left: 14px; right: 14px; bottom: 12px; font-size: 16px; } .py-cta__inner { padding: 34px 26px; border-radius: 22px; } .py-step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; } .py-step::before, .py-step::after { top: 52px; left: 26px; } .py-step__node { width: 52px; height: 52px; border-radius: 14px; } .py-step__node img { width: 26px; height: 26px; } .py-step__card { padding: 18px 18px 20px; } .py-why__item { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 20px; } .py-why__icon { width: 52px; } .py-faq__q { font-size: 16px; padding: 18px 0; } .py-faq__a { padding-right: 0; } .py-btn { --py-btn-pad-l: 22px; --py-btn-icon-w: 42px; } .py-btn__label { font-size: 13px; white-space: normal; } } @media (max-width: 359.98px) { .py-hero__title { font-size: 32px; } .py-title { font-size: 27px; } .py-trust__num { font-size: 38px; } .py-explorer__btn { grid-template-columns: 28px minmax(0, 1fr) 26px; gap: 8px; } .py-explorer__body > p { padding-left: 36px; } .py-case__body { padding: 20px 16px 24px; } .py-stack__chips { padding: 18px 12px; } .py-stack__chip { font-size: 13.5px; padding: 8px 14px 8px 8px; gap: 9px; } .py-stack__chip img { width: 32px; height: 32px; } .py-cta__inner { padding: 28px 20px; } .py-team__item, .py-why__item { padding: 16px; } .py-faq__promo { padding: 24px 20px; } .py-btn { --py-btn-pad-l: 18px; --py-btn-icon-w: 38px; --py-btn-gap: 10px; } .py-btn__label { font-size: 12.5px; } .py-btn__icon svg { width: 16px; height: 16px; } }