/* ========================================================================== Dating App Development — /service/dating-app-development Page-scoped stylesheet. Every rule is namespaced under `.da-page` (or a `.da-` class) so nothing here can leak into the shared site styles. Mirrors the conventions in white-label.css. ========================================================================== */ /* Global stylesheets set `overflow-x: hidden` on , which makes it a scroll container and kills `position: sticky` inside. `clip` avoids the horizontal overflow without creating a scroll container. Same fix as white-label.css. */ body:has(.da-page) { overflow-x: clip; } .da-page { --da-red: #f4325c; --da-red-deep: #e11c48; --da-ink: #0f1626; --da-body: #5c6675; --da-muted: #8b94a3; --da-line: #ecdfe3; --da-soft: #fff5f7; --da-radius: 22px; font-family: 'Poppins', 'Gabarito', system-ui, -apple-system, sans-serif; color: var(--da-body); overflow-x: clip; } /* The margin resets below are wrapped in :where() so their specificity is 0 — an element-level reset like `.da-page p` otherwise outranks single-class rules such as `.da-hero__lead` and silently drops every margin-top. Heading colours deliberately stay at class specificity: they have to beat the site-wide element styles that would otherwise tint them. */ .da-page h1, .da-page h2, .da-page h3 { font-family: 'Poppins', 'Gabarito', system-ui, sans-serif; color: var(--da-ink); font-weight: 700; letter-spacing: -0.02em; margin: 0; } :where(.da-page) p { margin: 0; line-height: 1.65; } :where(.da-page) ul, :where(.da-page) ol { list-style: none; margin: 0; padding: 0; } /* Bootstrap's `ol, ul { padding-left: 2rem }` ties with the zero-specificity reset above and wins on order, so the indent is cleared at class specificity. */ .da-page ul, .da-page ol { padding-left: 0; } /* The section headers are

elements, which the site stylesheet gives a drop shadow to below 992px — that is meant for the site chrome, not these. */ .da-page header { box-shadow: none; } :where(.da-page) img { max-width: 100%; height: auto; display: block; } .da-accent { color: var(--da-red); } .da-section { padding: 96px 0; } /* Shared centered section header. */ .da-head { max-width: 900px; margin: 0 auto 56px; text-align: center; } .da-head h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.22; } .da-head p { margin-top: 16px; font-size: 16px; color: var(--da-body); } /* -------------------------------------------------------------- reveal --- */ /* `.da-anim` is set on before first paint so targets never flash in. */ .da-anim .da-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.68, 0.35, 1); } .da-anim .da-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .da-anim .da-reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------- buttons --- */ /* On hover the label and the arrow disc trade sides. The disc has to travel the label's width, which only JS can measure, so the blade script publishes it as --da-btn-label-w. Same mechanic as .wl-btn on the white-label page. */ .da-btn { --da-btn-disc-w: 40px; --da-btn-gap: 18px; --da-btn-pad-l: 30px; --da-btn-pad-r: 8px; position: relative; display: inline-flex; align-items: center; gap: var(--da-btn-gap); width: max-content; max-width: 100%; overflow: hidden; padding: 8px var(--da-btn-pad-r) 8px var(--da-btn-pad-l); border-radius: 999px; background: linear-gradient(100deg, var(--da-red) 0%, var(--da-red-deep) 100%); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 14px 30px -14px rgba(225, 28, 72, 0.75); transition: transform 0.25s ease, box-shadow 0.25s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .da-btn:hover, .da-btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(225, 28, 72, 0.85); } /* Only the arrow buttons swap sides; the flat CTA buttons keep their padding. */ .da-btn:has(.da-btn__disc):hover, .da-btn:has(.da-btn__disc):focus-visible { padding-left: var(--da-btn-pad-r); padding-right: var(--da-btn-pad-l); } .da-btn__label { display: inline-block; flex: none; white-space: nowrap; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .da-btn__disc { display: grid; place-items: center; flex: none; width: var(--da-btn-disc-w); height: var(--da-btn-disc-w); border-radius: 50%; background: #fff; color: var(--da-red); will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .da-btn__disc svg { width: 17px; height: 17px; } .da-btn:hover .da-btn__label, .da-btn:focus-visible .da-btn__label { transform: translateX(calc(var(--da-btn-disc-w) + var(--da-btn-gap))); } .da-btn:hover .da-btn__disc, .da-btn:focus-visible .da-btn__disc { transform: translateX(calc(-1 * (var(--da-btn-label-w, 200px) + var(--da-btn-gap)))); } @media (prefers-reduced-motion: reduce) { .da-btn, .da-btn__label, .da-btn__disc { transition: none; } .da-btn:hover .da-btn__label, .da-btn:focus-visible .da-btn__label, .da-btn:hover .da-btn__disc, .da-btn:focus-visible .da-btn__disc { transform: none; } .da-btn:has(.da-btn__disc):hover, .da-btn:has(.da-btn__disc):focus-visible { padding-left: var(--da-btn-pad-l); padding-right: var(--da-btn-pad-r); } } /* Solid-white pill used on the dark band. */ .da-btn--light { background: #fff; color: var(--da-ink); padding: 18px 42px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6); } .da-btn--light:hover, .da-btn--light:focus-visible { color: var(--da-ink); } /* Pill with no disc — CTA panel. */ .da-btn--flat { padding: 18px 42px; } /* White pill on the pink FAQ aside — smaller disc, so its own swap distances. */ .da-btn--white { --da-btn-disc-w: 36px; --da-btn-pad-l: 24px; --da-btn-pad-r: 6px; background: #fff; color: var(--da-ink); padding: 6px var(--da-btn-pad-r) 6px var(--da-btn-pad-l); text-transform: none; letter-spacing: 0; font-size: 15px; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.45); } .da-btn--white:hover, .da-btn--white:focus-visible { color: var(--da-ink); } .da-btn--white .da-btn__disc { background: var(--da-ink); color: #fff; } /* =============================================================== HERO ==== */ /* The supplied artwork already carries the rose lobe and the amber dot, so the gradient below it is only a fallback for the moment before the image lands. */ .da-hero { position: relative; padding: 70px 0 110px; background: linear-gradient(160deg, #ffe6ea 0%, #ffeef0 45%, #fff4ef 100%); background-image: url('../images/dating/hero-bg.png'); background-position: center top; background-repeat: no-repeat; background-size: cover; overflow: clip; } .da-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 40px; align-items: center; } .da-hero__title { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.1; } .da-hero__hash { color: var(--da-ink); } .da-hero__title em { display: block; font-style: italic; font-weight: 600; } .da-hero__lead { margin-top: 22px; max-width: 720px; font-size: 15.5px; color: #4d5765; } .da-hero__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 34px; margin: 42px 0 0; padding-left: 0; max-width: 760px; } .da-hero__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--da-ink); } .da-hero__ico { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: #ffd9e0; color: var(--da-red); } .da-hero__ico img { width: 20px; height: 20px; object-fit: contain; } .da-hero .da-btn { margin-top: 42px; } .da-hero__art { position: relative; justify-self: end; max-width: 480px; } .da-hero__art img { width: 100%; filter: drop-shadow(0 40px 60px rgba(180, 60, 90, 0.25)); } /* ============================================================== STATS ==== */ .da-stats { padding: 70px 0 40px; background: #fff; } .da-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #f0f0f2; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -40px rgba(15, 22, 38, 0.35); overflow: hidden; } /* Thin red bar under the whole strip, like the design. */ .da-stats__grid::after { content: ''; grid-column: 1 / -1; height: 3px; background: linear-gradient(90deg, rgba(244, 50, 92, 0) 0%, var(--da-red) 50%, rgba(244, 50, 92, 0) 100%); } .da-stat { padding: 44px 24px 40px; text-align: center; border-right: 1px solid #f0f0f2; } .da-stat:last-of-type { border-right: 0; } .da-stat__ico { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 50%; background: linear-gradient(140deg, var(--da-red) 0%, var(--da-red-deep) 100%); color: #fff; } .da-stat__ico svg { width: 24px; height: 24px; } .da-stat__num { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: #16324f; letter-spacing: -0.02em; } .da-stat__label { display: block; margin-top: 8px; font-size: 15px; color: #6b7a8d; } /* ============================================================= AWARDS ==== */ .da-awards { padding: 74px 0 90px; background: linear-gradient(180deg, #fff 0%, #fff5f4 40%, #fff8f6 100%); overflow: clip; } .da-awards h2 { max-width: 900px; margin: 0 auto 48px; text-align: center; font-size: clamp(26px, 3vw, 38px); line-height: 1.3; } .da-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); } .da-marquee__track { display: flex; gap: 22px; width: max-content; animation: da-scroll 46s linear infinite; } .da-marquee:hover .da-marquee__track { animation-play-state: paused; } @keyframes da-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .da-marquee__track { animation: none; } } .da-award { flex: 0 0 auto; width: 172px; margin: 0; padding: 20px 18px 18px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 18px 34px -28px rgba(15, 22, 38, 0.55); } .da-award img { height: 116px; width: auto; margin: 0 auto 14px; object-fit: contain; } .da-award figcaption { font-size: 13.5px; font-weight: 600; color: var(--da-ink); line-height: 1.35; } .da-award__meta { display: block; margin-top: 6px; font-size: 11.5px; color: var(--da-muted); } .da-award__rule { display: block; width: 34px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: #2b3a4d; } .da-award__rule--blue { background: #2f8bd6; } /* =========================================================== SERVICES ==== */ .da-services { background: #fff; } .da-services__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: start; } .da-services__copy h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; } .da-services__copy > p { margin-top: 22px; font-size: 15.5px; } .da-services__media { margin-top: 40px; border-radius: var(--da-radius); overflow: hidden; background: linear-gradient(140deg, #ffb3b8, #ff97a5); } .da-services__media img { width: 100%; aspect-ratio: 100 / 60; object-fit: cover; } .da-services__list { display: grid; gap: 14px; position: sticky; top: 100px; align-self: start; } @media (max-width: 991px) { .da-services__list { position: static; } } .da-service { padding: 16px 24px; border-radius: 16px; background: #fff7f8; border: 1px solid transparent; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .da-service:hover { transform: translateX(4px); } /* The first card is expanded in the design: outlined, with the body copy shown. */ .da-service.is-open { background: #fff7f8; border-color: #ffd3dc; } .da-service h3 { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 600; line-height: 1.4; margin: 0; cursor: pointer; transition: margin-bottom 0.3s ease; } /* The open card's breathing room lives on the heading, not inside the collapsing row — padding on the row's item survives the 0fr track. */ .da-service.is-open h3 { margin-bottom: 10px; } .da-service__dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: var(--da-red); } /* Collapsed body: 0fr -> 1fr animates to the content's own height without JS measuring it. The child needs overflow:hidden for the row to clip. */ .da-service__body { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows 0.3s ease, opacity 0.25s ease; } .da-service.is-open .da-service__body { grid-template-rows: 1fr; opacity: 1; } .da-service__body p { overflow: hidden; margin: 0; padding-left: 18px; font-size: 14px; color: var(--da-muted); } /* ============================================================ COMPETE ==== */ /* The artwork carries its own glow and heart motifs; the radial gradient below it is the fallback for the moment before the image lands. */ .da-compete { position: relative; padding: 96px 0 100px; background: radial-gradient(120% 130% at 50% 0%, #7c0b17 0%, #3c040c 55%, #1a0206 100%); background-image: url('../images/dating/cta1-bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #3c040c; text-align: center; overflow: clip; } .da-compete h2 { max-width: 900px; margin: 0 auto; color: #fff; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.24; } .da-compete p { max-width: 1000px; margin: 26px auto 0; color: rgba(255, 255, 255, 0.82); font-size: 15.5px; } .da-compete .da-btn { margin-top: 42px; } /* ============================================================= MODELS ==== */ .da-models { position: relative; background: linear-gradient(180deg, #fff 0%, #fffafb 55%, #fff5f7 100%); color: var(--da-body); /* No overflow clipping here: a non-visible overflow ancestor becomes the scrollport for the sticky artwork/copy columns and silently breaks them. */ } .da-models::before { content: ''; position: absolute; inset: 0; background: radial-gradient(38% 46% at 8% 14%, rgba(244, 50, 92, 0.07), transparent 72%), radial-gradient(34% 44% at 92% 82%, rgba(140, 90, 240, 0.06), transparent 72%); pointer-events: none; } .da-models > .container { position: relative; } .da-models__head { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin-bottom: 64px; } .da-page .da-models__head h2 { color: var(--da-ink); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.18; } .da-models__cta, .da-models__more { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 15px 26px; border: 1px solid rgba(15, 22, 38, 0.16); border-radius: 999px; color: var(--da-ink); font-size: 14.5px; font-weight: 600; text-decoration: none; background: #fff; transition: background .28s ease, border-color .28s ease, color .28s ease; } .da-models__cta svg, .da-models__more svg { width: 10px; height: 11px; transition: transform .28s ease; } .da-models__cta:hover, .da-models__more:hover, .da-models__cta:focus-visible, .da-models__more:focus-visible { color: #fff; background: var(--da-red); border-color: var(--da-red); } .da-models__cta:hover svg, .da-models__more:hover svg { transform: translate(3px, -3px); } /* --- three-column body: artwork | name list | detail ---------------------- */ .da-models__body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; justify-items: center; } /* Only the middle name list scrolls — the artwork and the copy stay pinned, centred on the focus line the scroll handler uses to pick the active model. */ .da-models__art, .da-models__detail { position: sticky; top: 26vh; } .da-models__art { position: sticky; display: grid; width: 100%; max-width: 380px; aspect-ratio: 9 / 8; border-radius: 20px; overflow: hidden; background: rgba(15, 22, 38, 0.04); box-shadow: 0 26px 50px -34px rgba(15, 22, 38, 0.5); } .da-models__img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .6s ease; } .da-models__img.is-active { opacity: 1; transform: none; } .da-models__list { display: grid; gap: 0; width: 100%; padding: 4px 0; } .da-models__name { display: block; width: 100%; padding: 24px 0; border: 0; background: none; text-align: center; font-family: inherit; font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.34; color: rgba(15, 22, 38, 0.24); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: color .35s ease, transform .35s ease, text-decoration-color .35s ease; } .da-models__name:hover { color: rgba(15, 22, 38, 0.55); } /* The names are centre-aligned, so the active state scales instead of nudging sideways — a translate would read as the whole list drifting off centre. */ .da-models__name.is-active { color: var(--da-ink); font-weight: 600; transform: scale(1.04); text-decoration-color: var(--da-red); } .da-models__detail { display: grid; width: 100%; min-height: 260px; } .da-models__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease, visibility .4s; } .da-models__panel.is-active { opacity: 1; visibility: visible; transform: none; } .da-page .da-models__panel h3 { margin-bottom: 14px; color: var(--da-ink); font-size: 20px; font-weight: 600; } .da-models__points { display: grid; gap: 12px; text-align: left; } .da-models__points li { position: relative; padding-left: 24px; color: var(--da-body); font-size: 15.5px; line-height: 1.5; } .da-models__points li::before { content: ''; position: absolute; top: 9px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--da-red); } .da-models__more { margin-top: 30px; } /* =========================================================== FEATURES ==== */ .da-features { padding: 90px 0 100px; background: linear-gradient(180deg, #fff6f7 0%, #ffeef1 55%, #fff 100%); overflow: clip; } .da-features__head { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: center; margin-bottom: 56px; } .da-features__head h2 { margin-top: 18px; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.18; } .da-features__head > div:first-child { text-align: center; } .da-features__head p { margin: 16px auto 0; max-width: 520px; font-size: 15.5px; } .da-eyebrow { display: inline-block; padding: 8px 20px; border-radius: 999px; background: #ffe1e7; color: var(--da-red); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .da-features__portrait img { width: 100%; border-radius: 50%; border: 6px solid #fff; aspect-ratio: 1; object-fit: cover; box-shadow: 0 26px 50px -30px rgba(180, 60, 90, 0.55); } .da-features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .da-feature { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; padding: 26px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 22px 44px -36px rgba(15, 22, 38, 0.6); transition: transform 0.25s ease, box-shadow 0.25s ease; } .da-feature:hover { transform: translateY(-4px); box-shadow: 0 28px 52px -32px rgba(244, 50, 92, 0.5); } .da-feature__ico { width: 92px; height: 92px; border-radius: 16px; background: #ffe4ea; object-fit: contain; padding: 10px; } .da-feature__num { display: block; font-size: 14px; font-weight: 700; color: var(--da-red); } .da-feature h3 { margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.3; } .da-feature p { margin-top: 10px; font-size: 13.5px; color: var(--da-muted); } .da-feature__rule { display: block; width: 26px; height: 2px; margin-top: 16px; border-radius: 2px; background: var(--da-red); } /* ============================================================= PANELS ==== */ .da-panels { padding-top: 20px; background: #fff; } .da-panels__card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 60px 56px; border-radius: 34px; background: linear-gradient(140deg, #f7f8fa 0%, #f4f5f8 100%); } .da-panel { padding: 0 46px; } .da-panel:first-child { border-right: 1px solid #e3e6ec; } .da-panel h2 { font-size: clamp(24px, 2.8vw, 36px); } .da-panel__sub { margin-top: 10px; font-size: 14px; color: var(--da-red); } .da-panel ul { display: grid; gap: 22px; margin-top: 40px; } .da-panel li { display: flex; align-items: center; gap: 18px; font-size: 18px; color: #2b3444; } .da-panel__mark { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #16a34a; color: #fff; } .da-panel__mark svg { width: 18px; height: 18px; } /* ========================================================== COMMUNITY ==== */ .da-community { padding: 96px 0 100px; background: linear-gradient(180deg, #fff 0%, #ffeff2 25%, #ffeaee 100%); overflow: clip; } .da-community__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 48px; align-items: center; } .da-community__copy { position: relative; padding-right: 40px; border-right: 1px solid #f0d6dc; } .da-community__copy h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18; color: #16233a; } .da-community__copy p { margin-top: 22px; max-width: 380px; font-size: 16px; } .da-community__doodle { display: block; margin-top: 34px; max-width: 260px; opacity: 0.85; } .da-community__doodle svg { width: 100%; height: auto; } /* Horizontal rail — the design cuts the last card off at the viewport edge. */ /* Swiper drives the track. `overflow: hidden` is what hides the off-screen slides, so the padding has to clear the cards' shadow or it gets sliced off. */ .da-community__rail { position: relative; overflow: hidden; padding: 10px 0 30px; } /* Fixed card width, `slidesPerView: 'auto'` on the JS side — the cards keep their own size instead of being stretched to fit a per-view count. */ .da-community__rail .swiper-slide { width: 300px; height: auto; } .da-community__card { position: relative; margin: 0; padding-bottom: 26px; border-radius: 18px; background: #fff; text-align: center; scroll-snap-align: start; overflow: hidden; box-shadow: 0 24px 46px -36px rgba(15, 22, 38, 0.5); } .da-community__pic { position: relative; display: block; } .da-community__card img { width: 100%; aspect-ratio: 68 / 98; object-fit: cover; } .da-community__card figcaption { margin-top: 18px; font-size: 18px; font-weight: 700; color: var(--da-ink); } .da-community__rule { display: block; width: 74px; height: 3px; margin: 12px auto 0; border-radius: 3px; background: var(--da-red); } /* =============================================================== TECH ==== */ .da-tech { background: #fff; } /* Swiper drives the track; the padding leaves room for the cards' hover lift and shadow instead of clipping it. */ .da-tech__slider { position: relative; overflow: hidden; padding: 14px 0 44px; } .da-tech__slider .swiper-wrapper { align-items: stretch; } /* Fixed card width, `slidesPerView: 'auto'` on the JS side — the cards keep their own size. height:auto lets the flex stretch equalise them; without it Swiper pins every slide to the tallest card's computed height. */ .da-tech__slider .swiper-slide { width: 282px; height: auto; } .da-tech__card { padding: 36px 28px 34px; border: 1px solid #eceef2; border-radius: 20px; background: #fff; text-align: center; /* Scale and hover lift share one transform, so the two variables below let the active slide and the hover state combine instead of overwriting each other. */ --da-tech-scale: 0.9; --da-tech-lift: 0px; transform: scale(var(--da-tech-scale)) translateY(var(--da-tech-lift)); opacity: 0.62; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease; } /* The centred slide comes forward; its neighbours sit back. It also carries the hover treatment permanently — same pink edge, deeper shadow for the scale. */ .da-tech__slider .swiper-slide-active.da-tech__card { --da-tech-scale: 1; opacity: 1; border-color: #ffd3dc; box-shadow: 0 34px 60px -30px rgba(244, 50, 92, 0.55); } .da-tech__card:hover { --da-tech-lift: -4px; border-color: #ffd3dc; box-shadow: 0 26px 46px -34px rgba(244, 50, 92, 0.6); } .da-tech__card img { width: 88px; height: 88px; margin: 0 auto 22px; object-fit: cover; } .da-tech__card h3 { font-size: 19px; font-weight: 600; } .da-tech__card p { margin-top: 12px; font-size: 13.5px; color: var(--da-muted); } /* ================================================================ WHY ==== */ /* Card grid mirroring the white-label benefits section: thumbnail on the left, copy on the right, two cards a row. */ .da-why { padding: 96px 0; background: #fff; } .da-why .da-head { margin-bottom: 40px; } .da-why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .da-why__card { display: grid; grid-template-columns: 214px minmax(0, 1fr); align-items: center; gap: 24px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid #f0eaec; box-shadow: 0 12px 30px rgba(20, 20, 43, 0.05); transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease; } .da-why__card:hover { transform: translateY(-5px); border-color: #ffd3dc; box-shadow: 0 26px 52px -20px rgba(244, 50, 92, 0.22); } .da-why__media { position: relative; border-radius: 14px; overflow: hidden; } .da-why__media img { width: 100%; aspect-ratio: 112 / 78; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.35s ease; } .da-why__card:hover .da-why__media img { transform: scale(1.06); filter: saturate(1.06); } /* Index chip in the thumbnail's lower-left corner. */ .da-why__no { position: absolute; left: 10px; bottom: 10px; min-width: 38px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); font-style: italic; font-size: 14px; font-weight: 700; text-align: center; color: var(--da-red); box-shadow: 0 6px 16px rgba(20, 20, 43, 0.18); transition: background 0.32s ease, color 0.32s ease; } .da-why__card:hover .da-why__no { background: var(--da-red); color: #fff; } .da-why__body { position: relative; padding: 4px 8px 4px 18px; } /* Accent rule that wipes down the copy on hover. */ .da-why__body::before { content: ""; position: absolute; left: 0; top: 4px; width: 3px; height: 0; border-radius: 3px; background: linear-gradient(180deg, var(--da-red), rgba(244, 50, 92, 0.08)); transition: height 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); } .da-why__card:hover .da-why__body::before { height: calc(100% - 8px); } .da-why__card h3 { font-size: 21px; line-height: 1.26; } .da-why__card p { margin-top: 11px; font-size: 15.5px; color: var(--da-body); } /* ============================================================ PROCESS ==== */ .da-process { background: #fff; } .da-process__list { position: relative; max-width: 1120px; margin: 0 auto; padding: 20px 0; } /* Vertical spine the step nodes sit on: a grey track (::before) with a coloured progress fill (::after) that only reaches as far as the reader has scrolled. The offsets are measured from the first and last node so the rail starts and stops exactly on them; the fallbacks only apply before the script runs. `z-index` keeps both layers above the active step's card. */ .da-process__list::before, .da-process__list::after { content: ''; position: absolute; top: var(--da-rail-top, 40px); left: 50%; z-index: 1; width: 2px; margin-left: -1px; } .da-process__list::before { bottom: var(--da-rail-bottom, 40px); background: #e7eaf1; } /* `background-size` is pinned to the full rail length so each colour stays put as the fill grows, instead of the whole gradient squeezing into the filled part. */ .da-process__list::after { height: var(--da-rail-progress, 0px); background-image: linear-gradient(180deg, #f4325c, #a468f5, #4aa3f5, #57c27b, #f6b93b, #ff7aa8); background-repeat: no-repeat; background-size: 2px var(--da-rail-length, 100%); transition: height .45s ease; } .da-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 26px 30px; border-radius: 24px; transition: background .45s ease; } .da-step + .da-step { margin-top: 18px; } /* The step under the scroll focus line gets the tinted card treatment. */ .da-step.is-active { background: #fff5f7; } /* The artwork + number pair sits centred in its half of the row; the copy stays out on the row's edge, held clear of the spine by its inner padding. */ .da-step__aside { display: flex; align-items: center; justify-content: center; gap: 26px; } .da-step__copy { max-width: 330px; margin: 0 auto; } .da-step__aside img { order: -1; width: 108px; height: 108px; border-radius: 22px; object-fit: contain; padding: 12px; background: #fdf1f4; } .da-step__num { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--da-ink); font-size: 18px; font-weight: 600; box-shadow: 0 12px 26px -18px rgba(15, 22, 38, 0.7); } .da-step__copy h3 { font-size: 24px; font-weight: 600; } .da-step__copy p { margin-top: 12px; font-size: 15.5px; color: #3e4756; } /* The dot welded onto the spine. The fill is always present but collapsed, so the active state can grow it instead of popping a new pseudo-element into place. */ .da-step__node { position: absolute; z-index: 2; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid currentColor; background: #fff; color: var(--da-red); transition: border-color .45s ease, box-shadow .45s ease; } /* Steps still ahead of the reader keep a hollow, greyed-out dot. */ .da-step:not(.is-done) .da-step__node { border-color: #dfe3ec; } .da-step__node::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: currentColor; transform: scale(0); opacity: 0; transition: transform .45s cubic-bezier(0.22, 0.68, 0.35, 1), opacity .45s ease; } .da-step.is-active .da-step__node { box-shadow: 0 0 0 6px #ffe1e7; } .da-step.is-done .da-step__node::after { transform: none; opacity: 1; } .da-step--violet { color: #a468f5; } .da-step--blue { color: #4aa3f5; } .da-step--green { color: #57c27b; } .da-step--amber { color: #f6b93b; } .da-step--rose { color: #ff7aa8; } .da-step--violet .da-step__aside img { background: #f3ecff; } .da-step--blue .da-step__aside img { background: #e9f2ff; } .da-step--green .da-step__aside img { background: #e8f8ee; } .da-step--amber .da-step__aside img { background: #fff5e3; } .da-step--rose .da-step__aside img { background: #ffeef3; } /* Odd steps: copy on the left (right-aligned), art on the right. */ .da-step--left .da-step__copy { order: -1; text-align: right; } .da-step--left .da-step__aside img { order: 1; } /* ================================================================ CTA ==== */ .da-cta { padding: 80px 0 96px; background: #fff; } .da-cta__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 40px; align-items: center; padding: 70px 64px; border-radius: 30px; background: #fdeade; overflow: hidden; } /* Loose ink loops in the two corners, drawn with borders instead of art. */ .da-cta__panel::before, .da-cta__panel::after { content: ''; position: absolute; width: 240px; height: 240px; border: 1.5px solid rgba(20, 20, 20, 0.35); border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; pointer-events: none; } .da-cta__panel::before { left: -110px; bottom: -90px; transform: rotate(18deg); } .da-cta__panel::after { right: -120px; top: -110px; transform: rotate(-24deg); } .da-cta__copy { position: relative; z-index: 1; } .da-cta__copy h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.2; } .da-cta__copy > p { margin-top: 20px; max-width: 640px; font-size: 15.5px; color: #4d5765; } .da-cta__pills { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; max-width: 680px; } .da-cta__pill { padding: 14px 26px; border-radius: 12px; background: #fff; font-size: 14.5px; font-weight: 600; } .da-cta__pill--rose { color: var(--da-red); } .da-cta__pill--amber { color: #e0821c; } .da-cta__pill--sky { color: #2f8bd6; } .da-cta__pill--indigo { color: #5b6ee0; } .da-cta .da-btn { margin-top: 34px; } /* The artwork is 4:5, so its width drives the panel's height — kept close to the copy column's so the phone doesn't stretch the whole band. */ .da-cta__art { position: relative; z-index: 1; justify-self: end; max-width: 320px; } .da-cta__art img { width: 100%; filter: drop-shadow(0 36px 54px rgba(120, 60, 40, 0.28)); } /* ================================================================ FAQ ==== */ .da-faq { padding: 80px 0 110px; background: linear-gradient(160deg, #fbfcff 0%, #f4f5fb 60%, #f7f7fc 100%); } .da-faq__grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 60px; align-items: start; } /* Headline + CTA card ride along while the (much taller) question list scrolls. */ .da-faq__intro { position: sticky; top: 100px; } .da-faq h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.1; } .da-faq__aside { margin-top: 90px; padding: 34px 36px 36px; border-radius: 18px; background: linear-gradient(135deg, #f4325c 0%, #e11c48 100%); color: #fff; max-width: 540px; } .da-faq__aside h3 { color: #fff; font-size: 21px; font-weight: 600; } .da-faq__aside p { margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, 0.86); } .da-faq__aside .da-btn { margin-top: 26px; } .da-faq__list { display: grid; gap: 18px; } .da-faq__item { border-radius: 14px; background: #fff; box-shadow: 0 18px 36px -32px rgba(15, 22, 38, 0.55); } .da-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 28px; font-size: 17px; font-weight: 500; color: var(--da-ink); cursor: pointer; list-style: none; } .da-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .da-faq__mark { position: relative; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; } .da-faq__mark::before, .da-faq__mark::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: var(--da-ink); transition: transform 0.25s ease, opacity 0.25s ease; } .da-faq__mark::after { transform: rotate(90deg); } .da-faq__item[open] .da-faq__mark::after { transform: rotate(0); opacity: 0; } /* The JS drives `height` between 0 and the measured height; without this transition it snaps, and `transitionend` never fires to clean up after it. */ .da-faq__a-wrap { overflow: hidden; transition: height 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.26s ease; } @media (prefers-reduced-motion: reduce) { .da-faq__a-wrap { transition: none; } } .da-faq__a { padding: 0 28px 26px; font-size: 14.5px; color: var(--da-muted); } /* ========================================================= RESPONSIVE ==== */ @media (max-width: 1199px) { .da-models__body { gap: 32px; } .da-hero__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } .da-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .da-panels__card { padding: 48px 32px; } .da-panel { padding: 0 26px; } } @media (max-width: 991px) { /* Stack the three model columns; sticky positioning is dropped so the artwork and copy sit directly with the name list instead of overlapping. */ .da-models__head { display: block; } .da-models__cta { margin-top: 26px; } .da-models__body { grid-template-columns: minmax(0, 1fr); gap: 34px; } .da-models__art, .da-models__detail { position: static; } /* A definite height, not `aspect-ratio`: a percentage height cannot resolve against an aspect-ratio-sized box, so the image fell back to its intrinsic height and overflowed the box (and `stretch` does not apply to replaced elements, so auto height does not fix it either). */ .da-models__art { max-width: 420px; aspect-ratio: auto; height: 260px; } /* The box is a different ratio from the artwork, so `cover` crops the model shots — fit them whole and let the tinted box show through instead. */ .da-models__img { height: 100%; object-fit: contain; } .da-models__detail { min-height: 220px; } /* Stacked, 12 names down the page is a wall of text — run them across in a swipeable strip instead. The scroll-sync handler stands down at this width. */ .da-models__list { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .da-models__list::-webkit-scrollbar { display: none; } .da-models__list li { flex: 0 0 auto; scroll-snap-align: center; } .da-models__name { width: auto; padding: 12px 14px; font-size: 17px; white-space: nowrap; } .da-models__name.is-active { transform: none; } .da-section, .da-hero, .da-features, .da-community, .da-why, .da-compete { padding-top: 64px; padding-bottom: 68px; } .da-hero__inner, .da-services__grid, .da-community__grid, .da-faq__grid, .da-cta__panel { grid-template-columns: minmax(0, 1fr); } /* Phone first, CTA under it. The button sits inside the copy block, so the copy is dissolved with `display: contents` — its children become grid items and `order` can then move the button past the artwork. The grid gap goes with it, since the promoted children carry their own margins. */ .da-hero__inner, .da-cta__panel { gap: 0; } .da-hero__copy, .da-cta__copy { display: contents; } /* The panel's ink-loop pseudo-elements are positioned, so the promoted copy needs the stacking context the wrapper used to provide. */ .da-cta__copy > * { position: relative; z-index: 1; } .da-hero .da-btn, .da-cta .da-btn { order: 1; margin-top: 30px; } .da-hero__art { justify-self: center; max-width: 380px; margin-top: 34px; } .da-cta__art { justify-self: center; max-width: 300px; margin-top: 28px; } .da-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .da-stat:nth-child(2n) { border-right: 0; } .da-stat:nth-child(-n + 2) { border-bottom: 1px solid #f0f0f2; } /* Two horizontal cards a row get cramped below the design width. */ .da-why__grid { grid-template-columns: minmax(0, 1fr); } .da-panels__card { grid-template-columns: minmax(0, 1fr); gap: 44px; } .da-panel { padding: 0; } .da-panel:first-child { border-right: 0; border-bottom: 1px solid #e3e6ec; padding-bottom: 40px; } .da-community__copy { padding-right: 0; border-right: 0; } .da-features__head { grid-template-columns: minmax(0, 1fr); } .da-features__portrait { max-width: 220px; margin: 0 auto; } .da-faq__aside { margin-top: 32px; } .da-faq__intro { position: static; } .da-cta__panel { padding: 48px 32px; } /* Timeline collapses to a single left-hand spine — the fill (::after) has to move with the track (::before) or it paints down the middle of the page. */ .da-process__list::before, .da-process__list::after { left: 26px; } .da-step, .da-step--left { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-left: 62px; } .da-step__node { left: 26px; } .da-step__aside, .da-step--left .da-step__aside { justify-content: flex-start; } .da-step--left .da-step__copy, .da-step__copy { order: 0; text-align: left; max-width: none; margin: 0; } .da-step--left .da-step__aside img, .da-step__aside img { order: -1; } } @media (max-width: 767px) { .da-features__grid { grid-template-columns: minmax(0, 1fr); } .da-hero__points { grid-template-columns: minmax(0, 1fr); } .da-hero__title { font-size: 34px; } .da-faq__q { padding: 20px; font-size: 15.5px; } .da-faq__a { padding: 0 20px 22px; } } @media (max-width: 575px) { .da-models__name { font-size: 19px; } .da-models__cta, .da-models__more { justify-content: center; width: 100%; } .da-stats__grid { grid-template-columns: minmax(0, 1fr); } .da-stat { border-right: 0; border-bottom: 1px solid #f0f0f2; } .da-stat:last-of-type { border-bottom: 0; } /* Full-width pills so long labels can wrap instead of overflowing. The label/disc swap needs room the phone width does not have — the disc ends up outside the pill and clipped — so it is switched off here. */ .da-btn { --da-btn-disc-w: 34px; width: 100%; justify-content: center; gap: 12px; padding: 12px 18px; font-size: 12px; letter-spacing: 0.02em; text-align: center; } /* `flex: none` on the base rule keeps the label at its full one-line width and pushes the disc past the pill's edge — let it shrink and wrap instead. */ .da-btn__label { flex: 0 1 auto; white-space: normal; } .da-btn:hover .da-btn__label, .da-btn:focus-visible .da-btn__label, .da-btn:hover .da-btn__disc, .da-btn:focus-visible .da-btn__disc { transform: none; } .da-btn:has(.da-btn__disc):hover, .da-btn:has(.da-btn__disc):focus-visible { padding-left: 18px; padding-right: 18px; } .da-btn--light, .da-btn--flat { justify-content: center; padding: 16px 24px; text-align: center; } .da-step, .da-step--left { padding: 22px 18px 22px 56px; } /* On phones the 214px thumbnail column starves the copy — stack it. */ .da-why__card { grid-template-columns: minmax(0, 1fr); gap: 15px; } .da-why__body { padding: 0 6px 8px 16px; } .da-community__rail .swiper-slide { width: 240px; } .da-tech__slider .swiper-slide { width: 250px; } .da-cta__panel, .da-panels__card { padding: 36px 20px; border-radius: 22px; } }