/* ============================================================================= Frameflow Creatives — PDF Demo Style Restore Restores the original frameflow demo 2 mockup look on the homepage by re-enabling the premium purple gradient system from styles.css and undoing Frameflow Creatives hero layout. Must load last in (after home-layout.css). ========================================================================== */ .frameflow-light.home-page { background: #fff; color: #232323; } /* Hero — mockup panel (loads last; wins over home-layout.css) */ .frameflow-light.home-page .section-hero--frameflow { min-height: 100vh; padding: 16px 16px 0; } .frameflow-light.home-page .section-hero--frameflow .hero-image { background-image: none !important; background-attachment: scroll !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; position: absolute; inset: 16px 16px 0 16px; border-radius: 40px; z-index: 0; opacity: 1 !important; visibility: visible !important; overflow: hidden; } .frameflow-light.home-page .section-hero--frameflow .hero-image picture, .frameflow-light.home-page .section-hero--frameflow .hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; border-radius: inherit; opacity: 1 !important; } /* Fallback when no (inner pages using CSS bg only) */ .frameflow-light.home-page .section-hero--frameflow .hero-image:not(:has(img)) { background-image: url(/assets/images/section/contact-image-bg.jpg) !important; } @supports (background-image: image-set(url("/assets/images/section/contact-image-bg-800.webp") type("image/webp"))) { .frameflow-light.home-page .section-hero--frameflow .hero-image:not(:has(img)) { background-image: image-set( url(/assets/images/section/contact-image-bg-800.webp) type("image/webp"), url(/assets/images/section/contact-image-bg.jpg) type("image/jpeg") ) !important; } } @media (min-width: 768px) { @supports (background-image: image-set(url("/assets/images/section/contact-image-bg-1200.webp") type("image/webp"))) { .frameflow-light.home-page .section-hero--frameflow .hero-image:not(:has(img)) { background-image: image-set( url(/assets/images/section/contact-image-bg-1200.webp) type("image/webp"), url(/assets/images/section/contact-image-bg.jpg) type("image/jpeg") ) !important; } } } .frameflow-light.home-page .section-hero--frameflow::before { display: none !important; } .frameflow-light.home-page .section-hero--frameflow .container:not(.hero-trust-wrap) { padding-top: 32px !important; padding-bottom: 48px !important; } @media (min-width: 992px) { .frameflow-light.home-page .section-hero--frameflow .container:not(.hero-trust-wrap) { padding-top: 48px !important; padding-bottom: 56px !important; } } .frameflow-light.home-page .section-hero--frameflow .content-wrap { padding: clamp(32px, 5vw, 72px) 0 clamp(24px, 4vw, 48px) !important; max-width: 100%; } .frameflow-light.home-page .section-hero--frameflow .content-wrap h1.title { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 20px; } .frameflow-light.home-page .section-hero--frameflow .content-wrap h1 .title1 { color: #432692 !important; -webkit-text-fill-color: #432692 !important; background: none !important; } .frameflow-light.home-page .section-hero--frameflow .content-wrap h1 .title2 { color: #13072d !important; -webkit-text-fill-color: #13072d !important; background: none !important; margin-top: 4px; } .frameflow-light.home-page .section-hero--frameflow .content-wrap .sub::before { background: #432692 !important; box-shadow: 0 0 0 3px rgba(67, 38, 146, 0.22) !important; } .frameflow-light.home-page .section-hero--frameflow .hero-contact-form--compact { max-width: 420px; width: 100%; margin: 0 auto; padding: 28px !important; border-radius: 24px !important; background: radial-gradient(70% 70% at 0% 0%, rgba(188, 40, 245, 0.1) 0%, transparent 55%), radial-gradient(55% 55% at 100% 100%, rgba(117, 85, 245, 0.1) 0%, transparent 58%), linear-gradient(180deg, #fff 0%, #f5f4f8 42%, #eeecf3 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(117, 85, 245, 0.12) !important; box-shadow: 0 7.77px 16px rgba(19, 7, 45, 0.06), 0 3px 3px rgba(19, 7, 45, 0.08), 0 -8px 0 rgba(67, 38, 146, 0.04) inset, 0 4px 0 rgba(255, 255, 255, 0.9) inset !important; } .frameflow-light.home-page .section-hero--frameflow .hero-contact-form--compact::before { opacity: 1; } .frameflow-light.home-page .section-hero--frameflow .hero-contact-form--compact .form-title { font-size: 24px; line-height: 32px; margin-bottom: 8px; color: #13072d; } .frameflow-light.home-page .section-hero--frameflow .hero-contact-form--compact .form-desc { font-size: 15px; margin-bottom: 20px; color: #232323; } .frameflow-light.home-page .section-hero--frameflow .hero-trust-wrap { margin-top: clamp(20px, 3vw, 36px); padding-bottom: 24px; } .frameflow-light.home-page .section-hero--frameflow .hero-trust-wrap .ff-trust-band__inner { background: linear-gradient(90deg, #160a33 0%, #2a1366 50%, #1e0f45 100%); border-radius: 20px; padding: 18px 24px; box-shadow: 0 12px 36px -16px rgba(19, 7, 45, 0.35); } .frameflow-light.home-page .section-hero--frameflow .hero-trust-wrap .ff-trust-band__label { font-size: clamp(15px, 1.6vw, 18px); color: #fff; } .frameflow-light.home-page .section-hero--frameflow .hero-trust-wrap .ff-trust-band__list li { font-size: 14px; padding: 7px 14px; } /* About — white section, purple gradient cards */ .frameflow-light.home-page .section-about-us { background: #fff !important; min-height: auto !important; } .frameflow-light.home-page .section-about-us .heading-section { margin-bottom: clamp(40px, 5vw, 56px) !important; text-align: center; position: relative; z-index: 2; width: 100%; } .frameflow-light.home-page .section-about-us .row > .col-12:first-child { display: block !important; flex: 0 0 100%; max-width: 100%; } .frameflow-light.home-page .section-about-us .heading-title { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; color: #13072d !important; -webkit-text-fill-color: #13072d !important; text-align: center; max-width: min(920px, 100%); margin-inline: auto; font-size: clamp(32px, 4.1vw, 50px); line-height: 1.12; letter-spacing: -0.03em; } .frameflow-light.home-page .section-about-us .ff-about-heading-line { display: block; white-space: nowrap; } @media (max-width: 767px) { .frameflow-light.home-page .section-about-us .ff-about-heading-line { display: inline; white-space: normal; } } /* Process — centered PDF layout */ .frameflow-light.home-page .ff-process { background: #fff !important; padding-top: clamp(48px, 6vw, 80px); } .frameflow-light.home-page .ff-process__title { text-align: center; max-width: 520px; margin-inline: auto; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.03em; color: #13072d; } .frameflow-light.home-page .ff-process__head .ff-ref-eyebrow, .frameflow-light.home-page .ff-process__subtitle { display: none; } .frameflow-light.home-page .ff-process__num { display: block; margin-bottom: 14px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #432692; } /* process & value icons enabled via theme.css */ .frameflow-light.home-page .ff-process__step { background: radial-gradient(70% 70% at 0% 0%, rgba(188, 40, 245, 0.08) 0%, transparent 55%), linear-gradient(180deg, #fff 0%, #f5f4f8 100%) !important; border: 1px solid rgba(67, 38, 146, 0.1) !important; box-shadow: 0 8px 24px -12px rgba(19, 7, 45, 0.12) !important; border-radius: 20px !important; } /* Working process + new CL sections */ .frameflow-light.home-page .ff-working-process-block { background: transparent; } .frameflow-light.home-page .ff-services-marquee { margin-block: 0; } .frameflow-light.home-page .ff-trust-band__inner { border: 1px solid rgba(255, 255, 255, 0.08); } .frameflow-light.home-page .ff-value-strip { background: #faf9fc !important; border-block: 1px solid rgba(67, 38, 146, 0.08); } .frameflow-light.home-page .ff-value-strip__item { background: transparent !important; border: none !important; box-shadow: none !important; } /* value strip icons enabled via theme.css */ .frameflow-light.home-page .ff-pricing-plan__icon, .frameflow-light.home-page .ff-pricing-custom__icon { display: none !important; } .frameflow-light.home-page .ff-blog-journal__intro .ff-ref-eyebrow { margin-bottom: 12px; } .frameflow-light.home-page .ff-blog-journal__intro .tf-btn-2 { margin-top: 20px; } /* Partner + tools */ .frameflow-light.home-page .ff-tools-strip { background: #fff !important; } .frameflow-light.home-page .ff-tools-strip__badge { background: #f5f4f8 !important; border: 1px solid rgba(67, 38, 146, 0.08) !important; box-shadow: none !important; } /* Services accordion */ .frameflow-light.home-page .section-services { background: #fff !important; } /* Portfolio */ .frameflow-light.home-page .ff-ref-projects { background: #fff !important; padding-top: clamp(64px, 8vw, 96px) !important; } .frameflow-light.home-page .ff-ref-project-card { background: #fff !important; border: 1px solid rgba(67, 38, 146, 0.08) !important; box-shadow: 0 8px 28px -14px rgba(67, 38, 146, 0.14) !important; border-radius: 20px !important; padding: 0 !important; overflow: hidden; } /* Testimonials */ .frameflow-light.home-page .ff-trust-grid--ref { background: #faf9fc !important; } .frameflow-light.home-page .ff-trust-card { background: #fff !important; border: 1px solid rgba(67, 38, 146, 0.08) !important; box-shadow: 0 8px 28px -14px rgba(67, 38, 146, 0.1) !important; } /* Pricing — light cards on white (PDF page 4) */ .frameflow-light.home-page .section-pricing.ff-pricing-dark { background: #fff !important; } .frameflow-light.home-page .section-pricing.ff-pricing-dark .heading-title { color: #13072d !important; -webkit-text-fill-color: #13072d !important; background: none !important; } /* FAQ lavender rows */ .frameflow-light.home-page .section-faqs { background: #fff !important; } .frameflow-light.home-page .accordion-asked-item { background: #f3effb !important; border: 1px solid rgba(67, 38, 146, 0.08) !important; box-shadow: none !important; margin-bottom: 12px; } /* CTA band — purple gradient */ .frameflow-light.home-page .ff-cta-department { background: radial-gradient(68% 52% at 100% 0%, rgba(245, 244, 248, 0.18) 0%, transparent 52%), radial-gradient(62% 62% at 72% 100%, rgba(188, 40, 245, 0.3) 0%, transparent 100%), linear-gradient(205deg, #3a1f9e 0%, #6e4aed 48%, #7555f5 100%) !important; border-radius: 28px !important; box-shadow: 0 20px 56px -20px rgba(42, 27, 110, 0.35) !important; } .frameflow-light.home-page .ff-cta-department__title, .frameflow-light.home-page .ff-cta-department__text { color: #fff !important; } /* Contact — keep section light; purple lives on the visual panel only */ .frameflow-light.home-page .ff-contact-section { background: linear-gradient(180deg, #f7f5fc 0%, #ffffff 100%) !important; padding-bottom: 64px !important; } .frameflow-light.home-page .ff-contact-form-wrap { background: #fff !important; border: 1px solid rgba(67, 38, 146, 0.1) !important; box-shadow: 0 12px 40px -16px rgba(19, 7, 45, 0.18) !important; } /* Footer CTA wrap — gradient bridge from white to dark footer */ .frameflow-light.home-page .ff-site-footer__cta-card { background: radial-gradient(68% 52% at 100% 0%, rgba(245, 244, 248, 0.18) 0%, transparent 52%), radial-gradient(62% 62% at 72% 100%, rgba(188, 40, 245, 0.3) 0%, transparent 100%), linear-gradient(205deg, #3a1f9e 0%, #6e4aed 48%, #7555f5 100%) !important; border: 1px solid rgba(245, 244, 248, 0.1) !important; } .frameflow-light.home-page .ff-site-footer__cta-card .ff-site-footer__cta-title, .frameflow-light.home-page .ff-site-footer__cta-card .ff-site-footer__cta-eyebrow, .frameflow-light.home-page .ff-site-footer__cta-card .ff-site-footer__cta-desc { color: #fff !important; -webkit-text-fill-color: #fff !important; } .frameflow-light.home-page .ff-site-footer__body { background: linear-gradient(180deg, #3d2e8a 0%, #2a1366 55%, #1e0f45 100%) !important; color: rgba(245, 244, 248, 0.88) !important; } .frameflow-light.home-page .ff-site-footer__col-title, .frameflow-light.home-page .ff-site-footer__links a, .frameflow-light.home-page .ff-site-footer__contact a, .frameflow-light.home-page .ff-site-footer__contact span, .frameflow-light.home-page .ff-site-footer__about { color: rgba(245, 244, 248, 0.88) !important; } .frameflow-light.home-page .ff-site-footer__copy, .frameflow-light.home-page .ff-site-footer__legal a { color: rgba(245, 244, 248, 0.55) !important; } /* Hide blog journal Frameflow Creatives block styling — keep section readable */ .frameflow-light.home-page .ff-blog-journal { background: #fff !important; }