/* ============================================================ Food Delivery App Development (/service/food-delivery-app-development) Light body, orange accent, blue kept only on the FAQ block. BEM-ish `fd-` prefix; scroll-reveal via `.fd-anim` on , mirroring crypto.css / ai-clone.css. ============================================================ */ /* 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(.fd-page) { overflow-x: clip; } .fd-page { --fd-orange: #f4511e; --fd-orange-lt: #ff7a45; --fd-orange-dk: #d43f0f; --fd-blue: #1a5cf5; --fd-ink: #101010; --fd-body: #6b6b6b; --fd-muted: #8a8a8a; --fd-line: #ececec; --fd-cream: #fff7f0; --fd-dark: #14141b; position: relative; background: #fff; color: var(--fd-ink); overflow-x: clip; font-family: "Gabarito", "Poppins", "Inter", system-ui, -apple-system, sans-serif; } .fd-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. */ .fd-page :where(h1, h2, h3, h4) { margin: 0; letter-spacing: -0.02em; color: var(--fd-ink); } .fd-page :where(p) { margin: 0; color: var(--fd-body); } .fd-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .fd-accent { color: var(--fd-orange); } .fd-blue { color: var(--fd-blue); } /* ---------- shared section furniture ---------- */ .fd-head { max-width: 900px; margin: 0 auto 54px; text-align: center; } .fd-head--left { margin-left: 0; text-align: left; } .fd-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(--fd-orange); } .fd-title { font-weight: 700; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.18; } .fd-lead { margin-top: 18px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 26px; color: var(--fd-body); } /* ---------- justified body copy ---------- */ /* Body paragraphs only. Headings, `.fd-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. */ .fd-about__copy p, .fd-svccard__text, .fd-sol__text, .fd-models__text, .fd-cost__text, .fd-proc__text, .fd-why__text, .fd-reach__text, .fd-faq__a, .fd-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; } /* Even steps sit on the right half of the rail with their title flush right, so the justified copy ends on that edge too — the default ragged last line would trail off toward the wrong side. */ .fd-proc__step:nth-child(even) .fd-proc__text { text-align-last: right; } /* ---------- 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 `--fd-btn-label-w`, which is how far the disc has to move. */ .fd-btn { --fd-btn-icon-w: 46px; --fd-btn-gap: 14px; --fd-btn-pad-l: 34px; --fd-btn-pad-r: 9px; position: relative; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--fd-btn-gap); width: max-content; padding: 9px var(--fd-btn-pad-r) 9px var(--fd-btn-pad-l); border: 0; border-radius: 999px; background: var(--fd-orange); color: #fff; 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); } .fd-btn:hover, .fd-btn:focus-visible { padding-left: var(--fd-btn-pad-r); padding-right: var(--fd-btn-pad-l); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(244, 81, 30, 0.32); } .fd-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); } .fd-btn__icon { display: grid; place-items: center; flex: none; width: var(--fd-btn-icon-w); height: var(--fd-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. */ .fd-btn__icon svg { width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } .fd-btn:hover .fd-btn__icon svg, .fd-btn:focus-visible .fd-btn__icon svg { transform: rotate(45deg); } .fd-btn:hover .fd-btn__label, .fd-btn:focus-visible .fd-btn__label { transform: translateX(calc(var(--fd-btn-icon-w) + var(--fd-btn-gap))); } .fd-btn:hover .fd-btn__icon, .fd-btn:focus-visible .fd-btn__icon { transform: translateX( calc(-1 * (var(--fd-btn-label-w, 190px) + var(--fd-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. */ .fd-btn--split { --fd-btn-icon-w: 44px; --fd-btn-pad-l: 28px; --fd-btn-pad-r: 8px; background: #fff; color: #101010; padding: 8px var(--fd-btn-pad-r) 8px var(--fd-btn-pad-l); } .fd-btn--split:hover, .fd-btn--split:focus-visible { background: #fff; color: #101010; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); } .fd-btn--split .fd-btn__label { font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; } .fd-btn--split .fd-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. */ .fd-btn--flat { gap: 0; padding: 21px 34px; border-radius: 12px; background: #101010; color: #fff; } .fd-btn--flat:hover, .fd-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); } .fd-btn--flat .fd-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. */ .fd-btn--flat:hover .fd-btn__label, .fd-btn--flat:focus-visible .fd-btn__label { transform: none; } .fd-btn--flat-light { background: #fff; color: #101010; } .fd-btn--flat-light:hover, .fd-btn--flat-light:focus-visible { background: #fff; color: #101010; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3); } @media (prefers-reduced-motion: reduce) { .fd-btn, .fd-btn__label, .fd-btn__icon, .fd-btn__icon svg { transition: none; } .fd-btn:hover .fd-btn__label, .fd-btn:focus-visible .fd-btn__label, .fd-btn:hover .fd-btn__icon, .fd-btn:focus-visible .fd-btn__icon, .fd-btn:hover .fd-btn__icon svg, .fd-btn:focus-visible .fd-btn__icon svg { transform: none; } .fd-btn:hover, .fd-btn:focus-visible { padding-left: var(--fd-btn-pad-l); padding-right: var(--fd-btn-pad-r); transform: none; } } /* ---------- scroll reveal ---------- */ /* Only armed once `.fd-anim` is set on (done synchronously in the head), so a no-JS visitor never gets stuck with hidden content. */ .fd-anim .fd-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .fd-anim .fd-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fd-anim .fd-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ HERO ============================================================ */ .fd-hero { position: relative; padding: 70px 0 90px; overflow: hidden; background: linear-gradient(180deg, #fffaf6 0%, #fff 78%); } /* Soft pink wash top-left and warm wash right, as in the design. */ .fd-hero::before { content: ""; position: absolute; left: -160px; top: -220px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient( circle, rgba(255, 122, 69, 0.16) 0%, rgba(255, 122, 69, 0) 68% ); pointer-events: none; } .fd-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); align-items: center; gap: 24px; } .fd-hero__badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 26px 12px 18px; border: 1px solid var(--fd-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; } .fd-hero__badge span { font-size: 20px; line-height: 1; } .fd-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. */ .fd-hero__title-italic { display: block; margin-top: 6px; font-family: "Playfair Display", "Poppins", serif; font-style: italic; font-weight: 600; color: var(--fd-orange); } .fd-hero__text { margin-top: 24px; max-width: 640px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 17px; line-height: 30px; color: #5f5f5f; } .fd-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. */ .fd-hero__media { /* How far a capsule's near edge sits from the media box's centre line. The handset is 341px wide, so 165px leaves only the capsule's rounded tail tucked under it — the label itself stays clear. */ --fd-chip-gap: 165px; position: relative; justify-self: end; width: min(700px, calc(100% + 210px)); } /* The artwork is a single phone at its natural 341x706. Scaling it up past that only softens it, so it is capped and centred and the capsules are placed against the media box around it. */ /* Above the capsules: where the two overlap the design tucks the capsule behind the handset rather than over it. */ .fd-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)); } /* Capsules are placed against the handset's centre line rather than the media box's edges, so each one keeps the same relationship to the artwork whatever the label's width. `--y` is still a percentage of the box height. */ .fd-chip { position: absolute; z-index: 1; top: var(--y); display: inline-flex; align-items: center; gap: 12px; padding: 8px 24px 8px 8px; border-radius: 999px; background: #fff; box-shadow: 0 16px 38px rgba(17, 19, 24, 0.13); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 16px; color: #1a1a1a; white-space: nowrap; /* Absolutely positioned boxes shrink-to-fit the space left beside their offset, which with `nowrap` squeezed the label straight through the right padding. `max-content` sizes the capsule to its own label instead. */ width: max-content; /* `rotate` and `translate` are independent longhands, so the design's tilt on one capsule and the shared float animation never fight over `transform`. */ rotate: var(--rot, 0deg); animation: fd-float 5s ease-in-out infinite; } .fd-chip--l { right: calc(50% + var(--fd-chip-gap)); } .fd-chip--r { left: calc(50% + var(--fd-chip-gap)); } .fd-chip:nth-child(2n) { animation-delay: 1.2s; } .fd-chip:nth-child(3n) { animation-delay: 2.1s; } /* The glyphs ship small (20-26px) and unpadded; the badge is drawn here so every capsule gets the same disc whatever the icon's own size. `--tint` is set per capsule in the blade to match the icon's hue, as the design does. */ .fd-chip img { width: 42px; height: 42px; padding: 10px; border-radius: 50%; object-fit: contain; background: var(--tint, #fdf1ec); } @keyframes fd-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @media (prefers-reduced-motion: reduce) { .fd-chip { animation: none; } } /* ============================================================ STATS ============================================================ */ .fd-stats { padding: 20px 0 70px; background: #fff; } .fd-stats__card { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; min-height: 230px; padding: 35px 20px; border-radius: 20px; background: #fff; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.07); } .fd-stat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 16px; border-right: 1px solid var(--fd-line); text-align: center; transition: transform 0.3s ease; } .fd-stat:hover { transform: translateY(-4px); } .fd-stat:last-child { border-right: 0; } .fd-stat__value { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 800; font-size: 36px; line-height: 36px; color: #111; } .fd-stat__plus { color: var(--fd-orange); } .fd-stat__label { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.6px; text-transform: uppercase; color: #777; } /* ============================================================ ABOUT — offset photo + badge, ranged copy ============================================================ */ .fd-about { position: relative; padding: 80px 0 92px; } .fd-about::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 720px 460px at 8% 14%, rgba(244, 81, 30, 0.07), transparent 68% ), radial-gradient( 520px 380px at 96% 88%, rgba(255, 122, 69, 0.06), transparent 70% ); pointer-events: none; } .fd-about > .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. */ .fd-about__grid { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 78px; align-items: stretch; } .fd-about__media { position: relative; } /* Tinted slab, offset down-left behind the frame. */ .fd-about__media::before { content: ""; position: absolute; z-index: 0; left: -28px; right: 40px; top: 40px; bottom: -28px; border-radius: 26px; background: linear-gradient( 150deg, #ffe9dd 0%, #ffdccb 55%, var(--fd-cream) 100% ); } /* Dot grid peeking past the top-right corner. */ .fd-about__media::after { content: ""; position: absolute; z-index: 2; pointer-events: none; right: -16px; top: -16px; width: 116px; height: 116px; background-image: radial-gradient( rgba(244, 81, 30, 0.4) 1.6px, transparent 1.7px ); background-size: 14px 14px; } .fd-about__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. */ .fd-about__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); } .fd-about__media:hover .fd-about__frame img { transform: scale(1.04); } /* Grounds the badge against a busy photo. */ .fd-about__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(35, 20, 14, 0) 46%, rgba(35, 20, 14, 0.44) 100% ); } .fd-about__badge { position: absolute; z-index: 3; left: -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; } .fd-about__media:hover .fd-about__badge { transform: translateY(-5px); } .fd-about__badge strong { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--fd-orange); } .fd-about__badge span { font-family: "Poppins", "Gabarito", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.42; color: var(--fd-ink); } .fd-about__badge em { font-family: "Poppins", sans-serif; font-style: italic; font-weight: 600; color: var(--fd-orange); } .fd-about__copy { align-self: center; } .fd-about 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. */ .fd-about 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(--fd-orange); } .fd-about__lead { margin-top: 22px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 17.5px; line-height: 1.68; font-weight: 500; color: var(--fd-ink); } /* Hairline rule fading down the secondary copy. */ .fd-about__body { position: relative; margin-top: 26px; padding-left: 26px; } .fd-about__body::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: linear-gradient( 180deg, var(--fd-orange), rgba(244, 81, 30, 0.04) ); } .fd-about__copy p { font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 1.72; } .fd-about__body p + p { margin-top: 18px; } .fd-about__points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .fd-about__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(--fd-ink); transition: border-color 0.25s ease, background 0.25s ease; } .fd-about__points li:hover { border-color: #ffcbb4; background: #ffeee6; } .fd-about__points svg { box-sizing: border-box; flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--fd-orange); color: #fff; } .fd-about__cta { margin-top: 38px; } /* ============================================================ SERVICES — cream band with a horizontal card rail ============================================================ */ .fd-svc { padding: 84px 0 96px; background: var(--fd-cream); overflow: hidden; } /* Continuous drift plus mouse click-drag with inertia, ported from the AI clone page's feature rail. The track holds two identical copies of the list, so wrapping at half its scroll width is visually seamless. */ .fd-svc__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; padding: 6px 0 10px; 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; } .fd-svc__rail.is-inview { opacity: 1; transform: none; } .fd-svc__rail::-webkit-scrollbar { display: none; } /* Mouse click-drag in progress */ .fd-svc__rail.is-grabbing { cursor: grabbing; user-select: none; } .fd-svc__rail.is-grabbing img { pointer-events: none; } .fd-svc__track { display: flex; gap: 26px; /* 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)); } .fd-svccard { flex: 0 0 336px; display: flex; flex-direction: column; padding: 34px 30px 38px; border: 1px solid rgba(16, 16, 16, 0.06); border-radius: 18px; background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; } .fd-svccard:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(17, 19, 24, 0.08); } .fd-svccard__media { display: grid; place-items: center; height: 210px; margin-bottom: 26px; } .fd-svccard__media img { max-width: 100%; max-height: 100%; object-fit: contain; } .fd-svccard__name { font-weight: 700; font-size: 22px; line-height: 1.28; } .fd-svccard__text { margin-top: 16px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 25px; } /* ============================================================ CTA BANDS ============================================================ */ .fd-band { position: relative; padding: 86px 0; background: var(--fd-dark); overflow: hidden; } /* Burger cut-out bleeding off the left edge, and the orange half-disc pinned to the right edge — the two pieces the design uses in place of a plate. */ .fd-band__burger { position: absolute; left: -34px; bottom: -14px; width: min(330px, 25vw); height: auto; pointer-events: none; } .fd-band__orange { position: absolute; right: 0; top: 76%; width: clamp(38px, 3.9vw, 57px); height: auto; transform: translateY(-50%); pointer-events: none; } .fd-band__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; text-align: center; } .fd-band__title { font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.2; color: #fff; } .fd-band__text { margin: 22px auto 34px; max-width: 720px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 27px; color: rgba(255, 255, 255, 0.72); } /* ============================================================ SOLUTIONS — sticky stacking cards ============================================================ */ .fd-sol { /* Site header is fixed at 76px; the extra 14px matches the gap the crypto services stack uses at this breakpoint. */ --fd-sol-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; } .fd-sol__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 `fd-reveal` (a row that had not revealed yet would pin while still transparent, letting the one underneath show through the stack). */ .fd-sol__row { position: sticky; top: var(--fd-sol-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. */ .fd-sol__row:hover { border-color: rgba(244, 81, 30, 0.32); } /* Outlined numeral, the same hollow treatment the reach list uses — big enough here to anchor the card. */ .fd-sol__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(244, 81, 30, 0.75); } .fd-sol__name { font-weight: 700; font-size: clamp(24px, 2.3vw, 33px); line-height: 1.2; } .fd-sol__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. */ .fd-sol__media { width: 100%; height: auto; border-radius: 12px; object-fit: cover; } /* ============================================================ PANELS — accented rail beside an app-window stage ============================================================ */ .fd-panels { /* Republished by the blade script from the active tab, so the rail, the window chrome and every tick move together. */ --fd-panel-accent: #f4511e; position: relative; padding: 84px 0 100px; background: linear-gradient(150deg, #fff8f4 0%, #fdf6f6 46%, #fff9f5 100%); overflow: hidden; } /* Faint dot field, so the stage has something to sit on rather than floating on flat colour. */ .fd-panels::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; } .fd-panels > .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. */ .fd-panels__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))) { .fd-panels__card { border-color: rgba(16, 16, 16, 0.07); background: #fff; } } .fd-panels__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. */ .fd-panels__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .fd-panels__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. */ .fd-panels__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); } .fd-panels__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); } .fd-panels__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; } .fd-panels__tab[aria-selected="true"]::before { width: 64%; } /* Hollow numeral, the same treatment the reach list and the process dots use. */ .fd-panels__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; } .fd-panels__tab[aria-selected="true"] .fd-panels__num { -webkit-text-stroke-color: var(--tab-accent); } .fd-panels__name { display: block; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--fd-ink); } .fd-panels__count { display: block; margin-top: 3px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 12.5px; font-weight: 500; color: var(--fd-muted); } /* Tick that fades in on the chosen chip, in place of the vertical rail's chevron. */ .fd-panels__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); } .fd-panels__tab[aria-selected="true"] .fd-panels__go { opacity: 1; transform: none; } /* ---- device ---- */ .fd-panels__device { position: relative; display: grid; place-items: center; } /* Accent halo behind the handset, recoloured with the chosen panel. */ .fd-panels__device::before { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient( circle, color-mix(in srgb, var(--fd-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. */ .fd-panels__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. */ .fd-panels__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. */ .fd-panels__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; background: linear-gradient( 180deg, color-mix(in srgb, var(--fd-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. */ .fd-panels__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); } .fd-panels__dots { display: flex; gap: 6px; } .fd-panels__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(16, 16, 16, 0.12); } .fd-panels__dots i:first-child { background: var(--fd-panel-accent); transition: background 0.4s ease; } .fd-panels__crumb { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 14.5px; color: var(--fd-ink); } .fd-panels__crumb span { color: var(--fd-muted); font-weight: 500; } .fd-panels__pill { margin-left: auto; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--fd-panel-accent) 12%, transparent); color: var(--fd-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. */ .fd-panels__sets { display: grid; padding: 30px 28px 34px; } .fd-panels__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; } .fd-panels__set.is-on { visibility: visible; } .fd-panels__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; } .fd-panels__set.is-on li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 26ms); } .fd-panels__set li:hover { background: color-mix(in srgb, var(--fd-panel-accent) 7%, transparent); } /* Tick drawn in CSS — one glyph per row would be sixty identical images. */ .fd-panels__set li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--fd-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) { .fd-panels__set li { opacity: 1; transform: none; transition: none; } } /* ============================================================ TECH STACK — chip row above a swapping panel ============================================================ */ .fd-stack { padding: 90px 0 100px; background: #fff; } /* Tabs ride above the panel rather than beside it. A side column of eight rows forced the panel to match its height, which is what left a two-item tab with a screen of dead space under it. */ .fd-stack__layout { display: flex; flex-direction: column; gap: 18px; } /* A faint warm bloom in the top-left lifts the panel off the flat section background without needing an image. */ .fd-stack__panel { display: grid; grid-template-columns: minmax(0, 1fr); padding: 32px 34px 38px; border: 1px solid rgba(16, 16, 16, 0.08); border-radius: 18px; background: radial-gradient( 62% 58% at 4% 0%, rgba(244, 81, 30, 0.08) 0%, rgba(244, 81, 30, 0) 68% ), #fff; box-shadow: 0 16px 44px rgba(17, 19, 24, 0.06); } /* Panes stack in one grid cell and only the open one is in flow, so the panel is exactly as tall as the group being shown. Groups run from three items to seven, so keeping the closed ones in flow would leave a 230px hole under the short tabs; the chip row sits above the panel and never moves, so the panel growing downwards is the less intrusive of the two. */ .fd-stack__pane { display: grid; grid-area: 1 / 1; align-content: start; min-width: 0; animation: fd-stack-in 0.3s ease both; } .fd-stack__pane.is-hidden { display: none; } @keyframes fd-stack-in { from { opacity: 0; transform: translateY(6px); } } .fd-stack__panel-title { padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--fd-line); font-weight: 700; font-size: 24px; line-height: 1.2; } /* A capped track width keeps the card size identical whatever the tab holds — a 1fr max would blow a two-item tab up into two enormous cards. `auto-fit` then drops the unused tracks so a short row centres instead of hugging the left edge with a void beside it. */ .fd-stack__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 214px)); justify-content: center; align-content: start; gap: 16px; } .fd-stack__card { display: flex; flex-direction: column; align-items: center; padding: 24px 16px 26px; border: 1px solid rgba(16, 16, 16, 0.08); border-radius: 14px; background: #fcfcfd; text-align: center; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .fd-stack__card:hover { border-color: rgba(244, 81, 30, 0.4); background: rgba(244, 81, 30, 0.04); transform: translateY(-4px); } /* The well is sized so a supplied mark and the monogram fallback occupy the same footprint. */ .fd-stack__logo { display: grid; place-items: center; width: 64px; height: 64px; } .fd-stack__logo img { width: 100%; height: 100%; object-fit: contain; } .fd-stack__card-name { margin-top: 16px; font-weight: 700; font-size: 16px; line-height: 1.3; } .fd-stack__card-text { margin-top: 8px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 12px; line-height: 18px; color: var(--fd-muted); } /* Monogram stand-in for a tech whose brand mark has not been supplied yet. */ .fd-stack__mono { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid rgba(244, 81, 30, 0.22); border-radius: 50%; background: rgba(244, 81, 30, 0.08); color: var(--fd-orange); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.02em; } /* Scrolls sideways rather than wrapping, so the chip row stays one line at every width and the panel below never shifts down a step. `order` lifts it above the panel, which stays first in the DOM so the content is read before the controls. */ .fd-stack__tabs { order: -1; display: flex; gap: 6px; padding: 8px; border: 1px solid rgba(16, 16, 16, 0.08); border-radius: 16px; background: #f7f8fb; overflow-x: auto; scrollbar-width: none; } .fd-stack__tabs::-webkit-scrollbar { display: none; } .fd-stack__tab { display: flex; align-items: center; justify-content: center; flex: 1 0 auto; padding: 13px 18px; border: 0; border-radius: 11px; background: transparent; color: #5b5b5b; font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .fd-stack__tab:hover { background: rgba(16, 16, 16, 0.04); color: var(--fd-ink); } .fd-stack__tab[aria-selected="true"] { background: linear-gradient(90deg, var(--fd-orange-lt) 0%, var(--fd-orange) 100%); color: #fff; box-shadow: 0 10px 24px rgba(244, 81, 30, 0.3); } /* ============================================================ BUSINESS MODELS — two-column cards, icon left ============================================================ */ .fd-models { padding: 86px 0 96px; } .fd-models__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; } .fd-models__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; } .fd-models__cell:hover { transform: translateY(-5px); border-color: rgba(244, 81, 30, 0.35); box-shadow: 0 18px 40px rgba(17, 19, 24, 0.08); } .fd-models__icon { width: 56px; height: 56px; object-fit: contain; } .fd-models__name { font-weight: 700; font-size: 24px; line-height: 1.25; } .fd-models__text { margin-top: 14px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 26px; } /* ============================================================ COST — cream band, image left ============================================================ */ .fd-cost { padding: 90px 0; background: var(--fd-cream); } .fd-cost__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; } .fd-cost__media { width: 100%; height: auto; border-radius: 8px; object-fit: cover; } .fd-cost__title { font-weight: 700; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.18; } .fd-cost__text { margin: 22px 0 34px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 27px; } /* ============================================================ PROCESS — centred rail, alternating steps ============================================================ */ .fd-proc { padding: 90px 0 100px; /* The filled dot and the completed rail share one orange; the pending dot and rail share one pale peach. */ --fd-proc-done: var(--fd-orange); --fd-proc-pending: #ffdbcb; } .fd-proc__list { position: relative; margin-top: 40px; } /* The rail is drawn as one connector per step rather than once on the list: each runs from its own dot's centre down to the next dot's centre, so the rail starts at the first dot and stops at the last, as the design does. */ .fd-proc__step::before { content: ""; position: absolute; left: 50%; top: 50%; bottom: -50%; width: 2px; transform: translateX(-50%); background: #e6e6e6; } .fd-proc__step:last-child::before { content: none; } .fd-proc__step.is-done::before { background: var(--fd-proc-done); } /* The step the reader is level with fills only halfway to the next dot. */ .fd-proc__step.is-active::before { background: linear-gradient( 180deg, var(--fd-proc-done) 0%, var(--fd-proc-done) 46%, #e6e6e6 50%, #e6e6e6 100% ); } .fd-proc__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; padding: 78px 0; } /* Steps the reader has not reached yet sit back; the one they are level with comes forward. Scoped to `.fd-anim` (set in the head whenever scripting is on) — without JS nothing is ever marked active and every step would stay dimmed. */ .fd-anim .fd-proc__media, .fd-anim .fd-proc__detail { transform: scale(0.95); transition: opacity 0.35s ease, transform 0.35s ease; } .fd-anim .fd-proc__media, .fd-anim .fd-proc__detail { opacity: 0.45; } .fd-anim .fd-proc__step.is-active .fd-proc__media, .fd-anim .fd-proc__step.is-active .fd-proc__detail { opacity: 1; transform: none; } /* The artwork goes black until its step is reached, rather than just fading. The icons ship as flat #f04800 line art on transparent, so `brightness(0)` zeroes the colour channels and leaves the alpha edges intact — no second set of black images needed. It would silhouette a multi-colour icon, so this holds only while the set stays single-colour. */ .fd-anim .fd-proc__media img { filter: brightness(0); transition: filter 0.35s ease; } .fd-anim .fd-proc__step.is-active .fd-proc__media img { filter: none; } .fd-proc__media { display: grid; place-items: center; padding: 0 40px; } .fd-proc__media img { width: 118px; height: 118px; object-fit: contain; } .fd-proc__detail { padding: 0 40px; } /* Odd steps put the artwork left of the rail and the copy right; even steps mirror, with the copy right-aligned so it reads back toward the rail. Grid `order` does the swap so the DOM stays in reading order. */ .fd-proc__step:nth-child(odd) .fd-proc__media { order: 1; } .fd-proc__step:nth-child(odd) .fd-proc__dot { order: 2; } .fd-proc__step:nth-child(odd) .fd-proc__detail { order: 3; text-align: left; } .fd-proc__step:nth-child(even) .fd-proc__detail { order: 1; text-align: right; } .fd-proc__step:nth-child(even) .fd-proc__dot { order: 2; } .fd-proc__step:nth-child(even) .fd-proc__media { order: 3; } /* Sits above the rail it interrupts, and the numeral is a hollow glyph — the design draws it as an outline, which `-webkit-text-stroke` reproduces without shipping an image per step. Poppins, not Gabarito: the stroke is centred on the glyph contour and Gabarito's "1" fills in solid at this size. */ .fd-proc__dot { position: relative; z-index: 1; display: grid; place-items: center; justify-self: center; width: 78px; height: 78px; border-radius: 50%; background: var(--fd-proc-pending); font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 44px; color: transparent; -webkit-text-stroke: 1.7px rgba(244, 81, 30, 0.5); transition: background 0.35s ease, -webkit-text-stroke-color 0.35s ease; } .fd-proc__step.is-done .fd-proc__dot, .fd-proc__step.is-active .fd-proc__dot { background: var(--fd-proc-done); -webkit-text-stroke-color: #fff; } .fd-proc__title { font-weight: 700; font-size: 24px; line-height: 1.3; } .fd-proc__text { margin-top: 12px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 26px; } /* ============================================================ WHY CHOOSE — cream band, three-up icon cards ============================================================ */ .fd-why { padding: 86px 0 100px; background: var(--fd-cream); } .fd-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .fd-why__card { padding: 36px 34px 42px; border: 1px solid rgba(16, 16, 16, 0.07); background: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; } .fd-why__card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(17, 19, 24, 0.08); } .fd-why__icon { display: block; width: 66px; height: 66px; margin-bottom: 56px; object-fit: contain; } .fd-why__title { font-weight: 700; font-size: 26px; line-height: 1.25; } .fd-why__text { margin-top: 20px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 26px; } /* ============================================================ REACH — scroll-driven numbered list ============================================================ */ .fd-reach { padding: 90px 0 96px; } .fd-reach__list { margin-top: 46px; } .fd-reach__row { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 20px; min-height: 132px; padding: 22px 0; border-bottom: 1px solid var(--fd-line); } .fd-reach__row:first-child { border-top: 1px solid var(--fd-line); } /* The row the reader is level with opens: its numeral and title go orange and the description fades in beside them. The description keeps its space whether or not the row is open, and the row carries a min-height to match — animating the row's height instead would relayout the whole list on every frame and shift the rows below out from under the scroll. Only opacity and transform change here, so nothing reflows. */ .fd-reach__text { font-family: "Poppins", "Gabarito", sans-serif; font-size: 15px; line-height: 24px; color: var(--fd-body); opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } .fd-reach__row.is-active .fd-reach__text { opacity: 1; transform: none; } /* The open row also steps up in size, so it reads as the one in focus even before the description has finished unfolding. */ .fd-reach__row.is-active .fd-reach__no { transform: scale(1.2); -webkit-text-stroke-color: var(--fd-orange); } .fd-reach__row.is-active .fd-reach__name { transform: scale(1.12); color: var(--fd-orange); } /* Outlined numeral — a hollow glyph, which -webkit-text-stroke reproduces without shipping an image per row. Poppins for the same reason as the process dots: Gabarito's "1" fills in solid at the apex once the stroke is wider than the wedge there. */ .fd-reach__no { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 700; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px rgba(16, 16, 16, 0.4); /* Scaled rather than resized: `font-size` relayouts on every frame, which both stutters the animation and rewraps the title mid-transition. `transform` is composited, so the text keeps its original line breaks. */ transform-origin: left center; will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-text-stroke-color 0.35s ease; } .fd-reach__name { font-weight: 600; font-size: clamp(19px, 2vw, 26px); line-height: 1.3; transform-origin: left center; will-change: transform; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease; } /* ============================================================ FINAL CTA — food plate, orange headline ============================================================ */ /* The plate is 2048x768; the padding is tuned so the section lands near that ratio at desktop width and `cover` has almost nothing to crop. */ .fd-cta { position: relative; padding: clamp(70px, 8.6vw, 124px) 0; overflow: hidden; background: #fdf0e3; } .fd-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .fd-cta__inner { position: relative; max-width: 780px; margin: 0 auto; text-align: center; } .fd-cta__title { font-weight: 700; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.16; color: var(--fd-orange); } .fd-cta__text { margin: 22px auto 36px; max-width: 700px; font-family: "Poppins", "Gabarito", sans-serif; font-size: 16px; line-height: 27px; color: #4a4a4a; } /* ============================================================ FAQ ============================================================ */ .fd-faq { padding: 70px 0 110px; background: linear-gradient( 140deg, rgb(244, 246, 253) 0%, rgb(238, 242, 252) 45%, rgb(247, 248, 253) 100% ); } .fd-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. */ .fd-faq__aside { position: sticky; top: 110px; } .fd-faq__title { font-family: "Poppins", "Gabarito", sans-serif; font-weight: 600; font-size: clamp(38px, 5.3vw, 77px); line-height: 1.25; color: #000; } .fd-faq__promo { margin-top: 110px; padding: 32px 30px; border-radius: 20px; background: linear-gradient(241deg, #196dff 30%, #001da0 100%); color: #fff; } .fd-faq__promo h3 { font-size: 24px; line-height: 1.3; font-weight: 500; color: #fff; } .fd-faq__promo p { margin: 10px 0 26px; max-width: 494px; font-size: 16px; line-height: 21px; color: rgba(255, 255, 255, 0.75); } .fd-faq__list { display: flex; flex-direction: column; gap: 18px; } .fd-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; } .fd-faq__item[open] { background: #fff; border-color: rgba(55, 55, 55, 0.1); box-shadow: 0 10px 30px rgba(17, 19, 24, 0.05); } .fd-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; } .fd-faq__q::-webkit-details-marker { display: none; } /* Plus that becomes a minus when the item is open. */ .fd-faq__mark { position: relative; flex: none; width: 26px; height: 26px; } .fd-faq__mark::before, .fd-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; } .fd-faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); } .fd-faq__item[open] .fd-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. */ .fd-faq__a-wrap { height: 0; opacity: 0; overflow: hidden; transition: height 0.3s ease, opacity 0.3s ease; } .fd-faq__item[open] .fd-faq__a-wrap { height: auto; opacity: 1; } .fd-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) { .fd-hero__media { --fd-chip-gap: 150px; } .fd-chip { gap: 10px; padding: 7px 18px 7px 7px; font-size: 14.5px; } .fd-chip img { width: 36px; height: 36px; padding: 8px; } } /* 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) { .fd-hero__media { --fd-chip-gap: 118px; } .fd-hero__phone { width: min(100%, 280px); } .fd-chip { gap: 9px; padding: 6px 13px 6px 6px; font-size: 13px; } .fd-chip img { width: 30px; height: 30px; padding: 7px; } } @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. */ .fd-about__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; } .fd-about__badge { left: -16px; max-width: 258px; } .fd-sol__row { gap: 56px; } } @media (max-width: 991px) { .fd-hero { padding: 40px 0 70px; } .fd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 54px; } .fd-hero__media { justify-self: center; width: min(100%, 520px); --fd-chip-gap: 150px; } .fd-cost__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. */ .fd-sol__row { position: static; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 24px 30px; } .fd-sol__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. */ .fd-about__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .fd-about__frame { min-height: 0; aspect-ratio: 1122 / 1402; } .fd-about__media::before { left: 18px; right: 18px; top: 28px; bottom: -18px; } .fd-about__media::after { right: -8px; top: -10px; width: 88px; height: 88px; } .fd-about__badge { left: 16px; bottom: 18px; } .fd-models__grid, .fd-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* The numeral column collapses onto the title so the description keeps a readable measure. */ .fd-reach__row { grid-template-columns: 96px minmax(0, 1fr); gap: 16px 18px; min-height: 0; } /* Stacked, the space reserved for a hidden description reads as a hole in the list, so every description just shows. The scroll-driven reveal is a desktop affordance. */ .fd-reach__text { grid-column: 2; opacity: 1; transform: none; } /* 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. */ .fd-panels__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .fd-panels__device { order: 1; } .fd-panels__device::before { width: 300px; height: 300px; } .fd-panels__device img { max-width: 460px; } .fd-panels__nav { display: flex; gap: 10px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; } .fd-panels__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. */ .fd-panels__tab { flex: 0 0 auto; width: auto; gap: 12px; padding: 14px 18px; } .fd-panels__tab:hover { transform: none; } .fd-panels__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. */ .fd-panels__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. */ .fd-stack__tab { flex: 0 0 auto; padding: 12px 16px; font-size: 14px; } .fd-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; } .fd-faq__aside { position: static; } .fd-faq__promo { margin-top: 34px; } /* The centred rail collapses to a single left-hand column. */ .fd-proc__step { grid-template-columns: 62px minmax(0, 1fr); gap: 22px; padding: 30px 0; } .fd-proc__step::before { left: 31px; } .fd-proc__step:nth-child(odd) .fd-proc__dot, .fd-proc__step:nth-child(even) .fd-proc__dot { order: 1; width: 62px; height: 62px; font-size: 34px; } .fd-proc__step:nth-child(odd) .fd-proc__detail, .fd-proc__step:nth-child(even) .fd-proc__detail { order: 2; padding: 0; text-align: left; } .fd-proc__step:nth-child(even) .fd-proc__text { text-align-last: auto; } /* The artwork is decorative once the rail is single-column. */ .fd-proc__media { display: none; } } @media (max-width: 760px) { .fd-stats__card { grid-template-columns: repeat(2, 1fr); row-gap: 26px; padding: 32px 12px; } .fd-stat:nth-child(2n) { border-right: 0; } .fd-models__grid, .fd-why__grid { grid-template-columns: minmax(0, 1fr); } .fd-panels__set { grid-template-columns: minmax(0, 1fr); gap: 2px; } .fd-panels__card { padding: 16px; border-radius: 20px; } .fd-panels__sets { padding: 20px 14px 24px; } .fd-panels__chrome { padding: 14px 16px; gap: 10px; } .fd-panels__crumb span { display: none; } .fd-stack__panel { padding: 26px 20px 30px; } .fd-svccard { flex-basis: 280px; } .fd-band__burger { display: none; } .fd-faq__item { padding: 20px 24px; } .fd-btn { --fd-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. */ .fd-btn__label { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: normal; text-align: left; } .fd-btn--flat, .fd-btn--flat:hover, .fd-btn--flat:focus-visible { padding: 17px 26px; } .fd-btn--flat .fd-btn__label { font-size: 15px; } /* The label wraps at this width, so the swap would overshoot the pill. */ .fd-btn:hover, .fd-btn:focus-visible { padding-left: var(--fd-btn-pad-l); padding-right: var(--fd-btn-pad-r); } .fd-btn:hover .fd-btn__label, .fd-btn:focus-visible .fd-btn__label, .fd-btn:hover .fd-btn__icon, .fd-btn:focus-visible .fd-btn__icon { transform: none; } } @media (max-width: 640px) { /* The capsules are placed off the phone's edges; below this width they run past the viewport and collide with each other, so the plate stands alone. */ .fd-chip { display: none; } }