/* ============================================================ 3P SOLAR — Enhanced Landing Page Stylesheet Author: Kiro Design System ============================================================ */ /* ---- LOCAL FONTS (self-hosted, no CDN) ---- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/inter-var.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/montserrat-var.woff2") format("woff2"); } /* ---- CSS VARIABLES ---- */ :root { /* Solar-amber core */ --primary-orange: #ef8934; --primary-orange-hover: #d97d0c; --primary-orange-light: #f7941d1f; --primary-amber: #ffb347; /* Deep navy/charcoal ground */ --dark-navy: #0d1117; --dark-card: #161b22; --dark-charcoal: #1c2128; /* Sky-blue / teal highlights */ --trust-blue: #0090c1; --trust-blue-hover: #00739b; --trust-blue-light: rgba(0, 144, 193, 0.12); --teal-accent: #14b8a6; --teal-accent-light: rgba(20, 184, 166, 0.12); --green-accent: #22c55e; --bg-light: #f5f7fa; --bg-section: #eef2f7; --bg-cream: #fef9f4; --body-text: #5a5e6b; --heading-color: #0d1117; --card-border: #e8ecef; --white: #ffffff; /* Gradients */ /* --gradient-hero: linear-gradient(135deg, rgba(13,17,23,0.94) 0%, rgba(15,37,55,0.88) 100%); */ --gradient-hero: linear-gradient( 135deg, rgb(13 17 23 / 48%) 0%, rgb(15 37 55 / 45%) 100% ); --gradient-orange: linear-gradient(135deg, #ef8934, #ffb347); --gradient-blue: linear-gradient(135deg, #0090c1, #00c6ff); --gradient-dark: linear-gradient(160deg, #0d1117 0%, #0f2537 100%); /* Tasteful "sunrise" sweep — solar orange into sky blue — for hero backdrops & dividers */ --gradient-sunrise: linear-gradient( 120deg, #ef8934 0%, #ffb347 45%, #0090c1 100% ); --gradient-sunrise-soft: linear-gradient( 120deg, #ffaf4f 0%, rgba(255, 179, 71, 0.1) 45%, rgba(0, 144, 193, 0.15) 100% ); --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08); --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.14); --shadow-orange: 0 8px 30px rgba(247, 148, 29, 0.35); --shadow-blue: 0 8px 30px rgba(0, 144, 193, 0.3); /* Motion — smooth, premium, not flashy */ --transition: all 0.25s ease-in-out; --transition-slow: all 0.4s ease-in-out; /* Moderate corporate radius scale (not pill-shaped / playful) */ --radius-card: 18px; --radius-card-sm: 12px; --radius-btn: 10px; } /* ---- RESET & BASE ---- */ *, *::before, *::after { box-sizing: border-box; } /* Scoped to this page. `overflow-x: clip` on is needed here to contain the hero glows / accent decor, but it must NOT apply sitewide: a non-visible overflow on stops the browser propagating 's overflow to the viewport, and the sitewide sheet forces `body { overflow-y: scroll }` (assets/css/style.css). Applied globally it left every other page with a second, inert scrollbar next to the real one. */ html:has(main.commercial-bess-page) { scroll-behavior: smooth; overflow-x: clip; } body { font-family: "Inter", sans-serif; color: var(--body-text); background-color: var(--white); line-height: 1.7; } /* The sitewide sheet (assets/css/style.css) sets `body { overflow-y: scroll !important }` to force a permanent scrollbar. That makes a scroll container, so `position: sticky` descendants resolve against body's scrollport instead of the viewport — and since body sizes to content and never scrolls internally, they get zero scroll range and never stick. Undo it for this page only (the FAQ visual relies on sticky); :has() keeps it scoped even though this file is linked sitewide from header.php. */ body:has(main.commercial-bess-page) { overflow-y: visible !important; } /* Site-wide paragraph floor: no regular paragraph text below 18px. */ p { font-size: 16px; } h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; color: var(--heading-color); font-weight: 600; line-height: 1.2; } a { text-decoration: none; } img { max-width: 100%; } ul li, ol li { font-size: 1rem; font-weight: 400; line-height: 1.7; } section { overflow: hidden; } /* ---- SCROLLBAR ---- Scoped: this sheet is linked sitewide from header.php, and unscoped these rules repainted every page's scrollbar dark-navy/orange. The bare selector targets the document scrollbar, the descendant one any inner scroller. */ html:has(main.commercial-bess-page)::-webkit-scrollbar, html:has(main.commercial-bess-page) ::-webkit-scrollbar { width: 6px; } html:has(main.commercial-bess-page)::-webkit-scrollbar-track, html:has(main.commercial-bess-page) ::-webkit-scrollbar-track { background: var(--dark-navy); } html:has(main.commercial-bess-page)::-webkit-scrollbar-thumb, html:has(main.commercial-bess-page) ::-webkit-scrollbar-thumb { background: var(--primary-orange); border-radius: 3px; } /* ============================================================ UTILITY CLASSES ============================================================ */ .text-orange { color: var(--primary-orange) !important; } .text-blue { color: var(--trust-blue) !important; } .bg-dark-navy { background-color: var(--dark-navy) !important; } .commercial-bess-page .w-full { width: 100%; } .commercial-bess-page .section-tag { color: var(--trust-blue); font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1rem; } .commercial-bess-page .section-tag::before { content: ""; width: 34px; height: 3px; background: var(--gradient-sunrise); border-radius: 2px; display: inline-block; } @media (max-width: 767px) { /* stack the bar under the text instead of beside it */ .commercial-bess-page .section-tag { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; gap: 8px; } } .commercial-bess-page .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 1.3rem; letter-spacing: -1px; } .commercial-bess-page .section-title span { color: var(--primary-orange); } .commercial-bess-page .lead-text { font-size: 16px; font-weight: 400; color: var(--body-text); max-width: 600px; line-height: 1.8; } .lead-text.on-dark { color: rgba(255, 255, 255, 0.6); } /* ---- Stacking-context utilities (reused wherever a section needs its content promoted above a decorative ::before/absolute layer) ---- */ .commercial-bess-page .z-1 { z-index: 1; } .commercial-bess-page .z-2 { z-index: 2; } /* ============================================================ BUTTONS ============================================================ */ .btn-orange { background: var(--gradient-orange); color: var(--white); font-weight: 700; border-radius: var(--radius-btn); padding: 0.85rem 2rem; border: none; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-orange); font-size: 0.95rem; letter-spacing: 0.3px; position: relative; overflow: hidden; justify-content: center; } .btn-orange::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); transform: translateX(-100%); transition: var(--transition); } .btn-orange:hover::before { transform: translateX(0); } .btn-orange:hover { color: var(--white); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(247, 148, 29, 0.5); } .btn-outline-white { background-color: transparent; color: var(--white); font-weight: 600; border-radius: var(--radius-btn); padding: 0.85rem 2rem; border: 2px solid rgba(255, 255, 255, 0.5); transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; } .btn-outline-white:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); color: var(--white); transform: translateY(-3px); } .btn-blue { background: var(--gradient-blue); color: var(--white); font-weight: 700; border-radius: var(--radius-btn); padding: 0.85rem 2rem; border: none; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-blue); font-size: 0.95rem; position: relative; overflow: hidden; } .btn-blue::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.15); transform: translateX(-100%); transition: var(--transition); } .btn-blue:hover::before { transform: translateX(0); } .btn-blue:hover { color: var(--white); transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 144, 193, 0.5); } .commercial-bess-page .btn-ghost-dark { background: transparent; color: var(--heading-color); font-weight: 600; border-radius: var(--radius-btn); padding: 0.8rem 1.8rem; border: 2px solid var(--card-border); transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; justify-content: center; } .commercial-bess-page .btn-ghost-dark:hover { border-color: var(--primary-orange); color: var(--primary-orange); transform: translateY(-2px); } /* ============================================================ SITE HEADER (utility bar + navbar, fixed together) ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1050; } /* ============================================================ PROMO / NOTIFICATION BAR ============================================================ */ .promo-bar { background: var(--gradient-orange); max-height: 60px; opacity: 1; overflow: hidden; transition: var(--transition-slow); } .promo-bar-inner { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding-top: 0.55rem; padding-bottom: 0.55rem; flex-wrap: wrap; } .promo-bar-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .promo-bar-logo { width: 28px; height: 28px; background: rgba(13, 17, 23, 0.18); box-shadow: none; font-size: 0.85rem; } .promo-bar-brand-text { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.85rem; color: var(--dark-navy); letter-spacing: 0.3px; } .promo-bar-brand-text span { color: rgba(13, 17, 23, 0.65); } .promo-bar-text { margin: 0; color: var(--dark-navy); font-size: 0.85rem; font-weight: 500; text-align: center; } .promo-bar-text i { margin-right: 6px; } .promo-bar-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--dark-navy); color: var(--white); font-size: 0.8rem; font-weight: 700; padding: 7px 16px; border-radius: var(--radius-btn); white-space: nowrap; transition: var(--transition); flex-shrink: 0; } .promo-bar-btn:hover { background: var(--dark-card); color: var(--primary-amber); } .site-header.scrolled .promo-bar { max-height: 0; opacity: 0; } @media (max-width: 767px) { .promo-bar-inner { flex-direction: column; gap: 0.5rem; padding-top: 0.65rem; padding-bottom: 0.65rem; } .promo-bar-brand { display: none; } .promo-bar-text { font-size: 0.78rem; } .promo-bar { max-height: 130px; } } /* Highlighted date chip inside the promo bar — separates the incentive start date from the sentence so it reads as the hard fact, not just bold text competing with everything else on the orange bar. */ .promo-bar-date-highlight { display: inline-flex; align-items: center; gap: 0rem; background: #fff; color: #0d1117; font-weight: 800; padding: 0.15rem 0.65rem; border-radius: 9999px; margin-left: 0.25rem; white-space: nowrap; position: relative; } .promo-bar-date-highlight i { font-size: 0.7rem; color: var(--primary-orange, #f5a623); } .promo-bar-date-highlight::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); animation: promo-date-pulse 2.4s ease-out infinite; pointer-events: none; } @keyframes promo-date-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* ============================================================ NAVBAR ============================================================ */ /* .navbar { transition: var(--transition); padding: 1.2rem 0; background-color: transparent; } .site-header.scrolled .navbar { background: rgba(13, 17, 23, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 0.7rem 0; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .navbar-brand { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 8px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .navbar-brand img { height: 40px; width: auto; display: block; } .brand-logo-icon { width: 44px; height: 44px; background: var(--gradient-orange); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.3rem; box-shadow: 0 4px 15px rgba(247, 148, 29, 0.4); flex-shrink: 0; } .brand-text { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.55rem; color: var(--white); line-height: 1; letter-spacing: -0.5px; } .brand-text span { color: var(--primary-orange); } .nseg-tag { font-size: 0.6rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: block; margin-top: 3px; font-weight: 600; } .nav-link { color: rgba(255, 255, 255, 0.8) !important; font-weight: 500; font-size: 0.9rem; margin: 0 0.2rem; transition: var(--transition); position: relative; padding-bottom: 0.3rem !important; } .nav-link::after { content: ""; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background: var(--gradient-orange); transition: var(--transition); transform: translateX(-50%); border-radius: 2px; } .nav-link:hover, .nav-link.active { color: var(--white) !important; } .nav-link:hover::after, .nav-link.active::after { width: 80%; } .nav-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 600; font-size: 0.9rem; white-space: nowrap; } .nav-cta-group { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; } @media (min-width: 992px) { .commercial-nav-offcanvas .offcanvas-body { display: flex; flex-grow: 1; align-items: center; } } .nav-phone:hover { color: var(--primary-orange); } .navbar .dropdown-menu { background: rgba(13, 17, 23, 0.98); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 0.5rem; margin-top: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } .submenu-toggle { display: none; } @media (min-width: 992px) { .navbar .dropdown-menu { display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .navbar .dropdown:hover > .dropdown-menu, .navbar .dropdown:focus-within > .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } } .navbar .dropdown-item { color: rgba(255, 255, 255, 0.8); border-radius: 8px; padding: 0.55rem 0.9rem; font-size: 0.9rem; transition: var(--transition); } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: rgba(239, 137, 52, 0.14); color: var(--primary-orange); } .dropdown-megamenu { min-width: 420px; } .dropdown-megamenu .megamenu-col { display: flex; flex-direction: column; } .dropdown-megamenu .megamenu-title { font-weight: 700; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 0.35rem; padding-bottom: 0.6rem; } @media (max-width: 991.98px) { .dropdown-megamenu { min-width: 100%; } .dropdown-megamenu .col-6 { flex: 0 0 100%; max-width: 100%; } .nav-phone { justify-content: center; margin: 0.5rem 0; } .nav-cta-group { flex-direction: column; width: 100%; gap: 0; } .navbar .dropdown-toggle::after { display: none; } .nav-item.dropdown { position: relative; } .nav-item.dropdown > .nav-link { padding-right: 2.25rem !important; } .submenu-toggle { display: flex; align-items: center; justify-content: center; position: absolute; top: 2px; right: 0; width: 40px; height: 40px; background: transparent; border: none; color: rgba(255, 255, 255, 0.6); transition: transform 0.25s ease, color 0.25s ease; } .nav-item.dropdown.submenu-open .submenu-toggle { transform: rotate(180deg); color: var(--primary-orange); } .navbar .dropdown-menu { display: none; position: static; width: 100%; background: rgba(255, 255, 255, 0.04); border: none; box-shadow: none; margin: 4px 0 8px; } .nav-item.dropdown.submenu-open > .dropdown-menu { display: block; } } .navbar-toggler { border: none; padding: 0; } .navbar-toggler:focus { box-shadow: none; } @media (max-width: 991.98px) { .navbar-brand { padding: 6px 14px; } .navbar-brand img { height: 34px; } .offcanvas.commercial-nav-offcanvas { width: min(86vw, 380px); background: rgba(13, 17, 23, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid rgba(255, 255, 255, 0.08); } .commercial-nav-offcanvas .offcanvas-header { padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .commercial-nav-offcanvas .offcanvas-header .navbar-brand { padding: 6px 14px; box-shadow: none; } .commercial-nav-offcanvas .offcanvas-header .navbar-brand img { height: 28px; } .commercial-nav-offcanvas .offcanvas-header .btn-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-size: 14px; opacity: 0.85; } .commercial-nav-offcanvas .offcanvas-body { padding: 1.25rem 1.25rem 2rem; display: flex; flex-direction: column; } .commercial-nav-offcanvas .navbar-nav { text-align: left; } .commercial-nav-offcanvas .nav-link { padding: 0.75rem 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .commercial-nav-offcanvas .btn { width: 100%; justify-content: center; margin-top: 1rem; } } */ /* ============================================================ HERO SECTION ============================================================ */ .commercial-bess-page .hero-section { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; background: var(--dark-navy); padding-top: 80px; padding-bottom: 80px; } @media (max-width: 991px) { .commercial-bess-page .hero-section { padding-top: 210px; } } @media (max-width: 767px) { .commercial-bess-page .hero-section { padding-top: 80px; } } .commercial-bess-page .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; z-index: 0; } .commercial-bess-page .hero-overlay { position: absolute; inset: 0; background: var(--gradient-hero); z-index: 1; } .commercial-bess-page .hero-content { position: relative; z-index: 2; } /* Particle / glow effects */ .commercial-bess-page .hero-glow-1 { position: absolute; top: -15%; right: -5%; width: 700px; height: 700px; background: radial-gradient( circle, rgb(247 148 29 / 20%) 0%, transparent 65% ); filter: blur(80px); z-index: 1; animation: floatGlow 10s infinite alternate ease-in-out; } .commercial-bess-page .hero-glow-2 { position: absolute; bottom: -10%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgb(0 144 193 / 49%) 0%, transparent 65%); filter: blur(80px); z-index: 1; animation: floatGlow 14s infinite alternate-reverse ease-in-out; } @keyframes floatGlow { 0% { transform: scale(0.9) translate(0, 0); opacity: 0.6; } 100% { transform: scale(1.2) translate(-30px, 30px); opacity: 1; } } /* Scrolling particles */ /* z-index 2, not 1: .hero-overlay is also z-index 1 and comes later in the hero's markup, so at a tie it painted its dark gradient straight over the particles. Level with .hero-content, which still wins on DOM order. */ .commercial-bess-page .hero-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .particle { position: absolute; border-radius: 50%; background: rgba(247, 148, 29, 0.5); animation: riseUp linear infinite; } /* main.js already parks each particle on the container's bottom edge (`bottom: -px`), so the rise starts at translateY(0). Starting at 100vh put them a full viewport BELOW that edge, where `overflow: hidden` clipped them — they only entered the visible band for the last ~9% of the cycle. Travel is -110vh so they clear the top of a 100vh hero. */ @keyframes riseUp { 0% { transform: translateY(0) scale(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 0.4; } 100% { transform: translateY(-110vh) scale(1); opacity: 0; } } /* Hero badge */ .commercial-bess-page .hero-badge { background: rgba(247, 148, 29, 0.15); border: 1px solid rgba(247, 148, 29, 0.35); border-radius: 30px; padding: 7px 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.83rem; font-weight: 600; color: #ffd580; margin-bottom: 1.8rem; backdrop-filter: blur(8px); } .commercial-bess-page .hero-title { font-size: clamp(2.4rem, 5.6vw, 4.6rem); font-weight: 800; line-height: 1.08; color: var(--white); margin-bottom: 1.4rem; letter-spacing: -1.5px; } .commercial-bess-page .hero-title .highlight { background: linear-gradient(120deg, var(--primary-orange) 0%, #ffd580 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .commercial-bess-page .hero-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.8); max-width: 600px; margin-bottom: 2.5rem; line-height: 1.8; font-weight: 400; } /* Hero image card (right side) */ .hero-visual { position: relative; } .hero-img-main { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); position: relative; } .hero-img-main img { width: 100%; height: 500px; object-fit: cover; display: block; transition: var(--transition); } .hero-img-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 50%, rgba(13, 17, 23, 0.7) 100% ); } .hero-float-card { position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-radius: 16px; padding: 14px 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 12px; min-width: 200px; } .hero-float-card-1 { bottom: 30px; left: -30px; animation: floatCard 4s ease-in-out infinite; } .hero-float-card-2 { top: 30px; right: -30px; animation: floatCard 4s ease-in-out infinite 1s; } @keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-float-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .hero-float-icon.orange { background: var(--gradient-orange); color: white; } .hero-float-icon.blue { background: var(--gradient-blue); color: white; } .hero-float-card .card-label { font-size: 0.72rem; color: #888; display: block; font-weight: 500; } .hero-float-card .card-value { font-size: 1rem; font-weight: 800; color: var(--heading-color); font-family: "Montserrat", sans-serif; display: block; line-height: 1.1; } /* Hero trust bar */ .commercial-bess-page .hero-trust-bar { margin-top: 2.5rem; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .commercial-bess-page .trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; font-weight: 500; } .commercial-bess-page .trust-item i { color: var(--primary-orange); font-size: 1rem; } /* inline SVG icon — matches the sizing/colour of the icon-font ones */ .commercial-bess-page .trust-item .trust-icon { width: 1rem; height: 1rem; color: var(--primary-orange); flex-shrink: 0; } /* ============================================================ PACKAGES SECTION ============================================================ */ .commercial-bess-page .packages-section { padding: 90px 0; background: var(--bg-light); position: relative; } .commercial-bess-page .packages-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-sunrise); } .commercial-bess-page .pkg-card { background: var(--white); border-radius: var(--radius-card); padding: 2.5rem 2rem 2rem; height: 100%; border: 1.5px solid var(--card-border); transition: var(--transition); position: relative; display: flex; flex-direction: column; overflow: hidden; } .commercial-bess-page .pkg-card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--gradient-orange); transform: scaleX(0); transition: var(--transition); transform-origin: left; } .commercial-bess-page .pkg-card:hover::after { transform: scaleX(1); } .commercial-bess-page .pkg-card:hover { transform: translateY(-12px); box-shadow: 0 24px 60px rgba(247, 148, 29, 0.15); border-color: rgba(247, 148, 29, 0.3); } /* Featured tier: inverted dark card, not a loud top banner + scale-up. Same footprint/height as its siblings — grid stays aligned. */ .commercial-bess-page .pkg-card.popular { background: var(--gradient-dark); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } .commercial-bess-page .pkg-card.popular::before { content: ""; position: absolute; top: -20%; right: -15%; width: 320px; height: 320px; background: radial-gradient( circle, rgba(247, 148, 29, 0.22) 0%, transparent 65% ); pointer-events: none; } .commercial-bess-page .pkg-card.popular:hover { transform: translateY(-12px); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45); border-color: rgba(247, 148, 29, 0.35); } .commercial-bess-page .pkg-card.popular h3, .commercial-bess-page .pkg-card.popular .pkg-outcome { color: var(--white); } .commercial-bess-page .pkg-card.popular p.text-muted { color: rgba(255, 255, 255, 0.6) !important; } .commercial-bess-page .pkg-card.popular .pkg-tag { color: #7dd3fc; } .commercial-bess-page .pkg-card.popular .pkg-features li { border-bottom-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); } .pkg-card.popular .pkg-index { color: rgba(255, 255, 255, 0.16); } /* Small badge, contained within the card — replaces the old full-width ribbon */ .popular-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(247, 148, 29, 0.15); border: 1px solid rgba(247, 148, 29, 0.4); color: #ffd580; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 14px; border-radius: var(--radius-btn); margin-bottom: 1.25rem; position: relative; z-index: 1; } .popular-badge i { font-size: 0.65rem; } .commercial-bess-page .pkg-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--primary-orange-light); color: var(--primary-orange); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 1.5rem; transition: var(--transition); position: relative; z-index: 1; } .commercial-bess-page .pkg-card.popular .pkg-icon, .commercial-bess-page .pkg-card:hover .pkg-icon { background: var(--gradient-orange); color: white; box-shadow: 0 6px 20px rgba(247, 148, 29, 0.4); } /* Vector accent behind the icon — subtle dot-mesh, contained to the card */ .commercial-bess-page .pkg-decor { top: -20px; right: -30px; width: 160px; height: 160px; } /* Numbered index badge, top-right corner — reads like a solutions deck */ .pkg-index { position: absolute; top: 1.6rem; right: 1.8rem; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.85rem; color: var(--card-border); letter-spacing: 1px; z-index: 1; } .commercial-bess-page .pkg-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--trust-blue); margin-bottom: 0.5rem; position: relative; z-index: 1; } .commercial-bess-page .pkg-card h3 { position: relative; z-index: 1; } /* Outcome statement — replaces the old kW/price figure with a benefit claim */ .commercial-bess-page .pkg-outcome { display: flex; align-items: center; gap: 10px; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--heading-color); letter-spacing: -0.3px; padding: 0.9rem 0; margin-bottom: 0.5rem; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); } .commercial-bess-page .pkg-outcome i { color: var(--primary-orange); font-size: 1rem; flex-shrink: 0; } .commercial-bess-page .pkg-card.popular .pkg-outcome { border-color: rgba(255, 255, 255, 0.12); } .commercial-bess-page .pkg-card:hover .pkg-outcome { border-color: rgba(247, 148, 29, 0.3); } .commercial-bess-page .pkg-features { list-style: none; padding: 0; margin: 1.5rem 0 2rem; flex-grow: 1; } .commercial-bess-page .pkg-desc { font-size: 16px; font-weight: 400; line-height: 1.6; } .commercial-bess-page .pkg-features li { padding: 0.6rem 0; font-size: 0.95rem; font-weight: 400; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--card-border); } .commercial-bess-page .pkg-features li:last-child { border-bottom: none; } .commercial-bess-page .pkg-features li i { width: 20px; height: 20px; border-radius: 50%; background: var(--trust-blue-light); color: var(--trust-blue); font-size: 0.62rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .commercial-bess-page .pkg-card.popular .pkg-features li i, .commercial-bess-page .pkg-card:hover .pkg-features li i { background: var(--primary-orange-light); color: var(--primary-orange); } /* ============================================================ INCENTIVES / NSW PDR mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); S BESS4 ============================================================ */ .commercial-bess-page .bess-section { padding: 90px 0; background: var(--white); position: relative; } .commercial-bess-page .bess-accent-dot-mesh { top: -20px; right: -60px; width: 340px; height: 300px; } .bess-launch-badge { position: relative; display: inline-flex; align-items: center; gap: 14px; background: var(--white); padding: 7px 22px 7px 7px; border-radius: 44px; margin-bottom: 16px; box-shadow: 0 10px 26px rgba(0, 144, 193, 0.16); transition: var(--transition-slow); animation: badgeFloat 3.6s ease-in-out infinite; } /* Soft rotating gradient ring, sitting just behind the pill */ .bess-launch-badge::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; background: conic-gradient( from 0deg, var(--primary-orange), var(--trust-blue), var(--teal-accent), var(--primary-orange) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; /* animation: badgeRingSpin 5s linear infinite; */ } @keyframes badgeRingSpin { to { transform: rotate(360deg); } } @keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .bess-launch-badge:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 34px rgba(0, 144, 193, 0.26); animation-play-state: paused; } /* Mini calendar-tile — day/month rendered like a torn-off calendar page */ .bess-launch-date-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: var(--bg-light); box-shadow: 0 4px 12px rgba(13, 17, 23, 0.14), inset 0 0 0 1px rgba(13, 17, 23, 0.04); overflow: hidden; line-height: 1; } /* Little "pin hole" fold detail, top-centre, like a torn calendar page */ .bess-launch-date-pin { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); z-index: 2; } .bess-launch-date-month { position: relative; width: 100%; background: var(--gradient-orange); color: var(--white); font-family: "Montserrat", sans-serif; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; padding: 3px 0; overflow: hidden; } /* Diagonal shimmer sweep across the month strip on hover */ .bess-launch-date-month::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient( 115deg, transparent, rgba(255, 255, 255, 0.55), transparent ); transform: skewX(-20deg); transition: left 0.6s ease; } .bess-launch-badge:hover .bess-launch-date-month::after { left: 130%; } .bess-launch-date-day { font-family: "Montserrat", sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--heading-color); padding-top: 4px; transition: var(--transition); } .bess-launch-badge:hover .bess-launch-date-day { color: var(--trust-blue); } .bess-launch-date-text { display: flex; flex-direction: column; gap: 2px; text-align: left; } .bess-launch-date-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--teal-accent); } /* Pulsing "live" status dot */ .bess-launch-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-accent); } .bess-launch-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--teal-accent); opacity: 0.5; animation: launchDotPulse 1.8s ease-out infinite; } @keyframes launchDotPulse { 0% { transform: scale(0.6); opacity: 0.5; } 100% { transform: scale(2.2); opacity: 0; } } .bess-launch-date-main { font-weight: 600; font-size: 0.9rem; color: var(--trust-blue-hover); letter-spacing: 0.2px; } .bess-launch-date-main strong { font-weight: 800; color: var(--heading-color); } /* ---- Feature strip ---- */ .commercial-bess-page .bess-feature-card { display: flex; align-items: flex-start; gap: 14px; background: var(--bg-section); border-radius: var(--radius-card-sm); padding: 1.4rem 1.5rem; height: 100%; transition: var(--transition); } .commercial-bess-page .bess-feature-card:hover { background: var(--white); box-shadow: var(--shadow-card); transform: translateY(-4px); } .commercial-bess-page .bess-feature-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; } .commercial-bess-page .bess-feature-icon.amber { background: var(--primary-orange-light); color: var(--primary-orange); } .commercial-bess-page .bess-feature-icon.navy { background: rgba(13, 17, 23, 0.08); color: var(--dark-navy); } .commercial-bess-page .bess-feature-icon.teal { background: var(--teal-accent-light); color: var(--teal-accent); } .commercial-bess-page .bess-feature-card h6 { font-weight: 700; font-size: 0.98rem; color: var(--heading-color); margin-bottom: 0.35rem; } .commercial-bess-page .bess-feature-card p { font-size: 16px; color: var(--body-text); line-height: 1.6; margin: 0; } /* ---- Pathway cards ---- */ .commercial-bess-page .bess-pathway-card { border-radius: var(--radius-card); padding: 2.25rem; height: 100%; position: relative; overflow: hidden; transition: var(--transition-slow); } .commercial-bess-page .bess-pathway-card.dark { background: var(--gradient-dark); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); } .commercial-bess-page .bess-pathway-card.light { background: var(--white); border: 1.5px solid var(--card-border); } .commercial-bess-page .bess-pathway-card:hover { transform: translateY(-6px); } .commercial-bess-page .bess-pathway-card.light:hover { box-shadow: var(--shadow-hover); border-color: rgba(247, 148, 29, 0.25); } .commercial-bess-page .bess-pathway-card.dark:hover { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35); } .commercial-bess-page .bess-pathway-badge { position: absolute; top: 0; right: 2.25rem; background: var(--gradient-orange); color: var(--white); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 7px 14px; border-radius: 0 0 10px 10px; } .commercial-bess-page .bess-pathway-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .commercial-bess-page .bess-pathway-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--primary-orange-light); color: var(--primary-orange); } .commercial-bess-page .bess-pathway-card.dark .bess-pathway-icon { background: rgba(247, 148, 29, 0.15); color: var(--primary-amber); } .commercial-bess-page .bess-pathway-head h4 { font-size: 1.25rem; font-weight: 700; margin: 0; } .commercial-bess-page .bess-pathway-card.dark .bess-pathway-head h4 { color: var(--white); } .commercial-bess-page .bess-pathway-card.light .bess-pathway-head h4 { color: var(--heading-color); } .commercial-bess-page .bess-pathway-card > p { font-size: 16px; line-height: 1.75; margin-bottom: 1.5rem; } .commercial-bess-page .bess-pathway-card.dark > p { color: rgba(255, 255, 255, 0.65); } .commercial-bess-page .bess-pathway-card.light > p { color: var(--body-text); } .commercial-bess-page .bess-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .commercial-bess-page .bess-checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.65; } .commercial-bess-page .bess-checklist li i { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; margin-top: 2px; } .commercial-bess-page .bess-pathway-card.dark .bess-checklist li { color: rgba(255, 255, 255, 0.85); } .commercial-bess-page .bess-pathway-card.dark .bess-checklist li strong { color: var(--white); } .commercial-bess-page .bess-pathway-card.dark .bess-checklist li i { background: rgba(20, 184, 166, 0.2); color: var(--teal-accent); } .commercial-bess-page .bess-pathway-card.light .bess-checklist li { color: var(--body-text); } .commercial-bess-page .bess-pathway-card.light .bess-checklist li strong { color: var(--heading-color); } .commercial-bess-page .bess-pathway-card.light .bess-checklist li i { background: var(--primary-orange-light); color: var(--primary-orange); } /* ---- Notice bar ---- */ .commercial-bess-page .bess-notice-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--bg-section); border-radius: var(--radius-card-sm); padding: 1.25rem 1.75rem; margin-top: 2.5rem; } .commercial-bess-page .bess-notice-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: var(--primary-orange-light); color: var(--primary-orange); display: flex; align-items: center; justify-content: center; font-size: 1rem; } .commercial-bess-page .bess-notice-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; } .commercial-bess-page .bess-notice-text strong { color: var(--heading-color); font-size: 16px; } .commercial-bess-page .bess-notice-text span { color: var(--body-text); font-size: 16px; } .commercial-bess-page .bess-notice-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-orange); font-weight: 700; font-size: 16px; white-space: nowrap; transition: var(--transition); } .commercial-bess-page .bess-notice-link:hover { color: var(--primary-orange-hover); gap: 12px; } @media (max-width: 767px) { .commercial-bess-page .bess-pathway-badge { position: static; display: inline-block; margin-bottom: 1rem; border-radius: var(--radius-btn); } } /* ---- "What both pathways have in common" panel ---- */ .commercial-bess-page .bess-common-panel { background: var(--bg-section); border-radius: var(--radius-card); padding: 2rem 2rem 0.5rem; margin-top: 2.5rem; } .commercial-bess-page .bess-common-panel .bess-feature-card { background: var(--white); } .commercial-bess-page .bess-common-panel .bess-feature-card:hover { background: var(--white); } .commercial-bess-page .bess-common-title { text-align: center; font-weight: 700; color: var(--heading-color); font-size: 16px; margin-bottom: 1.5rem; } /* ============================================================ REVIEWS SECTION ============================================================ */ .commercial-bess-page .reviews-section { padding: 90px 0; background: var(--bg-light); position: relative; } .commercial-bess-page .review-card { background: var(--white); border-radius: var(--radius-card); border: 1.5px solid var(--card-border); padding: 2rem; height: 100%; transition: var(--transition-slow); } .commercial-bess-page .review-card:hover { box-shadow: var(--shadow-hover); border-color: rgba(247, 148, 29, 0.25); transform: translateY(-6px); } .commercial-bess-page .review-stars { color: var(--primary-orange); font-size: 0.85rem; margin-bottom: 1rem; display: flex; gap: 3px; } .commercial-bess-page .review-quote { color: var(--body-text); font-size: 16px; line-height: 1.75; margin-bottom: 1.5rem; } .commercial-bess-page .review-author { display: flex; align-items: center; gap: 12px; } .commercial-bess-page .review-avatar { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: var(--gradient-orange); color: var(--white); font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } .commercial-bess-page .review-name { display: block; font-weight: 700; color: var(--heading-color); font-size: 0.92rem; } .commercial-bess-page .review-role { display: block; color: var(--body-text); font-size: 0.8rem; } /* ---- Elfsight reviews widget ---- The widget builds its own markup from Elfsight's CDN. Their internal class names are not a public API and change between platform releases, so nothing here reaches inside it — card colours, avatars and star styling belong in the Elfsight dashboard. This styles only our own wrapper. */ .commercial-bess-page .cs-reviews-widget { position: relative; z-index: 1; max-width: 1080px; margin-inline: auto; background: var(--white); border: 1.5px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 2.5rem 2rem 2rem; overflow: hidden; /* the widget lazy-loads; reserve height so the section doesn't jump */ min-height: 320px; transition: var(--transition); } /* Orange accent bar across the top of the panel */ .commercial-bess-page .cs-reviews-widget::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-orange); } .commercial-bess-page .cs-reviews-widget:hover { box-shadow: var(--shadow-hover); border-color: rgba(247, 148, 29, 0.3); } .commercial-bess-page .cs-reviews-widget > div { max-width: 100%; } @media (max-width: 767px) { .commercial-bess-page .cs-reviews-widget { padding: 2rem 1rem 1.5rem; min-height: 380px; } } /* ============================================================ INDUSTRIES SECTION ============================================================ */ .commercial-bess-page .industries-section { padding: 90px 0; position: relative; } .commercial-bess-page .industry-card { background: var(--bg-light); border-radius: 18px; padding: 2.5rem 1rem 1rem; text-align: center; transition: var(--transition); border: 1.5px solid transparent; height: 100%; position: relative; overflow: hidden; } .commercial-bess-page .industry-card::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gradient-orange); transform: scaleX(0); transition: var(--transition); } .commercial-bess-page .industry-card:hover::before { transform: scaleX(1); } .commercial-bess-page .industry-card:hover { background: var(--white); transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); border-color: rgba(247, 148, 29, 0.25); } .commercial-bess-page .industry-icon-wrap { width: 70px; height: 70px; border-radius: 20px; background: var(--trust-blue-light); color: var(--trust-blue); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; transition: var(--transition); } .commercial-bess-page .industry-card:hover .industry-icon-wrap { background: var(--gradient-orange); color: white; box-shadow: 0 8px 20px rgba(247, 148, 29, 0.35); transform: scale(1.1) rotate(5deg); } .commercial-bess-page .industry-card h5 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.4rem; } .commercial-bess-page .industry-card p { font-size: 16px; font-weight: 400; color: var(--body-text); margin: 0; } /* ============================================================ TRACK RECORD / TRUST STATS ============================================================ */ .commercial-bess-page .trust-stats-section { padding: 90px 0; background: var(--bg-light); position: relative; } .commercial-bess-page .trust-stat-card { background: var(--bg-section); border: 1.5px solid transparent; border-radius: 22px; padding: 2rem 1.75rem 1.75rem; height: 100%; position: relative; overflow: hidden; transition: var(--transition-slow); animation: trustCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .commercial-bess-page .trust-stat-card:nth-child(1) { animation-delay: 0.05s; } .commercial-bess-page .trust-stat-card:nth-child(2) { animation-delay: 0.15s; } .commercial-bess-page .trust-stat-card:nth-child(3) { animation-delay: 0.25s; } .commercial-bess-page .trust-stat-card:nth-child(4) { animation-delay: 0.35s; } @keyframes trustCardIn { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .commercial-bess-page .trust-stat-card:hover { transform: translateY(-10px); background: var(--white); box-shadow: var(--shadow-hover); border-color: rgba(247, 148, 29, 0.25); } /* Soft solid circle tucked into the top-right corner, like a subtle glow */ .commercial-bess-page .trust-stat-decor { position: absolute; top: -36px; right: -36px; width: 130px; height: 130px; border-radius: 50%; background: rgba(13, 17, 23, 0.035); pointer-events: none; transition: var(--transition-slow); z-index: 0; } .commercial-bess-page .trust-stat-card:hover .trust-stat-decor { transform: scale(1.25); background: var(--primary-orange-light); } .commercial-bess-page .trust-stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1.25rem; position: relative; z-index: 1; transition: var(--transition-slow); } .commercial-bess-page .trust-stat-icon.amber { background: #faa13317; color: var(--primary-orange); } .commercial-bess-page .trust-stat-icon.blue { background: var(--trust-blue-light); color: var(--trust-blue); } .commercial-bess-page .trust-stat-icon.teal { background: var(--teal-accent-light); color: var(--teal-accent); } .commercial-bess-page .trust-stat-icon.indigo { background: rgba(99, 102, 241, 0.15); color: #6366f1; } .commercial-bess-page .trust-stat-card:hover .trust-stat-icon { transform: scale(1.12) rotate(-6deg); box-shadow: 0 8px 20px rgba(13, 17, 23, 0.12); } .commercial-bess-page .trust-stat-number { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 2.4rem; color: var(--heading-color); line-height: 1.1; margin-bottom: 0.5rem; position: relative; z-index: 1; } .commercial-bess-page .trust-stat-number-sm { font-size: 1.5rem; margin-bottom: 0.7rem; } .commercial-bess-page .trust-stat-label { font-weight: 700; color: var(--heading-color); font-size: 1.05rem; margin-bottom: 0.6rem; position: relative; z-index: 1; } .commercial-bess-page .trust-stat-badge { display: inline-flex; align-items: center; background: var(--gradient-orange); color: var(--white); font-size: 0.75rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-btn); margin-bottom: 0.9rem; position: relative; z-index: 1; } .commercial-bess-page .trust-stat-desc { font-size: 16px; color: var(--body-text); line-height: 1.7; margin: 0; position: relative; z-index: 1; } /* ============================================================ PROCESS / HOW IT WORKS ============================================================ */ .commercial-bess-page .process-section { padding: 90px 0; background: var(--dark-navy); position: relative; overflow: hidden; } .commercial-bess-page .process-section::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; } .commercial-bess-page .process-section .section-tag { color: rgba(247, 148, 29, 0.9); } .commercial-bess-page .process-section .section-title { color: var(--white); } .commercial-bess-page .step-card { text-align: center; padding: 0rem 1.5rem; position: relative; z-index: 2; } .commercial-bess-page .step-number-wrap { position: relative; display: inline-block; margin-bottom: 2rem; } .commercial-bess-page .step-number { width: 72px; height: 72px; border-radius: 50%; background: var(--dark-card); border: 3px solid rgba(247, 148, 29, 0.4); color: var(--primary-orange); font-weight: 900; font-size: 1.5rem; font-family: "Montserrat", sans-serif; display: flex; align-items: center; justify-content: center; margin: 0 auto; transition: var(--transition); box-shadow: 0 0 0 0 rgba(247, 148, 29, 0.3); } .commercial-bess-page .step-card:hover .step-number { background: var(--gradient-orange); border-color: transparent; color: white; box-shadow: 0 0 0 12px rgba(247, 148, 29, 0.1); } .commercial-bess-page .step-connector { position: absolute; top: 36px; left: calc(50% + 36px); right: calc(-50% + 36px); height: 2px; background: linear-gradient( 90deg, rgba(247, 148, 29, 0.4), rgba(0, 144, 193, 0.4) ); z-index: 1; } .commercial-bess-page .step-card h4 { color: var(--white); font-size: 16px; margin-bottom: 0.8rem; } .commercial-bess-page .step-card p { color: rgba(255, 255, 255, 0.6); font-size: 16px; font-weight: 400; line-height: 1.7; } .commercial-bess-page .step-icon { position: absolute; bottom: -10px; right: -10px; width: 32px; height: 32px; border-radius: 50%; background: var(--gradient-orange); color: white; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(247, 148, 29, 0.4); } /* ============================================================ FAQ SECTION ============================================================ */ .commercial-bess-page .cs-faq-section { padding: 90px 0; background: var(--white); position: relative; overflow: visible; } .commercial-bess-page .cs-faq-section .cs-faq-item { border: 1.5px solid var(--card-border); border-radius: 14px; margin-bottom: 1rem; box-shadow: none; transition: var(--transition); } .commercial-bess-page .cs-faq-section .cs-faq-item:hover { border-color: rgba(247, 148, 29, 0.3); box-shadow: 0 8px 24px rgba(247, 148, 29, 0.08); } .commercial-bess-page .cs-faq-section .cs-faq-btn { font-weight: 600; font-size: 1rem; color: var(--heading-color); padding: 1.4rem 1.6rem; background: var(--white); box-shadow: none; border-radius: 14px; } .commercial-bess-page .cs-faq-section .cs-faq-btn:not(.collapsed) { color: var(--primary-orange); background: rgba(247, 148, 29, 0.04); } .commercial-bess-page .cs-faq-section .cs-faq-btn::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; background-image: none; font-size: 0.85rem; color: var(--primary-orange); width: auto; height: auto; transition: var(--transition); } .commercial-bess-page .cs-faq-section .cs-faq-btn:not(.collapsed)::after { content: "\f068"; background-image: none; transform: none; } .commercial-bess-page .cs-faq-section .cs-faq-body { padding: 0.5rem 1.6rem 1.6rem; color: var(--body-text); font-size: 16px; font-weight: 400; line-height: 1.8; } /* FAQ visual card */ .commercial-bess-page .cs-faq-visual-media { position: sticky; top: 110px; border-radius: 24px; overflow: hidden; min-height: 560px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); } @media (max-width: 991px) { .commercial-bess-page .cs-faq-visual-media { position: relative; top: 0; } } .commercial-bess-page .cs-faq-visual-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); } .commercial-bess-page .cs-faq-visual-media:hover img { transform: scale(1.06); } .cs-faq-visual-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.25rem; } .cs-faq-visual-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .cs-faq-visual-stat { display: flex; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 0.9rem 1rem; transition: var(--transition-slow); } .cs-faq-visual-stat:hover { background: rgba(247, 148, 29, 0.16); border-color: rgba(247, 148, 29, 0.4); transform: translateY(-4px); } .cs-faq-visual-stat-number { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--primary-orange); letter-spacing: -0.5px; line-height: 1.1; transition: var(--transition); } .cs-faq-visual-stat:hover .cs-faq-visual-stat-number { color: var(--primary-amber); } .cs-faq-visual-stat-label { color: rgba(255, 255, 255, 0.75); font-size: 0.78rem; font-weight: 500; line-height: 1.4; } @media (max-width: 991px) { .commercial-bess-page .cs-faq-visual-media { min-height: 420px; } } /* ============================================================ CONTACT / LEAD FORM SECTION ============================================================ */ .commercial-bess-page .lead-section { padding: 90px 0; background: var(--bg-section); position: relative; /* The sitewide navbar goes position:fixed once .is-sticky is applied, so offset the anchor landing point — the header "Request A Quote" button targets #contact on this page instead of opening the quote modal. */ scroll-margin-top: 120px; } .commercial-bess-page .lead-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: var(--gradient-sunrise-soft); opacity: 0.06; z-index: 0; } .lead-section .container { position: relative; z-index: 1; } .commercial-bess-page .contact-info-card { background: var(--gradient-dark); border-radius: 24px; padding: 2.5rem; height: 100%; border: 1px solid rgba(255, 255, 255, 0.06); position: relative; overflow: hidden; } .commercial-bess-page .contact-info-card::before { content: ""; position: absolute; bottom: -20%; right: -20%; width: 300px; height: 300px; background: radial-gradient( circle, rgba(247, 148, 29, 0.12) 0%, transparent 65% ); pointer-events: none; } .commercial-bess-page .contact-method { display: flex; align-items: flex-start; gap: 16px; padding: 1.2rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); transition: var(--transition); } .commercial-bess-page .contact-method:last-of-type { border-bottom: none; } .commercial-bess-page .contact-method:hover { transform: translateX(6px); } .commercial-bess-page .contact-method-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--gradient-orange); color: white; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(247, 148, 29, 0.3); } .commercial-bess-page .contact-method-label { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .commercial-bess-page .contact-method-value { color: var(--white); font-weight: 700; font-size: 0.95rem; } .commercial-bess-page .form-card { background: var(--white); border-radius: 24px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); border: 1px solid var(--card-border); } .commercial-bess-page .form-intro-text { font-size: 16px; font-weight: 400; line-height: 1.6; } .commercial-bess-page .privacy-consent-text { font-weight: 400; font-size: 0.95rem; vertical-align: text-bottom; } .commercial-bess-page .form-label { font-size: 0.85rem; font-weight: 600; color: var(--heading-color); margin-bottom: 0.4rem; } .commercial-bess-page .form-control, .commercial-bess-page .form-select { padding: 0.85rem 1.2rem; border-radius: 12px; border: 1.5px solid #e2e8f0; font-size: 1rem; font-weight: 400; transition: var(--transition); background: #fafbfc; color: var(--heading-color); } .commercial-bess-page .form-control:focus, .commercial-bess-page .form-select:focus { border-color: var(--primary-orange); box-shadow: 0 0 0 4px rgba(247, 148, 29, 0.12); background: var(--white); outline: none; } .commercial-bess-page .form-control::placeholder { color: #b0b8c4; font-size: 0.88rem; } .form-success { text-align: center; padding: 3rem; } .success-icon { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--green-accent), #4ade80); color: white; font-size: 2.2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 10px 30px rgba(34, 197, 94, 0.35); } /* ============================================================ FOOTER ============================================================ */ /* footer { background: #090d13; color: rgba(255, 255, 255, 0.6); padding: 80px 0 30px; border-top: 1px solid rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; } footer .container { position: relative; z-index: 1; } .footer-logo-wrap { display: inline-block; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 10px 18px; margin-bottom: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .footer-brand img { height: 44px; width: auto; display: block; } .footer-brand p { font-size: 16px; font-weight: 400; line-height: 1.8; max-width: 280px; color: rgba(255, 255, 255, 0.5); margin: 1rem 0 1.5rem; } .footer-newsletter { padding: 3rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 3.5rem; } .footer-newsletter-title { color: var(--white); font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.5rem; margin-bottom: 0.5rem; letter-spacing: -0.5px; } .footer-newsletter-sub { color: rgba(255, 255, 255, 0.55); font-size: 16px; } .footer-newsletter-form { display: flex; gap: 10px; } .footer-newsletter-form .form-control { background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.14); color: var(--white); } .footer-newsletter-form .form-control::placeholder { color: rgba(255, 255, 255, 0.4); } .footer-newsletter-form .form-control:focus { background: rgba(255, 255, 255, 0.1); border-color: var(--primary-orange); } .footer-newsletter-form .btn { flex-shrink: 0; } .footer-newsletter-success { color: var(--green-accent); font-size: 0.9rem; font-weight: 600; margin-top: 0.75rem; } @media (max-width: 767px) { .footer-newsletter-form { flex-direction: column; } .footer-newsletter-form .btn { width: 100%; justify-content: center; } } footer h5 { color: var(--white); margin-bottom: 1.5rem; font-size: 1rem; font-weight: 600; position: relative; padding-bottom: 0.8rem; } footer h5::after { content: ""; position: absolute; bottom: 0; left: 0; width: 50%; height: 2px; background: var(--gradient-orange); border-radius: 2px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.7rem; } .footer-links a { color: rgba(255, 255, 255, 0.55); text-decoration: none; font-size: 0.92rem; font-weight: 400; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; } .footer-links a:hover { color: var(--primary-orange); padding-left: 4px; } .footer-links a:hover::before { width: 12px; } .social-links { display: flex; gap: 10px; } .social-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); transition: var(--transition); font-size: 0.95rem; } .social-icon:hover { background: var(--gradient-orange); border-color: transparent; color: white; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(247, 148, 29, 0.35); } .footer-divider { border: none; height: 1px; background: rgba(255, 255, 255, 0.07); margin: 40px 0; } .footer-divider2 { border: none; height: 1px; background: rgba(255, 255, 255, 0.07); margin: 20px 0; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-licence { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-licence-text { color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; line-height: 1.6; } .footer-licence-social { display: flex; gap: 12px; flex-shrink: 0; } .footer-licence-social a { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.95rem; transition: var(--transition); } .footer-licence-social a.fb { background: #1877f2; } .footer-licence-social a.ig { background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ); } .footer-licence-social a:hover { transform: translateY(-3px); filter: brightness(1.1); } @media (max-width: 575.98px) { .footer-licence-text { font-size: 0.78rem; } } .footer-bottom-links a { color: rgba(255, 255, 255, 0.45); font-size: 0.82rem; margin-left: 1.5rem; text-decoration: none; transition: var(--transition); } .footer-bottom-links a:hover { color: var(--primary-orange); } .footer-contact-item { font-size: 0.95rem; color: rgba(255, 255, 255, 0.55); } .footer-copyright { color: rgba(255, 255, 255, 0.4); } */ /* ============================================================ COOKIE CONSENT BAR ============================================================ */ .cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(13, 17, 23, 0.97); backdrop-filter: blur(10px); padding: 1rem 1.5rem; z-index: 9000; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; transform: translateY(100%); transition: transform 0.5s ease; } .cookie-bar.visible { transform: translateY(0); } .cookie-bar-text { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; } /* ============================================================ FLOATING WHATSAPP BUTTON ============================================================ */ .float-whatsapp { position: fixed; bottom: 30px; right: 30px; z-index: 1040; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: white; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); transition: var(--transition); border: 3px solid rgba(255, 255, 255, 0.3); animation: floatBounce 3s ease-in-out infinite; } .float-whatsapp:hover { transform: scale(1.15); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.55); color: white; } @keyframes floatBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .float-whatsapp::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.4); animation: rippleOut 2.5s infinite; } @keyframes rippleOut { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } /* ============================================================ BACK TO TOP BUTTON ============================================================ */ .back-to-top { position: fixed; bottom: 100px; right: 30px; width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-orange); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(247, 148, 29, 0.4); z-index: 1040; opacity: 0; visibility: hidden; transition: var(--transition); font-size: 0.9rem; cursor: pointer; border: none; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(247, 148, 29, 0.5); } /* ============================================================ BRAND PHOTO FRAME Shared wrapper for standalone stock photography (Industries row, Process visual). Adds a faint navy→orange duotone wash so photos from different sources read as one consistent, on-brand set. ============================================================ */ .brand-photo-frame { overflow: hidden; box-shadow: var(--shadow-card); position: relative; } .brand-photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(13, 17, 23, 0.32) 0%, transparent 55%, rgba(247, 148, 29, 0.14) 100% ); mix-blend-mode: multiply; pointer-events: none; } .brand-photo-frame img { transition: var(--transition-slow); } .brand-photo-frame:hover img { transform: scale(1.04); } /* Larger showcase photos (e.g. the process-section image) keep a heavier shadow */ .brand-photo-frame--showcase { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); } /* ============================================================ FOCUS-VISIBLE (keyboard accessibility) ============================================================ */ .btn-orange:focus-visible, .btn-blue:focus-visible, .btn-outline-white:focus-visible, .commercial-bess-page .btn-ghost-dark:focus-visible, .nav-link:focus-visible, .social-icon:focus-visible, .footer-links a:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary-orange); outline-offset: 3px; border-radius: 4px; } /* ============================================================ ABSTRACT ACCENTS Non-literal geometric decoration: blurred gradient blobs, thin outline rings/squares, and dot-mesh texture. Pure CSS — no illustration files. All instances sit behind content (z-index 0) and never intercept clicks. ============================================================ */ .icon-svg { flex-shrink: 0; } .accent-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } .accent-blob.orange { background: radial-gradient( circle, rgba(247, 148, 29, 0.32) 0%, transparent 70% ); } .accent-blob.blue { background: radial-gradient( circle, rgba(0, 144, 193, 0.28) 0%, transparent 70% ); } .accent-blob.teal { background: radial-gradient( circle, rgba(20, 184, 166, 0.26) 0%, transparent 70% ); } .accent-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgb(247 148 29 / 44%); pointer-events: none; z-index: 0; } .accent-ring.blue { border-color: rgba(0, 144, 193, 0.22); } .accent-ring.on-dark { border-color: rgba(255, 255, 255, 0.1); } .commercial-bess-page .accent-square { position: absolute; border: 1.5px solid rgba(247, 148, 29, 0.16); border-radius: 28px; pointer-events: none; z-index: 0; } .accent-square.on-dark { border-color: rgba(255, 255, 255, 0.08); } /* Subtle dot-grid texture — reads as premium "SaaS" surface texture */ .commercial-bess-page .accent-dot-mesh { position: absolute; pointer-events: none; z-index: 0; background-image: radial-gradient(currentColor 1.5px, transparent 1.5px); background-size: 22px 22px; color: rgba(13, 17, 23, 0.07); -webkit-mask-image: radial-gradient(circle, black 35%, transparent 75%); mask-image: radial-gradient(circle, black 35%, transparent 75%); } .accent-dot-mesh.on-dark { color: rgba(255, 255, 255, 0.06); } /* ---- Placements ---- */ .commercial-bess-page .hero-accent-ring { top: -60px; right: 8%; width: 420px; height: 420px; } .commercial-bess-page .hero-accent-square { bottom: 12%; left: -60px; width: 220px; height: 220px; transform: rotate(18deg); } .commercial-bess-page .stats-accent-dot-mesh { bottom: -140px; left: -100px; width: 320px; height: 320px; } .commercial-bess-page .industries-accent-dot-mesh { top: -20px; right: -40px; width: 360px; height: 300px; } .commercial-bess-page .reviews-accent-dot-mesh { top: -60px; left: -80px; width: 340px; height: 340px; } .footer-accent-blob { bottom: -100px; right: -60px; width: 380px; height: 380px; } .footer-accent-ring { bottom: 90px; right: 10%; width: 110px; height: 110px; } @media (max-width: 991px) { .commercial-bess-page .hero-accent-ring { width: 300px; height: 300px; } } @media (max-width: 767px) { .commercial-bess-page .hero-accent-square, .commercial-bess-page .stats-accent-dot-mesh, .commercial-bess-page .industries-accent-dot-mesh, .commercial-bess-page .reviews-accent-dot-mesh, .footer-accent-blob, .footer-accent-ring { display: none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1199px) { .hero-float-card-1 { left: 0; } .hero-float-card-2 { right: 0; } } @media (max-width: 991px) { .commercial-bess-page .hero-title { font-size: 2.5rem; } .hero-img-main img { height: 380px; } .commercial-bess-page .step-connector { display: none; } .commercial-bess-page .pkg-card.popular { transform: scale(1); } .commercial-bess-page .pkg-card.popular:hover { transform: translateY(-12px); } .incentive-card { padding: 2rem; } } @media (max-width: 767px) { .stat-item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .stat-item:last-child { border-bottom: none; } .hero-float-card { display: none; } .float-whatsapp { bottom: 20px; right: 20px; } .back-to-top { bottom: 90px; right: 20px; } .commercial-bess-page .form-card { padding: 1.5rem; } .commercial-bess-page .contact-info-card { padding: 1.5rem; } .about-section, .commercial-bess-page .packages-section, .commercial-bess-page .bess-section, .commercial-bess-page .reviews-section, .commercial-bess-page .trust-stats-section, .commercial-bess-page .industries-section, .commercial-bess-page .process-section, .commercial-bess-page .cs-faq-section, .commercial-bess-page .lead-section { padding: 76px 0; } .utility-bar-left .utility-item:nth-child(2) { display: none; } } @media (max-width: 575px) { .commercial-bess-page .hero-title { font-size: 2rem; } .commercial-bess-page .section-title { font-size: 1.7rem; } .commercial-bess-page .hero-trust-bar { gap: 12px; } .commercial-bess-page .hero-badge { font-size: 0.75rem; padding: 6px 14px; } } /* ============================================================ LEAD FORM — VALIDATION + OTP VERIFICATION ============================================================ */ .commercial-bess-page .cs-error { display: none; color: #e0433a; font-size: 0.95rem; font-weight: 500; margin-top: 0.4rem; } .commercial-bess-page .form-group { margin-bottom: 16px; } .commercial-bess-page .verifyModal { display: none; margin-top: 1.5rem; padding: 1.5rem; border-radius: 14px; border: 1.5px solid var(--card-border); background: var(--bg-section); } .commercial-bess-page .otp-row .form-label { margin-bottom: 0.6rem; } .commercial-bess-page .disable-btn[disabled] { opacity: 0.7; cursor: not-allowed; } .commercial-bess-page .verify { display: none; } /* ============================================================ GOOGLE PLACES AUTOCOMPLETE DROPDOWN Google appends .pac-container directly to , so it's styled as a global class here rather than scoped to a component. Kept above the fixed site header and dressed to match the form-card design language (rounded, orange accent, Inter type). ============================================================ */ .pac-container { z-index: 10000; margin-top: 6px; padding: 6px; background: var(--white); border: 1.5px solid var(--card-border); border-radius: var(--radius-card-sm); box-shadow: var(--shadow-hover); font-family: "Inter", sans-serif; } /* Google renders this as an empty div right before the required "powered by Google" logo — collapse its default border/margin. */ .pac-container:empty { display: none; } .pac-item { border-top: none; padding: 10px 12px; border-radius: 10px; font-size: 0.95rem; color: var(--body-text); line-height: 1.5; cursor: pointer; transition: var(--transition); } .pac-item:hover, .pac-item-selected, .pac-item-selected:hover { background: var(--primary-orange-light); } .pac-icon { margin-top: 3px; filter: invert(58%) sepia(89%) saturate(1000%) hue-rotate(360deg) brightness(101%) contrast(101%); opacity: 0.85; } .pac-item-query { font-family: "Montserrat", sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--heading-color); padding-right: 4px; } .pac-matched { color: var(--primary-orange); font-weight: 700; } .pac-logo:after { margin: 6px 4px 2px; opacity: 0.6; } /* ============================================================ CALL ON HOLIDAY — optional radio prompt shown on the lead form when the callon_holiday DB toggle is active. ============================================================ */ .commercial-bess-page .cs-holiday-call-text { font-size: 1rem; color: var(--body-text); margin-bottom: 0.75rem; } .commercial-bess-page .cs-radio-group { display: flex; gap: 1.75rem; } .commercial-bess-page .cs-radio-option { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 500; color: var(--heading-color); cursor: pointer; } .commercial-bess-page .cs-radio-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary-orange); cursor: pointer; }