/* ============================================================ Taxi App Development (/service/taxi-app-development) Light body, taxi yellow CTAs on an orange text accent. BEM-ish `tx-` prefix; scroll-reveal via `.tx-anim` on . Composed from the sections the design reuses: food-delivery (hero, about, panels, sticky solutions, models, cost, FAQ), dating (stats, community rail), casino (service grid), white-label (process), ai-clone (feature rail, delivered showcase). ============================================================ */ /* The global stylesheets set `overflow-x: hidden` on , which makes it a scroll container and silently disables `position: sticky` inside it. `clip` prevents the same horizontal overflow without creating a scroll container. Scoped with :has() so only this page is affected. */ body:has(.tx-page) { overflow-x: clip; } .tx-page { /* One accent: taxi yellow. `--tx-orange` keeps its name only because the food-delivery base this sheet was built from uses it everywhere; every value below is yellow. `--tx-navy` is the stat/figure colour the design uses instead of black. */ --tx-orange: #fcc116; --tx-orange-lt: #ffd45a; --tx-orange-dk: #e0a800; --tx-yellow: #fcc116; --tx-yellow-dk: #e8ae06; --tx-navy: #183b56; --tx-blue: #1a5cf5; --tx-ink: #101010; --tx-body: #6e716f; --tx-muted: #8a8a8a; --tx-line: #ececec; --tx-cream: #fffcf1; --tx-dark: #14141b; position: relative; background: #fff; color: var(--tx-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .tx-page .container { max-width: 1240px; } /* `:where()` keeps these resets at zero added specificity, so the component rules further down can set their own margin/padding without needing to out-specify the reset. */ .tx-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--tx-ink); } .tx-page :where(p) { margin: 0; color: var(--tx-body); } .tx-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .tx-accent { color: var(--tx-orange); } .tx-blue { color: var(--tx-blue); } /* ---------- shared section furniture ---------- */ .tx-head { max-width: 900px; margin: 0 auto 54px; text-align: center; } .tx-head--left { margin-left: 0; text-align: left; } .tx-eyebrow { display: block; margin-bottom: 14px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tx-orange); } .tx-title { font-weight: 700; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.18; } .tx-lead { margin-top: 18px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 26px; color: var(--tx-body); } /* ---------- justified body copy ---------- */ /* Body paragraphs only. Headings, `.tx-lead` and the centred hero/band/CTA blurbs stay ragged-right — justifying a centred or short intro line just stretches it. `hyphens` is on because these measures are narrow (some cards are ~260px) and unhyphenated justification opens rivers of white space. */ .tx-innovation__copy p, .tx-invest__text, .tx-why__text, .tx-build__text, .tx-faq__a, .tx-faq__promo p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; /* Only break words of 8+ characters, 4 before the hyphen and 3 after — without this the browser hyphenates "pan-els" and "up-dates" and the copy turns into a ladder. */ -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 3; hyphenate-limit-chars: 8 4 3; } /* ---------- pill button ---------- */ /* Label sits left of a dark arrow disc; on hover the two trade sides. The pill keeps its width throughout: the left and right padding swap, so only the label and the disc travel. The blade script publishes the measured label width as `--tx-btn-label-w`, which is how far the disc has to move. */ .tx-btn { --tx-btn-icon-w: 46px; --tx-btn-gap: 14px; --tx-btn-pad-l: 34px; --tx-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--tx-btn-gap); width: max-content; padding: 9px var(--tx-btn-pad-r) 9px var(--tx-btn-pad-l); border: 0; border-radius: 999px; background: var(--tx-yellow); color: var(--tx-ink); overflow: hidden; text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .tx-btn:hover, .tx-btn:focus-visible { padding-left: var(--tx-btn-pad-r); padding-right: var(--tx-btn-pad-l); color: var(--tx-ink); background: var(--tx-yellow-dk); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 194, 32, 0.42); } .tx-btn__label { display: inline-block; flex: none; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .tx-btn__icon { display: grid; place-items: center; flex: none; width: var(--tx-btn-icon-w); height: var(--tx-btn-icon-w); border-radius: 50%; background: #101010; color: #fff; will-change: transform; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } /* The glyph is drawn pointing up-right, which is how the design shows it at rest; the 45deg turn on hover lands it pointing straight right. Rotating the rather than the disc keeps it independent of the disc's own travel. */ .tx-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .tx-btn:hover .tx-btn__icon svg, .tx-btn:focus-visible .tx-btn__icon svg { transform: rotate(45deg); } .tx-btn:hover .tx-btn__label, .tx-btn:focus-visible .tx-btn__label { transform: translateX(calc(var(--tx-btn-icon-w) + var(--tx-btn-gap))); } .tx-btn:hover .tx-btn__icon, .tx-btn:focus-visible .tx-btn__icon { transform: translateX( calc(-1 * (var(--tx-btn-label-w, 190px) + var(--tx-btn-gap))) ); } /* White pill with a white disc — the design draws the two as separate rounds, which the inset ring on the disc gives without a second element. Used on the blue FAQ promo. */ .tx-btn--split { --tx-btn-icon-w: 44px; --tx-btn-pad-l: 28px; --tx-btn-pad-r: 8px; background: #fff; color: #101010; padding: 8px var(--tx-btn-pad-r) 8px var(--tx-btn-pad-l); } .tx-btn--split:hover, .tx-btn--split:focus-visible { background: #fff; color: #101010; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); } .tx-btn--split .tx-btn__label { font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; } .tx-btn--split .tx-btn__icon { background: #fff; color: #101010; box-shadow: inset 0 0 0 1px rgba(16, 16, 16, 0.12); } /* Flat rounded rectangle, no disc and no swap — the dark band and the closing CTA are drawn that way. */ .tx-btn--flat { gap: 0; padding: 21px 34px; border-radius: 12px; background: #101010; color: #fff; } .tx-btn--flat:hover, .tx-btn--flat:focus-visible { padding: 21px 34px; background: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); } .tx-btn--flat .tx-btn__label { font-weight: 700; font-size: 17px; letter-spacing: 0; text-transform: none; } /* Nothing to swap with, so the label stays put. Needs the :hover on the left to out-specify the generic swap rule above. */ .tx-btn--flat:hover .tx-btn__label, .tx-btn--flat:focus-visible .tx-btn__label { transform: none; } @media (prefers-reduced-motion: reduce) { .tx-btn, .tx-btn__label, .tx-btn__icon, .tx-btn__icon svg { transition: none; } .tx-btn:hover .tx-btn__label, .tx-btn:focus-visible .tx-btn__label, .tx-btn:hover .tx-btn__icon, .tx-btn:focus-visible .tx-btn__icon, .tx-btn:hover .tx-btn__icon svg, .tx-btn:focus-visible .tx-btn__icon svg { transform: none; } .tx-btn:hover, .tx-btn:focus-visible { padding-left: var(--tx-btn-pad-l); padding-right: var(--tx-btn-pad-r); transform: none; } } /* ---------- scroll reveal ---------- */ /* Only armed once `.tx-anim` is set on (done synchronously in the head), so a no-JS visitor never gets stuck with hidden content. */ .tx-anim .tx-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease; } .tx-anim .tx-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .tx-anim .tx-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ HERO ============================================================ */ .tx-hero { position: relative; padding: 70px 0 90px; overflow: hidden; background: #fffaf6; } /* hero-bg.png is 1672x941 and carries its own wash + skyline, so the CSS gradients it replaced are gone. It lives on its own layer purely so it can be mirrored: the artwork is drawn for a handset on the left, and the hero puts the handset on the right. Flipping here rather than re-exporting the PNG leaves the owner's asset untouched. `bottom center` keeps the skyline on the section's floor as the copy makes the section taller. */ .tx-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("../images/taxi-app/hero-bg.png") bottom center / cover no-repeat; transform: scaleX(-1); pointer-events: none; } .tx-hero > .container { position: relative; z-index: 1; } /* Same grid as the dating page hero: a wide copy column, a slightly narrower art column, 40px between them, both vertically centred. */ .tx-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); align-items: center; gap: 40px; } .tx-hero__badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 26px 12px 18px; border: 1px solid var(--tx-line); border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(17, 19, 24, 0.05); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 500; font-size: 16px; color: #2b2b2b; } .tx-hero__badge span { font-size: 20px; line-height: 1; } .tx-hero__title { margin-top: 26px; font-weight: 800; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; } /* "Development Company" is set in a serif italic in the design. */ .tx-hero__title-italic { display: block; margin-top: 6px; font-family: "Playfair Display", "Poppins", serif; font-style: italic; font-weight: 600; color: var(--tx-orange); } .tx-hero__text { margin-top: 24px; max-width: 640px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 17px; line-height: 30px; color: #5f5f5f; } .tx-hero__cta { margin-top: 34px; } /* Media column: the phone plate plus the floating capsules that sit over it. Each capsule is placed from the inline `--x` / `--y` the blade writes. */ /* Wider than its own grid column on purpose: the design lets the capsules reach back over the copy column's empty right-hand side so they can sit beside the handset instead of behind it. `calc(100% + 150px)` is the overhang, and it collapses back to the column once there is no room. */ /* Art box sits flush against the container's right edge, as the dating hero does. It had been carrying the capsule-era overhang (`min(700px, calc(100% + 210px))`), which pushed the handset ~105px left of its own column — the capsules that overhang was cut for are long gone. */ .tx-hero__media { position: relative; justify-self: end; width: 100%; max-width: 480px; } /* Drawn at its natural 341x706 — upscaling to fill the 480px box only softens it — and pinned to the box's right edge so the art still reads as flush. */ .tx-hero__phone { position: relative; z-index: 2; display: block; width: min(100%, 341px); height: auto; margin: 0 auto; filter: drop-shadow(0 30px 60px rgba(17, 19, 24, 0.18)); } /* ============================================================ ABOUT — offset photo + badge, ranged copy ============================================================ */ .tx-innovation { position: relative; padding: 80px 0 92px; } .tx-innovation::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 720px 460px at 8% 14%, rgba(252, 193, 22, 0.07), transparent 68% ), radial-gradient( 520px 380px at 96% 88%, rgba(255, 122, 69, 0.06), transparent 70% ); pointer-events: none; } .tx-innovation > .container { position: relative; } /* The copy column sets the row height and the photo fills whatever that comes to, so neither column ends with dead space. */ .tx-innovation__grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 78px; align-items: stretch; } .tx-innovation__media { position: relative; } /* Tinted slab, offset down-left behind the frame. */ .tx-innovation__media::before { content: ""; position: absolute; z-index: 0; left: 40px; right: -28px; top: 40px; bottom: -28px; border-radius: 26px; background: linear-gradient( 210deg, #fff0c4 0%, #ffe79c 55%, var(--tx-cream) 100% ); } /* Dot grid peeking past the top-right corner. */ .tx-innovation__media::after { content: ""; position: absolute; z-index: 2; pointer-events: none; left: -16px; top: -16px; width: 116px; height: 116px; background-image: radial-gradient( rgba(252, 193, 22, 0.4) 1.6px, transparent 1.7px ); background-size: 14px 14px; } .tx-innovation__frame { position: relative; z-index: 1; height: 100%; min-height: 460px; border-radius: 22px; overflow: hidden; box-shadow: 0 34px 64px rgba(43, 20, 12, 0.18); } /* Absolute so the portrait source contributes no height of its own — otherwise it would drive the row and reopen the gap beside the copy. */ .tx-innovation__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .tx-innovation__media:hover .tx-innovation__frame img { transform: scale(1.04); } /* Grounds the badge against a busy photo. */ .tx-innovation__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(35, 20, 14, 0) 46%, rgba(35, 20, 14, 0.44) 100% ); } .tx-innovation__badge { position: absolute; z-index: 3; right: -26px; bottom: 38px; display: flex; align-items: center; gap: 15px; max-width: 292px; padding: 17px 24px 17px 20px; border-radius: 18px; background: #fff; box-shadow: 0 22px 48px rgba(43, 20, 12, 0.18); transition: transform 0.35s ease; } .tx-innovation__media:hover .tx-innovation__badge { transform: translateY(-5px); } .tx-innovation__badge strong { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--tx-orange); } .tx-innovation__badge span { font-family: "Poppins", "Gabarito", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.42; color: var(--tx-ink); } .tx-innovation__badge em { font-family: "Poppins", sans-serif; font-style: italic; font-weight: 600; color: var(--tx-navy); } .tx-innovation__copy { align-self: center; } .tx-innovation h2 { font-size: clamp(30px, 3.3vw, 45px); line-height: 1.15; font-weight: 700; } /* Own line — a mid-sentence face switch orphans punctuation at the wrap. */ .tx-innovation h2 em { display: block; margin-top: 4px; font-family: "Poppins", sans-serif; /* Poppins sets wider than the Gabarito line above it — trimmed so the accent still fits on one line. */ font-size: 0.87em; font-style: italic; font-weight: 600; letter-spacing: -0.025em; color: var(--tx-orange); } .tx-innovation__lead { margin-top: 22px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 17.5px; line-height: 1.68; font-weight: 500; color: var(--tx-ink); } /* Hairline rule fading down the secondary copy. */ .tx-innovation__body { position: relative; margin-top: 26px; padding-left: 26px; } .tx-innovation__body::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: linear-gradient( 180deg, var(--tx-orange), rgba(252, 193, 22, 0.04) ); } .tx-innovation__copy p { font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 1.72; } .tx-innovation__body p + p { margin-top: 18px; } .tx-innovation__points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .tx-innovation__points li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px; border-radius: 999px; border: 1px solid #ffe0d3; background: #fff5f0; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; font-weight: 600; color: var(--tx-ink); transition: border-color 0.25s ease, background 0.25s ease; } .tx-innovation__points li:hover { border-color: #ffcbb4; background: #ffeee6; } .tx-innovation__points svg { box-sizing: border-box; flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--tx-orange); color: #fff; } .tx-innovation__cta { margin-top: 38px; } /* ============================================================ CTA BANDS ============================================================ */ /* cta-bg.png (1601x600) is the whole band — skyline, taxi and floating props. The padding is tuned to land near that ratio at desktop width so `cover` crops almost nothing. Both CTA bands share it. */ .tx-cta { position: relative; padding: 96px 0 104px; background: url("../images/taxi-app/cta-bg.png") center / cover no-repeat, #fdf3e4; overflow: hidden; } .tx-cta__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; } .tx-cta__title { font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.2; color: var(--tx-ink); } .tx-cta__text { margin: 22px auto 34px; max-width: 720px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 27px; color: var(--tx-body); } /* ============================================================ SOLUTIONS — sticky stacking cards ============================================================ */ .tx-invest { /* Site header is fixed at 76px; the extra 14px matches the gap the crypto services stack uses at this breakpoint. */ --tx-invest-stick: 90px; position: relative; padding: 90px 0 96px; background: #faf7f5; /* `overflow: hidden` here would make this section a scroll container and silently kill the sticky rows below — `clip` prevents the same horizontal spill without that side effect. */ overflow: clip; } .tx-invest__list { display: flex; flex-direction: column; gap: 18px; } /* Sticky stack, ported from the crypto services list: every row pins at the same offset and the next one rides up and covers it — which is why the row needs an opaque fill, and why the rows carry no `tx-reveal` (a row that had not revealed yet would pin while still transparent, letting the one underneath show through the stack). */ .tx-invest__row { position: sticky; top: var(--tx-invest-stick); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 54px; padding: 36px 40px; border: 1px solid rgba(16, 16, 16, 0.07); border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(17, 19, 24, 0.06); transition: background 0.25s ease, border-color 0.25s ease; } /* No lift on hover: a `transform` on a pinned row shifts it out of its sticky offset, so only the border responds. */ .tx-invest__row:hover { border-color: rgba(252, 193, 22, 0.32); } /* Outlined numeral, the same hollow treatment the reach list uses — big enough here to anchor the card. */ .tx-invest__no { display: block; margin-bottom: 10px; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.6px rgba(252, 193, 22, 0.75); } .tx-invest__name { font-weight: 700; font-size: clamp(24px, 2.3vw, 33px); line-height: 1.2; } .tx-invest__text { margin-top: 18px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 17px; line-height: 29px; color: #838383; } /* A fixed media height keeps every card the same size, so the pinned stack lines up instead of each row peeking out by a different amount. */ .tx-invest__media { width: 100%; height: auto; border-radius: 12px; object-fit: cover; } /* ============================================================ PANELS — accented rail beside an app-window stage ============================================================ */ .tx-features { /* Republished by the blade script from the active tab, so the rail, the window chrome and every tick move together. */ --tx-panel-accent: #fcc116; position: relative; padding: 84px 0 100px; background: linear-gradient(150deg, #fffdf3 0%, #fff8e2 46%, #fffdf4 100%); overflow: hidden; } /* Faint dot field, so the stage has something to sit on rather than floating on flat colour. */ .tx-features::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( rgba(16, 16, 16, 0.055) 1.1px, transparent 1.2px ); background-size: 22px 22px; -webkit-mask-image: radial-gradient( 120% 90% at 50% 40%, #000 30%, transparent 78% ); mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%); pointer-events: none; } .tx-features > .container { position: relative; } /* The chip row and the phone/stage grid share one surface, so the whole control reads as a single panel rather than three floating pieces. */ .tx-features__card { padding: 28px; /* Frosted glass: the tinted gradient and the dot field behind stay visible but blurred, so the card reads as a pane over the section rather than a white block cut out of it. `saturate` keeps the warm ground from going grey once it is blurred. The inset highlight is the lit top edge. */ border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 26px; background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 30px 70px rgba(17, 19, 24, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.85); } /* Without backdrop-filter there is nothing to frost, and 58% white over the dot field would just look dirty — fall back to the opaque card. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tx-features__card { border-color: rgba(16, 16, 16, 0.07); background: #fff; } } .tx-features__layout { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 22px; } /* ---- rail ---- */ /* One row above the layout, so the stage below gets the full width and the phone has a column of its own beside it. */ .tx-features__nav { display: grid; /* auto-fit rather than a hard 4: the section is three panels now and the row should not need editing again if that changes. */ grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 14px; } .tx-features__tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; /* Translucent so the frost shows through, but the edge has to be a dark hairline — a white border on a white card is invisible. Lit top edge plus a short shadow is what lifts the chip off the glass. */ border: 1px solid rgba(16, 16, 16, 0.09); border-radius: 16px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 6px 18px rgba(17, 19, 24, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } /* Accent bar that grows across the bottom edge as the chip takes over. */ .tx-features__tab::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--tab-accent); transform: translateX(-50%); transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .tx-features__tab:hover { border-color: rgba(16, 16, 16, 0.16); background: rgba(255, 255, 255, 0.82); box-shadow: 0 14px 30px rgba(17, 19, 24, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95); transform: translateY(-3px); } .tx-features__tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--tab-accent) 42%, transparent); background: color-mix(in srgb, var(--tab-accent) 7%, #fff); box-shadow: 0 14px 30px color-mix(in srgb, var(--tab-accent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.95); transform: none; } .tx-features__tab[aria-selected="true"]::before { width: 64%; } /* Hollow numeral, the same treatment the reach list and the process dots use. */ .tx-features__num { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 26px; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px rgba(16, 16, 16, 0.32); transition: -webkit-text-stroke-color 0.3s ease; } .tx-features__tab[aria-selected="true"] .tx-features__num { -webkit-text-stroke-color: var(--tab-accent); } .tx-features__name { display: block; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--tx-ink); } .tx-features__count { display: block; margin-top: 3px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 12.5px; font-weight: 500; color: var(--tx-muted); } /* Tick that fades in on the chosen chip, in place of the vertical rail's chevron. */ .tx-features__go { width: 18px; height: 18px; color: var(--tab-accent); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .tx-features__tab[aria-selected="true"] .tx-features__go { opacity: 1; transform: none; } /* ---- device ---- */ .tx-features__device { position: relative; display: grid; place-items: center; } /* Accent halo behind the handset, recoloured with the chosen panel. */ .tx-features__device::before { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient( circle, color-mix(in srgb, var(--tx-panel-accent) 22%, transparent) 0%, transparent 68% ); transition: background 0.4s ease; pointer-events: none; } /* The artwork is a handset with panel cards floating off both edges (1440x1536), so it is sized off its width — pinning the height would push those side cards past the column. */ .tx-features__device img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 26px 48px rgba(17, 19, 24, 0.16)); } /* ---- stage ---- */ /* Nested inside the card, so it steps back to a tinted surface with a hairline instead of carrying its own drop shadow. */ .tx-features__stage { position: relative; border: 1px solid rgba(16, 16, 16, 0.09); border-radius: 18px; background: rgba(255, 255, 255, 0.42); box-shadow: 0 12px 34px rgba(17, 19, 24, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); overflow: hidden; } /* Accent wash bleeding down from the chrome bar. */ .tx-features__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; background: linear-gradient( 180deg, color-mix(in srgb, var(--tx-panel-accent) 9%, transparent), transparent ); pointer-events: none; transition: background 0.4s ease; } /* Window chrome: the section is about product panels, so the stage is dressed as one. */ .tx-features__chrome { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid rgba(16, 16, 16, 0.07); background: rgba(255, 255, 255, 0.75); } .tx-features__dots { display: flex; gap: 6px; } .tx-features__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(16, 16, 16, 0.12); } .tx-features__dots i:first-child { background: var(--tx-panel-accent); transition: background 0.4s ease; } .tx-features__crumb { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 14.5px; color: var(--tx-ink); } .tx-features__crumb span { color: var(--tx-muted); font-weight: 500; } .tx-features__pill { margin-left: auto; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--tx-panel-accent) 12%, transparent); color: var(--tx-panel-accent); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 12.5px; white-space: nowrap; transition: background 0.4s ease, color 0.4s ease; } /* Every set is rendered up front and stacked in one grid cell, so switching neither reflows the section nor changes its height. */ .tx-features__sets { display: grid; padding: 30px 28px 34px; } .tx-features__set { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 26px; align-content: start; visibility: hidden; transition: visibility 0.3s ease; } .tx-features__set.is-on { visibility: visible; } .tx-features__set li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15.5px; line-height: 1.45; color: #1a1a1a; /* Rows fly in one after the next when their set opens; `--i` is the row index, written by the blade. */ opacity: 0; transform: translateY(9px); transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.2s ease; } .tx-features__set.is-on li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 26ms); } .tx-features__set li:hover { background: color-mix(in srgb, var(--tx-panel-accent) 7%, transparent); } /* Tick drawn in CSS — one glyph per row would be sixty identical images. */ .tx-features__set li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--tx-panel-accent) 14%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat; transition: background-color 0.4s ease; } @media (prefers-reduced-motion: reduce) { .tx-features__set li { opacity: 1; transform: none; transition: none; } } /* ============================================================ TECHNOLOGIES — 2x2 card grid beside a device panel ============================================================ */ .tx-tech { padding: 90px 0 100px; background: #fff; } .tx-tech__layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 46px; align-items: center; } .tx-tech__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .tx-techcard { padding: 28px 26px 30px; border: 1px solid var(--tx-line); border-radius: 8px; background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .tx-techcard:hover { transform: translateY(-4px); border-color: rgba(252, 193, 22, 0.55); box-shadow: 0 18px 40px rgba(30, 25, 10, 0.09); } .tx-techcard img { width: 52px; height: 52px; object-fit: contain; } .tx-techcard h3 { margin-top: 22px; font-size: 21px; font-weight: 700; line-height: 1.3; } .tx-techcard p { margin-top: 14px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 23px; } /* No plate: tech-phone.png ships with its own tinted backdrop. */ .tx-tech__device { display: grid; place-items: center; } .tx-tech__device img { display: block; width: 100%; max-width: 504px; height: auto; border-radius: 26px; } @media (max-width: 991px) { .tx-tech__layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .tx-tech__device { order: -1; } } @media (max-width: 575px) { .tx-tech__grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ BUSINESS MODELS — two-column cards, icon left ============================================================ */ .tx-why { padding: 86px 0 96px; } .tx-why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; } .tx-why__cell { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: start; padding: 34px 32px 40px; border: 1px solid rgba(16, 16, 16, 0.08); border-radius: 16px; background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .tx-why__cell:hover { transform: translateY(-5px); border-color: rgba(252, 193, 22, 0.35); box-shadow: 0 18px 40px rgba(17, 19, 24, 0.08); } .tx-why__icon { width: 56px; height: 56px; object-fit: contain; } .tx-why__name { font-weight: 700; font-size: 24px; line-height: 1.25; } .tx-why__text { margin-top: 14px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 26px; } /* ============================================================ COST — cream band, image left ============================================================ */ .tx-build { padding: 90px 0; background: var(--tx-cream); } .tx-build__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; } .tx-build__media { width: 100%; height: auto; border-radius: 8px; object-fit: cover; } .tx-build__title { font-weight: 700; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.18; } .tx-build__text { margin: 22px 0 34px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 27px; } .tx-faq { padding: 70px 0 110px; background: linear-gradient( 140deg, rgb(244, 246, 253) 0%, rgb(238, 242, 252) 45%, rgb(247, 248, 253) 100% ); } .tx-faq__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: start; } /* The heading + promo track the list while it scrolls. */ .tx-faq__aside { position: sticky; top: 110px; } .tx-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .tx-faq__promo { margin-top: 110px; padding: 32px 30px; border-radius: 20px; background: linear-gradient(241deg, #196dff 30%, #001da0 100%); color: #fff; } .tx-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; color: #fff; } .tx-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .tx-faq__list { display: flex; flex-direction: column; gap: 18px; } .tx-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; } .tx-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .tx-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; } .tx-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .tx-faq__mark { position: relative; flex: none; width: 26px; height: 26px; } .tx-faq__mark::before, .tx-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; } .tx-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .tx-faq__item[open] .tx-faq__mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(180deg); } /* Animated by the blade script:
cannot transition its own height, so this wrapper is driven from 0 to its measured height and back. */ .tx-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .tx-faq__item[open] .tx-faq__a-wrap { height: auto; opacity: 1; } .tx-faq__a { padding-top: 14px; max-width: 523px; font-size: 17px; line-height: 25px; color: #7d7d7d; } /* ============================================================ RESPONSIVE ============================================================ */ /* Below the design width there is not enough room beside the handset, so the capsules tighten up rather than run off the right edge. */ @media (max-width: 1359px) { .tx-hero__media { } } /* Below the point where the container stops being a fixed 1240 there is no longer room for a full-size capsule beside the handset, so both shrink. */ @media (max-width: 1279px) { /* The handset drops to 280px here but its box is still 480, so pinning it right would leave a ~200px hole beside it. Centre it instead — the flush -right treatment only earns its keep at the design width. */ .tx-hero__phone { width: min(100%, 280px); margin: 0 auto; } } @media (max-width: 1199px) { /* Below the design width the fixed design column becomes fluid, and the offset slab pulls in so it stays clear of the copy. */ .tx-innovation__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } .tx-innovation__badge { right: -16px; max-width: 258px; } .tx-invest__row { gap: 56px; } } @media (max-width: 991px) { .tx-hero { padding: 40px 0 70px; } .tx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 54px; } .tx-hero__media { justify-self: center; width: min(100%, 380px); max-width: 380px; } .tx-hero__phone { margin: 0 auto; } .tx-build__row { grid-template-columns: minmax(0, 1fr); gap: 36px; } /* Stacked cards are taller than the viewport's usable height once the copy sits above the artwork, so they stop pinning and simply scroll. */ .tx-invest__row { position: static; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 24px 30px; } .tx-invest__media { height: 240px; } /* Stacked: no sibling column to borrow height from, so the frame goes back to the photo's own aspect and the slab / badge pull inside the viewport. */ .tx-innovation__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .tx-innovation__frame { min-height: 0; aspect-ratio: 590 / 633; } .tx-innovation__media::before { left: 18px; right: 18px; top: 28px; bottom: -18px; } .tx-innovation__media::after { left: -8px; top: -10px; width: 88px; height: 88px; } .tx-innovation__badge { right: 16px; bottom: 18px; } .tx-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* The phone drops below the stage and the chip row scrolls: four chips and a 340px device column leave the feature list too narrow to read here. */ .tx-features__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .tx-features__device { order: 1; } .tx-features__device::before { width: 300px; height: 300px; } .tx-features__device img { max-width: 460px; } .tx-features__nav { display: flex; gap: 10px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; } .tx-features__nav::-webkit-scrollbar { display: none; } /* `width: 100%` from the rail layout would make flex-basis:auto resolve to the full row, so each chip has to be told to size to its own content. */ .tx-features__tab { flex: 0 0 auto; width: auto; gap: 12px; padding: 14px 18px; } .tx-features__tab:hover { transform: none; } .tx-features__go { display: none; } /* The chip row scrolls, so a bar pinned to a chip's own width is the only active cue that stays visible. */ .tx-features__tab[aria-selected="true"]::before { width: 50%; } /* Chips stop sharing the row evenly and take their natural width, so the row scrolls instead of squeezing eight labels into the viewport. */ .tx-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } .tx-faq__aside { position: static; } .tx-faq__promo { margin-top: 34px; } } @media (max-width: 760px) { .tx-why__grid { grid-template-columns: minmax(0, 1fr); } .tx-features__set { grid-template-columns: minmax(0, 1fr); gap: 2px; } .tx-features__card { padding: 16px; border-radius: 20px; } .tx-features__sets { padding: 20px 14px 24px; } .tx-features__chrome { padding: 14px 16px; gap: 10px; } .tx-features__crumb span { display: none; } .tx-faq__item { padding: 20px 24px; } .tx-btn { --tx-btn-pad-l: 22px; width: auto; max-width: 100%; } /* `flex: none` from the desktop rule pins the label at its unwrapped width, which is what pushed the text straight out of the pill at this size. It has to be allowed to shrink before `white-space: normal` can wrap it. */ .tx-btn__label { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: normal; text-align: left; } .tx-btn--flat, .tx-btn--flat:hover, .tx-btn--flat:focus-visible { padding: 17px 26px; } .tx-btn--flat .tx-btn__label { font-size: 15px; } /* The label wraps at this width, so the swap would overshoot the pill. */ .tx-btn:hover, .tx-btn:focus-visible { padding-left: var(--tx-btn-pad-l); padding-right: var(--tx-btn-pad-r); } .tx-btn:hover .tx-btn__label, .tx-btn:focus-visible .tx-btn__label, .tx-btn:hover .tx-btn__icon, .tx-btn:focus-visible .tx-btn__icon { transform: none; } } /* ============================================================ STACKED ORDER — artwork before the CTA ============================================================ */ /* Both buttons live inside their copy column, so the stacked layout would put them above the artwork. `display: contents` drops the copy column's own box and promotes its children to grid items, which is what lets the media be ordered between the body copy and the button. Spacing inside both columns is margin-driven, so the grid's row gap goes to 0 and the media carries its own margin instead. */ @media (max-width: 991px) { .tx-hero__copy { display: contents; } .tx-hero__grid { gap: 0; } .tx-hero__badge { order: 1; /* An inline-flex box blockifies once it becomes a grid item, which would stretch the pill across the row. */ justify-self: start; } .tx-hero__title { order: 2; } .tx-hero__text { order: 3; } .tx-hero__media { order: 4; margin-top: 44px; } .tx-hero__cta { order: 5; justify-self: start; margin-top: 40px; } .tx-innovation__copy { display: contents; } .tx-innovation__grid { gap: 0; } .tx-innovation .tx-eyebrow { order: 1; } .tx-innovation h2 { order: 2; } .tx-innovation__lead { order: 3; } .tx-innovation__body { order: 4; } .tx-innovation__points { order: 5; } .tx-innovation__media { order: 6; margin-top: 40px; } .tx-innovation__cta { order: 7; } } @media (max-width: 575px) { .tx-stats__grid { grid-template-columns: minmax(0, 1fr); } .tx-stat { border-right: 0; border-bottom: 1px solid #f0f0f2; } .tx-stat:last-of-type { border-bottom: 0; } .tx-popular__rail .swiper-slide { width: 240px; } } /* ============================================================ STATS + POPULAR CLONES RAIL (ported from dating.css) ============================================================ */ .tx-stats { padding: 70px 0 40px; background: #fff; } .tx-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; } .tx-stats__grid::after { content: ''; grid-column: 1 / -1; height: 3px; background: linear-gradient(90deg, rgba(252, 193, 22, 0) 0%, var(--tx-orange) 50%, rgba(252, 193, 22, 0) 100%); } .tx-stat { padding: 44px 24px 40px; text-align: center; border-right: 1px solid #f0f0f2; } .tx-stat:last-of-type { border-right: 0; } .tx-stat__ico { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 50%; background: var(--tx-orange); color: #101010; } .tx-stat__ico svg { width: 24px; height: 24px; } /* Split so the counter script can rewrite only the digits — the suffix is its own span and never animates. */ .tx-stat__value { display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 700; color: var(--tx-navy); letter-spacing: -0.02em; } .tx-stat__num, .tx-stat__plus { display: inline; } .tx-stat__label { display: block; margin-top: 8px; font-size: 15px; color: #6b7a8d; } .tx-popular { padding: 96px 0 100px; background: linear-gradient(180deg, #fff 0%, var(--tx-cream) 25%, #fff8e4 100%); overflow: clip; } .tx-popular__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 48px; align-items: center; } .tx-popular__copy { position: relative; padding-right: 40px; border-right: 1px solid #f2e4bd; } .tx-popular__copy h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18; color: #16233a; } .tx-popular__copy p { margin-top: 22px; max-width: 380px; font-size: 16px; } .tx-popular__doodle { display: block; margin-top: 34px; max-width: 260px; opacity: 0.85; } .tx-popular__doodle svg { width: 100%; height: auto; } .tx-popular__rail { position: relative; overflow: hidden; padding: 10px 0 30px; } .tx-popular__rail .swiper-wrapper { align-items: flex-start; } .tx-popular__rail .swiper-slide { width: 288px; height: auto; } .tx-popular__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); } /* Matches the artwork's own 1058x1487, so `cover` crops nothing and the full screenshot is visible. The ratio lives here rather than on the
because the site-wide Swiper CSS stretches a slide's image to the wrapper height and overrides `aspect-ratio` set on it. */ .tx-popular__pic { position: relative; display: block; aspect-ratio: 1058 / 1487; overflow: hidden; } .tx-popular__card img { display: block; width: 100%; height: 100%; object-fit: cover; } .tx-popular__card figcaption { margin-top: 18px; font-size: 18px; font-weight: 700; color: var(--tx-ink); } .tx-popular__rule { display: block; width: 74px; height: 3px; margin: 12px auto 0; border-radius: 3px; background: var(--tx-orange); } @media (max-width: 991px) { .tx-popular { padding-top: 64px; padding-bottom: 68px; } .tx-popular__grid { grid-template-columns: minmax(0, 1fr); } .tx-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tx-stat:nth-child(2n) { border-right: 0; } .tx-stat:nth-child(-n + 2) { border-bottom: 1px solid #f0f0f2; } .tx-popular__copy { padding-right: 0; border-right: 0; } } @media (max-width: 575px) { .tx-stats__grid { grid-template-columns: minmax(0, 1fr); } .tx-stat { border-right: 0; border-bottom: 1px solid #f0f0f2; } .tx-stat:last-of-type { border-bottom: 0; } .tx-popular__rail .swiper-slide { width: 240px; } } /* ============================================================ SERVICE GRID (ported from casino.css) ============================================================ */ .tx-svc { position: relative; padding: 86px 0 96px; overflow: hidden; background: radial-gradient( 70% 50% at 50% 0%, rgba(0, 114, 246, 0.06) 0%, rgba(255, 255, 255, 0) 70% ), #fff; } .tx-svc > .container { position: relative; z-index: 1; } .tx-svc__deco--l { left: 0; top: 138px; width: 132px; } .tx-svc__deco--r { right: 0; top: 148px; width: 134px; } .tx-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 42px; } .tx-svccard { display: flex; flex-direction: column; align-items: center; padding: 0 0 30px; border: 1px solid rgba(16, 16, 16, 0.05); border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(17, 19, 24, 0.05); text-align: center; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .tx-svccard:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(17, 19, 24, 0.11); } /* The card art is a transparent-background render, so the media box supplies the tint the design puts behind it and `contain` keeps the whole render in frame instead of cropping it. */ .tx-svccard__media { position: relative; width: 100%; aspect-ratio: 413 / 345; padding: 16px; background: color-mix(in srgb, var(--tx-accent, #fcc116) 9%, #fff); } .tx-svccard__media img { display: block; width: 100%; height: 100%; object-fit: contain; } .tx-svccard__num { position: absolute; left: 18px; top: 18px; padding: 4px 12px; border-radius: 9px; background: rgba(255, 255, 255, 0.72); color: var(--tx-accent, #0072f6); font-weight: 700; font-size: 15px; line-height: 1.5; letter-spacing: 0.02em; } .tx-svccard__title { margin: 22px 26px 0; font-weight: 700; font-size: 19px; line-height: 1.35; color: #0d1220; } .tx-svccard__rule { margin: 12px 0 16px; width: 62px; height: 3px; border-radius: 2px; background: var(--tx-accent, #0072f6); } .tx-svccard__text { margin: 0 26px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 13px; line-height: 21px; color: var(--tx-body); } @media (max-width: 991px) { .tx-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } } @media (max-width: 575px) { .tx-svc__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 420px) { .tx-svccard__title { font-size: 17px; margin-inline: 18px; } .tx-svccard__text { margin-inline: 18px; } } /* ============================================================ PROCESS RAIL (ported from white-label.css) ============================================================ */ /* Straight port of `wl-process`, colours swapped to the taxi yellow. The pieces that matter and that a selector-filtered extract loses: the `--right` modifier flips the *column template* (not just the order), and the dashed connector needs its per-side `left` + `rotate` companions. */ .tx-process { padding: 88px 0 96px; background: linear-gradient(180deg, #fff 0%, #fffdf6 40%, #fff 100%); } .tx-process .tx-eyebrow { color: var(--tx-navy); } .tx-process__list { position: relative; display: grid; gap: 90px; } .tx-step { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 30px; position: relative; } .tx-step--right { grid-template-columns: 300px minmax(0, 1fr); } .tx-step--right .tx-step__card { order: 2; margin-left: auto; } .tx-step--right .tx-step__no { order: 1; } .tx-step__card { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 18px; width: min(100%, 881px); min-height: 121px; padding: 20px 30px; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(30, 25, 10, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; } .tx-step__card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(30, 25, 10, 0.18); } .tx-step__card:hover .tx-step__icon img { transform: scale(1.08); } .tx-step__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #fff6dc; } .tx-step__icon img { width: 42px; height: 42px; object-fit: contain; transition: transform 0.3s ease; } .tx-step__card h3 { font-size: 20px; font-weight: 600; } .tx-step__card p { margin-top: 6px; font-size: 14px; line-height: 1.55; } .tx-step__no { font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; color: var(--tx-orange); letter-spacing: -0.02em; text-align: center; } /* Dashed diagonal linking one card to the next: a ~136px run of 18px dashes sitting in the gap, leaning toward whichever side the next card is on. `repeating-linear-gradient` keeps the dash rhythm fixed — `border-style: dashed` leaves it up to the browser. */ .tx-step + .tx-step::before { content: ""; position: absolute; top: -84px; width: 136px; height: 3px; border-radius: 2px; background: repeating-linear-gradient( 90deg, var(--tx-orange) 0 18px, transparent 18px 32px ); transform-origin: left center; } /* Next card is on the right: the run falls left-to-right. */ .tx-step--right::before { left: 47%; transform: rotate(36deg); } /* Next card is on the left: same run, mirrored. */ .tx-step--left::before { left: 53%; transform: rotate(144deg); } @media (max-width: 1199px) { .tx-step { grid-template-columns: minmax(0, 1fr) 200px; } .tx-step--right { grid-template-columns: 200px minmax(0, 1fr); } } @media (max-width: 991px) { .tx-step, .tx-step--right { grid-template-columns: minmax(0, 1fr); gap: 14px; } .tx-step--right .tx-step__card, .tx-step--right .tx-step__no { order: 0; margin-left: 0; } .tx-step__no { text-align: left; font-size: 22px; } .tx-step + .tx-step::before { display: none; } .tx-process__list { gap: 26px; } } @media (max-width: 767px) { .tx-step__card:hover { transform: none; } } /* ============================================================ FEATURE RAIL + DELIVERED SHOWCASE (ported from ai-clone.css) ============================================================ */ .tx-delivered { --tx-delivered-accent: #f0a81e; padding: 80px 0; } .tx-delivered__layout { display: grid; grid-template-columns: minmax(0, 1fr) 375px; gap: 22px; align-items: start; } .tx-delivered__showcase { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 100px; align-self: start; height: fit-content; } .tx-delivered__stage { position: relative; border-radius: 32px; overflow: hidden; background: #f2f4f8; user-select: none; } .tx-drag { position: absolute; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(17, 17, 17, 0.86); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate( calc(var(--tx-drag-x, 0px) - 50%), calc(var(--tx-drag-y, 0px) - 50%) ) scale(0.85); transition: opacity 0.2s ease, transform 0.08s linear; } .tx-drag svg { width: 16px; height: 16px; } .js-drag.has-drag .tx-drag { opacity: 1; transform: translate( calc(var(--tx-drag-x, 0px) - 50%), calc(var(--tx-drag-y, 0px) - 50%) ) scale(1); } .tx-delivered__stage.is-dragging .tx-drag { background: var(--tx-delivered-accent); } .tx-delivered__slide { display: block; width: 100%; height: auto; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .tx-delivered__slide:not(:first-of-type) { position: absolute; inset: 0; height: 100%; } .tx-delivered__slide.is-on { opacity: 1; } @media (hover: none), (pointer: coarse) { .tx-delivered__stage.is-dragging { cursor: grabbing; } .tx-drag { display: none; } } .tx-delivered__nav { display: flex; align-items: center; gap: 12px; } .tx-delivered__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--tx-delivered-accent) 18%, #fff); color: var(--tx-delivered-accent); transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; } .tx-delivered__arrow svg { width: 18px; height: 18px; } .tx-delivered__arrow:hover, .tx-delivered__arrow:focus-visible { background: var(--tx-delivered-accent); color: #fff; transform: translateY(-2px); } .tx-delivered__count { margin-left: 6px; font-size: 14px; letter-spacing: 0.08em; color: #8b93a3; } .tx-delivered__count b { font-weight: 700; color: var(--tx-ink); } .tx-delivered__cta { /* Trimmed from the page default so it matches the 44px arrows. */ --tx-btn-icon-w: 30px; --tx-btn-gap: 14px; --tx-btn-pad-l: 22px; --tx-btn-pad-r: 7px; margin-left: auto; padding-top: 7px; padding-bottom: 7px; font-size: 13px; background: var(--tx-delivered-accent); color: #fff; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, padding 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .tx-delivered__cta .tx-btn__disc { background: #fff; color: var(--tx-delivered-accent); } .tx-delivered__cta:hover, .tx-delivered__cta:focus-visible { color: #fff; box-shadow: 0 14px 30px color-mix(in srgb, var(--tx-delivered-accent) 34%, transparent); } .tx-delivered__list { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #e6ebf3; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(11, 18, 32, 0.06); } .tx-delivered__item { position: relative; display: block; width: 100%; padding: 15px 18px; border: 1px solid transparent; border-radius: 14px; background: transparent; text-align: left; overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .tx-delivered__item::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--tx-delivered-accent); transform: scaleY(0); opacity: 0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .tx-delivered__item:hover { background: color-mix(in srgb, var(--tx-delivered-accent) 8%, #fff); border-color: color-mix(in srgb, var(--tx-delivered-accent) 24%, #fff); transform: translateX(2px); } .tx-delivered__item:hover::before { transform: scaleY(1); opacity: 1; } .tx-delivered__item.is-active { background: linear-gradient( 135deg, var(--tx-delivered-accent) 0%, color-mix(in srgb, var(--tx-delivered-accent) 78%, #000) 100% ); border-color: transparent; box-shadow: 0 12px 26px color-mix(in srgb, var(--tx-delivered-accent) 34%, transparent); transform: none; } .tx-delivered__item.is-active::before { background: rgba(255, 255, 255, 0.85); transform: scaleY(1); opacity: 1; } .tx-delivered__item:focus-visible { outline: 2px solid var(--tx-delivered-accent); outline-offset: 2px; } .tx-delivered__name { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 700; font-size: 17px; line-height: 1.45; color: var(--tx-ink); transition: color 0.25s ease; } .tx-delivered__name::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 3px; border-right: 2px solid #b4bdcd; border-bottom: 2px solid #b4bdcd; transform: rotate(-45deg); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease; } .tx-delivered__item:hover .tx-delivered__name::after, .tx-delivered__item.is-active .tx-delivered__name::after { transform: rotate(45deg); } .tx-delivered__item:hover .tx-delivered__name::after { border-color: var(--tx-delivered-accent); } .tx-delivered__item.is-active .tx-delivered__name::after { border-color: #fff; } .tx-delivered__meta { display: grid; grid-template-rows: 0fr; margin-top: 0; font-size: 14px; line-height: 1.6; color: #616161; opacity: 0; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease; } .tx-delivered__meta-content { min-height: 0; overflow: hidden; } .tx-delivered__meta-in { display: block; } .tx-delivered__item:hover .tx-delivered__meta, .tx-delivered__item.is-active .tx-delivered__meta { grid-template-rows: 1fr; margin-top: 8px; opacity: 1; } .tx-delivered__item.is-active .tx-delivered__name { color: #fff; } .tx-delivered__item.is-active .tx-delivered__meta { color: rgba(255, 255, 255, 0.88); } .tx-delivered__badges { display: grid; margin: 14px 0 16px; } .tx-delivered__badgeset { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 8px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .tx-delivered__badgeset.is-on { opacity: 1; visibility: visible; } .tx-delivered__badgeset li { display: grid; place-items: center; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--tx-delivered-accent) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tx-delivered-accent) 8%, #fff); color: var(--tx-delivered-accent); font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 1.4; font-weight: 500; text-align: center; } @media (max-width: 767px) { .tx-delivered__badgeset { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .tx-delivered__layout { grid-template-columns: minmax(0, 1fr); } .tx-delivered__showcase { position: static; } .tx-delivered__stage { border-radius: 20px; } .tx-delivered__stage { border-radius: 20px; } } @media (max-width: 560px) { .tx-delivered__nav { flex-wrap: wrap; } .tx-delivered__cta { margin-left: 0; } } .tx-solutions { padding: 80px 0 92px; background: #fff; overflow: hidden; } .tx-solutions__rail { /* No scroll-snap: it fights the continuous auto-scroll. */ overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; /* Stop scroll re-anchoring on image load, which fights the drag. */ overflow-anchor: none; /* overflow-x also makes overflow-y `auto`, so the outlined numbers — whose glyphs overflow their line box — need headroom or they get clipped. The negative margin keeps the section's spacing unchanged. */ padding: 26px 0 10px; margin-top: -26px; cursor: grab; /* Entrance: the rail slides up into place when the section arrives. */ opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; } .tx-solutions__rail.is-inview { opacity: 1; transform: none; } .tx-solutions__rail::-webkit-scrollbar { display: none; } .tx-solutions__rail.is-grabbing { cursor: grabbing; user-select: none; } .tx-solutions__rail.is-grabbing img { pointer-events: none; } .tx-solutions__track { display: flex; gap: 23px; /* Aligns the first card with the container's left edge while the rail itself stays full-bleed. */ padding: 0 max(20px, calc((100vw - 1240px) / 2)); } .tx-solcard { position: relative; flex: none; width: 428px; /* Room for the number, which straddles the top edge of the card. */ padding-top: 33px; } .tx-solcard__num { position: absolute; z-index: 2; top: 0; left: 47px; height: 66px; line-height: 66px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 94px; letter-spacing: -3.8px; color: transparent; -webkit-text-stroke: 3px var(--tx-orange); pointer-events: none; } .tx-solcard__media { position: relative; height: 428px; border-radius: 30px; overflow: hidden; box-shadow: 0 5px 28px rgba(0, 0, 0, 0.08); } .tx-solcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .tx-solcard:hover .tx-solcard__media img { transform: scale(1.05); } .tx-solcard__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000 74%); filter: blur(3px); pointer-events: none; } .tx-solcard__label { position: absolute; left: 34px; right: 34px; bottom: 30px; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; } @media (max-width: 767px) { .tx-solcard { width: 300px; padding-top: 23px; } .tx-solcard__media { height: 300px; } .tx-solcard__num { left: 30px; height: 46px; line-height: 46px; font-size: 66px; letter-spacing: -2.6px; -webkit-text-stroke-width: 2px; } .tx-solcard__label { left: 24px; right: 24px; bottom: 22px; font-size: 28px; } } /* ============================================================ RIDE FLOW — numbered step column beside the platform artwork ============================================================ */ .tx-ride { padding: 86px 0 96px; background: #fff; } .tx-ride__layout { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 56px; align-items: center; } .tx-ride__list { display: grid; gap: 34px; } .tx-ride__step { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 20px; /* stretch, not start: the icon column has to span the whole row so the connector can be positioned against its height. */ align-items: stretch; } /* ride-*.png, pack-*.png and revenue-*.png all ship with their own rounded backdrop, so the tile behind them is gone and the glyph fills the column. */ .tx-ride__icon { position: relative; display: block; width: 66px; } .tx-ride__icon img { display: block; width: 66px; height: 66px; object-fit: contain; } /* Arrow between one tile and the next. Its own height is fixed, so only the centre has to track the row: `50% + 51px` puts it midway between this tile's bottom edge and the next tile's top edge whatever the copy beside it does. */ .tx-ride__step:not(:last-child) .tx-ride__icon::before { content: ""; position: absolute; left: 32px; top: calc(50% + 51px); width: 2px; height: 22px; background: #101010; transform: translateY(-50%); } .tx-ride__step:not(:last-child) .tx-ride__icon::after { content: ""; position: absolute; left: 28.5px; top: calc(50% + 62px); width: 9px; height: 9px; border-right: 2px solid #101010; border-bottom: 2px solid #101010; transform: translateY(-50%) rotate(45deg); } .tx-ride__step h3 { font-size: 19px; font-weight: 700; } .tx-ride__step p { margin-top: 8px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 23px; } .tx-ride__media img { display: block; width: 100%; height: auto; border-radius: 22px; } @media (max-width: 991px) { .tx-ride__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* ============================================================ PRICING — three package cards + the cost-factor strip ============================================================ */ .tx-pricing { padding: 86px 0 90px; background: #f8f9ff; } .tx-pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } .tx-pack { padding: 34px 30px 36px; border: 1px solid var(--tx-line); border-radius: 16px; background: #fff; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .tx-pack:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(30, 25, 10, 0.1); } .tx-pack__icon { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto; } .tx-pack__icon img { width: 100%; height: auto; object-fit: contain; } .tx-pack__name { margin-top: 22px; font-size: 21px; font-weight: 700; } .tx-pack__price { margin-top: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--tx-accent, #fcc116); } .tx-pack__text { margin-top: 16px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 23px; } .tx-pricing__factors { margin-top: 58px; text-align: center; } .tx-pricing__factors h3 { font-size: 24px; font-weight: 700; } .tx-pricing__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; margin-top: 32px; } .tx-factor { display: grid; justify-items: center; gap: 12px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--tx-ink); } .tx-factor img { width: 56px; height: 56px; object-fit: contain; } @media (max-width: 991px) { .tx-pricing__grid { grid-template-columns: minmax(0, 1fr); } .tx-pricing__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; } } @media (max-width: 575px) { .tx-pricing__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ REVENUE MODEL — two columns of icon rows ============================================================ */ .tx-revenue { padding: 86px 0 96px; background: #fff; } .tx-revenue__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 56px; } .tx-revenue__cell { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; align-items: start; } .tx-revenue__icon { display: grid; place-items: center; width: 58px; height: 58px; } .tx-revenue__icon img { width: 100%; height: auto; object-fit: contain; border-radius: 14px; } .tx-revenue__cell h3 { font-size: 19px; font-weight: 700; } .tx-revenue__cell p { margin-top: 8px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 23px; } @media (max-width: 767px) { .tx-revenue__grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ HIRE MODELS — three icon rows on the cream band ============================================================ */ .tx-hire { padding: 80px 0 88px; background: var(--tx-cream); } .tx-hire__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; } .tx-hire__cell { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; } .tx-hire__cell img { width: 46px; height: 46px; object-fit: contain; } .tx-hire__cell h3 { font-size: 17px; font-weight: 700; } .tx-hire__cell p { margin-top: 8px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 14px; line-height: 23px; } @media (max-width: 767px) { .tx-hire__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } } /* ============================================================ BUILD SECTION — bullet list beside the CTA ============================================================ */ .tx-build__points { display: grid; gap: 12px; margin: 24px 0 32px; } .tx-build__points li { position: relative; padding-left: 22px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15.5px; line-height: 26px; color: var(--tx-body); } .tx-build__points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--tx-ink); }