/** * Visual App Builder page overrides * Must load AFTER tooljet.webflow.css (see layout.tsx link order) * Matches inline styles from visual-app-builder-new.html */ /* Override Webflow's display:none - v-a-b-n-d-main-wrapper is the main content wrapper */ .v-a-b-n-d-main-wrapper { display: block !important; } /* Nav dropdown styles (from inline style in body - dropdown-toggle-11.dark) */ .div-block-7847, .div-block-7853 { width: 40%; height: 3px; position: absolute; top: 22.5px; left: -175px; background: linear-gradient(93.44deg, #ff7750 -4.56%, #4b2494 107.86%); transition: transform 0.5s ease-in-out; transform: translateX(0); } .nav-content-block:hover .div-block-7847, .nav-content-block:hover .div-block-7853 { transform: translateX(100%); } .dropdown-toggle-11.dark { background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; outline: none !important; } .dropdown-toggle-11.dark.w--open { background-color: #3f3f46 !important; background-image: none !important; border: none !important; box-shadow: none !important; outline: none !important; } .dropdown-toggle-11.dark *, .dropdown-toggle-11.dark.w--open * { border: none !important; box-shadow: none !important; outline: none !important; } .dropdown-toggle-11.dark:focus, .dropdown-toggle-11.dark:active, .dropdown-toggle-11.dark.w--open:focus, .dropdown-toggle-11.dark.w--open:active { border: none !important; outline: none !important; box-shadow: none !important; } .dropdown-toggle-11.dark.w--open .div-block-7886 { background: #2e2f31 !important; } .div-block-8808 { position: relative; min-height: 500px; } .div-block-8809 { background-image: url("/images/gradient-app-builder.webp") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; position: absolute; inset: 0; z-index: 0; } .gradient-text-ai-app-builder-hero { background: linear-gradient(90deg, #ff8c73 50.96%, #e447c1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* Default state (TOP of page) */ body.nav-top .navbar-6.dark .new-nav-bar-2025 { background-color: transparent !important; transition: background-color 0.3s ease; } /* Scrolled state */ body.nav-scrolled .navbar-6.dark { background-color: #191b1f !important; } .navbar-6.dark { background-color: transparent !important; } /* ===== stack-mask and children (hero card stack) ===== */ .stack-wrapper { position: relative !important; height: 643px !important; display: flex !important; align-items: center !important; justify-content: center !important; perspective: 1200px !important; } .stack-mask { max-width: 1152px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; overflow: hidden !important; position: relative !important; z-index: 2 !important; } .card { position: absolute !important; transition: transform 500ms ease, opacity 500ms ease, filter 500ms ease !important; will-change: transform !important; } .card.is-front { transform: translateX(-50%) scale(1) rotate(0deg) !important; z-index: 5 !important; opacity: 1 !important; filter: blur(0px) !important; } .card.is-left { top: 16% !important; transform: translateX(-13%) scale(0.9) rotate(0deg) !important; z-index: 2 !important; opacity: 30% !important; filter: blur(0px) !important; } .card.is-right { top: 16% !important; transform: translateX(37%) scale(0.9) rotate(0deg) !important; z-index: 3 !important; opacity: 30% !important; filter: blur(0px) !important; } .card-img { width: auto !important; height: auto !important; max-width: none !important; } .card.is-front .card-img { width: 990px !important; height: 643px !important; } .card.is-left .card-img, .card.is-right .card-img { width: 700px !important; height: 437px !important; } /* Feature row + pills — Figma Product-and-Platform-webpages (node 18578-77773) */ .div-block-8811 { grid-column-gap: 6px !important; grid-row-gap: 6px !important; } .div-block-8811 .image-2750 { align-self: flex-end !important; flex-shrink: 0 !important; margin-bottom: 59px !important; } .build-from-scratch-image-app{ height: 122px; margin-bottom: 24px; } .most-Ai-builders{ color: #FFF; text-align: center; font-family:Inter, sans-serif; font-size: 32px; font-style: normal; font-weight: 500; line-height: 40px; /* 125% */ letter-spacing: -0.64px; width: 66%; } @media screen and (min-width: 480px) { .div-block-8812.feature-btn.ai-powered-gen, .div-block-8812.feature-btn.visual-builder, .div-block-8812.feature-btn.code-extensibility { width: 168px !important; max-width: 168px !important; flex-shrink: 0 !important; } .div-block-8811 .div-block-8812.feature-btn .text-block-721 { font-size: 16px !important; line-height: 24px !important; letter-spacing: -0.32px !important; } } .div-block-8811 .div-block-8812.feature-btn .text-block-721 { color: #fafcff !important; text-align: center !important; width: 100% !important; transition: opacity 300ms ease !important; } .div-block-8812.feature-btn:not(:has(.div-block-8813.is-active)) .text-block-721 { opacity: 0.3 !important; } .div-block-8812.feature-btn:has(.div-block-8813.is-active) .text-block-721 { opacity: 1 !important; } /* Per-variant pill: border + gradient; inactive = softer fill + 0.6 circle opacity (Figma) */ .feature-btn.ai-powered-gen .div-block-8813, .feature-btn.visual-builder .div-block-8813, .feature-btn.code-extensibility .div-block-8813 { position: relative !important; overflow: hidden !important; box-sizing: border-box !important; border-radius: 100px !important; border-style: solid !important; border-width: 1px !important; background-origin: border-box !important; transition: background 300ms ease, border-color 300ms ease, opacity 300ms ease !important; } .feature-btn.ai-powered-gen .div-block-8813::after, .feature-btn.visual-builder .div-block-8813::after, .feature-btn.code-extensibility .div-block-8813::after { display: none !important; content: none !important; } .feature-btn.ai-powered-gen .div-block-8813 > *, .feature-btn.visual-builder .div-block-8813 > *, .feature-btn.code-extensibility .div-block-8813 > * { position: relative !important; z-index: 1 !important; } .feature-btn.ai-powered-gen .div-block-8813:not(.is-active) { opacity: 0.3 !important; border-color: transparent !important; background-image: linear-gradient( 180deg, rgba(157, 118, 234, 0.04) 0%, rgba(149, 175, 255, 0.03) 100% ) !important; } .feature-btn.ai-powered-gen .div-block-8813.is-active { opacity: 1 !important; border-color: transparent !important; background-image: linear-gradient( 180deg, rgba(157, 118, 234, 0.12) 0%, rgba(149, 175, 255, 0.11) 100% ) !important; } .feature-btn.visual-builder .div-block-8813:not(.is-active) { opacity: 0.3 !important; border-color: transparent !important; background-image: linear-gradient( 180deg, rgba(62, 99, 221, 0.02) 0%, rgba(149, 175, 255, 0.02) 100% ) !important; } .feature-btn.visual-builder .div-block-8813.is-active { opacity: 1 !important; border-color: transparent !important; background-image: linear-gradient( 180deg, rgba(62, 99, 221, 0.12) 0%, rgba(149, 175, 255, 0.11) 100% ) !important; } .feature-btn.code-extensibility .div-block-8813:not(.is-active) { opacity: 0.3 !important; border-color: transparent !important; background-image: linear-gradient( 180deg, rgba(46, 182, 125, 0.02) 0%, rgba(149, 175, 255, 0.02) 100% ) !important; } .feature-btn.code-extensibility .div-block-8813.is-active { opacity: 1 !important; border-color: transparent !important; background-image: linear-gradient( 180deg, rgba(46, 182, 125, 0.12) 0%, rgba(149, 175, 255, 0.11) 100% ) !important; } .div-block-8821 { overflow: visible !important; } .div-block-8821 > div { transition: opacity 0.25s ease; } .slider-hidden { display: none !important; } body.nav-top .link-80.ai.new, body.nav-top .try-for-free-dark { background-color: transparent !important; transition: background-color 0.3s ease; } body.nav-scrolled .link-80.ai.new, body.nav-scrolled .try-for-free-dark { background-color: #1e2226 !important; } /* Override tooljet's background-image: none at 1280px */ @media screen and (min-width: 1280px) { .div-block-8821 { overflow: visible !important; height: 422px !important; } .div-block-8809 { background-image: url("/images/gradient-app-builder.webp") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } } @media screen and (min-width: 1440px) { .div-block-8809 { top: -88px !important; left: 0 !important; right: 0 !important; height: calc(100% + 88px) !important; bottom: auto !important; } .div-block-8820 { max-width: 1152px !important; width: 1152px !important; } .stack-wrapper { width: 1152px !important; max-width: 1152px !important; } .card.is-front { transform: translateX(-50%) scale(1) rotate(0deg) !important; z-index: 5 !important; opacity: 1 !important; width: 990px; height: 642px; } .card.is-front .card-img { width: 998px !important; height: 615px !important; object-fit: cover !important; object-position: top !important; } .card.is-left { top: 16% !important; transform: translateX(-13%) scale(0.9) rotate(0deg) !important; z-index: 2 !important; opacity: 30% !important; filter: blur(0px) !important; width: 630px; height: 393.3px; } .card.is-right { top: 16% !important; transform: translateX(37%) scale(0.9) rotate(0deg) !important; z-index: 3 !important; opacity: 30% !important; filter: blur(0px) !important; width: 630px; height: 393px; } .card.is-left .card-img, .card.is-right .card-img { width: 700px !important; height: 437px !important; } } /* Real use case cards - clickable YouTube links */ .div-block-8832 .div-block-8833 { cursor: pointer; } /* Extend-with-code image panel styling (restore Webflow look) */ ._8220-w-o-bb .div-block-8825 > .image-2754 { background-color: #21242966 !important; border: 1px solid #2b2b2b !important; border-radius: 10px !important; } .gradient-under-img-app-builder { position: absolute; top: 1551px; width: 69%; z-index: 1; } .app-builder-latest-button-div{ width: 100% !important; height: 100% !important; } @media screen and (max-width: 479px) { .faq { height: 80px !important; } .text-block-399 { height: 36px !important; } .div-block-8809 { background-image: url("/images/video-back-grad.png") !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } .card.is-front .card-img { width: 345px !important; height: 220px !important; } .card.is-left { display: none; } .card.is-right { display: none; } .stack-wrapper { position: relative !important; height: 220px !important; display: flex !important; align-items: center !important; justify-content: center !important; perspective: 1200px !important; } .div-block-8821 { overflow: hidden !important; } .ai-powered-section-mb .div-block-8822 { width: 284px !important; } .ai-powered-section-mb .div-block-8821 { flex-direction: row !important; flex-wrap: nowrap !important; width: 415vw !important; padding-left: 24px; transition: transform 0.45s ease; } .ai-powered-section-mb .div-block-8821 > * { flex: 0 0 auto !important; min-width: 284px; } .div-block-8823._8823-mb-diff .div-block-8822 .div-block-882-p-c { width: 100% !important; } .div-block-8821 { display: flex !important; overflow: hidden !important; gap: 32px !important; } .div-block-8821 > * { display: flex !important; margin-right: 0 !important; } .v-a-b-n-d-main-wrapper { overflow-x: hidden; } .most-Ai-builders{ color: #FFF; text-align: center; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 500; line-height: 32px; /* 160% */ letter-spacing: -0.4px; width: 84%; } .build-from-scratch-image-app{ width: 284px; height: auto; } .ai-app-new-section{ align-items: center; border-top: transparent !important; width: 345px; padding: 0px; padding-top: 0px !important; margin-top: 64px !important; } .gradient-under-img-app-builder { position: absolute; top: 1931px !important; width: 100%; z-index: 1; } } /* AI lifecycle carousel arrows */ .ai-powered-section-mb .div-block-8837 { display: flex !important; align-items: center; gap: 16px; margin-top: 25px; padding-left: 5px; } .ai-powered-section-mb .image-2760, .ai-powered-section-mb .image-2761 { width: 34px !important; height: 34px !important; min-width: 34px; min-height: 34px; cursor: pointer; padding: 8px; margin: -8px; transition: opacity 0.2s ease; visibility: visible !important; flex-shrink: 0; filter: brightness(0) invert(1); object-fit: contain; } .ai-powered-section-mb .image-2760:hover, .ai-powered-section-mb .image-2761:hover { opacity: 0.9; } .div-8822-debug-md { overflow: hidden !important; } .div-8822-debug-md img { position: relative !important; top: 2px !important; } @media screen and (max-width: 479px) { .plan-imb-bottom-crp-mb { width: 282px !important; height: 171px !important; object-fit: cover !important; object-position: top !important; border-bottom-right-radius: 10px !important; } .build-ai-pwrd-img { margin-top: -12px !important; } .image-2753 { height: 172px !important; margin-top: auto !important; } } @media screen and (min-width: 1280px) and (max-width: 1439px) { .div-block-8821 { display: flex !important; flex-direction: column !important; } }