/* ============================================================ FastCloud — Premium site background ------------------------------------------------------------ A single, reusable backdrop for the whole website. Link this AFTER css/fastcloud-website.webflow.css on any page: It paints ONE continuous gradient across the full page height and makes the standard section wrappers transparent, so the backdrop flows through every section with no hard seams between them. Loaded last, it overrides the section backgrounds defined in the webflow stylesheet — remove this and the site reverts to its original per-section backgrounds. ============================================================ */ /* Flash / overscroll guard — matches the gradient's top colour */ html { background-color: #080c18; } /* The premium gradient, stretched across the ENTIRE page height. Soft radial accents (blue + violet) add depth so it never reads as a flat ramp. background-size:100% 100% maps it to the full document, giving one continuous top-to-bottom degrade. Lives on so it stays a static fallback (visible in the visual editor and when JS/WebGL is off); the animated #site-bg canvas paints over it on the live page. */ body { background: radial-gradient(62% 30% at 80% 9%, rgba(59, 130, 246, 0.12), transparent 70%), radial-gradient(58% 26% at 12% 30%, rgba(139, 92, 246, 0.10), transparent 72%), radial-gradient(64% 30% at 86% 62%, rgba(14, 162, 232, 0.09), transparent 72%), radial-gradient(60% 28% at 18% 84%, rgba(124, 92, 255, 0.07), transparent 74%), linear-gradient(180deg, #080c18 0%, #0a1530 20%, #0d2049 40%, #0c1c3e 58%, #0a1530 76%, #070a14 100%); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: fixed; } /* Site-wide animated background canvas — fixed behind all content. width/height use % (not vw/vh) so the canvas never includes the scrollbar width and can't cause horizontal overflow. */ .site-bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; } /* Content rides above the canvas; transparent so the terrain shows through. */ .site-outerwrapper { position: relative; z-index: 1; background: transparent; } /* Every section rides fully transparently on top of the backdrop, so the animated #site-bg terrain shows through the entire page. The compound selectors (.section-content.studio, .section-content-2.fc) match the specificity of the webflow rules they override; loaded last, they win. */ .section-hero.home, .section-content, .section-content-2, .section-content.cta, .section-content.studio, .section-content-2.fc, .footer-section { background: transparent; } /* Per-section decorative overlays off — let the terrain show through cleanly. */ .section-bg-overlay { background: transparent; } /* Hero corner-glow pseudo-elements off: they tinted the hero (so it read as a separate background) and, with their left/right:-8% offsets, spilled past the viewport edge — a source of horizontal scroll. */ .section-hero.home::before, .section-hero.home::after { display: none; } /* Hard guard: the page never scrolls horizontally beyond the client width. */ html, body { overflow-x: hidden; max-width: 100%; } /* ============================================================ Scroll-reveal motion for page content (progressive enhancement). A tiny script adds .js-anim to ONLY when JS runs and reduced-motion is off — so the visual editor and no-JS / reduced- motion users always see content fully visible (no hidden state). reveal.js then adds .is-visible as each element scrolls into view. ============================================================ */ .js-anim .section-hero.home .header-content > *, .js-anim .section-content-2 .header-content > *:not([data-w-id]), .js-anim .section-content.studio .header-content > *:not([data-w-id]), .js-anim .card-section > .card, .js-anim .narrow-copy > *, .js-anim .faq-list > .faq-item, .js-anim .contact-split > * { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0ms); } .js-anim .is-visible { opacity: 1 !important; transform: none !important; } /* Pipeline assembles on first view: input slides in from the left, the wires draw outward, the engine scales up, the output slides in from the right — staggered left→right by reveal.js so it reads as data flowing through. The shared `.is-visible` rule above settles every piece to its final state. */ .js-anim .flow > * { opacity: 0; transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0ms); } .js-anim .flow .flow-in { transform: translateX(-30px); } .js-anim .flow .flow-out { transform: translateX(30px); } .js-anim .flow .flow-engine { transform: translateY(22px) scale(.93); } .js-anim .flow .flow-link { transform: scaleX(0); transform-origin: left center; } /* Gentle interactive lift on generic clickable cards elsewhere on the site. (The case-studies grid below has its own, richer interaction model and is intentionally excluded — its lift/tilt lives on .company-inner so it isn't cancelled by the .is-visible reveal's `transform: none`.) */ .card.clickable:not(.company) { transition: transform .25s ease, box-shadow .25s ease; } .card.clickable:not(.company):hover { transform: translateY(-5px); } /* Premium feature cards — same look + effects as the case-study cards (glass fill, blue border, hover glow, animated top-edge energy trail). Applied to the Enterprise feature row and the "Two ways to build" cards. Scoped so the case-studies grid keeps its own richer model. */ #enterprise .card-section:not(.case-studies) .card, .platform .card-section .card { position: relative; overflow: hidden; border: 1px solid rgba(46, 120, 165, 0.45); background: linear-gradient(168deg, rgba(13, 25, 48, 0.62) 0%, rgba(8, 13, 26, 0.42) 100%); -webkit-backdrop-filter: blur(7px) saturate(118%); backdrop-filter: blur(7px) saturate(118%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 36px -22px rgba(0, 0, 0, 0.7); transition: transform .25s ease, border-color .35s ease, box-shadow .35s ease; } #enterprise .card-section:not(.case-studies) .card:hover, .platform .card-section .card:hover { transform: translateY(-5px); border-color: rgba(14, 162, 232, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(14, 162, 232, 0.25), 0 22px 48px -20px rgba(0, 0, 0, 0.75), 0 18px 60px -24px rgba(14, 162, 232, 0.55); } #enterprise .card-section:not(.case-studies) .card-text h3, .platform .card-section .card-text h3 { font-weight: 600; } #enterprise .card-section:not(.case-studies) .card-text .paragraph-3, .platform .card-section .card-text .paragraph-3 { color: #9fb4d0; } #enterprise .card-section:not(.case-studies) .card:hover::before, .platform .card-section .card:hover::before { opacity: .9; } #enterprise .card-section:not(.case-studies) .card::before, .platform .card-section .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(14, 162, 232, 0.0) 12%, rgba(141, 196, 255, 0.85) 50%, rgba(14, 162, 232, 0.0) 88%, transparent 100%); background-size: 220% 100%; background-position: 120% 0; opacity: .35; animation: caseTrail 6s linear infinite; pointer-events: none; } /* ============================================================ CASE STUDIES — premium, interactive customer-story grid ------------------------------------------------------------ Static structure + styling live here (editor-visible stylesheet). The genuinely dynamic bits — cursor-following spotlight, cursor tilt, and scroll parallax — are driven by case-studies.js, which only sets CSS custom properties (--mx/--my, --rx/--ry, --py). The reveal/stagger entrance is handled by the shared reveal.js targeting `.card-section > .card`. ============================================================ */ /* Hero-style animated accent for section headings — same flowing blue→violet→ magenta gradient + soft glow as the hero's "Speed of Thought", so headings read as part of the same visual language. Reuses the hero's `accentFlow` keyframes (defined in css/fastcloud-website.webflow.css). Opt-in per heading via the `hero-accent` class on a .text-span-50 span. */ .text-span-50.hero-accent { background-image: linear-gradient(105deg, #0ea2e8 0%, #7b6ef2 32%, #b574ea 58%, #7b6ef2 82%, #0ea2e8 100%); background-size: 200% auto; background-position: 0% center; animation: accentFlow 20s linear infinite; filter: drop-shadow(0 2px 16px rgba(124, 108, 240, 0.13)); } @media (prefers-reduced-motion: reduce) { .text-span-50.hero-accent { animation: none; } } /* Pull the Integrity testimonial closer to the "Built for companies like yours" header + grid that follow it, and align its left/right edges with the case-studies grid below (same width/max-width as .card-section, no side padding). Scoped to #case-studies (the wrapper on the enterprise page) so shared webflow .quote/.middle rules on other pages are untouched. */ #case-studies .header-content.quote { width: 90%; /* match .card-section */ max-width: 1300px; /* match .card-section */ margin-bottom: 4px; padding-left: 0; padding-right: 0; } #case-studies .header-content.middle { padding-top: 16px; } /* --- Grid: a uniform field of equal-size customer stories (3 per row) --- */ .card-section.wrap.case-studies { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; align-items: stretch; } /* Outer is just a reveal + perspective container; the visible glass card is .company-inner, so hover transforms aren't clobbered by .is-visible. */ .card-section.wrap.case-studies .card.company { width: auto; max-width: none; min-height: 0; margin: 0; padding: 0; background: transparent; border: none; grid-column: span 4; /* uniform: 3 cards per row */ perspective: 1000px; display: flex; } /* --- The glass card itself --- */ .case-studies .company-inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 28px 30px 28px; border-radius: 14px; border: 1px solid rgba(46, 120, 165, 0.45); background: linear-gradient(168deg, rgba(13, 25, 48, 0.62) 0%, rgba(8, 13, 26, 0.42) 100%); -webkit-backdrop-filter: blur(7px) saturate(118%); backdrop-filter: blur(7px) saturate(118%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 36px -22px rgba(0, 0, 0, 0.7); overflow: hidden; transition: transform .25s ease, border-color .35s ease, box-shadow .35s ease; } /* --- Hover state: subtle lift, brighter border, blue glow, trail --- */ .case-studies .card.company:hover .company-inner { transform: translateY(-5px); border-color: rgba(14, 162, 232, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(14, 162, 232, 0.25), 0 22px 48px -20px rgba(0, 0, 0, 0.75), 0 18px 60px -24px rgba(14, 162, 232, 0.55); } .case-studies .card.company:hover .company-inner::before { opacity: .9; } /* Energy-flow trail: a luminous line that streams across the top edge, reinforcing the "data moving through the system" feel. Always subtly alive; intensifies on hover. (Static keyframes → lives in CSS.) */ .case-studies .company-inner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(14, 162, 232, 0.0) 12%, rgba(141, 196, 255, 0.85) 50%, rgba(14, 162, 232, 0.0) 88%, transparent 100%); background-size: 220% 100%; background-position: 120% 0; opacity: .35; animation: caseTrail 6s linear infinite; pointer-events: none; } @keyframes caseTrail { to { background-position: -120% 0; } } /* Cursor-following spotlight inside the card (position from JS via --mx/--my). */ .case-studies .company-inner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 240px circle at var(--mx, 50%) var(--my, 0%), rgba(14, 162, 232, 0.18), rgba(123, 110, 242, 0.08) 38%, transparent 62%); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .case-studies .card.company:focus-visible .company-inner { border-color: rgba(14, 162, 232, 0.85); outline: 2px solid rgba(141, 196, 255, 0.7); outline-offset: 3px; } /* Keep real content crisply above the spotlight/trail overlays. */ .case-studies .company-inner > *:not(.card-cta) { position: relative; z-index: 1; } .case-studies .card-cta { z-index: 2; } /* --- Card content --- */ .case-studies .company-head { margin-bottom: 20px; } .case-studies .company-logo { height: 32px; width: auto; max-width: 160px; object-fit: contain; display: block; margin: 0; opacity: .92; } .case-studies .company-tag { display: none; } /* Quote is the hero of the card — large, bold, white. */ .case-studies .company-quote { color: #f1f6ff; font-style: normal; font-weight: 600; font-size: 18px; line-height: 28px; text-align: left; margin: 0 0 12px; } .case-studies .company-person { color: #93a8c4; font-size: 13px; line-height: 19px; text-align: left; margin: 0 0 20px; padding-top: 0; } .case-studies .company-person strong { color: #e6eefb; font-weight: 600; display: block; margin-bottom: 2px; } .case-studies .company-divider { width: 100%; height: 1px; background: rgba(141, 196, 255, 0.12); margin: 0 0 20px; flex-shrink: 0; } /* Metrics below the divider. */ .case-studies .company-metrics { display: flex; flex-wrap: wrap; gap: 20px 26px; width: 100%; margin: 0 0 20px; padding: 0; border-top: none; } .case-studies .metric { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; } .case-studies .metric-value { font-family: Poppins, sans-serif; font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: -0.01em; color: #0ea2e8; -webkit-text-fill-color: transparent; background-image: linear-gradient(114deg, #8dc4ff, #0ea2e8 82%); -webkit-background-clip: text; background-clip: text; } .case-studies .metric-label { margin-top: 7px; color: #93a8c4; font-size: 11.5px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; } /* Outcome text below metrics — lighter, supporting role. */ .case-studies .company-outcome { color: #c2d4ec; font-size: 14px; line-height: 22px; font-weight: 400; margin: 0 0 24px; } /* CTA: hidden by default, fades in on hover (layout space always reserved). */ .case-studies .card-cta { position: static; display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(14, 162, 232, 0.45); color: #8dc4ff; font-family: Inter, sans-serif; font-size: 13.5px; font-weight: 500; letter-spacing: .01em; opacity: 0; pointer-events: none; margin-top: auto; transition: opacity .25s ease, border-color .25s ease, background .25s ease; } .case-studies .card-cta-arrow { transition: transform .3s ease; } .case-studies .card.company:hover .card-cta, .case-studies .card.company:focus-visible .card-cta { opacity: 1; pointer-events: auto; border-color: rgba(14, 162, 232, 0.8); background: rgba(14, 162, 232, 0.08); } .case-studies .card.company:hover .card-cta-arrow { transform: translateX(4px); } /* --- Responsive --- */ @media screen and (max-width: 991px) { .card-section.wrap.case-studies { grid-template-columns: repeat(6, 1fr); } .card-section.wrap.case-studies .card.company { grid-column: span 3; } /* 2 per row */ } @media screen and (max-width: 767px) { .card-section.wrap.case-studies { grid-template-columns: 1fr; gap: 16px; } .card-section.wrap.case-studies .card.company { grid-column: span 1; } .case-studies .company-inner { padding: 24px 22px 24px; } } /* ============================================================ CASE STUDIES — carousel mode ------------------------------------------------------------ Opt-in via `.cs-carousel` on the grid container. The cards move into a horizontal, scroll-snapping track (.cs-track) with prev/next arrows. Scrolling is native (touch swipe / trackpad / scrollbar); the arrows are wired by case-studies-carousel.js, which only calls scrollBy() and toggles their disabled state. ============================================================ */ .card-section.wrap.case-studies.cs-carousel { display: block; /* was grid */ position: relative; padding-bottom: 8px; } .cs-carousel .cs-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 2px 20px; /* room for the hover lift + scrollbar */ -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(46, 120, 165, 0.6) transparent; } .cs-carousel .cs-track::-webkit-scrollbar { height: 6px; } .cs-carousel .cs-track::-webkit-scrollbar-thumb { background: rgba(46, 120, 165, 0.6); border-radius: 3px; } /* Fixed-width cards that snap to the start edge (override the grid sizing). */ .card-section.wrap.case-studies.cs-carousel .cs-track .card.company { flex: 0 0 360px; width: 360px; max-width: 360px; grid-column: auto; scroll-snap-align: start; perspective: 1000px; display: flex; } /* --- Prev / next arrows --- */ .cs-carousel .cs-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(46, 120, 165, 0.5); background: rgba(10, 18, 35, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #e6eefb; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s ease, border-color .2s ease, opacity .2s ease; } .cs-carousel .cs-nav:hover { background: rgba(14, 162, 232, 0.25); border-color: rgba(14, 162, 232, 0.85); } .cs-carousel .cs-prev { left: -8px; } .cs-carousel .cs-next { right: -8px; } .cs-carousel .cs-nav:disabled { opacity: 0; pointer-events: none; } @media screen and (max-width: 991px) { .card-section.wrap.case-studies.cs-carousel .cs-track .card.company { flex-basis: 320px; width: 320px; max-width: 320px; } } @media screen and (max-width: 767px) { /* On touch, lean on swipe and hide the arrows; let the next card peek. */ .cs-carousel .cs-nav { display: none; } .card-section.wrap.case-studies.cs-carousel .cs-track .card.company { flex-basis: 85%; width: 85%; max-width: 85%; } } /* Honour reduced-motion: no tilt, parallax, spotlight motion, or trail. */ @media (prefers-reduced-motion: reduce) { .case-studies .company-inner { transform: none !important; transition: border-color .2s ease, box-shadow .2s ease; } .case-studies .company-inner::before { animation: none; } .case-studies .card-cta { transition: border-color .2s ease; } } /* ============================================================ STUDIO — Workflow as an INPUT -> ENGINE -> OUTPUT pipeline ------------------------------------------------------------ FC Studio is the centerpiece "engine" that turns a Webflow export (input, left) into AWS-deployed code (output, right), with glowing connectors and traveling pulses showing flow direction. Pure CSS (renders in the visual editor); collapses to a vertical stack on narrow screens. ============================================================ */ .flow { position: relative; z-index: 2; display: grid; grid-template-columns: 220px 1fr minmax(320px, 360px) 1fr 220px; align-items: stretch; width: 94%; max-width: 1180px; margin: 26px auto 6px; } /* --- Input / Output cards --- */ .flow-io { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 22px 18px 20px; border-radius: 16px; border: 1px solid rgba(46, 120, 165, 0.4); background: linear-gradient(168deg, rgba(13, 25, 48, 0.55), rgba(8, 13, 26, 0.4)); -webkit-backdrop-filter: blur(8px) saturate(115%); backdrop-filter: blur(8px) saturate(115%); box-shadow: 0 16px 40px -26px rgba(0, 0, 0, 0.8); transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .3s ease; } .flow-io:hover { transform: translateY(-4px); border-color: rgba(14, 162, 232, 0.7); box-shadow: 0 22px 48px -24px rgba(14, 162, 232, 0.5); } .flow-io-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6fa0c8; margin-bottom: 6px; } .flow-io-logo { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 14px; border: 1px solid rgba(46, 120, 165, 0.45); background: linear-gradient(168deg, rgba(13, 25, 48, 0.9), rgba(8, 13, 26, 0.7)); box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.8); } .flow-io-logo img { width: auto; height: auto; max-width: 32px; max-height: 26px; object-fit: contain; } .flow-io-name { font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; color: #eaf2ff; } .flow-io-desc { font-size: 12px; line-height: 17px; color: #93a8c4; } /* Input card: multiple starting options instead of a single path */ .flow-io-options { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; width: 100%; } .flow-io-option { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(46, 120, 165, 0.32); background: linear-gradient(168deg, rgba(13, 25, 48, 0.6), rgba(8, 13, 26, 0.4)); text-align: left; transition: border-color .25s ease, transform .25s ease; } .flow-io-option:hover { border-color: rgba(14, 162, 232, 0.6); transform: translateX(2px); } .flow-io-option-ic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(46, 120, 165, 0.4); background: linear-gradient(168deg, rgba(13, 25, 48, 0.9), rgba(8, 13, 26, 0.7)); } .flow-io-option-ic img { width: auto; height: auto; max-width: 16px; max-height: 14px; object-fit: contain; } .flow-io-option-label { font-size: 11.5px; font-weight: 500; line-height: 1.25; color: #cdd9ec; } /* --- Glowing connectors with traveling pulses (flow direction) --- */ .flow-link { position: relative; align-self: center; height: 2px; margin: 0 6px; border-radius: 2px; background: linear-gradient(90deg, rgba(14, 162, 232, 0) 0%, rgba(14, 162, 232, 0.55) 22%, rgba(123, 110, 242, 0.6) 78%, rgba(123, 110, 242, 0) 100%); } .flow-link::after { content: ""; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; border-top: 2px solid rgba(141, 196, 255, 0.85); border-right: 2px solid rgba(141, 196, 255, 0.85); transform: translateY(-50%) rotate(45deg); } .flow-pulse { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #cdeeff; box-shadow: 0 0 12px 3px rgba(14, 162, 232, 0.85); transform: translate(-50%, -50%); animation: flowMove 2.6s linear infinite; } .flow-pulse.d2 { animation-delay: 1.3s; } @keyframes flowMove { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } /* --- The engine: FC Studio, the centerpiece --- */ .flow-engine { position: relative; overflow: hidden; padding: 38px 36px 34px; border-radius: 20px; border: 1px solid rgba(14, 162, 232, 0.5); background: linear-gradient(168deg, rgba(14, 28, 56, 0.8), rgba(8, 13, 26, 0.6)); -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%); box-shadow: 0 0 0 1px rgba(14, 162, 232, 0.18), 0 36px 80px -34px rgba(0, 0, 0, 0.85); } .flow-engine-core { display: none; } .flow-engine-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; } .flow-engine-logo { width: auto; height: 30px; max-width: 230px; object-fit: contain; } .flow-engine-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8dc4ff; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(14, 162, 232, 0.4); background: rgba(14, 162, 232, 0.1); } .flow-engine-sub { position: relative; margin: 0 auto 24px; max-width: 30ch; text-align: center; font-size: 13px; line-height: 20px; color: #b9c9e0; } .flow-engine-caps { position: relative; display: grid; gap: 11px; } .cap { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(46, 120, 165, 0.32); background: linear-gradient(168deg, rgba(13, 25, 48, 0.6), rgba(8, 13, 26, 0.4)); transition: border-color .25s ease, transform .25s ease; } .cap:hover { border-color: rgba(14, 162, 232, 0.6); transform: translateX(2px); } .cap img { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; } .cap-txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; font-size: 11.5px; color: #93a8c4; } .cap-txt strong { color: #eaf2ff; font-size: 13.5px; font-weight: 600; } /* --- Option C: Vertical numbered steps layout -------------------------------- */ .steps { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 92%; max-width: 680px; margin: 44px auto 20px; } .step { width: 100%; } /* Subtle centered connector between blocks */ .step:not(.step-last)::after { content: ""; display: block; width: 1px; height: 36px; margin: 0 auto; background: linear-gradient(180deg, rgba(14, 162, 232, 0.4) 0%, rgba(123, 110, 242, 0.2) 60%, transparent 100%); } .step-body { padding: 0; text-align: center; } .step-title { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 600; color: #eaf2ff; display: block; margin-bottom: 18px; } .step-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .step-chip { display: flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border-radius: 999px; border: 1px solid rgba(46, 120, 165, 0.38); background: linear-gradient(168deg, rgba(13, 25, 48, 0.7), rgba(8, 13, 26, 0.5)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 500; color: #cdd9ec; white-space: nowrap; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .step-chip:hover { border-color: rgba(14, 162, 232, 0.65); transform: translateY(-2px); box-shadow: 0 6px 18px -8px rgba(14, 162, 232, 0.4); } .step-chip-ic { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(46, 120, 165, 0.45); background: rgba(13, 25, 48, 0.85); flex-shrink: 0; } .step-chip-ic img { width: auto; height: auto; max-width: 14px; max-height: 13px; object-fit: contain; } /* Engine card — centered */ .step-engine .step-body { padding: 32px 36px 36px; border-radius: 18px; border: 1px solid rgba(14, 162, 232, 0.3); background: linear-gradient(168deg, rgba(14, 28, 56, 0.65), rgba(8, 13, 26, 0.45)); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.75); text-align: left; } .step-studio-logo { height: 26px; width: auto; max-width: 200px; object-fit: contain; display: block; margin: 0 auto 14px; } .step-studio-sub { font-size: 13px; line-height: 20px; color: #93a8c4; margin: 0 0 24px; text-align: center; } .step-caps { display: grid; gap: 12px; } @media screen and (max-width: 540px) { .steps { width: 100%; } .step-chip { font-size: 12px; } .step-engine .step-body { padding: 22px 20px 26px; } } /* ================================================================ FastCloud Studio — Premium Engine Section (.se-*) ================================================================ */ .se-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 48px 0 20px; } /* --- Source zone --- */ .se-sources { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } .se-sources-label { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(141, 196, 255, 0.55); } .se-flow-out + .se-sources-label { margin-top: 16px; margin-bottom: 16px; } .se-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .se-chip { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid rgba(46, 120, 165, 0.35); background: linear-gradient(168deg, rgba(13, 25, 48, 0.75), rgba(8, 13, 26, 0.55)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 500; color: #c4d5ee; white-space: nowrap; transition: border-color .25s ease, transform .2s ease, box-shadow .25s ease; } .se-chip:hover { border-color: rgba(14, 162, 232, 0.65); transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(14, 162, 232, 0.3); } .se-chip-ic { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(46, 120, 165, 0.4); background: rgba(10, 20, 40, 0.9); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .se-chip-ic img { max-width: 13px; max-height: 12px; object-fit: contain; } /* --- Animated flow connectors --- */ .se-flow-in, .se-flow-out { position: relative; width: 2px; height: 52px; background: rgba(14, 162, 232, 0.1); overflow: hidden; } .se-flow-in::after, .se-flow-out::after { content: ""; position: absolute; left: 0; right: 0; height: 45%; background: linear-gradient(180deg, transparent 0%, rgba(141, 196, 255, 0.85) 42%, rgba(14, 162, 232, 0.9) 58%, transparent 100%); animation: seFlowDown 1.8s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes seFlowDown { 0% { top: -45%; } 100% { top: 120%; } } /* --- Engine card --- */ .se-card { position: relative; width: 100%; } .se-card-glow { display: none; } .se-card-inner { position: relative; z-index: 1; padding: 0; display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; } .se-logo { height: 32px; width: auto; max-width: 240px; object-fit: contain; display: block; margin: 0 0 24px; opacity: .95; } .se-headline { font-family: Poppins, sans-serif; font-size: 26px; font-weight: 500; line-height: 1.3; color: #eaf3ff; margin: 0 0 28px; letter-spacing: -0.01em; } .se-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; max-width: 1200px; margin: 0 auto 36px; } .se-feature { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 24px; text-align: left; border-radius: 14px; border: 1px solid rgba(46, 120, 165, 0.45); background: linear-gradient(168deg, rgba(13, 25, 48, 0.62) 0%, rgba(8, 13, 26, 0.42) 100%); -webkit-backdrop-filter: blur(7px) saturate(118%); backdrop-filter: blur(7px) saturate(118%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 36px -22px rgba(0, 0, 0, 0.7); overflow: hidden; transition: transform .25s ease, border-color .35s ease, box-shadow .35s ease; } .se-feature:hover { transform: translateY(-5px); border-color: rgba(14, 162, 232, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(14, 162, 232, 0.25), 0 22px 48px -20px rgba(0, 0, 0, 0.75), 0 18px 60px -24px rgba(14, 162, 232, 0.55); } .se-feature:hover::before { opacity: .9; } /* Energy-flow trail across the top edge — same as the case-study cards */ .se-feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(14, 162, 232, 0.0) 12%, rgba(141, 196, 255, 0.85) 50%, rgba(14, 162, 232, 0.0) 88%, transparent 100%); background-size: 220% 100%; background-position: 120% 0; opacity: .35; animation: caseTrail 6s linear infinite; pointer-events: none; } /* Keep card content above the flow-sweep glow overlay */ .se-feature > * { position: relative; z-index: 1; } /* Flow sweep: a glow that lights each card in turn (1 → 2 → 3 → 4), making the row read as a pipeline. Inset glow so overflow:hidden doesn't clip it and it never fights the hover border/shadow. */ .se-feature::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(14, 162, 232, 0.20) 0%, rgba(14, 162, 232, 0.06) 42%, transparent 72%); box-shadow: inset 0 0 0 1px rgba(92, 198, 245, 0.55), inset 0 0 30px rgba(14, 162, 232, 0.28); animation: seFlowSweep 4s linear infinite; } .se-feature:nth-child(1)::after { animation-delay: 0s; } .se-feature:nth-child(2)::after { animation-delay: 1s; } .se-feature:nth-child(3)::after { animation-delay: 2s; } .se-feature:nth-child(4)::after { animation-delay: 3s; } @keyframes seFlowSweep { 0% { opacity: 0; } 6% { opacity: 1; } 22% { opacity: 0; } 100% { opacity: 0; } } @keyframes seFeatureIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes seFeatureGlow { from { opacity: 0; } to { opacity: 1; } } /* Staggered slide-in fires only when JS adds .is-visible */ .se-features.is-visible .se-feature:nth-child(1) { animation: seFeatureIn .55s cubic-bezier(.22,.61,.36,1) .05s both; } .se-features.is-visible .se-feature:nth-child(2) { animation: seFeatureIn .55s cubic-bezier(.22,.61,.36,1) .2s both; } .se-features.is-visible .se-feature:nth-child(3) { animation: seFeatureIn .55s cubic-bezier(.22,.61,.36,1) .35s both; } .se-features.is-visible .se-feature:nth-child(4) { animation: seFeatureIn .55s cubic-bezier(.22,.61,.36,1) .5s both; } .se-feature-text { text-align: left; } .se-feature-title { font-family: Poppins, sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #eaf3ff; } .se-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; color: #5cc6f5; border-radius: 12px; background: linear-gradient(180deg, rgba(14, 162, 232, 0.20), rgba(14, 162, 232, 0.08)); border: 1px solid rgba(92, 198, 245, 0.40); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(14, 162, 232, 0.18); } .se-feature-icon svg { width: 22px; height: 22px; } .se-feature-text { font-size: 15.5px; line-height: 1.6; color: #9fb4d0; } .se-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border-radius: 10px; background: linear-gradient(135deg, rgba(14, 162, 232, 0.92), rgba(10, 110, 175, 0.88)); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; text-decoration: none; border: 1px solid rgba(14, 162, 232, 0.45); box-shadow: 0 8px 28px -8px rgba(14, 162, 232, 0.5); transition: transform .2s ease, box-shadow .25s ease; } .se-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(14, 162, 232, 0.65); } .se-cta-arrow { transition: transform .2s ease; } .se-cta:hover .se-cta-arrow { transform: translateX(4px); } /* --- Deploy zone --- */ .se-deploy { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 6px; margin-bottom: 32px; animation: seFloat 3.5s ease-in-out infinite; } @keyframes seFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .se-deploy-badge { display: flex; align-items: center; gap: 9px; padding: 9px 20px 9px 12px; border-radius: 999px; border: 1px solid rgba(46, 120, 165, 0.28); background: rgba(13, 25, 48, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 15px; font-weight: 500; color: #8dc4ff; transition: border-color .25s ease, transform .2s ease; } .se-deploy-badge:hover { border-color: rgba(14, 162, 232, 0.55); transform: translateY(-2px); } .se-deploy-ic { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .se-deploy-ic img { max-width: 22px; max-height: 20px; object-fit: contain; } .se-deploy-sep { color: rgba(141, 196, 255, 0.22); font-size: 16px; line-height: 1; padding: 0 4px; } /* Responsive */ @media screen and (max-width: 991px) { .se-features { grid-template-columns: repeat(2, 1fr); max-width: 560px; } } @media screen and (max-width: 540px) { .se-wrap { width: 100%; } .se-card-inner { padding: 28px 22px 32px; } .se-headline { font-size: 20px; } .se-chips { gap: 8px; } .se-chip { font-size: 12px; } .se-features { grid-template-columns: 1fr; max-width: 360px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .se-card { animation: none; } .se-card-glow { animation: none; } .se-flow-in::after, .se-flow-out::after { animation: none; opacity: .6; top: 30%; } .se-deploy { animation: none; } .se-card::before { animation: none; display: none; } .se-feature { opacity: 1; transform: none; transition: none; } .se-feature::after { animation: none; opacity: 0; } } /* --- Responsive: stack into a vertical flow on narrow screens --- */ @media screen and (max-width: 900px) { .flow { grid-template-columns: minmax(0, 320px); justify-content: center; width: 100%; } .flow-link { width: 2px; height: 38px; margin: 4px auto; justify-self: center; background: linear-gradient(180deg, rgba(14, 162, 232, 0) 0%, rgba(14, 162, 232, 0.55) 22%, rgba(123, 110, 242, 0.6) 78%, rgba(123, 110, 242, 0) 100%); } .flow-link::after { right: 50%; top: auto; bottom: 1px; transform: translateX(50%) rotate(135deg); } .flow-pulse { animation-name: flowMoveV; } @keyframes flowMoveV { 0% { top: 0; left: 50%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; left: 50%; opacity: 0; } } .flow-io { width: 100%; } } @media (prefers-reduced-motion: reduce) { .flow-pulse, .flow-engine-core { animation: none; } .flow-pulse { opacity: .9; left: 50%; } } /* ============================================================ STUDIO — Flip card ambient glow ------------------------------------------------------------ The visual/code flip card sat flat while everything around it (the flow engine, the case-study cards) carries the same blue -> violet aura. This lays a soft, slowly pulsing glow behind the card so it reads as lit from within, matching .flow-engine. Pure CSS so it renders in the visual editor. ============================================================ */ /* The studio variant has no background screenshot to mask, so we can drop the clip and let the glow bleed past the card's edges. */ .img-screenshot.studio { overflow: visible; } /* The glow lives on the non-flipping wrapper. Two layers: - box-shadow: always painted OUTSIDE the card box, so the opaque card can never hide it — this is the dependable halo. - ::before: a soft, larger colour wash bleeding out behind, for depth. Both use the site's blue -> violet aura and pulse slowly. */ .card_component-2 { position: relative; border-radius: 18px; box-shadow: 0 0 0 1px rgba(14, 162, 232, 0.16), 0 24px 70px -28px rgba(0, 0, 0, 0.85), 0 0 48px -14px rgba(14, 162, 232, 0.32), 0 14px 60px -4px rgba(123, 110, 242, 0.22); animation: cardGlowPulse 6s ease-in-out infinite; } .card_component-2::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; /* Larger than the card so the aura radiates out past every edge. */ width: 112%; height: 128%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(50% 50% at 50% 38%, rgba(14, 162, 232, 0.32), transparent 70%), radial-gradient(56% 56% at 50% 66%, rgba(123, 110, 242, 0.28), transparent 72%); filter: blur(52px); pointer-events: none; } @keyframes cardGlowPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(14, 162, 232, 0.14), 0 24px 70px -28px rgba(0, 0, 0, 0.85), 0 0 42px -16px rgba(14, 162, 232, 0.26), 0 14px 56px -6px rgba(123, 110, 242, 0.18); } 50% { box-shadow: 0 0 0 1px rgba(14, 162, 232, 0.2), 0 24px 70px -28px rgba(0, 0, 0, 0.85), 0 0 58px -10px rgba(14, 162, 232, 0.38), 0 14px 72px 2px rgba(123, 110, 242, 0.28); } } @media (prefers-reduced-motion: reduce) { .card_component-2 { animation: none; } } /* ============================================================ CONTACT — premium upgrade ------------------------------------------------------------ Glassmorphism form card with a soft blue glow (matching the case-studies / engine cards), plus an eyebrow + trust points to balance and warm up the left column. ============================================================ */ .contact-section .contact-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6fa0c8; margin-bottom: -10px; /* pull the heading close (parent has flex gap) */ } .contact-section .contact-trust { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 13px; } .contact-section .contact-trust li { display: flex; align-items: center; gap: 12px; color: #c2d2e8; font-size: 14.5px; line-height: 1.4; } .contact-section .contact-trust svg { flex: 0 0 auto; width: 19px; height: 19px; color: #0ea2e8; } /* Form card — near-solid surface so the moving particle field doesn't show through the card (or behind the translucent input fields) and distract from filling it out. Keeps the premium border + blue glow. */ .contact-section .form { padding: 30px 28px; border-radius: 16px; border: 1px solid rgba(46, 120, 165, 0.45); background: linear-gradient(168deg, rgba(12, 21, 40, 0.96), rgba(8, 13, 26, 0.95)); box-shadow: 0 0 0 1px rgba(14, 162, 232, 0.12), 0 32px 72px -34px rgba(0, 0, 0, 0.85), 0 0 80px -28px rgba(14, 162, 232, 0.4); } .contact-section .form-note { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: #7d90ab; text-align: center; } /* The accent span carries a small left padding (breathing room for its glow), which is invisible when centered like the hero but offsets this left-aligned heading's 2nd line. Pull it back so "about your needs" lines up under "Let's". */ .contact-section .hero-style .premium-accent { margin-left: -0.12em; } /* On phones the forced break would push the title to 3 lines — let it wrap naturally there instead. */ @media screen and (max-width: 767px) { .contact-section .hero-style .br-md { display: none; } } /* Studio flip-card: drop the dark gradient wash layered over the front/back pictures so the FC Studio logo and the product screenshot read clean. (Re-declares each side with only its image layer, correctly positioned — removing the gradient also fixes the now-single-layer position/size.) */ #studio .card_side.is-front { background-image: url('../images/fc-studio.svg'); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } #studio .card_side.is-back { background-image: url('../images/studio-back.png'); background-position: 0 0; background-size: cover; background-repeat: no-repeat; } /* ============================================================ EXPERIMENT — periwinkle body text -> white ------------------------------------------------------------ Temporary: forces every selector that used the muted periwinkle (#a9beec) body-text colour to pure white, just to preview the look. Delete this whole block to revert. ============================================================ */ .paragraph-3, .heading-testimonial, .paragraph-6, .paragraph-7, .paragraph-9 { color: #fff; } .footer-built-with { text-align: center; padding: 12px 0 4px; font-size: 12px; color: #4a6080; letter-spacing: .02em; } .footer-built-with a { color: #4a6080; text-decoration: none; } .footer-built-with a:hover { color: #8dc4ff; } /* ============================================================ STUDIO PAGE — How it Works steps grid ============================================================ */ .studio-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; width: 90%; max-width: 1100px; margin: 48px auto 0; } /* Match the premium glass look of the feature / case-study cards: glass fill, blue border, hover lift + glow, animated top-edge trail. */ .studio-step-card { position: relative; /* visible so the artwork can break out past the top edge of the card */ overflow: visible; display: flex; flex-direction: column; gap: 12px; padding: 30px 24px 32px; border: 1px solid rgba(46, 120, 165, 0.45); border-radius: 12px; background: linear-gradient(168deg, rgba(13, 25, 48, 0.62) 0%, rgba(8, 13, 26, 0.42) 100%); -webkit-backdrop-filter: blur(7px) saturate(118%); backdrop-filter: blur(7px) saturate(118%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 14px 36px -22px rgba(0, 0, 0, 0.7); transition: transform .25s ease, border-color .35s ease, box-shadow .35s ease; } .studio-step-card:hover { transform: translateY(-5px); border-color: rgba(14, 162, 232, 0.85); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(14, 162, 232, 0.25), 0 22px 48px -20px rgba(0, 0, 0, 0.75), 0 18px 60px -24px rgba(14, 162, 232, 0.55); } .studio-step-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(14, 162, 232, 0.0) 12%, rgba(141, 196, 255, 0.85) 50%, rgba(14, 162, 232, 0.0) 88%, transparent 100%); background-size: 220% 100%; background-position: 120% 0; opacity: .35; animation: caseTrail 6s linear infinite; pointer-events: none; } .studio-step-card:hover::before { opacity: .9; } /* Reserved band inside the card flow; the image itself is taller than this slot and anchored to its bottom, so it overflows upward and "pops" out of the box past the card's top edge. */ .studio-step-art { position: relative; height: 104px; margin-bottom: 6px; pointer-events: none; /* gentle idle bob — the whole object floats up and down */ animation: stepFloat 5.5s ease-in-out infinite; } /* soft breathing aura behind each floating object */ .studio-step-art::before { content: ""; position: absolute; left: 50%; bottom: 18px; width: 130px; height: 130px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(14, 162, 232, 0.45) 0%, rgba(14, 162, 232, 0) 68%); filter: blur(10px); z-index: 0; animation: stepAura 5.5s ease-in-out infinite; } /* stagger the cards so they don't bob/pulse in unison */ .studio-step-card:nth-child(2) .studio-step-art, .studio-step-card:nth-child(2) .studio-step-art::before { animation-delay: -1.3s; } .studio-step-card:nth-child(3) .studio-step-art, .studio-step-card:nth-child(3) .studio-step-art::before { animation-delay: -2.6s; } .studio-step-card:nth-child(4) .studio-step-art, .studio-step-card:nth-child(4) .studio-step-art::before { animation-delay: -3.9s; } .studio-step-art { transition: filter .35s ease; } .studio-step-card:hover .studio-step-art { filter: brightness(1.12) saturate(1.08); } .studio-step-img { position: absolute; left: 50%; bottom: 0; width: 172px; height: 172px; z-index: 1; transform: translateX(-50%); object-fit: contain; /* glow that grounds the floating object to the card */ filter: drop-shadow(0 10px 22px rgba(14, 162, 232, 0.45)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); } @keyframes stepFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes stepAura { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(0.92); } 50% { opacity: .9; transform: translateX(-50%) scale(1.08); } } /* ---- Per-card signature animations ------------------------------------- Each object animates in a way that matches what it depicts. The light / dot overlays use the object's own PNG as a CSS mask, so the animated glow is clipped to the silhouette of the object. */ /* 01 Discover — the globe breathes, scaling up and down */ .fx-globe .studio-step-img { animation: fxGlobe 4.2s ease-in-out infinite; } @keyframes fxGlobe { 0%, 100% { transform: translateX(-50%) scale(0.92); } 50% { transform: translateX(-50%) scale(1.10); } } /* shared masked light/dot overlay sitting exactly over the object */ .fx-rise .studio-step-art::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 172px; height: 172px; transform: translateX(-50%); z-index: 2; pointer-events: none; mix-blend-mode: screen; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* 02 Design — no overlay effect; the pen just floats with the shared bob/aura */ /* 03 Build — the stack is assembled from 5 copies of one plate sprite, each dropping into place one at a time from the bottom up, then the whole stack holds and the sequence repeats. */ .build-stack .build-plate { position: absolute; left: 50%; width: 172px; height: 172px; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 6px 14px rgba(14, 162, 232, 0.40)); } /* stack them: p1 at the base, each next one a step higher and drawn on top. negative bottoms drop the whole stack so its visual box lines up with the single-object icons in the other cards (base near the art bottom). */ .build-stack .p1 { bottom: -54px; z-index: 1; } .build-stack .p2 { bottom: -34px; z-index: 2; } .build-stack .p3 { bottom: -14px; z-index: 3; } .build-stack .p4 { bottom: 6px; z-index: 4; } .build-stack .p5 { bottom: 26px; z-index: 5; } /* each plate uses the same 4.5s timeline but appears in its own window */ .fx-build .p1 { animation: fxPlate1 4.5s ease-out infinite; } .fx-build .p2 { animation: fxPlate2 4.5s ease-out infinite; } .fx-build .p3 { animation: fxPlate3 4.5s ease-out infinite; } .fx-build .p4 { animation: fxPlate4 4.5s ease-out infinite; } .fx-build .p5 { animation: fxPlate5 4.5s ease-out infinite; } @keyframes fxPlate1 { 0%, 4% { opacity: 0; transform: translateX(-50%) translateY(-16px); } 15%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(0); } } @keyframes fxPlate2 { 0%, 17% { opacity: 0; transform: translateX(-50%) translateY(-16px); } 28%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(0); } } @keyframes fxPlate3 { 0%, 30% { opacity: 0; transform: translateX(-50%) translateY(-16px); } 41%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(0); } } @keyframes fxPlate4 { 0%, 43% { opacity: 0; transform: translateX(-50%) translateY(-16px); } 54%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(0); } } @keyframes fxPlate5 { 0%, 56% { opacity: 0; transform: translateX(-50%) translateY(-16px); } 67%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(0); } } /* 04 Evolve — particles stream upward along the arrow */ .fx-rise .studio-step-art::after { -webkit-mask-image: url(../images/how-we-work-evolve.png); mask-image: url(../images/how-we-work-evolve.png); background-image: radial-gradient(circle, rgba(180, 225, 255, 0.95) 0 1.4px, transparent 2.2px); background-size: 16px 16px; animation: fxRiseDots 2.2s linear infinite; } @keyframes fxRiseDots { 0% { background-position: 0 0; } 100% { background-position: 0 -32px; } } .fx-connect .studio-step-img, .fx-rise .studio-step-img { animation: fxBreathe 5s ease-in-out infinite; } @keyframes fxBreathe { 0%, 100% { transform: translateX(-50%) scale(0.98); } 50% { transform: translateX(-50%) scale(1.03); } } /* respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { .studio-step-art, .studio-step-art::before, .studio-step-art::after, .studio-step-img, .build-plate { animation: none; opacity: 1; } } .studio-step-title { font-family: Poppins, sans-serif; font-size: 1.05rem; font-weight: 600; color: #f0f5fc; margin: 0; } .studio-step-desc { font-family: Inter, sans-serif; font-size: 0.9rem; line-height: 1.6; color: #9fb4d0; margin: 0; } @media screen and (max-width: 991px) { .studio-steps-grid { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 479px) { .studio-steps-grid { grid-template-columns: 1fr; gap: 20px; } }