/* ============================================= ASD Commercial Solar & Battery: styles.css Bright, Vibrant & Attractive Modern UI/UX Redesign ============================================= */ /* -------- Design Tokens -------- */ .commercial-new-landing-page-css { /* Brand blues: vivid, bright */ --blue: #00AEEF; --blue-deep: #0077B6; --blue-mid: #0096D6; --blue-bright: #00C2FF; --blue-pale: #E6F6FF; --blue-glass: rgba(0, 174, 239, 0.12); --blue-glow: rgba(0, 174, 239, 0.35); /* Accent: vivid amber / solar orange */ --amber: #FF9800; --amber-deep: #E65100; --amber-light: #FFB74D; --amber-glow: rgba(255, 152, 0, 0.35); /* Solar orange-yellow accent */ --solar: #FF6B1A; --solar-glow: rgba(255, 107, 26, 0.35); /* Neutrals: Crisp High Contrast */ --ink: #071e3d; --ink-2: #0c2a52; --white: #ffffff; --grey-50: #f4f9ff; --grey-100: #e8f3fe; --grey-200: #d0e4f7; --grey-300: #b2d3f2; --grey-400: #78a3cd; --grey-600: #426789; --grey-800: #1b3854; --text: #0f2b48; --text-muted: #3e6284; /* Section backgrounds: Vibrant Light Palette */ --section-light: #f7fbff; --section-alt: #ebf5fe; /* Radii */ --r-xs: 6px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-full: 100px; /* Shadows */ --sh-sm: 0 4px 16px rgba(0, 120, 215, 0.08); --sh-md: 0 12px 40px rgba(0, 120, 215, 0.12); --sh-lg: 0 24px 70px rgba(0, 120, 215, 0.16); --sh-blue: 0 8px 36px rgba(0, 174, 239, 0.32); --sh-glow: 0 0 60px rgba(0, 174, 239, 0.25); --sh-amber: 0 8px 36px rgba(255, 152, 0, 0.32); /* Easing */ --ease: cubic-bezier(.4, 0, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); } /* -------- Reset -------- */ .commercial-new-landing-page-css *, .commercial-new-landing-page-css *::before, .commercial-new-landing-page-css *::after { box-sizing: border-box; margin: 0; padding: 0 } .commercial-new-landing-page-css { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-weight: 400; color: var(--text); /* One continuous wash painted behind the whole page instead of each section carrying its own gradient — this is what makes every section boundary dissolve into the next instead of showing a seam, the same trick already used between the hero and trust strip. Sections below are transparent so this shows straight through them. */ background: linear-gradient(180deg, #EBF6FF 0%, #ffffff 7%, #EBF6FF 14%, #F7FBFF 28%, #ffffff 42%, #F0F8FF 56%, #E9F5FF 70%, #F7FBFF 84%, #ffffff 100% ); line-height: 1.75; font-size: 1.05rem; -webkit-font-smoothing: antialiased; /* Declaring the clip here alone does nothing: while is `visible` the body's overflow is propagated up to the viewport and the body drops back to `visible`, so no box is actually clipped -- the scrollbar just disappears while the overflowing strip stays there to be dragged. The working clip is on above; this stays as a backstop. `clip` is used in preference to `hidden` because it does not turn the element into a scroll container (smooth scrolling and anchors keep working); `hidden` is the fallback for browsers that lack `clip`. */ overflow-x: hidden; overflow-x: clip } .commercial-new-landing-page-css img { max-width: 100%; height: auto; display: block } .commercial-new-landing-page-css a { text-decoration: none; color: inherit } .commercial-new-landing-page-css ul { list-style: none } .commercial-new-landing-page-css em { font-style: normal } .commercial-new-landing-page-css button { font-family: 'DM Sans', sans-serif } /* -------- Particle Canvas -------- */ .commercial-new-landing-page-css #particleCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0 } /* -------- Layout -------- */ .commercial-new-landing-page-css .container { max-width: 1200px; margin: 0 auto; padding: 0 28px } .commercial-new-landing-page-css .section { padding: 100px 0 } .commercial-new-landing-page-css .section__header { text-align: center; max-width: 800px; margin: 0 auto 56px } .commercial-new-landing-page-css .section__header h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; color: var(--ink); line-height: 1.16; letter-spacing: -0.025em; margin-bottom: 18px } .commercial-new-landing-page-css .section__header p { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 400; color: var(--text-muted); line-height: 1.78 } /* -------- Chips / Eyebrows -------- */ .commercial-new-landing-page-css .chip { display: inline-block; padding: 7px 20px; border-radius: var(--r-full); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; background: rgba(0, 174, 239, 0.12); color: #0077B6; border: 1.5px solid rgba(0, 174, 239, 0.3) } .commercial-new-landing-page-css .chip--light { background: rgba(255, 255, 255, 0.85); color: #0077B6; border-color: rgba(0, 174, 239, 0.3); box-shadow: var(--sh-sm) } .commercial-new-landing-page-css .chip--glow { background: rgba(0, 174, 239, 0.14); border-color: rgba(0, 174, 239, 0.45); box-shadow: 0 0 24px rgba(0, 174, 239, 0.18) } .commercial-new-landing-page-css .chip--amber { background: rgba(255, 152, 0, 0.14); color: #D97706; border-color: rgba(255, 152, 0, 0.35) } /* -------- Buttons -------- */ .commercial-new-landing-page-css .btn { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-weight: 700; border: none; cursor: pointer; border-radius: var(--r-full); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; text-decoration: none; line-height: 1; position: relative; overflow: hidden } .commercial-new-landing-page-css .btn--primary { background: linear-gradient(135deg, #00AEEF 0%, #0077B6 100%); color: var(--white); padding: 16px 40px; font-size: 1rem; box-shadow: var(--sh-blue) } .commercial-new-landing-page-css .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0, 174, 239, 0.45) } .commercial-new-landing-page-css .btn--primary:disabled, .commercial-new-landing-page-css .btn--primary.is-submitting { opacity: 0.65; cursor: not-allowed; transform: none; animation: none; } .commercial-new-landing-page-css .btn--amber { background: linear-gradient(135deg, #FF9800 0%, #E65100 100%); color: var(--white); padding: 16px 40px; font-size: 1rem; box-shadow: var(--sh-amber) } .commercial-new-landing-page-css .btn--amber:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(255, 152, 0, 0.48) } .commercial-new-landing-page-css .btn--white { background: var(--white); color: var(--blue-deep); padding: 16px 40px; font-size: 1rem; box-shadow: 0 6px 28px rgba(0, 100, 200, 0.14); border: 1.5px solid var(--grey-200) } .commercial-new-landing-page-css .btn--white:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(0, 100, 200, 0.22); border-color: var(--blue) } .commercial-new-landing-page-css .btn--outline { background: var(--white); color: #0077B6; padding: 15px 38px; font-size: 1rem; border: 2px solid #00AEEF; box-shadow: 0 4px 20px rgba(0, 174, 239, 0.12) } .commercial-new-landing-page-css .btn--outline:hover { background: #E6F6FF; border-color: #0077B6; transform: translateY(-2px) } .commercial-new-landing-page-css .btn--sm { padding: 12px 28px; font-size: .875rem } .commercial-new-landing-page-css .btn--lg { padding: 20px 52px; font-size: 1.05rem } .commercial-new-landing-page-css .btn--full { width: 100%; justify-content: center } .commercial-new-landing-page-css .pulse-btn { animation: pulseShadow 3s ease-in-out infinite } @keyframes pulseShadow { 0%, 100% { box-shadow: var(--sh-blue) } 50% { box-shadow: 0 10px 50px rgba(0, 174, 239, 0.55) } } /* -------- FAB -------- */ .commercial-new-landing-page-css .fab { position: fixed; bottom: 28px; right: 28px; z-index: 999; background: linear-gradient(135deg, #00AEEF, #0077B6); color: var(--white); padding: 14px 28px; border-radius: var(--r-full); font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 36px rgba(0, 119, 182, 0.45); transform: translateY(80px); opacity: 0; transition: transform .45s var(--spring), opacity .35s, box-shadow .25s } .commercial-new-landing-page-css .fab.show { transform: translateY(0); opacity: 1 } .commercial-new-landing-page-css .fab:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0, 119, 182, 0.55) } /* -------- Notification Bar -------- */ .commercial-new-landing-page-css .notif-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: linear-gradient(135deg, #00C2FF 0%, #0077B6 50%, #00AEEF 100%); color: #fff; padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: .8rem; font-weight: 700; box-shadow: 0 6px 30px rgba(0, 119, 182, 0.35); transition: transform .4s var(--ease); border-bottom: 1.5px solid rgba(255, 255, 255, 0.35) } .commercial-new-landing-page-css .notif-bar.hidden { transform: translateY(-100%) } .commercial-new-landing-page-css .notif-bar__text { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; text-align: center } .commercial-new-landing-page-css .notif-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 15, 35, 0.25); padding: 6px 14px; border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, 0.3) } .commercial-new-landing-page-css .notif-badge svg { flex-shrink: 0; color: #FFD54F; filter: drop-shadow(0 0 6px rgba(255, 213, 79, 0.6)) } .commercial-new-landing-page-css .notif-pulse { width: 8px; height: 8px; border-radius: 50%; background: #FFD54F; box-shadow: 0 0 10px #FFD54F; animation: pulseDot 1.5s ease-in-out infinite; flex-shrink: 0 } .commercial-new-landing-page-css .notif-bar__msg { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffffff; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,0.2) } /* Inline countdown inside notification bar */ .commercial-new-landing-page-css .notif-countdown { display: flex; align-items: center; gap: 5px } .commercial-new-landing-page-css .notif-time-box { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 8px; padding: 3px 10px; min-width: 48px; position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.6); transition: transform .2s var(--ease) } .commercial-new-landing-page-css .notif-time-box:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.32) } .commercial-new-landing-page-css .notif-time-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) } .commercial-new-landing-page-css .notif-time-box span { font-family: 'Bebas Neue', 'DM Sans', sans-serif; font-size: 1.45rem; font-weight: 400; color: #ffffff; line-height: 1; text-shadow: 0 2px 8px rgba(0, 30, 60, 0.4) } .commercial-new-landing-page-css .notif-time-box small { font-size: .52rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFD54F; margin-top: 1px; text-shadow: 0 1px 2px rgba(0,0,0,0.3) } .commercial-new-landing-page-css .notif-sep { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: #FFD54F; line-height: 1; animation: blinkSep 1s step-end infinite; margin: 0 1px; align-self: center; text-shadow: 0 0 8px rgba(255, 213, 79, 0.6) } @keyframes blinkSep { 0%, 100% { opacity: 1 } 50% { opacity: .25 } } .commercial-new-landing-page-css .notif-bar__close { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: rgba(255, 255, 255, 0.9); cursor: pointer; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; margin-left: 8px; transition: all .2s } .commercial-new-landing-page-css .notif-bar__close:hover { color: #fff; background: rgba(255, 255, 255, 0.3) } /* -------- Nav -------- */ .commercial-new-landing-page-css .nav { position: fixed; /* The notification bar wraps to two rows on narrow screens, so its height is not a constant we can hard-code here. `--notif-h` is measured from the live element in JS (and kept up to date on resize), with the desktop one-row height as the fallback for a no-JS render. */ top: var(--notif-h, 62px); left: 0; right: 0; z-index: 900; padding: 22px 0; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 119, 182, 0.08); transition: background .3s, box-shadow .3s, padding .3s, top .3s, border-color .3s } .commercial-new-landing-page-css .nav.notif-hidden { top: 0 } .commercial-new-landing-page-css .nav.scrolled { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 4px 28px rgba(0, 100, 200, 0.08); border-bottom-color: transparent; padding: 14px 0 } .commercial-new-landing-page-css .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1600px } .commercial-new-landing-page-css .brand { display: flex; align-items: center; gap: 12px; z-index: 10; position: relative; transition: transform .25s var(--ease) } .commercial-new-landing-page-css .brand:hover { transform: scale(1.03) } .commercial-new-landing-page-css .brand img { height: 44px; width: auto } .commercial-new-landing-page-css .nav__links { display: flex; flex-wrap: nowrap; gap: 18px } .commercial-new-landing-page-css .nav__links a { position: relative; display: inline-block; padding: 4px 0; font-size: 1rem; font-weight: 700; color: var(--ink); transition: color .2s; white-space: nowrap } .commercial-new-landing-page-css .nav__links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00AEEF, #0077B6); transition: right .25s var(--ease) } .commercial-new-landing-page-css .nav__links a:hover::after { right: 0 } .commercial-new-landing-page-css .nav.scrolled .nav__links a { color: var(--text-muted) } .commercial-new-landing-page-css .nav__links a:hover, .commercial-new-landing-page-css .nav.scrolled .nav__links a:hover { color: var(--blue) } .commercial-new-landing-page-css .nav__actions { display: flex; align-items: center; gap: 14px } .commercial-new-landing-page-css .nav__phone { display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; color: var(--ink); transition: color .2s } .commercial-new-landing-page-css .nav__phone svg { width: 16px; height: 16px; color: var(--blue) } .commercial-new-landing-page-css .nav.scrolled .nav__phone { color: var(--text) } .commercial-new-landing-page-css .nav__phone:hover { color: var(--blue) } .commercial-new-landing-page-css .burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 1001; position: relative } .commercial-new-landing-page-css .burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: var(--ease) .3s } /* -------- HERO -------- */ .commercial-new-landing-page-css .hero { position: relative; min-height: auto; display: flex; align-items: center; background: linear-gradient( 180deg, #EBF6FF 0%, #D8EFFF 40%, #E6F4FF 75%, #ffffff 100%); padding: calc(var(--notif-h, 62px) + var(--nav-h, 88px) + 40px) 20px 65px; /* `.hero__visual::before` sits 30px outside its box and spins forever, so its bounding box keeps growing and shrinking past the right edge. That is what let the whole page be dragged sideways and jitter under a finger. Clip it here, on the x axis only, so the video's drop shadow can still bleed vertically. */ overflow-x: hidden; overflow-x: clip; } .commercial-new-landing-page-css .hero::before { /* content: ''; */ position: absolute; inset: -10%; background: radial-gradient(ellipse 70% 55% at 70% 40%, rgba(0, 174, 239, 0.2) 0%, transparent 65%), radial-gradient(ellipse 50% 70% at 15% 85%, rgba(255, 152, 0, 0.12) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 90% 10%, rgba(0, 194, 255, 0.17) 0%, transparent 60%), radial-gradient(circle, rgba(0, 100, 180, 0.05) 1px, transparent 1.5px); background-size: auto, auto, auto, 26px 26px; animation: heroGlowDrift 22s ease-in-out infinite alternate; pointer-events: none } @keyframes heroGlowDrift { 0% { transform: translate3d(0, 0, 0) scale(1) } 100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.04) } } .commercial-new-landing-page-css .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent); pointer-events: none } .commercial-new-landing-page-css .hero__inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 2 } .commercial-new-landing-page-css .hero__top { color: var(--ink); max-width: 980px; margin-bottom: 48px } .commercial-new-landing-page-css .hero__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start } .commercial-new-landing-page-css .hero__content { color: var(--ink); padding-top: 6px } .commercial-new-landing-page-css .hero__content > *:last-child { margin-bottom: 0 } .commercial-new-landing-page-css .hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 174, 239, 0.12); border: 1.5px solid rgba(0, 174, 239, 0.35); border-radius: var(--r-full); padding: 9px 22px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0077B6; margin-bottom: 24px; box-shadow: 0 4px 16px rgba(0, 174, 239, 0.1) } .commercial-new-landing-page-css .hero__badge svg { width: 15px; height: 15px; color: #00AEEF; filter: drop-shadow(0 0 5px rgba(0, 174, 239, 0.6)); animation: badgeGlow 2.4s ease-in-out infinite } @keyframes badgeGlow { 0%, 100% { opacity: 1 } 50% { opacity: .55 } } .commercial-new-landing-page-css .hero h1 { font-family: 'DM Sans', sans-serif; /* font-size: clamp(2.6rem, 5.1vw, 4.2rem); */ font-size: 58px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 22px; color: var(--ink); text-shadow: 0 2px 30px rgba(0, 100, 200, 0.08) } .commercial-new-landing-page-css .hero h1 span { position: relative; background: linear-gradient(135deg, #00AEEF 0%, #0077B6 60%, #FF9800 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text } .commercial-new-landing-page-css .hero__top::after { content: ''; display: block; width: 84px; height: 5px; margin-top: 4px; border-radius: var(--r-full); background: linear-gradient(90deg, #00AEEF, #0077B6, #FF9800); box-shadow: 0 4px 14px rgba(0, 174, 239, 0.35) } .commercial-new-landing-page-css .hero__content_p{ margin-top: 36px; text-align: center; margin-top: 36px; text-align: center; background: #d9f1fd24; padding: 35px 20px; border-radius: 25px; box-shadow: 0px 0px 20px 0px #00000038; backdrop-filter: blur(100px); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 100, 200, 0.24), 0 0 0 2px rgb(0 174 239 / 3%), 0 0 0 8px rgb(255 255 255 / 0%); } .commercial-new-landing-page-css .hero__sub { font-size: 1.18rem; line-height: 1.72; color: var(--text-muted); margin-bottom: 36px; } .commercial-new-landing-page-css .hero__ctas { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;} .commercial-new-landing-page-css .hero__usps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding-top: 32px; border-top: 1.5px solid rgba(0, 119, 182, 0.14) } .commercial-new-landing-page-css .hero__usp { display: flex; align-items: center; gap: 12px; font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.4; padding: 12px 14px; background: rgba(255, 255, 255, 0.6); border: 1.5px solid rgba(0, 119, 182, 0.12); border-radius: var(--r-md); box-shadow: 0 2px 10px rgba(0, 100, 200, 0.05); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, background .25s } .commercial-new-landing-page-css .hero__usp:hover { transform: translateY(-3px); background: var(--white); border-color: rgba(0, 174, 239, 0.4); box-shadow: 0 10px 26px rgba(0, 100, 200, 0.14) } .commercial-new-landing-page-css .hero__usp svg { width: 17px; height: 17px; flex-shrink: 0; padding: 7px; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 174, 239, 0.16), rgba(0, 119, 182, 0.16)); box-sizing: content-box; color: #0077B6 } .commercial-new-landing-page-css .hero__visual { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 24px } .commercial-new-landing-page-css .hero__visual::before { content: ''; position: absolute; inset: -30px; z-index: 0; background: conic-gradient(from 0deg, rgba(0, 174, 239, 0.22), rgba(255, 152, 0, 0.14), rgba(0, 119, 182, 0.22), rgba(0, 174, 239, 0.22)); filter: blur(50px); opacity: .65; border-radius: var(--r-xl); animation: heroAuraSpin 16s linear infinite } @keyframes heroAuraSpin { to { transform: rotate(360deg) } } /* Video: larger, immersive */ .commercial-new-landing-page-css .hero__video-wrap { position: relative; z-index: 1; width: 100%; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 100, 200, 0.24), 0 0 0 2px rgba(0, 174, 239, 0.3), 0 0 0 8px rgba(255, 255, 255, 0.5); background: #000; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease), box-shadow .4s var(--ease) } .commercial-new-landing-page-css .hero__video-wrap:hover { transform: translateY(-4px); box-shadow: 0 40px 90px rgba(0, 100, 200, 0.3), 0 0 0 2px rgba(0, 174, 239, 0.45), 0 0 0 8px rgba(255, 255, 255, 0.6) } .commercial-new-landing-page-css .hero__video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-xl) } .commercial-new-landing-page-css .hero__video-badge { position: absolute; top: 18px; left: 18px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); border: 1px solid rgba(0, 174, 239, 0.3); color: var(--ink); padding: 7px 16px; border-radius: var(--r-full); font-size: .75rem; font-weight: 700; display: flex; align-items: center; gap: 7px; z-index: 3; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.1) } .commercial-new-landing-page-css .hero__video-badge svg { width: 13px; height: 13px; fill: #00AEEF; color: #00AEEF } .commercial-new-landing-page-css .hero__img-glow { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 85%; height: 80px; background: radial-gradient(ellipse, rgba(0, 174, 239, 0.35), transparent); filter: blur(25px); pointer-events: none } /* -------- Trust Strip (Exceptional Premium Design) -------- */ .commercial-new-landing-page-css .trust-strip { position: relative; background: linear-gradient(360deg, transparent 0%, #D8EFFF 40%, #e6f4ff 75%, #ffffff 100%); /* Same guard for the decorative orbs, which are placed with negative offsets and drift outwards on a transform. */ overflow-x: hidden; overflow-x: clip; padding: 100px 0 } .commercial-new-landing-page-css .trust-strip__bg { position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 174, 239, 0.06) 1px, transparent 1px), radial-gradient(rgba(0, 119, 182, 0.04) 1px, transparent 1px); background-size: 40px 40px, 30px 30px; opacity: 0.6 } .commercial-new-landing-page-css .trust-strip__orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.4; pointer-events: none; animation: orbFloat 20s ease-in-out infinite alternate } .commercial-new-landing-page-css .trust-strip__orb--1 { width: 280px; height: 280px; background: linear-gradient(135deg, #00C2FF, #0077B6); top: -120px; left: -120px; animation-delay: 0s } .commercial-new-landing-page-css .trust-strip__orb--2 { width: 320px; height: 320px; background: linear-gradient(135deg, #FF9800, #FFB74D); bottom: -80px; right: -80px; animation-delay: 2s } .commercial-new-landing-page-css .trust-strip__orb--3 { width: 180px; height: 180px; background: linear-gradient(135deg, #00AEEF, #0096D6); top: 40%; right: 15%; animation-delay: 4s } .commercial-new-landing-page-css .trust-strip__orb--4 { width: 220px; height: 220px; background: linear-gradient(135deg, #0077B6, #005f96); bottom: 10%; left: 10%; animation-delay: 6s } @keyframes orbFloat { 0% { transform: translate(0, 0) scale(1) rotate(0deg) } 100% { transform: translate(40px, -40px) scale(1.1) rotate(180deg) } } .commercial-new-landing-page-css .trust-strip__header { text-align: center; max-width: 1020px; margin: 0 auto 24px; position: relative; z-index: 2 } .commercial-new-landing-page-css .trust-strip__badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(0, 174, 239, 0.12); border: 1.5px solid rgba(0, 174, 239, 0.3); border-radius: var(--r-full); padding: 10px 24px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0077B6; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0, 174, 239, 0.15) } .commercial-new-landing-page-css .trust-strip__badge svg { width: 18px; height: 18px; filter: drop-shadow(0 0 6px rgba(0, 174, 239, 0.6)) } .commercial-new-landing-page-css .trust-strip__heading { font-family: 'DM Sans', sans-serif; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; color: var(--ink); margin-bottom: 20px; letter-spacing: -.02em; line-height: 1.12; background: linear-gradient(135deg, var(--ink) 0%, var(--blue-deep) 40%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; display: inline-block } .commercial-new-landing-page-css .trust-strip__heading::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--amber)); border-radius: var(--r-full); box-shadow: 0 4px 20px rgba(0, 174, 239, 0.35) } .commercial-new-landing-page-css .trust-strip__sub { font-family: 'DM Sans', sans-serif; font-size: 1.12rem; font-weight: 400; color: var(--text-muted); line-height: 1.8; margin: 0 auto } .commercial-new-landing-page-css .trust-strip__content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2 } .commercial-new-landing-page-css .trust-badges { width: 100%; /* margin-bottom: 56px */ } .commercial-new-landing-page-css .trust-badges__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px } .commercial-new-landing-page-css .trust-badges__grid--six { grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 0 } .commercial-new-landing-page-css .trust-badges__grid--logos { align-items: stretch } .commercial-new-landing-page-css .trust-badge-item.logo-only { background: var(--white); border: 1px solid rgba(0, 174, 239, 0.12); border-radius: var(--r-md); box-shadow: var(--sh-sm); display: flex; align-items: center; justify-content: center; padding: 18px 16px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); cursor: default } .commercial-new-landing-page-css .trust-badge-item.logo-only:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 174, 239, 0.18); border-color: rgba(0, 174, 239, 0.35) } .commercial-new-landing-page-css .trust-badge-item.logo-only .trust-badge-logo { width: 100%; height: 72px; background: transparent; border: none; padding: 0 } .commercial-new-landing-page-css .trust-badge-item.logo-only .trust-badge-logo img { width: 100%; height: 100%; object-fit: contain; filter: none } @media (max-width: 1024px) { .commercial-new-landing-page-css .trust-badge-item.logo-only .trust-badge-logo { height: 64px } } @media (max-width: 768px) { .commercial-new-landing-page-css .trust-badge-item.logo-only { padding: 14px 12px } .commercial-new-landing-page-css .trust-badge-item.logo-only .trust-badge-logo { height: 56px } } @media (max-width: 480px) { .commercial-new-landing-page-css .trust-badge-item.logo-only { padding: 12px 10px } .commercial-new-landing-page-css .trust-badge-item.logo-only .trust-badge-logo { height: 50px } } .commercial-new-landing-page-css .trust-badge-item { position: relative; background: var(--white); border: 2px solid rgba(0, 174, 239, 0.15); border-radius: var(--r-lg); padding: 28px 24px; display: flex; align-items: flex-start; gap: 20px; transition: all .35s var(--spring); box-shadow: 0 4px 24px rgba(0, 120, 215, 0.08); overflow: hidden; cursor: pointer } .commercial-new-landing-page-css .trust-badge-item::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(0, 174, 239, 0.05), transparent); opacity: 0; transition: opacity .3s; pointer-events: none } .commercial-new-landing-page-css .trust-badge-item:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 50px rgba(0, 174, 239, 0.2); border-color: rgba(0, 174, 239, 0.45) } .commercial-new-landing-page-css .trust-badge-item:hover::before { opacity: 1 } .commercial-new-landing-page-css .trust-badge-item:hover .trust-badge-icon { transform: scale(1.15) rotate(360deg); box-shadow: 0 8px 30px rgba(0, 174, 239, 0.4) } .commercial-new-landing-page-css .trust-badge-icon { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(0, 174, 239, 0.18), rgba(0, 119, 182, 0.1)); color: var(--blue-deep); transition: transform .4s var(--spring), box-shadow .3s } .commercial-new-landing-page-css .trust-badge-icon svg { width: 30px; height: 30px; stroke: var(--blue); transition: stroke-dashoffset .4s } .commercial-new-landing-page-css .trust-badge-content { flex: 1 } .commercial-new-landing-page-css .trust-badge-content strong { display: block; font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.3 } .commercial-new-landing-page-css .trust-badge-sub { font-size: .82rem; color: var(--text-muted); font-weight: 500; letter-spacing: .02em } .commercial-new-landing-page-css .trust-badge-check { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 174, 239, 0.08); color: var(--blue-deep); transition: all .3s; opacity: 0; transform: scale(0) rotate(-180deg); animation: checkIn 0.5s var(--spring) forwards 0.2s } .commercial-new-landing-page-css .trust-badge-item:hover .trust-badge-check { opacity: 1; transform: scale(1) rotate(0deg) } .commercial-new-landing-page-css .trust-badge-check svg { width: 18px; height: 18px; stroke: var(--blue-deep) } @keyframes checkIn { 0% { opacity: 0; transform: scale(0) rotate(-180deg) } 100% { opacity: 1; transform: scale(1) rotate(0deg) } } .commercial-new-landing-page-css .trust-strip__stats { display: flex; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center } .commercial-new-landing-page-css .trust-stat-item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 32px; background: var(--white); border: 2px solid rgba(0, 174, 239, 0.15); border-radius: var(--r-lg); box-shadow: var(--sh-sm); min-width: 140px; transition: all .3s var(--ease) } .commercial-new-landing-page-css .trust-stat-item:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0, 174, 239, 0.15); border-color: var(--blue) } .commercial-new-landing-page-css .trust-stat-number { font-family: 'DM Sans', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--blue-deep); line-height: 1; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text } .commercial-new-landing-page-css .trust-stat-label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); text-align: center } .commercial-new-landing-page-css .trust-strip__cta { text-align: center; margin-top: 24px } .commercial-new-landing-page-css .trust-strip__cta .btn { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 50%, #005f96 100%); box-shadow: 0 12px 40px rgba(0, 174, 239, 0.35); animation: pulseButton 3s ease-in-out infinite } .commercial-new-landing-page-css .trust-strip__cta .btn:hover { box-shadow: 0 20px 60px rgba(0, 174, 239, 0.45) } @keyframes pulseButton { 0%, 100% { box-shadow: 0 12px 40px rgba(0, 174, 239, 0.35) } 50% { box-shadow: 0 16px 50px rgba(0, 174, 239, 0.5) } } /* -------- Responsive Trust Strip (Exceptional) -------- */ @media (max-width: 992px) { .commercial-new-landing-page-css .trust-strip__orb--1, .commercial-new-landing-page-css .trust-strip__orb--4 { opacity: 0.3 } } @media (max-width: 768px) { .commercial-new-landing-page-css .trust-strip { padding: 70px 0 } .commercial-new-landing-page-css .trust-badges__grid { grid-template-columns: repeat(2, 1fr); gap: 16px } .commercial-new-landing-page-css .trust-badge-item { padding: 22px 18px } .commercial-new-landing-page-css .trust-badge-icon { width: 48px; height: 48px } .commercial-new-landing-page-css .trust-badge-icon svg { width: 26px; height: 26px } .commercial-new-landing-page-css .trust-stat-item { min-width: 100px; padding: 20px 16px } .commercial-new-landing-page-css .trust-stat-number { font-size: 1.8rem } } @media (max-width: 480px) { .commercial-new-landing-page-css .trust-strip { padding: 56px 0 } .commercial-new-landing-page-css .trust-strip__heading { font-size: 2rem } .commercial-new-landing-page-css .trust-badges__grid { grid-template-columns: 1fr } .commercial-new-landing-page-css .trust-badge-item { flex-direction: row; gap: 16px; padding: 20px 16px } .commercial-new-landing-page-css .trust-badge-check { width: 28px; height: 28px } .commercial-new-landing-page-css .trust-strip__stats { gap: 16px } .commercial-new-landing-page-css .trust-stat-item { min-width: 80px; padding: 16px 12px } .commercial-new-landing-page-css .trust-stat-number { font-size: 1.5rem } .commercial-new-landing-page-css .trust-stat-label { font-size: .72rem } } /* -------- Why Commercial Solar -------- */ .commercial-new-landing-page-css .why-solar { background: transparent } .commercial-new-landing-page-css .why-solar .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .why-solar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; margin-top: 20px } .commercial-new-landing-page-css .why-card { background: #fff; border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); padding: 36px 30px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; position: relative; overflow: hidden; box-shadow: var(--sh-sm) } .commercial-new-landing-page-css .why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease) } .commercial-new-landing-page-css .why-card:hover::before { transform: scaleX(1) } .commercial-new-landing-page-css .why-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 100, 200, 0.15); border-color: var(--blue) } .commercial-new-landing-page-css .why-card__icon { width: 56px; height: 56px; margin-bottom: 22px; background: linear-gradient(135deg, rgba(0, 174, 239, 0.15), rgba(0, 174, 239, 0.05)); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center } .commercial-new-landing-page-css .why-card__icon svg { width: 32px; height: 32px } .commercial-new-landing-page-css .why-card h4 { font-family: 'DM Sans', sans-serif; font-size: 1.08rem; font-weight: 800; color: var(--ink); margin-bottom: 12px } .commercial-new-landing-page-css .why-card p { font-size: .95rem; color: var(--text-muted); line-height: 1.72 } /* -------- Comparison Table -------- */ .commercial-new-landing-page-css .comparison { background: transparent } .commercial-new-landing-page-css .comparison .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px } .commercial-new-landing-page-css .comp-card { background: var(--white); border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); padding: 38px 30px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; position: relative; overflow: hidden; box-shadow: var(--sh-sm) } .commercial-new-landing-page-css .comp-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); opacity: 0; transition: opacity .3s } .commercial-new-landing-page-css .comp-card:hover::before { opacity: 1 } .commercial-new-landing-page-css .comp-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 100, 200, 0.16); border-color: var(--blue) } .commercial-new-landing-page-css .comp-card--highlight { border-color: var(--blue); box-shadow: var(--sh-blue); background: linear-gradient(160deg, #f0faff, #fff) } .commercial-new-landing-page-css .comp-card--highlight::before { opacity: 1 } .commercial-new-landing-page-css .comp-card__icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(0, 174, 239, 0.18), rgba(0, 174, 239, 0.08)); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: 22px } .commercial-new-landing-page-css .comp-card__icon svg { width: 30px; height: 30px; color: var(--blue) } .commercial-new-landing-page-css .comp-card h3 { font-family: 'DM Sans', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 14px } .commercial-new-landing-page-css .comp-card__desc { font-size: .95rem; color: var(--text-muted); line-height: 1.72; margin-bottom: 22px } .commercial-new-landing-page-css .comp-card__label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 8px } .commercial-new-landing-page-css .comp-card__text { font-size: .9rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 18px } .commercial-new-landing-page-css .comp-card__tag { display: inline-block; padding: 6px 16px; border-radius: var(--r-full); background: rgba(0, 174, 239, 0.12); color: var(--blue-deep); font-size: .75rem; font-weight: 800 } .commercial-new-landing-page-css .comp-card--highlight .comp-card__tag { background: rgba(255, 152, 0, 0.15); color: var(--amber-deep) } /* -------- Calculator -------- */ .commercial-new-landing-page-css .calculator { background: transparent; position: relative; overflow: hidden } .commercial-new-landing-page-css .calculator::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 85% 15%, rgba(0, 174, 239, 0.15), transparent), radial-gradient(ellipse 45% 55% at 10% 85%, rgba(255, 152, 0, 0.12), transparent); pointer-events: none } .commercial-new-landing-page-css .calculator .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .calculator .section__header p { color: var(--text-muted) } .commercial-new-landing-page-css .calc-wrap { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; background: #ffffff; border: 1.5px solid var(--grey-200); border-radius: var(--r-xl); padding: 48px 44px; box-shadow: var(--sh-md) } .commercial-new-landing-page-css .calc-tabs { display: flex; gap: 8px; margin-bottom: 38px; background: var(--grey-100); border-radius: var(--r-full); padding: 5px } .commercial-new-landing-page-css .calc-tab { flex: 1; padding: 13px 20px; border: none; border-radius: var(--r-full); background: transparent; color: var(--text-muted); font-size: .9rem; font-weight: 700; cursor: pointer; transition: all .3s var(--ease) } .commercial-new-landing-page-css .calc-tab.active { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; box-shadow: var(--sh-blue) } .commercial-new-landing-page-css .calc-tab:hover:not(.active) { color: var(--ink) } .commercial-new-landing-page-css .calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 34px } .commercial-new-landing-page-css .calc-field { display: flex; flex-direction: column; gap: 6px } .commercial-new-landing-page-css .calc-field.full { grid-column: 1/-1 } .commercial-new-landing-page-css .calc-field label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted) } .commercial-new-landing-page-css .calc-field input, .commercial-new-landing-page-css .calc-field select { background: var(--white); border: 1.5px solid var(--grey-200); border-radius: var(--r-sm); padding: 15px 17px; color: var(--ink); font-size: .95rem; font-family: inherit; transition: border-color .2s, background .2s; outline: none } .commercial-new-landing-page-css .calc-field input::placeholder { color: var(--grey-400) } .commercial-new-landing-page-css .calc-field select option { background: #fff; color: var(--ink) } .commercial-new-landing-page-css .calc-field input:focus, .commercial-new-landing-page-css .calc-field select:focus { border-color: var(--blue); background: rgba(0, 174, 239, 0.05) } .commercial-new-landing-page-css .calc-toggle-row { display: flex; gap: 12px; margin-bottom: 24px } .commercial-new-landing-page-css .calc-toggle { flex: 1; padding: 14px; border: 1.5px solid var(--grey-200); border-radius: var(--r-sm); background: var(--white); color: var(--text-muted); font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s; text-align: center } .commercial-new-landing-page-css .calc-toggle.active { border-color: var(--blue); background: rgba(0, 174, 239, 0.12); color: var(--blue-deep) } .commercial-new-landing-page-css .calc-btn-row { text-align: center; margin-bottom: 34px } /* Calculator Results */ .commercial-new-landing-page-css .calc-results { display: none; border-top: 1.5px solid var(--grey-200); padding-top: 34px } .commercial-new-landing-page-css .calc-results.visible { display: block; animation: fadeUp .5s var(--ease) } .commercial-new-landing-page-css .calc-results__title { font-family: 'DM Sans', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 26px; text-align: center } .commercial-new-landing-page-css .calc-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 26px } .commercial-new-landing-page-css .calc-result-card { background: linear-gradient(145deg, #e6f6ff, #f0f9ff); border: 1.5px solid rgba(0, 174, 239, 0.3); border-radius: var(--r-md); padding: 22px; text-align: center } .commercial-new-landing-page-css .calc-result-card__value { font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 800; color: var(--blue-deep); line-height: 1; margin-bottom: 8px } .commercial-new-landing-page-css .calc-result-card__label { font-size: .8rem; color: var(--text-muted); font-weight: 600 } .commercial-new-landing-page-css .calc-disclaimer { background: #FFF8E7; border: 1.5px solid #FFE0B2; border-radius: var(--r-md); padding: 18px 22px; font-size: .84rem; color: #6D4C41; line-height: 1.72; margin-bottom: 26px } .commercial-new-landing-page-css .calc-disclaimer strong { color: #E65100 } .commercial-new-landing-page-css .calc-results__cta { text-align: center } /* -------- Incentive Section -------- */ .commercial-new-landing-page-css .incentive { background: transparent; position: relative; overflow: hidden } .commercial-new-landing-page-css .incentive::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, rgba(0, 174, 239, 0.14), transparent 30%), radial-gradient(circle at 35% 50%, rgba(255, 152, 0, 0.12), transparent 60%); pointer-events: none } .commercial-new-landing-page-css .incentive .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .incentive .section__header p { color: var(--text-muted) } .commercial-new-landing-page-css .incentive__content { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto } /* Compact card grid for the shorter explainer blocks */ .commercial-new-landing-page-css .incentive__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px } .commercial-new-landing-page-css .incentive__card { padding: 24px 26px; background: #ffffff; border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: border-color .3s, box-shadow .3s, transform .3s } .commercial-new-landing-page-css .incentive__card:hover { border-color: var(--blue); box-shadow: var(--sh-md); transform: translateY(-2px) } .commercial-new-landing-page-css .incentive__card h3, .commercial-new-landing-page-css .incentive__checklist h3 { font-family: 'DM Sans', sans-serif; font-size: 1.12rem; font-weight: 800; color: var(--ink); margin-bottom: 10px; display: flex; align-items: center; gap: 10px } .commercial-new-landing-page-css .incentive__card h3 svg, .commercial-new-landing-page-css .incentive__checklist h3 svg { width: 21px; height: 21px; color: var(--blue); flex-shrink: 0 } .commercial-new-landing-page-css .incentive__card p { font-size: .95rem; color: var(--text-muted); line-height: 1.65; margin: 0 } /* Amber highlight banner for the 90-day rule */ .commercial-new-landing-page-css .incentive__highlight { display: flex; align-items: flex-start; gap: 20px; background: linear-gradient(135deg, #FFF6E8 0%, #FFEFD6 100%); border: 1.5px solid #F5D9A0; border-radius: var(--r-lg); padding: 26px 30px; margin-bottom: 20px; box-shadow: var(--sh-sm) } .commercial-new-landing-page-css .incentive__highlight-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: #F5A623; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(245, 166, 35, 0.35) } .commercial-new-landing-page-css .incentive__highlight-icon svg { width: 24px; height: 24px; color: #fff } .commercial-new-landing-page-css .incentive__highlight h3 { font-family: 'DM Sans', sans-serif; font-size: 1.16rem; font-weight: 800; color: var(--ink); margin-bottom: 6px } .commercial-new-landing-page-css .incentive__highlight p { font-size: .96rem; color: #7A5A1E; line-height: 1.65; margin: 0 } /* Checklist panel */ .commercial-new-landing-page-css .incentive__checklist { padding: 26px 30px; background: #ffffff; border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm); margin-bottom: 24px } .commercial-new-landing-page-css .incentive__checklist ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 28px } .commercial-new-landing-page-css .incentive__checklist ul li { font-size: .92rem; color: var(--text-muted); line-height: 1.6; padding-left: 24px; position: relative; margin-bottom: 10px } .commercial-new-landing-page-css .incentive__checklist ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(0, 174, 239, 0.4) } .commercial-new-landing-page-css .incentive__disclaimer { background: #F0F7FF; border: 1.5px solid #D0E4F5; border-radius: var(--r-md); padding: 18px 26px; font-size: .85rem; color: var(--text-muted); line-height: 1.65; font-style: italic } .commercial-new-landing-page-css .incentive__cta { text-align: center; margin-top: 36px } @media (max-width: 780px) { .commercial-new-landing-page-css .incentive__grid { grid-template-columns: 1fr } .commercial-new-landing-page-css .incentive__checklist ul { grid-template-columns: 1fr } .commercial-new-landing-page-css .incentive__highlight { flex-direction: column } } /* -------- BESS Comparison -------- */ .commercial-new-landing-page-css .bess-compare { background: transparent } .commercial-new-landing-page-css .bess-compare .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .bess-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 38px } .commercial-new-landing-page-css .bess-card { background: var(--white); border: 1.5px solid var(--grey-200); border-radius: var(--r-xl); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; box-shadow: var(--sh-sm) } .commercial-new-landing-page-css .bess-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 100, 200, 0.15) } .commercial-new-landing-page-css .bess-card__header { padding: 30px 30px 0; margin-bottom: 22px } .commercial-new-landing-page-css .bess-card__tag { display: inline-block; padding: 6px 16px; border-radius: var(--r-full); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px } .commercial-new-landing-page-css .bess-card:first-child .bess-card__tag { background: rgba(0, 174, 239, 0.12); color: var(--blue-deep) } .commercial-new-landing-page-css .bess-card:last-child .bess-card__tag { background: rgba(255, 152, 0, 0.15); color: var(--amber-deep) } .commercial-new-landing-page-css .bess-card__header h3 { font-family: 'DM Sans', sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--ink) } .commercial-new-landing-page-css .bess-card__body { padding: 0 30px 30px } .commercial-new-landing-page-css .bess-card__row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1.5px solid var(--grey-100); font-size: .9rem; gap: 16px } .commercial-new-landing-page-css .bess-card__row:last-child { border-bottom: none } .commercial-new-landing-page-css .bess-card__row-label { color: var(--text-muted); font-weight: 500 } .commercial-new-landing-page-css .bess-card__row-value { color: var(--ink); font-weight: 700; text-align: right; flex-shrink: 0; max-width: 55% } .commercial-new-landing-page-css .bess-shared { background: var(--white); border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); padding: 30px 36px; box-shadow: var(--sh-sm) } .commercial-new-landing-page-css .bess-shared h4 { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--ink); margin-bottom: 18px } .commercial-new-landing-page-css .bess-shared ul { display: flex; flex-wrap: wrap; gap: 12px } .commercial-new-landing-page-css .bess-shared ul li { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--text-muted); background: var(--section-light); padding: 9px 18px; border-radius: var(--r-full); border: 1px solid rgba(0, 174, 239, 0.2) } .commercial-new-landing-page-css .bess-shared ul li svg { width: 14px; height: 14px; color: var(--blue); flex-shrink: 0 } /* -------- Eligibility Checklist -------- */ .commercial-new-landing-page-css .eligibility { background: transparent } .commercial-new-landing-page-css .eligibility .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .elig-list { max-width: 740px; margin: 0 auto } .commercial-new-landing-page-css .elig-item { display: flex; align-items: flex-start; gap: 18px; padding: 22px 0; border-bottom: 1.5px solid var(--grey-200); cursor: pointer; transition: background .2s } .commercial-new-landing-page-css .elig-item:last-child { border-bottom: none } .commercial-new-landing-page-css .elig-check { width: 30px; height: 30px; border: 2px solid var(--grey-300); border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .25s var(--ease); margin-top: 2px } .commercial-new-landing-page-css .elig-check svg { width: 17px; height: 17px; color: #fff; opacity: 0; transition: opacity .2s } .commercial-new-landing-page-css .elig-item.checked .elig-check { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); border-color: var(--blue); box-shadow: 0 0 16px rgba(0, 174, 239, 0.4) } .commercial-new-landing-page-css .elig-item.checked .elig-check svg { opacity: 1 } .commercial-new-landing-page-css .elig-item__text { font-size: 1.02rem; color: var(--text); line-height: 1.65 } .commercial-new-landing-page-css .elig-progress { max-width: 740px; margin: 36px auto 0; text-align: center } .commercial-new-landing-page-css .elig-progress__bar { height: 8px; background: var(--grey-200); border-radius: var(--r-full); overflow: hidden; margin-bottom: 14px } .commercial-new-landing-page-css .elig-progress__fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); border-radius: var(--r-full); transition: width .4s var(--ease); width: 0; box-shadow: 0 0 12px rgba(0, 174, 239, 0.5) } .commercial-new-landing-page-css .elig-progress__text { font-size: .88rem; color: var(--text-muted) } .commercial-new-landing-page-css .elig-disclaimer { max-width: 740px; margin: 26px auto 0; font-size: .84rem; color: var(--grey-400); text-align: center; line-height: 1.72 } .commercial-new-landing-page-css .elig-cta { text-align: center; margin-top: 38px } /* -------- Real Projects -------- */ .commercial-new-landing-page-css .projects { background: transparent } .commercial-new-landing-page-css .projects .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px } .commercial-new-landing-page-css .project-card { background: var(--white); border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; box-shadow: var(--sh-sm) } .commercial-new-landing-page-css .project-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 100, 200, 0.15) } .commercial-new-landing-page-css .project-card__img { position: relative; height: 195px; overflow: hidden; background: linear-gradient(135deg, var(--blue-pale), var(--grey-100)) } .commercial-new-landing-page-css .project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease) } .commercial-new-landing-page-css .project-card:hover .project-card__img img { transform: scale(1.07) } .commercial-new-landing-page-css .project-card__overlay { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px } .commercial-new-landing-page-css .tag { padding: 5px 13px; border-radius: var(--r-full); background: rgba(7, 30, 61, 0.75); backdrop-filter: blur(8px); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase } .commercial-new-landing-page-css .project-card__body { padding: 20px 22px } .commercial-new-landing-page-css .project-card__body h4 { font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 5px } .commercial-new-landing-page-css .project-card__body p { font-size: .84rem; color: var(--text-muted) } .commercial-new-landing-page-css .projects__more { text-align: center; margin-top: 40px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px } .commercial-new-landing-page-css .projects-load-more__icon { width: 18px; height: 18px; transition: transform .35s var(--ease) } .commercial-new-landing-page-css #projectsLoadMoreBtn[aria-expanded="true"] .projects-load-more__icon { transform: rotate(180deg) } /* -------- Industries -------- */ /* A "blueprint" texture instead of another soft glow — feels distinct from every other section, but the section itself stays fully transparent so the shared body wash still shows through and the colour keeps sinking from how-works into here rather than cutting to something new. */ .commercial-new-landing-page-css .industries { background: transparent; position: relative; overflow: hidden } .commercial-new-landing-page-css .industries::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 119, 182, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 119, 182, 0.07) 1px, transparent 1px), radial-gradient(rgba(0, 119, 182, 0.16) 1.4px, transparent 1.4px); background-size: 56px 56px, 56px 56px, 56px 56px; background-position: -1px -1px, -1px -1px, -1px -1px; -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 45%, #000 35%, transparent 85%); mask-image: radial-gradient(ellipse 78% 70% at 50% 45%, #000 35%, transparent 85%); pointer-events: none } .commercial-new-landing-page-css .industries::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(0, 174, 239, 0.10), transparent 45%), radial-gradient(circle at 4% 94%, rgba(255, 152, 0, 0.07), transparent 45%); pointer-events: none } .commercial-new-landing-page-css .industries .container { position: relative; z-index: 2 } .commercial-new-landing-page-css .industries .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .industries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; counter-reset: industry } .commercial-new-landing-page-css .industry-card { counter-increment: industry; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 30px 26px 26px; background: #fff; border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; box-shadow: var(--sh-sm) } .commercial-new-landing-page-css .industry-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease) } .commercial-new-landing-page-css .industry-card::after { content: counter(industry, decimal-leading-zero); position: absolute; top: 6px; right: 16px; font-family: 'DM Sans', sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--blue-deep); opacity: .06; pointer-events: none; transition: opacity .35s, transform .35s var(--ease) } .commercial-new-landing-page-css .industry-card:hover { transform: translateY(-6px); box-shadow: 0 20px 54px rgba(0, 100, 200, 0.15); border-color: var(--blue) } .commercial-new-landing-page-css .industry-card:hover::before { transform: scaleX(1) } .commercial-new-landing-page-css .industry-card:hover::after { opacity: .12; transform: translateY(-3px) } .commercial-new-landing-page-css .industry-card__icon { width: 54px; height: 54px; background: linear-gradient(135deg, rgba(0, 174, 239, 0.18), rgba(0, 174, 239, 0.06)); border: 1px solid rgba(0, 174, 239, 0.18); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 20px; transition: transform .35s var(--ease), box-shadow .35s } .commercial-new-landing-page-css .industry-card:hover .industry-card__icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 10px 26px rgba(0, 174, 239, 0.28) } .commercial-new-landing-page-css .industry-card__icon svg { width: 27px; height: 27px; color: var(--blue) } .commercial-new-landing-page-css .industry-card h4 { font-size: 1.02rem; font-weight: 800; color: var(--ink); margin-bottom: 9px; position: relative; z-index: 1 } .commercial-new-landing-page-css .industry-card p { font-size: .87rem; color: var(--text-muted); line-height: 1.68; position: relative; z-index: 1 } @media (max-width: 480px) { .commercial-new-landing-page-css .industry-card::after { font-size: 2.1rem } } /* -------- Shared Slider Components -------- */ .commercial-new-landing-page-css .slider-arrow { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1.5px solid var(--grey-200); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-sm); transition: all .25s var(--ease); flex-shrink: 0 } .commercial-new-landing-page-css .slider-arrow svg { width: 20px; height: 20px } .commercial-new-landing-page-css .slider-arrow:hover { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; border-color: var(--blue); box-shadow: var(--sh-blue); transform: translateY(-2px) } .commercial-new-landing-page-css .slider-arrow:active { transform: translateY(0) } .commercial-new-landing-page-css .slider-arrow[disabled], .commercial-new-landing-page-css .slider-arrow.is-disabled { opacity: .35; pointer-events: none; box-shadow: none } .commercial-new-landing-page-css .slider-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 30px } .commercial-new-landing-page-css .slider-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--grey-300); cursor: pointer; padding: 0; transition: all .25s var(--ease) } .commercial-new-landing-page-css .slider-dot:hover { background: var(--grey-400) } .commercial-new-landing-page-css .slider-dot.is-active { width: 26px; border-radius: 5px; background: linear-gradient(90deg, var(--blue), var(--blue-deep)) } /* -------- How It Works -------- */ .commercial-new-landing-page-css .how-works { background: transparent; position: relative; overflow: hidden } .commercial-new-landing-page-css .how-works::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 174, 239, 0.12), transparent), radial-gradient(circle at 92% 88%, rgba(255, 152, 0, 0.09), transparent 45%); pointer-events: none } .commercial-new-landing-page-css .how-works .container { position: relative; z-index: 2 } .commercial-new-landing-page-css .how-works .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .how-works .section__header p { color: var(--text-muted) } .commercial-new-landing-page-css .steps-slider { display: flex; align-items: center; gap: 18px; max-width: 1150px; margin: 0 auto } .commercial-new-landing-page-css .steps-slider__prev, .commercial-new-landing-page-css .steps-slider__next { display: none } .commercial-new-landing-page-css .steps-slider__dots { display: none } .commercial-new-landing-page-css .steps-track { display: flex; align-items: stretch; gap: 34px; position: relative; flex: 1; min-width: 0 } /* Dashed path connecting every step, running through the icon circles */ .commercial-new-landing-page-css .steps-track::before { content: ''; position: absolute; top: 64px; left: 34px; right: 34px; height: 2px; background: repeating-linear-gradient(90deg, rgba(0, 174, 239, .4) 0 8px, transparent 8px 15px); z-index: 1 } .commercial-new-landing-page-css .step { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); padding: 30px 18px 26px; box-shadow: var(--sh-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s } /* Each card is its own stacking context; earlier cards must outrank the next card so their arrow chip (which overflows into that card's space) never gets painted over. */ .commercial-new-landing-page-css .step:nth-child(1) { z-index: 9 } .commercial-new-landing-page-css .step:nth-child(2) { z-index: 8 } .commercial-new-landing-page-css .step:nth-child(3) { z-index: 7 } .commercial-new-landing-page-css .step:nth-child(4) { z-index: 6 } .commercial-new-landing-page-css .step:nth-child(5) { z-index: 5 } /* Arrow chip marking the hand-off to the next step */ .commercial-new-landing-page-css .step:not(:last-child)::after { content: '→'; position: absolute; top: 64px; right: -34px; transform: translate(50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; font-size: .95rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 100, 200, 0.3); z-index: 1; transition: transform .35s var(--ease), box-shadow .35s } .commercial-new-landing-page-css .step:hover { transform: translateY(-6px); box-shadow: 0 18px 46px rgba(0, 100, 200, 0.14); border-color: var(--blue); z-index: 20 } .commercial-new-landing-page-css .step:hover::after { transform: translate(50%, -50%) scale(1.12) } .commercial-new-landing-page-css .step__num { position: relative; width: 68px; height: 68px; margin: 0 auto 20px; background: linear-gradient(135deg, rgba(0, 174, 239, 0.16), rgba(0, 174, 239, 0.05)); border: 2px solid rgba(0, 174, 239, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--blue-deep); box-shadow: 0 8px 22px rgba(0, 174, 239, 0.18); transition: all .35s var(--ease) } .commercial-new-landing-page-css .step__num svg { width: 28px; height: 28px } .commercial-new-landing-page-css .step__badge { position: absolute; bottom: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 100, 200, 0.3) } .commercial-new-landing-page-css .step:hover .step__num { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; border-color: var(--blue); box-shadow: 0 12px 32px rgba(0, 174, 239, 0.4); transform: scale(1.06) } .commercial-new-landing-page-css .step__eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); opacity: .7; margin-bottom: 6px } .commercial-new-landing-page-css .step h4 { font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 800; color: var(--ink); margin-bottom: 8px } .commercial-new-landing-page-css .step p { font-size: .87rem; color: var(--text-muted); line-height: 1.65; max-width: 180px; margin: 0 auto } /* -------- Built Around Your Business -------- */ /* Deliberately inverted (dark, asymmetric split) so it reads as a distinct "beat" in the page rhythm rather than another light card grid. */ .commercial-new-landing-page-css .built-for-you { /* Still a deliberate dark "beat", but eased in/out over the first and last ~14% of the section instead of cutting straight to ink, so it dissolves out of how-works and back into the FAQ rather than slamming into them. */ background: #0c2a52 ; position: relative; overflow: hidden } .commercial-new-landing-page-css .built-for-you::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 10% 15%, rgba(0, 174, 239, 0.22), transparent 45%), radial-gradient(circle at 92% 85%, rgba(0, 194, 255, 0.14), transparent 45%); pointer-events: none } .commercial-new-landing-page-css .built-for-you .container { position: relative; z-index: 2 } .commercial-new-landing-page-css .bfy-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center } .commercial-new-landing-page-css .bfy-intro h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px } .commercial-new-landing-page-css .bfy-intro p { font-size: 1.02rem; color: rgba(255, 255, 255, 0.66); line-height: 1.75; max-width: 420px; margin-bottom: 30px } .commercial-new-landing-page-css .bfy-intro__stat { display: flex; align-items: center; gap: 16px; padding-left: 18px; border-left: 2px solid rgba(0, 174, 239, 0.5); margin-bottom: 34px } .commercial-new-landing-page-css .bfy-intro__stat-num { font-family: 'DM Sans', sans-serif; font-size: 2.6rem; font-weight: 800; color: var(--blue-bright); line-height: 1 } .commercial-new-landing-page-css .bfy-intro__stat-label { font-size: .82rem; color: rgba(255, 255, 255, 0.55); line-height: 1.5 } .commercial-new-landing-page-css .bfy-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px } .commercial-new-landing-page-css .bfy-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); transition: transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s } .commercial-new-landing-page-css .bfy-item:hover { transform: translateY(-4px); border-color: rgba(0, 194, 255, 0.55); background: rgba(0, 174, 239, 0.12); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25) } .commercial-new-landing-page-css .bfy-item__icon { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 194, 255, 0.35), rgba(0, 174, 239, 0.1)); border: 1px solid rgba(0, 194, 255, 0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .25s var(--ease) } .commercial-new-landing-page-css .bfy-item:hover .bfy-item__icon { transform: scale(1.1) } .commercial-new-landing-page-css .bfy-item__icon svg { width: 18px; height: 18px; color: var(--blue-bright) } .commercial-new-landing-page-css .bfy-item__text { line-height: 1.35 } /* -------- Reviews -------- */ .commercial-new-landing-page-css .reviews { background: transparent; position: relative; overflow: hidden } /* .reviews::before { content: ''; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 174, 239, 0.10), transparent 70%); pointer-events: none } */ .commercial-new-landing-page-css .reviews .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .reviews-summary { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap } .commercial-new-landing-page-css .reviews-summary__stars { color: var(--amber); letter-spacing: 2px; font-size: 1.05rem } .commercial-new-landing-page-css .reviews-summary__text { color: var(--text-muted); font-size: .92rem; font-weight: 700 } .commercial-new-landing-page-css .reviews-slider { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1 } .commercial-new-landing-page-css .reviews-track { display: flex; gap: 26px; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 4px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none } .commercial-new-landing-page-css .reviews-track::-webkit-scrollbar { display: none } .commercial-new-landing-page-css .review-card { scroll-snap-align: start; flex: 0 0 calc(33.333% - 18px); display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--grey-200); border-radius: var(--r-lg); padding: 28px 28px 24px; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; box-shadow: var(--sh-sm); position: relative; overflow: hidden } .commercial-new-landing-page-css .review-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-deep)); opacity: 0; transition: opacity .3s var(--ease) } .commercial-new-landing-page-css .review-card:hover { transform: translateY(-6px); border-color: rgba(0, 174, 239, 0.35); box-shadow: 0 20px 60px rgba(0, 100, 200, 0.15) } .commercial-new-landing-page-css .review-card:hover::before { opacity: 1 } .commercial-new-landing-page-css .review-card__quote-mark { position: absolute; top: -6px; right: 22px; font-family: Georgia, 'Times New Roman', serif; font-size: 5.2rem; line-height: 1; color: var(--blue-glass); pointer-events: none; user-select: none } .commercial-new-landing-page-css .review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; position: relative; z-index: 1 } .commercial-new-landing-page-css .review-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: .98rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0 } .commercial-new-landing-page-css .review-card__id { display: flex; flex-direction: column; gap: 3px; min-width: 0 } .commercial-new-landing-page-css .review-card__id strong { color: var(--ink); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .commercial-new-landing-page-css .review-card__stars { margin-left: auto; color: var(--amber); font-size: .92rem; letter-spacing: 2px; flex-shrink: 0 } .commercial-new-landing-page-css .review-card p { position: relative; z-index: 1; font-size: .95rem; color: var(--text-muted); line-height: 1.75; margin-bottom: 0; flex: 1 } .commercial-new-landing-page-css .review-card__footer { display: flex; align-items: center; justify-content: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--grey-100) } .commercial-new-landing-page-css .review-card__brand { height: 24px; width: auto; max-width: 60%; opacity: .85 } .commercial-new-landing-page-css .author-tag { font-size: .72rem; font-weight: 700; color: var(--blue-deep); letter-spacing: .02em } /* -------- FAQ -------- */ .commercial-new-landing-page-css .faq { background: transparent } .commercial-new-landing-page-css .faq .section__header h2 { color: var(--ink) } .commercial-new-landing-page-css .faq__inner { max-width: 840px; margin: 0 auto } .commercial-new-landing-page-css .faq-cats { display: flex; gap: 10px; margin-bottom: 40px; justify-content: center; flex-wrap: wrap } .commercial-new-landing-page-css .faq-cat { padding: 11px 24px; border: 1.5px solid var(--grey-200); border-radius: var(--r-full); background: var(--white); color: var(--text-muted); font-size: .87rem; font-weight: 700; cursor: pointer; transition: all .2s } .commercial-new-landing-page-css .faq-cat.active { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; border-color: var(--blue); box-shadow: var(--sh-blue) } .commercial-new-landing-page-css .faq-cat:hover:not(.active) { border-color: var(--blue); color: var(--blue) } .commercial-new-landing-page-css .faq-group { display: none } .commercial-new-landing-page-css .faq-group.active { display: block } .commercial-new-landing-page-css .faq-item { border-bottom: 1.5px solid var(--grey-200) } .commercial-new-landing-page-css .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; background: none; border: none; cursor: pointer; text-align: left; font-size: 1.02rem; font-weight: 700; color: var(--ink); line-height: 1.5; transition: color .2s } .commercial-new-landing-page-css .faq-q:hover { color: var(--blue) } .commercial-new-landing-page-css .faq-arr { width: 22px; height: 22px; flex-shrink: 0; color: var(--grey-400); transition: transform .3s var(--ease), color .2s } .commercial-new-landing-page-css .faq-q[aria-expanded="true"] .faq-arr { transform: rotate(180deg); color: var(--blue) } .commercial-new-landing-page-css .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), padding .35s; padding: 0 0 } .commercial-new-landing-page-css .faq-a.open { max-height: 400px; padding: 0 0 24px } .commercial-new-landing-page-css .faq-a p { font-size: .97rem; color: var(--text-muted); line-height: 1.82 } /* -------- Final CTA / Lead Form -------- */ .commercial-new-landing-page-css .final-cta { background: transparent; position: relative; overflow: hidden } .commercial-new-landing-page-css .final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 55% at 30% 50%, rgba(0, 174, 239, 0.15), transparent); pointer-events: none } .commercial-new-landing-page-css .final-cta__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start } .commercial-new-landing-page-css .final-cta__left { color: var(--ink) } .commercial-new-landing-page-css .final-cta__left h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 800; line-height: 1.15; margin-bottom: 22px; color: var(--ink) } .commercial-new-landing-page-css .final-cta__left > p { font-size: 1.07rem; color: var(--text-muted); line-height: 1.82; margin-bottom: 34px } .commercial-new-landing-page-css .final-cta__reasons { list-style: none; margin-bottom: 38px } .commercial-new-landing-page-css .final-cta__reasons li { display: flex; align-items: center; gap: 13px; font-size: .97rem; font-weight: 600; color: var(--text); padding: 9px 0 } .commercial-new-landing-page-css .final-cta__reasons li svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0 } .commercial-new-landing-page-css .contact-list { margin-top: 34px } .commercial-new-landing-page-css .contact-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; font-size: .93rem; font-weight: 600; color: var(--text); transition: color .2s } .commercial-new-landing-page-css .contact-row:hover { color: var(--blue) } .commercial-new-landing-page-css .contact-row__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--blue) } .commercial-new-landing-page-css .contact-row__icon svg { width: 100%; height: 100% } /* Lead Form */ .commercial-new-landing-page-css .lead-form { background: #ffffff; border: 1.5px solid var(--grey-200); border-radius: var(--r-xl); padding: 44px 38px; box-shadow: var(--sh-lg) } .commercial-new-landing-page-css .lead-form__title { font-family: 'DM Sans', sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: 7px } .commercial-new-landing-page-css .lead-form__sub { font-size: .9rem; color: var(--text-muted); margin-bottom: 30px; line-height: 1.65 } .commercial-new-landing-page-css .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-bottom: 17px } .commercial-new-landing-page-css .field-group { display: flex; flex-direction: column; gap: 6px } .commercial-new-landing-page-css .field-group.full { grid-column: 1/-1 } .commercial-new-landing-page-css .field-group label { font-size: .78rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted) } .commercial-new-landing-page-css .field-group input, .commercial-new-landing-page-css .field-group select { background: var(--grey-50); border: 1.5px solid var(--grey-200); border-radius: var(--r-sm); padding: 14px 17px; color: var(--ink); font-size: .93rem; font-family: inherit; outline: none; transition: border-color .2s, background .2s } .commercial-new-landing-page-css .field-group input::placeholder { color: var(--grey-400) } .commercial-new-landing-page-css .field-group select option { background: #fff; color: var(--ink) } .commercial-new-landing-page-css .field-group input:focus, .commercial-new-landing-page-css .field-group select:focus { border-color: var(--blue); background: rgba(0, 174, 239, 0.05) } .commercial-new-landing-page-css .field-group .error, .commercial-new-landing-page-css .checkbox-group .error { display: none; color: #e5484d; font-size: .78rem; font-weight: 600; margin-top: -2px } /* 3 rows, in source order: the heading label, then the pills side by side, then the error message — each forced onto its own line with flex-basis:100%, so nothing before the pills, or the error text, ever shares a row with them. */ .commercial-new-landing-page-css .checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 22px; } /* :not(.check-pill) matters: without it this — meant only for the "Interested In" heading label — also matches the pill