/* ============================================================ Landing page overrides — sits on top of source theme styles. Keep this file small; everything visual should come from /landing/css/style.css and helpers. ============================================================ */ /* Strip the in-app overflow:hidden that globals.css enforces on .app — the landing page lives outside (app) so it should scroll naturally. */ html, body { overflow-x: hidden; } /* Load Outfit (the source theme's default font) so the page actually renders in the typeface it was designed in, instead of falling back to the system sans-serif. */ @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap"); /* The root layout applies DM Sans as the page-wide font via Next.js's font loader (className on ). For the landing only, force the source theme's Outfit, and force the source's intended heading color so it doesn't fade into the global #1a1a1a body color. */ body, .banner-style-three-area, .tools-integrations-area, .feature-style-three-area, .services-style-two-area, .faq-style-two-area, .faq-style-two-area .title, .site-heading .title, .site-heading p, .site-heading .sub-title, .services-style-two .item h3, .services-style-two .item h3 a, .fmp-faq-item summary, footer { font-family: "Outfit", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important; } /* Force the source theme's heading color #04000b on LIGHT-background sections only — globally inheriting #1a1a1a from globals.css washes them out. Dark sections (bg-dark / text-light) keep their white text. */ .site-heading:not(.text-light) .title, .site-heading:not(.text-light) p, .faq-style-two-area .title, .services-style-two .item h3, .services-style-two .item h3 a, .fmp-faq-item summary { color: #04000b !important; } /* Explicitly white in dark sections — covers the dark Features section. */ .bg-dark .site-heading .title, .bg-dark .site-heading p, .bg-dark .site-heading .sub-title, .text-light .title, .feature-style-three-area .site-heading .title, .feature-style-three-area .site-heading p, .feature-style-three-area h3 { color: #ffffff !important; } .bg-dark .site-heading p, .feature-style-three-area .site-heading p, .feature-style-three-area p { color: rgba(255, 255, 255, 0.7) !important; } /* FAQ: convert source's accordion styling to native
markers */ .fmp-faq-item { border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: 22px 0; } .fmp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; color: #1d1d28; } .fmp-faq-item summary::-webkit-details-marker { display: none; } .fmp-faq-item summary::after { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; background: rgba(0, 0, 0, 0.04); color: #666; transition: transform 0.15s ease; } .fmp-faq-item[open] summary::after { content: "−"; } .fmp-faq-item p { margin-top: 12px; color: #666; line-height: 1.65; } .fmp-faq-item a { color: var(--color-badge-purple-text, #5b21b6); text-decoration: underline; } /* Make the AI model strip icons look good — source styled small tool icons */ .tools-integrations .tools-list li .icon img { width: 48px; height: 48px; object-fit: contain; filter: none; } /* Library preview categories use illustration thumb — give it a neutral bg */ .team-style-one .item .thumb { background: linear-gradient(135deg, #fff8f3 0%, #ffe7d4 100%); } .team-style-one .item .thumb img { object-fit: contain; padding: 24px; max-height: 220px; } /* Hide the floating share-link block from team-style-one source (we dropped it) */ .team-style-one .item .thumb .team-social { display: none; } /* Navbar sign-in button: keep it consistent with source's attr-nav button */ .attr-nav ul li.button a { cursor: pointer; } /* Hero is an

for SEO; the source theme styled the equivalent

. Replicate the same scale so the visual is unchanged. */ .banner-style-three h1 { font-size: 55px; font-weight: 700; margin-bottom: 30px; } @media (max-width: 767px) { .banner-style-three h1 { font-size: 36px; } } /* Navbar: source theme uses position:absolute on .navbar-fixed which combined with globals.css "html, body { height: 100% }" anchors the navbar to the viewport (visually sticky). Force position:relative + transparent so it sits at the top of the banner area and the hero gradient shows through it. */ nav.navbar.validnavs.navbar-fixed, nav.navbar.validnavs.navbar-fixed.no-background { position: relative !important; top: auto !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* The navbar now sits inline at the top of the banner area, so the source theme's 200px hero top-padding (sized to clear an absolutely-positioned navbar) leaves an oversized gap below the nav. Tighten it. */ .banner-style-three .content { padding-top: 90px; } @media (max-width: 991px) { .banner-style-three .content { padding-top: 60px; } } /* Footer about column: the source CSS paints a wide light-gray slab behind .f-item.about via ::after — so text in that column must be DARK to be legible. The widget titles, logo paragraph and copyright text all live there. */ footer .f-item.about p, footer .f-item.about .copyright-text p { color: #1d1d28 !important; } /* The slab's height is 200% of .f-item.about (which is short in our version since we dropped the newsletter form + social icons). Stretch .f-item.about to fill the row height so the slab covers the full footer area vertically. */ footer .row { align-items: stretch; } footer .row > [class*="col-"] { display: flex; } footer .row > [class*="col-"] > .f-item, footer .row > [class*="col-"] > .footer-item { flex: 1; width: 100%; } footer .f-item.about::after { top: -300px !important; bottom: -400px !important; height: auto !important; } /* Keep the about-column logo proportional — the stretched flex column was distorting it via default align-items:stretch. */ footer .f-item.about img.logo { width: auto !important; align-self: flex-start; } /* Mobile: source navbar collapse helper */ @media (max-width: 991px) { .navbar .navbar-collapse { display: none; } .navbar .navbar-collapse.show { display: block; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 16px 24px; } .navbar .navbar-nav { flex-direction: column; gap: 4px; } .navbar .navbar-nav li a { display: block; padding: 10px 0; } }