/* ========================================================================== Bali Bamba — Elementor (Free) site styles Recreates the original React/Tailwind design. Content lives in Elementor; these classes are applied through each element's "CSS Classes" field. ========================================================================== */ :root { --bb-cream: #FAF7F2; --bb-sand: #F4EFEA; --bb-navy: #0F172A; --bb-navy-btn: #0B132B; --bb-ink: #090D16; --bb-coral: #E76F51; --bb-coral-dark: #D65F42; --bb-amber: #D97706; --bb-amber-light: #F59E0B; --bb-border: #EAE3D8; --bb-border-2: #E8E0D5; --bb-line: #E2D8CC; --bb-s300: #CBD5E1; --bb-s400: #94A3B8; --bb-s500: #64748B; --bb-s600: #475569; --bb-s700: #334155; --bb-s800: #1E293B; --bb-s900: #0F172A; --bb-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Body copy uses the system UI stack, exactly as the original design renders (headings use Plus Jakarta Sans). Swap to var(--bb-sans) to use Jakarta everywhere. */ --bb-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --bb-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* same stack as the original design */ --bb-serif: Georgia, 'Gelasio', 'Times New Roman', serif; --bb-ease: cubic-bezier(0.16, 1, 0.3, 1); --bb-shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --bb-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --bb-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --bb-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --bb-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --bb-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); } /* ---------- Base / theme neutralisation ---------- */ html:has(body.bb-site) { scroll-behavior: smooth; } body.bb-site { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: normal; background: var(--bb-cream); color: var(--bb-navy); font-family: var(--bb-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } body.bb-site ::selection { background: var(--bb-coral); color: #fff; } body.bb-site *, body.bb-site *::before, body.bb-site *::after { box-sizing: border-box; } body.bb-site h1, body.bb-site h2, body.bb-site h3, body.bb-site h4, body.bb-site h5, body.bb-site h6 { font-family: var(--bb-sans); margin: 0; color: inherit; } body.bb-site p { margin: 0; } body.bb-site a { text-decoration: none; color: inherit; } body.bb-site img { max-width: 100%; height: auto; display: block; } body.bb-site .e-con { --container-default-padding-top: 0px; --container-default-padding-right: 0px; --container-default-padding-bottom: 0px; --container-default-padding-left: 0px; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; --kit-widget-spacing: 0px; --min-height: 0; } body.bb-site .elementor-widget { margin: 0; } @property --bb-mb { syntax: ""; inherits: false; initial-value: 0px; } body.bb-site .e-con .elementor-widget.elementor-widget { margin-block-end: var(--bb-mb, 0px); } body.bb-site [id] { scroll-margin-top: 0; } body.bb-site .elementor-heading-title { font-family: inherit; color: inherit; line-height: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; } body.bb-site .elementor-widget-text-editor { font-family: inherit; color: inherit; } body.bb-site .elementor-shortcode { line-height: 0; } body.bb-site .bb-ico { width: 1em; height: 1em; display: block; flex-shrink: 0; } /* Entrance animations: same soft fade-up as the original (Elementor Free "Entrance Animation") */ @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-20px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes zoomIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } } body.bb-site .animated { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.21, 0.47, 0.32, 0.98); } body.bb-site .animated.animated-fast { animation-duration: 0.45s; } /* Shared layout */ body.bb-site .bb-section { position: relative; overflow: hidden; width: 100%; } body.bb-site .e-con.bb-wrap { width: 100%; max-width: 1280px !important; margin-inline: auto; padding-inline: 24px; position: relative; z-index: 10; } body.bb-site .e-con.bb-wrap--5xl { max-width: 1024px !important; } @media (min-width: 768px) { body.bb-site .e-con.bb-wrap { padding-inline: 32px; } } /* Ambient glows (pure decoration, drawn with pseudo-elements) */ body.bb-site .bb-glow::before, body.bb-site .bb-glow::after { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 9999px; pointer-events: none; z-index: 0; filter: blur(160px); } /* Typography helpers */ body.bb-site .bb-accent { color: var(--bb-coral); } body.bb-site .bb-eyebrow { font-family: var(--bb-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--bb-coral); margin-bottom: 12px; --bb-mb: 12px; } body.bb-site .bb-eyebrow--amber { color: var(--bb-amber); } body.bb-site .bb-h2 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--bb-navy); font-size: 30px; text-wrap: balance; } @media (min-width: 640px) { body.bb-site .bb-h2 { font-size: 48px; } } @media (min-width: 1024px) { body.bb-site .bb-h2 { font-size: 60px; } } body.bb-site .bb-h2--md { font-size: 30px; line-height: 1.25; } @media (min-width: 640px) { body.bb-site .bb-h2--md { font-size: 36px; } } @media (min-width: 1024px) { body.bb-site .bb-h2--md { font-size: 48px; } } body.bb-site .bb-on-dark { color: #fff; } body.bb-site .bb-lead { font-size: 16px; line-height: 1.625; color: var(--bb-s600); } @media (min-width: 640px) { body.bb-site .bb-lead { font-size: 18px; } } body.bb-site .bb-lead--sm { font-size: 14px; } @media (min-width: 640px) { body.bb-site .bb-lead--sm { font-size: 16px; } } /* Pill badge ("WHY BALI BAMBA", "OUR APPROACH"...) */ body.bb-site .bb-pill-wrap { line-height: 0; } body.bb-site .bb-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: #FFF7ED; border: 1px solid rgb(254 215 170 / 0.8); color: var(--bb-coral); font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } body.bb-site .bb-pill .bb-ico { width: 14px; height: 14px; } body.bb-site .bb-pill--mono { font-family: var(--bb-mono); padding: 4px 12px; letter-spacing: normal; border-color: #FED7AA; } /* Buttons */ body.bb-site .bb-btn .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--bb-body); font-weight: 700; font-size: 14px; line-height: 20px; padding: 10px 24px; border-radius: 9999px; border: 0; color: #fff; fill: #fff; transition: background-color .3s, box-shadow .3s, transform .15s, color .3s; cursor: pointer; } body.bb-site .bb-btn .elementor-button:active { transform: scale(0.95); } body.bb-site .bb-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 8px; } body.bb-site .bb-btn--navy .elementor-button { background: var(--bb-navy); box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1); } body.bb-site .bb-btn--navy .elementor-button:hover, body.bb-site .bb-btn--navy .elementor-button:focus-visible { background: var(--bb-coral); color: #fff; box-shadow: var(--bb-shadow-lg); } body.bb-site .bb-btn--lg .elementor-button { font-size: 16px; line-height: 24px; padding: 14px 32px; gap: 10px; background: var(--bb-navy-btn); box-shadow: 0 20px 25px -5px rgb(15 23 42 / 0.15), 0 8px 10px -6px rgb(15 23 42 / 0.15); } @media (min-width: 640px) { body.bb-site .bb-btn--lg .elementor-button { padding-block: 16px; } } body.bb-site .bb-btn--coral .elementor-button { background: var(--bb-coral); box-shadow: 0 4px 6px -1px rgb(231 111 81 / 0.3), 0 2px 4px -2px rgb(231 111 81 / 0.3); padding: 12px 24px; } body.bb-site .bb-btn--coral .elementor-button:hover { background: #D45D3F; color: #fff; } /* Arrow (Lucide arrow-up-right) appended after the label */ body.bb-site .bb-arrow .elementor-button-text::after, body.bb-site .bb-chev .elementor-button-text::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -3px; background: currentColor; transition: transform .3s; -webkit-mask: var(--bb-mask) center / contain no-repeat; mask: var(--bb-mask) center / contain no-repeat; } body.bb-site .bb-arrow { --bb-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E"); } body.bb-site .bb-chev { --bb-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); } body.bb-site .bb-arrow .elementor-button:hover .elementor-button-text::after { transform: translate(2px, -2px); } body.bb-site .bb-btn-link .elementor-button { background: transparent; padding: 0 0 4px; border-radius: 0; border-bottom: 2px solid var(--bb-coral); color: var(--bb-navy); font-family: var(--bb-body); font-weight: 700; font-size: 16px; line-height: 24px; box-shadow: none; transition: color .2s; } body.bb-site .bb-btn-link .elementor-button:hover { color: var(--bb-coral); background: transparent; } body.bb-site .bb-btn-link .elementor-button-text::after { background: var(--bb-coral); } body.bb-site .bb-btn-link .elementor-button:hover .elementor-button-text::after { transform: translateX(4px); } /* Generic white card */ body.bb-site .bb-card { background: rgb(255 255 255 / 0.85); border: 1px solid var(--bb-border); border-radius: 16px; box-shadow: var(--bb-shadow-2xs); transition: box-shadow .3s, border-color .3s; } /* Icon squares */ body.bb-site .bb-iconbox { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; --bb-mb: 16px; transition: transform .3s; font-size: 20px; } body.bb-site .bb-iconbox .elementor-shortcode { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } body.bb-site .bb-iconbox--coral { background: #FFF7ED; border: 1px solid rgb(254 215 170 / 0.8); color: var(--bb-coral); } body.bb-site .bb-iconbox--amber { background: #FFFBEB; border: 1px solid rgb(253 230 138 / 0.8); color: var(--bb-amber); } body.bb-site .bb-iconbox--emerald { background: #ECFDF5; border: 1px solid rgb(167 243 208 / 0.8); color: #059669; } /* ========================================================================== HEADER ========================================================================== */ body.bb-site .bb-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 24px 0; background: transparent; transition: all .3s; border-bottom: 1px solid transparent; } body.admin-bar.bb-site .bb-header { top: 32px; } @media (max-width: 782px) { body.admin-bar.bb-site .bb-header { top: 46px; } } body.bb-site .bb-header.is-scrolled { padding: 14px 0; background: rgb(255 255 255 / 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--bb-border); box-shadow: 0 1px 3px 0 rgb(226 232 240 / 0.3), 0 1px 2px -1px rgb(226 232 240 / 0.3); } body.bb-site .bb-header-inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; } body.bb-site .bb-header-logo { width: auto; flex: 0 0 auto; } body.bb-site .bb-logo { display: inline-flex; align-items: center; line-height: 0; transition: opacity .2s; } body.bb-site .bb-logo:hover { opacity: 0.9; } body.bb-site .bb-logo-svg { height: 100%; width: auto; display: block; } body.bb-site .bb-header-logo .bb-logo { height: 44px; } @media (min-width: 640px) { body.bb-site .bb-header-logo .bb-logo { height: 48px; } } @media (min-width: 768px) { body.bb-site .bb-header-logo .bb-logo { height: 56px; } } @media (min-width: 1024px) { body.bb-site .bb-header-logo .bb-logo { height: 60px; } } body.bb-site .bb-nav { display: none; width: auto; } @media (min-width: 1024px) { body.bb-site .bb-nav { display: block; } } body.bb-site .bb-nav .elementor-icon-list-items { display: flex; align-items: center; gap: 4px; margin: 0 !important; padding: 6px 20px !important; list-style: none; background: rgb(255 255 255 / 0.9); border: 1px solid var(--bb-border-2); border-radius: 9999px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--bb-shadow-2xs); } body.bb-site .bb-nav .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; position: relative; } body.bb-site .bb-nav .elementor-icon-list-item::after { display: none !important; } body.bb-site .bb-nav .elementor-icon-list-icon { display: none; } body.bb-site .bb-nav .elementor-icon-list-item > a { display: block; font-size: 14px; line-height: 20px; padding: 8px 16px; border-radius: 9999px; transition: all .2s; } body.bb-site .bb-nav .elementor-icon-list-text { font-family: var(--bb-body); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--bb-s700); padding: 0 !important; transition: color .2s; } body.bb-site .bb-nav .elementor-icon-list-item > a:hover { background: var(--bb-cream); } body.bb-site .bb-nav .elementor-icon-list-item > a:hover .elementor-icon-list-text, body.bb-site .bb-nav .elementor-icon-list-item.is-active .elementor-icon-list-text { color: var(--bb-coral); } body.bb-site .bb-nav .elementor-icon-list-item.is-active > a:hover { background: transparent; } body.bb-site .bb-nav .elementor-icon-list-item.is-active::before { content: ""; position: absolute; bottom: -2px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 9999px; background: var(--bb-coral); } body.bb-site .bb-header-cta { display: none; width: auto; flex-direction: row; align-items: center; } @media (min-width: 640px) { body.bb-site .bb-header-cta { display: flex; } } body.bb-site .bb-burger { display: block; width: auto; cursor: pointer; } @media (min-width: 1024px) { body.bb-site .bb-burger { display: none; } } body.bb-site .bb-burger .elementor-shortcode { display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 12px; font-size: 20px; background: rgb(255 255 255 / 0.9); border: 1px solid var(--bb-border-2); color: var(--bb-navy); box-shadow: var(--bb-shadow-2xs); transition: color .2s; } body.bb-site .bb-burger:hover .elementor-shortcode { color: var(--bb-coral); } body.bb-site .bb-burger .bb-ico--x, body.bb-site .bb-header.menu-open .bb-burger .bb-ico--menu { display: none; } body.bb-site .bb-header.menu-open .bb-burger .bb-ico--x { display: block; } @media (min-width: 640px) and (max-width: 1023px) { body.bb-site .bb-header-cta { margin-left: auto; margin-right: 12px; } } /* Mobile menu */ body.bb-site .bb-mobile-menu { position: absolute; left: 0; right: 0; top: 80px; z-index: 40; padding: 16px; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity .2s, transform .2s, visibility .2s; } body.bb-site .bb-header.menu-open .bb-mobile-menu { opacity: 1; visibility: visible; transform: none; } @media (min-width: 1024px) { body.bb-site .bb-mobile-menu { display: none; } } body.bb-site .bb-mobile-panel { background: #fff; border: 1px solid var(--bb-border-2); border-radius: 24px; padding: 24px; box-shadow: var(--bb-shadow-2xl); } body.bb-site .bb-mnav .elementor-icon-list-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } body.bb-site .bb-mnav .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; } body.bb-site .bb-mnav .elementor-icon-list-item::after { display: none !important; } body.bb-site .bb-mnav .elementor-icon-list-icon { display: none; } body.bb-site .bb-mnav .elementor-icon-list-item > a { display: flex; align-items: center; justify-content: space-between; padding: 14px; border-radius: 16px; transition: all .2s; } body.bb-site .bb-mnav .elementor-icon-list-item > a::after { content: ""; width: 16px; height: 16px; background: var(--bb-s400); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; } body.bb-site .bb-mnav .elementor-icon-list-text { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--bb-s800); padding: 0 !important; } body.bb-site .bb-mnav .elementor-icon-list-item > a:hover { background: var(--bb-cream); } body.bb-site .bb-mnav .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: var(--bb-coral); } body.bb-site .bb-mnav-cta { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--bb-border); } body.bb-site .bb-mnav-cta .elementor-button { width: 100%; border-radius: 16px; padding: 14px 24px; } /* ========================================================================== HERO ========================================================================== */ body.bb-site .bb-hero { min-height: 96vh; display: flex; flex-direction: column; justify-content: center; padding: 112px 0 64px; background: var(--bb-cream); } @media (min-width: 640px) { body.bb-site .bb-hero { padding-top: 128px; } } @media (min-width: 1024px) { body.bb-site .bb-hero { min-height: 100vh; } } body.bb-site .bb-hero::after { content: ""; position: absolute; top: 25%; right: 25%; width: 750px; height: 750px; border-radius: 9999px; background: linear-gradient(to bottom right, rgb(231 111 81 / 0.08), rgb(245 158 11 / 0.06), transparent); filter: blur(140px); pointer-events: none; z-index: 0; } body.bb-site .bb-hero-art { position: absolute; top: 0; bottom: 0; right: 0; width: 55%; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to right, transparent, black 20%); mask-image: linear-gradient(to right, transparent, black 20%); } body.bb-site .bb-hero-art-inner { position: absolute; inset: 0; will-change: transform; transition: transform .4s var(--bb-ease); } body.bb-site .bb-hero-img, body.bb-site .bb-hero-img img { width: 100%; height: 100%; } body.bb-site .bb-hero-img img { object-fit: cover; object-position: 80% 50%; max-width: none; } body.bb-site .bb-hero-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; background: linear-gradient(to top, var(--bb-cream), transparent); } body.bb-site .bb-hero-cue { display: none; position: absolute; left: 32px; top: 50%; transform: translateY(-50%); z-index: 20; pointer-events: none; width: auto; } @media (min-width: 1536px) { body.bb-site .bb-hero-cue { display: block; } } body.bb-site .bb-hero-cue .bb-cue { display: flex; flex-direction: column; align-items: center; gap: 24px; } body.bb-site .bb-cue-dot { width: 24px; height: 24px; border-radius: 9999px; border: 1px solid rgb(217 119 6 / 0.4); background: rgb(255 255 255 / 0.4); display: flex; align-items: center; justify-content: center; } body.bb-site .bb-cue-dot::after { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--bb-navy); } body.bb-site .bb-cue-line { width: 1px; height: 64px; background: linear-gradient(to bottom, rgb(217 119 6 / 0.4), rgb(231 111 81 / 0.3), transparent); } body.bb-site .bb-cue-text { font-family: var(--bb-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bb-s400); transform: rotate(-90deg); white-space: nowrap; margin-top: 16px; } body.bb-site .bb-hero-strip { display: none; position: absolute; right: 24px; top: 28%; z-index: 20; pointer-events: none; width: auto; } @media (min-width: 1280px) { body.bb-site .bb-hero-strip { display: block; } } @media (min-width: 1536px) { body.bb-site .bb-hero-strip { right: 40px; } } body.bb-site .bb-strip-words em { display: block; font-family: var(--bb-serif); font-style: italic; font-size: 14px; line-height: 20px; color: var(--bb-s600); margin-bottom: 4px; --bb-mb: 4px; } body.bb-site .bb-strip-rule { width: 24px; height: 1.5px; background: rgb(231 111 81 / 0.5); margin: 10px 0 12px; } body.bb-site .bb-strip-label { font-family: var(--bb-mono); font-size: 9px; line-height: 1.25; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bb-s400); } body.bb-site .bb-hero-inner { z-index: 10; } body.bb-site .bb-hero-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 1024px) { body.bb-site .bb-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } body.bb-site .bb-hero-copy { grid-column: span 6; } body.bb-site .bb-hero-space { grid-column: span 6; } } @media (min-width: 1280px) { body.bb-site .bb-hero-grid { gap: 40px; } body.bb-site .bb-hero-copy { grid-column: span 5; } body.bb-site .bb-hero-space { grid-column: span 7; } } body.bb-site .bb-hero-copy { align-items: flex-start; z-index: 20; } body.bb-site .bb-hero-space { min-height: 380px; pointer-events: none; } @media (min-width: 640px) { body.bb-site .bb-hero-space { min-height: 480px; } } @media (min-width: 1024px) { body.bb-site .bb-hero-space { min-height: 580px; } } body.bb-site .bb-hero-title { margin-bottom: 32px; --bb-mb: 32px; width: 100%; transform-origin: top left; will-change: transform, opacity; } body.bb-site .bb-hero-title .elementor-heading-title { font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.025em; color: var(--bb-navy); text-wrap: initial; } @media (min-width: 640px) { body.bb-site .bb-hero-title .elementor-heading-title { font-size: 60px; } } @media (min-width: 1024px) { body.bb-site .bb-hero-title .elementor-heading-title { font-size: 72px; } } @media (min-width: 1280px) { body.bb-site .bb-hero-title .elementor-heading-title { font-size: 80px; } } body.bb-site .bb-line { display: block; will-change: transform; animation: bbLineIn .75s var(--bb-ease) both; } body.bb-site .bb-line + .bb-line { margin-top: 2px; } @media (min-width: 640px) { body.bb-site .bb-line + .bb-line { margin-top: 4px; } } body.bb-site .bb-l1 { animation-delay: .1s; } body.bb-site .bb-l2 { animation-delay: .28s; } body.bb-site .bb-l3 { animation-delay: .46s; color: var(--bb-coral); } body.bb-site .bb-l4 { animation-delay: .64s; font-family: var(--bb-serif); font-style: italic; font-weight: 400; letter-spacing: normal; color: var(--bb-amber); } @keyframes bbLineIn { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } } @keyframes bbFadeUp16 { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } } body.bb-site .bb-reveal { animation: bbFadeUp16 .65s var(--bb-ease) both; } body.bb-site .bb-d85 { animation-delay: .85s; } body.bb-site .bb-d105 { animation-delay: 1.05s; } body.bb-site .bb-hero-lead { max-width: 448px !important; margin-bottom: 36px; --bb-mb: 36px; font-size: 16px; line-height: 1.625; color: var(--bb-s700); } @media (min-width: 640px) { body.bb-site .bb-hero-lead { font-size: 18px; } } body.bb-site .bb-hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 28px; width: 100%; } @media (min-width: 640px) { body.bb-site .bb-hero-actions { width: auto; gap: 32px; } } body.bb-site .bb-hero-actions > .elementor-widget { width: auto; } body.bb-site .bb-hero-cards { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--bb-border); } @media (min-width: 640px) { body.bb-site .bb-hero-cards { margin-top: 96px; } } @media (min-width: 768px) { body.bb-site .bb-hero-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body.bb-site .bb-hero-card { padding: 24px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } @media (min-width: 640px) { body.bb-site .bb-hero-card { padding: 28px; } } body.bb-site .bb-hero-card:hover { box-shadow: var(--bb-shadow-md); } body.bb-site .bb-hero-card:hover .bb-iconbox { transform: scale(1.05); } body.bb-site .bb-tone-coral:hover { border-color: rgb(231 111 81 / 0.4); } body.bb-site .bb-tone-amber:hover { border-color: rgb(217 119 6 / 0.4); } body.bb-site .bb-tone-emerald:hover { border-color: rgb(16 185 129 / 0.4); } body.bb-site .bb-card-title { font-weight: 700; font-size: 18px; line-height: 28px; letter-spacing: -0.015em; color: var(--bb-navy); margin-bottom: 8px; --bb-mb: 8px; } body.bb-site .bb-card-text { font-size: 14px; line-height: 1.625; color: var(--bb-s600); } /* ========================================================================== PARTNERS ========================================================================== */ body.bb-site .bb-partners { padding: 56px 0; background: var(--bb-sand); border-top: 1px solid var(--bb-border); } @media (min-width: 640px) { body.bb-site .bb-partners { padding: 64px 0; } } body.bb-site .bb-partners-head { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; margin-bottom: 40px; --bb-mb: 40px; } @media (min-width: 640px) { body.bb-site .bb-partners-head { margin-bottom: 48px; --bb-mb: 48px; } } @media (min-width: 1024px) { body.bb-site .bb-partners-head { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px; } body.bb-site .bb-partners-left { grid-column: span 5; } body.bb-site .bb-partners-right { grid-column: span 7; padding-bottom: 12px; } } body.bb-site .bb-partners .bb-eyebrow { margin-bottom: 10px; --bb-mb: 10px; } body.bb-site .bb-partners-title { font-size: 30px; line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; color: var(--bb-navy); } @media (min-width: 640px) { body.bb-site .bb-partners-title { font-size: 36px; } } @media (min-width: 1024px) { body.bb-site .bb-partners-title { font-size: 48px; } } body.bb-site .bb-partners-right .bb-lead { color: var(--bb-s700); } body.bb-site .bb-marquee { position: relative; width: 100%; overflow: hidden; padding: 16px 0; user-select: none; } body.bb-site .bb-marquee::before, body.bb-site .bb-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 10; pointer-events: none; } body.bb-site .bb-marquee::before { left: 0; background: linear-gradient(to right, var(--bb-sand), transparent); } body.bb-site .bb-marquee::after { right: 0; background: linear-gradient(to left, var(--bb-sand), transparent); } @media (min-width: 768px) { body.bb-site .bb-marquee::before, body.bb-site .bb-marquee::after { width: 144px; } } body.bb-site .bb-marquee-track { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 56px; width: max-content; padding: 8px 0; padding-right: 56px; } @media (min-width: 640px) { body.bb-site .bb-marquee-track { gap: 80px; padding-right: 80px; } } @media (min-width: 768px) { body.bb-site .bb-marquee-track { gap: 96px; padding-right: 96px; } } body.bb-site .bb-marquee-roll { display: flex; width: max-content; animation: bbMarquee 32s linear infinite; } body.bb-site .bb-marquee-roll:hover { animation-play-state: paused; } @keyframes bbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } body.bb-site .bb-partner { width: auto !important; flex-shrink: 0; color: var(--bb-navy); opacity: .9; transition: all .2s; cursor: pointer; line-height: 0; } body.bb-site .bb-partner:hover { color: var(--bb-coral); opacity: 1; } body.bb-site .bb-partner-svg { height: 32px; width: auto; display: block; } body.bb-site .bb-partner--sm .bb-partner-svg { height: 28px; } @media (min-width: 768px) { body.bb-site .bb-partner-svg { height: 36px; } body.bb-site .bb-partner--sm .bb-partner-svg { height: 32px; } } /* ========================================================================== SERVICES ========================================================================== */ body.bb-site .bb-services { padding: 80px 0; background: var(--bb-cream); border-top: 1px solid var(--bb-border); } @media (min-width: 640px) { body.bb-site .bb-services { padding: 96px 0; } } body.bb-site .bb-services::before { top: 25%; right: 0; background: rgb(245 158 11 / 0.05); } body.bb-site .bb-services::after { bottom: 40px; left: 0; background: rgb(231 111 81 / 0.05); } body.bb-site .bb-sec-head { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } @media (min-width: 1024px) { body.bb-site .bb-sec-head { flex-direction: row; align-items: flex-end; } } body.bb-site .bb-sec-head-l { max-width: 672px !important; } body.bb-site .bb-sec-head-r { max-width: 448px !important; } body.bb-site .bb-services-head { margin-bottom: 40px; --bb-mb: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--bb-border); } @media (min-width: 640px) { body.bb-site .bb-services-head { margin-bottom: 48px; --bb-mb: 48px; padding-bottom: 32px; } } body.bb-site .bb-svc-list { border-top: 1px solid var(--bb-line); border-bottom: 1px solid var(--bb-line); } body.bb-site .bb-svc-row { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px 16px; border-radius: 16px; cursor: pointer; transition: background-color .3s; } body.bb-site .bb-svc-row + .bb-svc-row { border-top: 1px solid var(--bb-line); } @media (min-width: 640px) { body.bb-site .bb-svc-row { padding: 40px 32px; } } @media (min-width: 1024px) { body.bb-site .bb-svc-row { flex-direction: row; align-items: center; } } body.bb-site .bb-svc-row:hover, body.bb-site .bb-svc-row:focus-visible { background: rgb(255 255 255 / 0.8); outline: none; } body.bb-site .bb-svc-left { display: flex; flex-direction: row; align-items: center; gap: 24px; } @media (min-width: 640px) { body.bb-site .bb-svc-left { gap: 40px; } } @media (min-width: 1024px) { body.bb-site .bb-svc-left { width: 41.6667%; } body.bb-site .bb-svc-desc { width: 58.3333%; padding-left: 0 !important; } } body.bb-site .bb-svc-num { width: auto; flex-shrink: 0; font-family: var(--bb-mono); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--bb-s400); transition: color .3s; } @media (min-width: 640px) { body.bb-site .bb-svc-num { font-size: 16px; line-height: 24px; } } body.bb-site .bb-svc-title { width: auto; font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -0.025em; color: var(--bb-navy); transition: color .3s; } @media (min-width: 640px) { body.bb-site .bb-svc-title { font-size: 30px; line-height: 36px; } } body.bb-site .bb-svc-row:hover .bb-svc-num, body.bb-site .bb-svc-row:hover .bb-svc-title { color: var(--bb-coral); } body.bb-site .bb-svc-desc { padding-left: 48px; font-size: 14px; line-height: 1.625; color: var(--bb-s600); transition: color .3s; } @media (min-width: 640px) { body.bb-site .bb-svc-desc { font-size: 16px; } } body.bb-site .bb-svc-row:hover .bb-svc-desc { color: var(--bb-s900); } /* Service detail modal */ body.bb-site .bb-modals { display: none; } body.bb-site .bb-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; } @media (min-width: 640px) { body.bb-site .bb-modal { padding: 24px; } } @media (min-width: 768px) { body.bb-site .bb-modal { padding: 40px; } } body.bb-site .bb-modal.is-open { visibility: visible; opacity: 1; } body.bb-site .bb-modal-backdrop { position: fixed; inset: 0; background: rgb(15 23 42 / 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } body.bb-site .bb-modal-panel { position: relative; z-index: 10; width: 100%; max-width: 768px !important; max-height: 90vh; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bb-border); border-radius: 24px; box-shadow: var(--bb-shadow-2xl); overflow: hidden; color: var(--bb-navy); transform: translateY(20px) scale(0.95); transition: transform .3s; } body.bb-site .bb-modal.is-open .bb-modal-panel { transform: none; } body.bb-site .bb-modal-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--bb-border); background: var(--bb-cream); flex-shrink: 0; } @media (min-width: 640px) { body.bb-site .bb-modal-head { padding-inline: 32px; } } body.bb-site .bb-modal-head-l { display: flex; flex-direction: row; align-items: center; gap: 12px; } body.bb-site .bb-badge-mono { width: auto; font-family: var(--bb-mono); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--bb-coral); padding: 4px 10px; border-radius: 9999px; background: #FFF7ED; border: 1px solid #FED7AA; } body.bb-site .bb-modal-sub { width: auto; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--bb-s500); } body.bb-site .bb-modal-close { width: auto; cursor: pointer; } body.bb-site .bb-modal-close .elementor-shortcode { display: flex; padding: 8px; border-radius: 9999px; background: #fff; border: 1px solid var(--bb-border); color: var(--bb-s600); font-size: 20px; transition: background-color .2s; } body.bb-site .bb-modal-close:hover .elementor-shortcode { background: #F1F5F9; } body.bb-site .bb-modal-body { overflow-y: auto; padding: 24px; display: flex; flex-direction: column; } @media (min-width: 640px) { body.bb-site .bb-modal-body { padding: 32px; } } body.bb-site .bb-modal-title { font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -0.025em; margin-bottom: 12px; --bb-mb: 12px; } @media (min-width: 640px) { body.bb-site .bb-modal-title { font-size: 30px; line-height: 36px; } } body.bb-site .bb-modal-desc { font-size: 16px; line-height: 1.625; color: var(--bb-s600); margin-bottom: 32px; --bb-mb: 32px; } body.bb-site .bb-metric { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 20px; border-radius: 16px; background: rgb(255 247 237 / 0.8); border: 1px solid rgb(254 215 170 / 0.8); margin-bottom: 32px; --bb-mb: 32px; } body.bb-site .bb-metric-ico { width: auto; color: var(--bb-coral); font-size: 20px; } body.bb-site .bb-metric-label { font-family: var(--bb-mono); font-size: 12px; line-height: 16px; text-transform: uppercase; font-weight: 700; color: var(--bb-s500); } body.bb-site .bb-metric-value { font-weight: 700; font-size: 18px; line-height: 28px; color: var(--bb-navy); } body.bb-site .bb-modal-h3 { font-weight: 600; font-size: 16px; line-height: 24px; margin-bottom: 16px; --bb-mb: 16px; color: var(--bb-navy); } @media (min-width: 640px) { body.bb-site .bb-modal-h3 { font-size: 18px; line-height: 28px; } } body.bb-site .bb-modal-h3--tools { margin-bottom: 12px; --bb-mb: 12px; } body.bb-site .bb-deliv { margin-bottom: 32px; --bb-mb: 32px; } body.bb-site .bb-deliv ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { body.bb-site .bb-deliv ul { grid-template-columns: 1fr 1fr; } } body.bb-site .bb-deliv li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; background: var(--bb-cream); border: 1px solid var(--bb-border); font-size: 12px; line-height: 1.625; font-weight: 500; color: var(--bb-s700); } body.bb-site .bb-deliv li::before { content: ""; width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; background: #059669; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat; } body.bb-site .bb-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } body.bb-site .bb-chips li { padding: 6px 12px; border-radius: 12px; background: var(--bb-cream); border: 1px solid var(--bb-border); font-family: var(--bb-mono); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--bb-s700); } body.bb-site .bb-modal-foot { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-top: 1px solid var(--bb-border); background: var(--bb-cream); flex-shrink: 0; } @media (min-width: 640px) { body.bb-site .bb-modal-foot { flex-direction: row; } } body.bb-site .bb-modal-foot-txt { width: auto; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bb-s500); } body.bb-site .bb-modal-foot .bb-btn { width: 100%; } body.bb-site .bb-modal-foot .bb-btn .elementor-button { width: 100%; } @media (min-width: 640px) { body.bb-site .bb-modal-foot .bb-btn, body.bb-site .bb-modal-foot .bb-btn .elementor-button { width: auto; } } body.bb-modal-lock { overflow: hidden; } /* ========================================================================== WHY BALI BAMBA ========================================================================== */ body.bb-site .bb-why { padding: 80px 0; border-top: 1px solid var(--bb-border); background: linear-gradient(to bottom, rgb(255 251 235 / 0.7), var(--bb-cream), rgb(255 247 237 / 0.7)); } @media (min-width: 640px) { body.bb-site .bb-why { padding: 96px 0; } } body.bb-site .bb-why .bb-wrap::before { content: ""; position: absolute; inset: -96px -100vw; background: radial-gradient(ellipse 75% 55% at 25% 25%, rgb(254 240 138 / 0.22), transparent 60%), radial-gradient(ellipse 60% 50% at 80% 70%, rgb(254 215 170 / 0.25), transparent 60%); pointer-events: none; z-index: -1; } body.bb-site .bb-why::before { top: 0; left: 25%; background: rgb(245 158 11 / 0.08); } body.bb-site .bb-why::after { bottom: 0; right: 25%; background: rgb(231 111 81 / 0.08); } body.bb-site .bb-center-head { text-align: center; max-width: 768px !important; margin: 0 auto 40px; align-items: center; } @media (min-width: 640px) { body.bb-site .bb-center-head { margin-bottom: 48px; --bb-mb: 48px; } } body.bb-site .bb-center-head .bb-pill-wrap { margin-bottom: 14px; --bb-mb: 14px; } body.bb-site .bb-why .bb-h2--md { line-height: 1.25; margin-bottom: 16px; --bb-mb: 16px; } body.bb-site .bb-spot { display: grid; grid-template-columns: 1fr; align-items: center; margin-bottom: 32px; --bb-mb: 32px; border-radius: 24px; overflow: hidden; border: 1px solid var(--bb-border); box-shadow: var(--bb-shadow-md); background: #fff; } @media (min-width: 640px) { body.bb-site .bb-spot { margin-bottom: 40px; --bb-mb: 40px; } } @media (min-width: 1024px) { body.bb-site .bb-spot { grid-template-columns: repeat(12, minmax(0, 1fr)); } body.bb-site .bb-spot-media { grid-column: span 5; height: 100%; aspect-ratio: auto !important; } body.bb-site .bb-spot-body { grid-column: span 7; } } body.bb-site .bb-spot-media { position: relative; aspect-ratio: 16 / 11; min-height: 260px; overflow: hidden; background: var(--bb-s900); } @media (min-width: 640px) { body.bb-site .bb-spot-media { aspect-ratio: 4 / 3; min-height: 320px; } } body.bb-site .bb-spot-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.4), transparent, transparent); pointer-events: none; } body.bb-site .bb-spot-img, body.bb-site .bb-spot-img img { position: absolute; inset: 0; width: 100%; height: 100%; } body.bb-site .bb-spot-img img { object-fit: cover; transition: transform .7s ease-out; max-width: none; } body.bb-site .bb-spot-media:hover .bb-spot-img img { transform: scale(1.03); } body.bb-site .bb-spot-body { padding: 24px; justify-content: center; } @media (min-width: 640px) { body.bb-site .bb-spot-body { padding: 32px; } } @media (min-width: 1024px) { body.bb-site .bb-spot-body { padding: 40px; } } body.bb-site .bb-spot-body .bb-pill-wrap { margin-bottom: 14px; --bb-mb: 14px; } body.bb-site .bb-spot-title { font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -0.025em; color: var(--bb-navy); margin-bottom: 12px; --bb-mb: 12px; } @media (min-width: 640px) { body.bb-site .bb-spot-title { font-size: 30px; line-height: 36px; } } body.bb-site .bb-spot-text { font-size: 14px; line-height: 1.625; color: var(--bb-s600); margin-bottom: 20px; --bb-mb: 20px; } @media (min-width: 640px) { body.bb-site .bb-spot-text { font-size: 16px; } } body.bb-site .bb-pillars { display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 16px; border-top: 1px solid var(--bb-border); } @media (min-width: 640px) { body.bb-site .bb-pillars { grid-template-columns: 1fr 1fr; } } body.bb-site .bb-pillar { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; } body.bb-site .bb-mini-ico { width: auto; flex-shrink: 0; margin-top: 2px; } body.bb-site .bb-mini-ico .elementor-shortcode { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; } body.bb-site .bb-mini-ico--coral .elementor-shortcode { background: rgb(255 237 213 / 0.8); color: var(--bb-coral); } body.bb-site .bb-mini-ico--amber .elementor-shortcode { background: rgb(254 243 199 / 0.8); color: var(--bb-amber); } body.bb-site .bb-pillar-title { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--bb-navy); letter-spacing: normal; } body.bb-site .bb-pillar-text { font-size: 11px; line-height: 1.375; color: var(--bb-s500); } body.bb-site .bb-why-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { body.bb-site .bb-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.bb-site .bb-why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } body.bb-site .bb-why-card { position: relative; overflow: hidden; padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--bb-border); box-shadow: var(--bb-shadow-2xs); justify-content: space-between; cursor: pointer; transition: all .3s; } @media (min-width: 640px) { body.bb-site .bb-why-card { padding: 32px; } } body.bb-site .bb-why-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgb(226 232 240 / 0.5), 0 4px 6px -4px rgb(226 232 240 / 0.5); } body.bb-site .bb-why-card--1:hover { background: rgb(255 247 237 / 0.7); border-color: rgb(231 111 81 / 0.5); } body.bb-site .bb-why-card--2:hover { background: rgb(255 251 235 / 0.7); border-color: rgb(217 119 6 / 0.5); } body.bb-site .bb-why-card--3:hover { background: rgb(236 253 245 / 0.7); border-color: rgb(16 185 129 / 0.5); } body.bb-site .bb-why-card--4:hover { background: var(--bb-cream); border-color: rgb(15 23 42 / 0.4); } body.bb-site .bb-why-card::after { content: ""; position: absolute; bottom: 0; left: 32px; right: 32px; height: 4px; background: var(--bb-coral); opacity: 0; transition: opacity .3s; } body.bb-site .bb-why-card:hover::after { opacity: 1; } body.bb-site .bb-why-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 24px; --bb-mb: 24px; } body.bb-site .bb-why-ico { width: auto; } body.bb-site .bb-why-ico .elementor-shortcode { width: 52px; height: 52px; border-radius: 16px; border: 1px solid rgb(226 232 240 / 0.4); display: flex; align-items: center; justify-content: center; font-size: 24px; transition: transform .3s; } body.bb-site .bb-why-card:hover .bb-why-ico .elementor-shortcode { transform: scale(1.05); } body.bb-site .bb-why-card--1 .bb-why-ico .elementor-shortcode { background: rgb(255 237 213 / 0.7); color: var(--bb-coral); } body.bb-site .bb-why-card--2 .bb-why-ico .elementor-shortcode { background: rgb(254 243 199 / 0.7); color: var(--bb-amber); } body.bb-site .bb-why-card--3 .bb-why-ico .elementor-shortcode { background: rgb(209 250 229 / 0.7); color: #059669; } body.bb-site .bb-why-card--4 .bb-why-ico .elementor-shortcode { background: rgb(226 232 240 / 0.7); color: #E27D60; } body.bb-site .bb-why-num { width: auto; font-family: var(--bb-mono); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--bb-s400); transition: color .3s; } body.bb-site .bb-why-card:hover .bb-why-num { color: var(--bb-navy); } body.bb-site .bb-why-title { font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: -0.025em; color: var(--bb-navy); margin-bottom: 12px; --bb-mb: 12px; transition: color .3s; } @media (min-width: 640px) { body.bb-site .bb-why-title { font-size: 24px; line-height: 32px; } } body.bb-site .bb-why-card:hover .bb-why-title { color: var(--bb-coral); } body.bb-site .bb-why-text { font-size: 14px; line-height: 1.625; color: var(--bb-s600); } /* ========================================================================== IMPACT (dark) ========================================================================== */ body.bb-site .bb-impact { padding: 80px 0; background: var(--bb-navy); color: #fff; } @media (min-width: 640px) { body.bb-site .bb-impact { padding: 112px 0; } } body.bb-site .bb-impact::before { top: 25%; left: 25%; background: rgb(231 111 81 / 0.1); filter: blur(180px); } body.bb-site .bb-impact::after { bottom: 40px; right: 25%; background: rgb(217 119 6 / 0.1); filter: blur(180px); } body.bb-site .bb-impact-head { margin-bottom: 48px; --bb-mb: 48px; } @media (min-width: 640px) { body.bb-site .bb-impact-head { margin-bottom: 64px; --bb-mb: 64px; gap: 32px; } } body.bb-site .bb-impact-head .bb-sec-head-r { padding-bottom: 4px; } body.bb-site .bb-dark-lead { font-size: 14px; line-height: 1.625; color: var(--bb-s400); } @media (min-width: 640px) { body.bb-site .bb-dark-lead { font-size: 16px; } } body.bb-site .bb-metrics { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 24px; border-radius: 16px; background: rgb(15 23 42 / 0.8); border: 1px solid var(--bb-s800); box-shadow: var(--bb-shadow-2xl); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } @media (min-width: 640px) { body.bb-site .bb-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 32px; border-radius: 24px; } } @media (min-width: 1024px) { body.bb-site .bb-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 40px; } } body.bb-site .bb-metric-item { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 8px 12px; } @media (min-width: 640px) { body.bb-site .bb-metric-item { gap: 20px; padding-inline: 24px; } } @media (min-width: 1024px) { body.bb-site .bb-metric-item { padding-inline: 32px; } body.bb-site .bb-metric-item + .bb-metric-item { border-left: 1px solid var(--bb-s800); } body.bb-site .bb-metric-item:first-child { padding-left: 8px; } body.bb-site .bb-metric-item:last-child { padding-right: 8px; } } body.bb-site .bb-metric-badge { width: auto; flex-shrink: 0; } body.bb-site .bb-metric-badge .elementor-shortcode { width: 48px; height: 48px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgb(231 111 81 / 0.15); border: 1px solid rgb(231 111 81 / 0.3); color: var(--bb-coral); box-shadow: var(--bb-shadow-sm); transition: transform .3s; } @media (min-width: 640px) { body.bb-site .bb-metric-badge .elementor-shortcode { width: 56px; height: 56px; } } body.bb-site .bb-metric-badge--emerald .elementor-shortcode { background: rgb(16 185 129 / 0.15); border-color: rgb(16 185 129 / 0.3); color: #34D399; } body.bb-site .bb-metric-item:hover .bb-metric-badge .elementor-shortcode { transform: scale(1.05); } body.bb-site .bb-counter { min-width: 0; width: auto; } body.bb-site .bb-counter .elementor-counter { display: flex; flex-direction: column; align-items: flex-start; } body.bb-site .bb-counter .elementor-counter-number-wrapper { display: flex; font-family: var(--bb-sans); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.025em; color: #fff; transition: color .3s; } @media (min-width: 640px) { body.bb-site .bb-counter .elementor-counter-number-wrapper { font-size: 36px; } } @media (min-width: 1024px) { body.bb-site .bb-counter .elementor-counter-number-wrapper { font-size: 48px; } } body.bb-site .bb-counter .elementor-counter-number-prefix, body.bb-site .bb-counter .elementor-counter-number-suffix { flex-grow: 0; text-align: left; } body.bb-site .bb-metric-item:hover .bb-counter .elementor-counter-number-wrapper { color: var(--bb-coral); } body.bb-site .bb-counter .elementor-counter-title { order: 2; margin-top: 8px; font-family: var(--bb-mono); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bb-s400); white-space: nowrap; text-align: left; } /* ========================================================================== OUR APPROACH ========================================================================== */ body.bb-site .bb-approach { padding: 80px 0; background: var(--bb-cream); border-top: 1px solid var(--bb-border); } @media (min-width: 640px) { body.bb-site .bb-approach { padding: 112px 0; } } body.bb-site .bb-approach::before { top: 33%; left: 25%; background: rgb(231 111 81 / 0.05); filter: blur(180px); } body.bb-site .bb-approach::after { bottom: 25%; right: 25%; background: rgb(245 158 11 / 0.05); filter: blur(180px); } body.bb-site .bb-approach-head { max-width: 768px !important; margin-bottom: 48px; --bb-mb: 48px; } @media (min-width: 640px) { body.bb-site .bb-approach-head { margin-bottom: 64px; --bb-mb: 64px; } } body.bb-site .bb-approach-head .bb-pill-wrap { margin-bottom: 16px; --bb-mb: 16px; } body.bb-site .bb-approach-head .bb-h2--md { line-height: 1.15; margin-bottom: 20px; --bb-mb: 20px; font-weight: 700; } body.bb-site .bb-wavy { text-decoration: underline wavy rgb(217 119 6 / 0.4); text-decoration-thickness: 2px; text-underline-offset: 8px; } body.bb-site .bb-approach-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; } @media (min-width: 1024px) { body.bb-site .bb-approach-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } body.bb-site .bb-phases { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; height: 100%; } @media (min-width: 640px) { body.bb-site .bb-phases { gap: 16px; } } body.bb-site .bb-phase { flex: 1 1 0%; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; border: 1px solid var(--bb-border); background: #fff; box-shadow: var(--bb-shadow-sm); transition: all .3s; } @media (min-width: 640px) { body.bb-site .bb-phase { padding: 24px; gap: 20px; border-radius: 24px; } } body.bb-site .bb-phase:hover { box-shadow: var(--bb-shadow-md); } body.bb-site .bb-phase--1:hover { background: #FFF8F5; border-color: rgb(231 111 81 / 0.5); } body.bb-site .bb-phase--2:hover { background: #FFFBF2; border-color: rgb(217 119 6 / 0.5); } body.bb-site .bb-phase--3:hover { background: #F2FDF6; border-color: rgb(16 185 129 / 0.5); } body.bb-site .bb-phase--4:hover { background: #F8FAFC; border-color: rgb(71 85 105 / 0.5); } body.bb-site .bb-phase { align-items: flex-start; } body.bb-site .bb-phase-num { width: 44px; height: 44px; flex-shrink: 0; border-radius: 16px; border: 1px solid var(--bb-border); display: flex; align-items: center; justify-content: center; font-family: var(--bb-mono); font-weight: 700; font-size: 14px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: transform .3s; } @media (min-width: 640px) { body.bb-site .bb-phase-num { width: 48px; height: 48px; font-size: 16px; } } body.bb-site .bb-phase:hover .bb-phase-num { transform: scale(1.05); } body.bb-site .bb-phase--1 .bb-phase-num { background: #FFF7ED; color: var(--bb-coral); } body.bb-site .bb-phase--2 .bb-phase-num { background: #FFFBEB; color: var(--bb-amber); } body.bb-site .bb-phase--3 .bb-phase-num { background: #ECFDF5; color: #047857; } body.bb-site .bb-phase--4 .bb-phase-num { background: #F1F5F9; color: var(--bb-s800); } body.bb-site .bb-phase-body { flex: 1 1 0%; min-width: 0; } body.bb-site .bb-phase-top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 6px; --bb-mb: 6px; } body.bb-site .bb-phase-title { width: auto; font-weight: 700; font-size: 18px; line-height: 28px; letter-spacing: -0.025em; color: var(--bb-navy); transition: color .3s; } @media (min-width: 640px) { body.bb-site .bb-phase-title { font-size: 20px; } } body.bb-site .bb-phase:hover .bb-phase-title { color: var(--bb-coral); } body.bb-site .bb-phase-ico { width: auto; } body.bb-site .bb-phase-ico .elementor-shortcode { display: flex; padding: 6px; border-radius: 8px; background: #F8FAFC; border: 1px solid #F1F5F9; color: var(--bb-s400); font-size: 16px; transition: color .3s; } body.bb-site .bb-phase:hover .bb-phase-ico .elementor-shortcode { color: var(--bb-coral); } body.bb-site .bb-phase-text { font-size: 14px; line-height: 1.625; color: var(--bb-s600); } @media (min-width: 640px) { body.bb-site .bb-phase-text { font-size: 15px; } } body.bb-site .bb-approach-media { height: 100%; min-height: 460px; } @media (min-width: 1024px) { body.bb-site .bb-approach-media { min-height: auto; } } body.bb-site .bb-approach-frame { height: 100%; width: 100%; padding: 12px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--bb-border); box-shadow: 0 20px 25px -5px rgb(226 232 240 / 0.6), 0 8px 10px -6px rgb(226 232 240 / 0.6); } body.bb-site .bb-approach-img { position: relative; height: 100%; min-height: 440px; border-radius: 16px; overflow: hidden; background: #F1F5F9; } body.bb-site .bb-approach-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform .7s ease-out; } body.bb-site .bb-approach-frame:hover .bb-approach-img img { transform: scale(1.05); } /* ========================================================================== TESTIMONIALS (dark) ========================================================================== */ body.bb-site .bb-testimonials { padding: 80px 0; background: var(--bb-navy); color: #fff; border-top: 1px solid var(--bb-s800); } @media (min-width: 640px) { body.bb-site .bb-testimonials { padding: 112px 0; } } body.bb-site .bb-testimonials::before { top: 50%; left: 25%; background: rgb(231 111 81 / 0.1); filter: blur(180px); } body.bb-site .bb-testimonials::after { top: 50%; right: 25%; background: rgb(245 158 11 / 0.1); filter: blur(180px); } body.bb-site .bb-testimonials .bb-wrap { margin-bottom: 40px; --bb-mb: 40px; } @media (min-width: 640px) { body.bb-site .bb-testimonials .bb-wrap { margin-bottom: 56px; --bb-mb: 56px; } } body.bb-site .bb-t-title { font-weight: 800; font-size: 24px; line-height: 1.25; letter-spacing: -0.025em; color: #fff; max-width: 1024px !important; } @media (min-width: 640px) { body.bb-site .bb-t-title { font-size: 36px; white-space: nowrap; } } @media (min-width: 1024px) { body.bb-site .bb-t-title { font-size: 48px; } } body.bb-site .bb-tmarquee { position: relative; width: 100%; overflow: hidden; user-select: none; z-index: 10; } body.bb-site .bb-tmarquee::before, body.bb-site .bb-tmarquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 10; pointer-events: none; } body.bb-site .bb-tmarquee::before { left: 0; background: linear-gradient(to right, var(--bb-navy), transparent); } body.bb-site .bb-tmarquee::after { right: 0; background: linear-gradient(to left, var(--bb-navy), transparent); } @media (min-width: 640px) { body.bb-site .bb-tmarquee::before, body.bb-site .bb-tmarquee::after { width: 128px; } } body.bb-site .bb-tmarquee-roll { display: flex; width: max-content; animation: bbMarquee 45s linear infinite; } body.bb-site .bb-tmarquee:hover .bb-tmarquee-roll { animation-play-state: paused; } body.bb-site .bb-tmarquee-track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 24px; padding-right: 24px; width: max-content; } @media (min-width: 640px) { body.bb-site .bb-tmarquee-track { gap: 32px; padding-right: 32px; } } body.bb-site .bb-tcard { width: 320px !important; flex-shrink: 0; padding: 28px; border-radius: 24px; background: rgb(15 23 42 / 0.9); border: 1px solid var(--bb-s800); box-shadow: var(--bb-shadow-xl); justify-content: space-between; transition: all .3s; } @media (min-width: 640px) { body.bb-site .bb-tcard { width: 420px !important; padding: 32px; } } body.bb-site .bb-tcard:hover { border-color: rgb(231 111 81 / 0.5); box-shadow: var(--bb-shadow-2xl); } body.bb-site .bb-stars { margin-bottom: 16px; --bb-mb: 16px; } body.bb-site .bb-stars .elementor-star-rating { font-size: 14px; color: #FBBF24; display: inline-flex; gap: 4px; line-height: 1; } body.bb-site .bb-stars .elementor-star-rating i { color: #FBBF24; } body.bb-site .bb-stars .elementor-star-rating i::before { color: #FBBF24; } body.bb-site .bb-stars .elementor-star-rating__wrapper { justify-content: flex-start; } body.bb-site .bb-tquote { font-size: 14px; line-height: 1.625; color: var(--bb-s300); font-style: italic; margin-bottom: 24px; --bb-mb: 24px; } @media (min-width: 640px) { body.bb-site .bb-tquote { font-size: 15px; } } body.bb-site .bb-tauthor { display: flex; flex-direction: row; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid var(--bb-s800); } body.bb-site .bb-tavatar { width: auto; flex-shrink: 0; } body.bb-site .bb-tavatar img { width: 44px; height: 44px; border-radius: 9999px; object-fit: cover; border: 1px solid var(--bb-s700); } body.bb-site .bb-tname { font-family: var(--bb-sans); font-weight: 700; font-size: 14px; line-height: 20px; color: #fff; } body.bb-site .bb-trole { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bb-s400); } /* ========================================================================== FAQ (Elementor Nested Accordion) ========================================================================== */ body.bb-site .bb-faq { padding: 64px 0; background: var(--bb-cream); border-top: 1px solid var(--bb-border); } @media (min-width: 640px) { body.bb-site .bb-faq { padding: 80px 0; } } body.bb-site .bb-faq::before { width: 320px; height: 320px; top: 33%; left: 0; background: rgb(245 158 11 / 0.05); filter: blur(140px); } body.bb-site .bb-faq::after { width: 384px; height: 384px; bottom: 40px; right: 0; background: rgb(231 111 81 / 0.05); filter: blur(160px); } body.bb-site .bb-faq .bb-center-head { max-width: 672px !important; } body.bb-site .bb-faq-title { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.025em; color: var(--bb-navy); margin-bottom: 12px; --bb-mb: 12px; } @media (min-width: 640px) { body.bb-site .bb-faq-title { font-size: 36px; line-height: 40px; } } @media (min-width: 768px) { body.bb-site .bb-faq-title { font-size: 48px; line-height: 1; } } body.bb-site .bb-faq-acc .e-n-accordion { display: flex; flex-direction: column; gap: 16px; counter-reset: bbfaq; } body.bb-site .bb-faq-acc .e-n-accordion-item { counter-increment: bbfaq; border-radius: 16px; border: 1px solid var(--bb-border); background: rgb(255 255 255 / 0.7); overflow: hidden; transition: background-color .3s, border-color .3s, box-shadow .3s; } body.bb-site .bb-faq-acc .e-n-accordion-item:hover { background: #fff; border-color: rgb(217 119 6 / 0.3); } body.bb-site .bb-faq-acc .e-n-accordion-item[open] { background: #fff; border-color: rgb(231 111 81 / 0.4); box-shadow: 0 10px 15px -3px rgb(67 20 7 / 0.05), 0 4px 6px -4px rgb(67 20 7 / 0.05); } body.bb-site .bb-faq-acc .e-n-accordion-item-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; margin: 0; border: 0 !important; background: transparent !important; cursor: pointer; list-style: none; } @media (min-width: 640px) { body.bb-site .bb-faq-acc .e-n-accordion-item-title { padding: 28px; } } body.bb-site .bb-faq-acc .e-n-accordion-item-title::-webkit-details-marker { display: none; } body.bb-site .bb-faq-acc .e-n-accordion-item-title-header { display: flex; align-items: center; gap: 16px; flex: 1; } body.bb-site .bb-faq-acc .e-n-accordion-item-title-header::before { content: counter(bbfaq, decimal-leading-zero); font-family: var(--bb-mono); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--bb-s400); flex-shrink: 0; } body.bb-site .bb-faq-acc .e-n-accordion-item-title-text { font-family: var(--bb-sans); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--bb-navy); } @media (min-width: 640px) { body.bb-site .bb-faq-acc .e-n-accordion-item-title-text { font-size: 18px; line-height: 28px; } } body.bb-site .bb-faq-acc .e-n-accordion-item-title-icon { display: none !important; } body.bb-site .bb-faq-acc .e-n-accordion-item-title::after { content: ""; width: 32px; height: 32px; border-radius: 9999px; flex-shrink: 0; transition: transform .3s, background-color .3s; background: var(--bb-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; } body.bb-site .bb-faq-acc .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: rotate(180deg); background: #FFEDD5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E76F51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; } body.bb-site .bb-faq-acc .e-n-accordion-item > .e-con { padding: 0 24px 24px; border: 0 !important; } @media (min-width: 640px) { body.bb-site .bb-faq-acc .e-n-accordion-item > .e-con { padding: 0 28px 28px; } } body.bb-site .bb-faq-content { border-top: 1px solid #F1F5F9 !important; margin-top: 4px; } body.bb-site .bb-faq-answer { padding-top: 16px; font-size: 14px; line-height: 1.625; color: var(--bb-s600); } @media (min-width: 640px) { body.bb-site .bb-faq-answer { font-size: 16px; } } body.bb-site .bb-faq-cat-wrap { margin-top: 16px; padding-top: 12px; line-height: 0; } body.bb-site .bb-faq-cat { display: inline-block; font-family: var(--bb-mono); font-size: 11px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--bb-coral); background: #FFF7ED; padding: 4px 10px; border-radius: 6px; border: 1px solid rgb(254 215 170 / 0.6); } /* ========================================================================== CONTACT (dark) ========================================================================== */ body.bb-site .bb-contact { padding: 64px 0; background: var(--bb-ink); color: #fff; border-top: 1px solid var(--bb-s800); } @media (min-width: 640px) { body.bb-site .bb-contact { padding: 80px 0; } } @media (min-width: 1024px) { body.bb-site .bb-contact { padding: 96px 0; } } body.bb-site .bb-contact::before { width: 600px; height: 600px; top: 25%; left: 25%; background: rgb(231 111 81 / 0.12); filter: blur(220px); } body.bb-site .bb-contact::after { width: 600px; height: 600px; bottom: 40px; right: 25%; background: rgb(217 119 6 / 0.1); filter: blur(220px); } body.bb-site .bb-contact-head { max-width: 1152px !important; margin-bottom: 32px; --bb-mb: 32px; } @media (min-width: 640px) { body.bb-site .bb-contact-head { margin-bottom: 40px; --bb-mb: 40px; } } body.bb-site .bb-contact-title { font-weight: 800; font-size: 24px; line-height: 1.25; letter-spacing: -0.025em; color: #fff; } @media (min-width: 640px) { body.bb-site .bb-contact-title { font-size: 36px; } } @media (min-width: 768px) { body.bb-site .bb-contact-title { font-size: 48px; } } @media (min-width: 1024px) { body.bb-site .bb-contact-title { font-size: 42px; white-space: nowrap; } } @media (min-width: 1280px) { body.bb-site .bb-contact-title { font-size: 52px; } } body.bb-site .bb-contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; } @media (min-width: 1024px) { body.bb-site .bb-contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } body.bb-site .bb-contact-info { grid-column: span 5; } body.bb-site .bb-form-card { grid-column: span 7; } } body.bb-site .bb-contact-info { justify-content: space-between; padding: 24px; border-radius: 24px; background: rgb(15 23 42 / 0.8); border: 1px solid rgb(30 41 59 / 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); height: 100%; } @media (min-width: 640px) { body.bb-site .bb-contact-info { padding: 32px; } } body.bb-site .bb-contact-logo { margin-bottom: 24px; --bb-mb: 24px; } body.bb-site .bb-contact-logo .bb-logo { height: 64px; filter: drop-shadow(0 4px 20px rgba(238, 83, 45, 0.18)); } body.bb-site .bb-contact-intro { font-size: 14px; line-height: 1.625; color: var(--bb-s300); } body.bb-site .bb-contact-list { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--bb-s800); } body.bb-site .bb-contact-row { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; } body.bb-site .bb-contact-ico { width: auto; flex-shrink: 0; } body.bb-site .bb-contact-ico .elementor-shortcode { width: 40px; height: 40px; border-radius: 12px; background: var(--bb-s800); border: 1px solid var(--bb-s700); display: flex; align-items: center; justify-content: center; font-size: 20px; } body.bb-site .bb-contact-ico--coral .elementor-shortcode { color: var(--bb-coral); } body.bb-site .bb-contact-ico--amber .elementor-shortcode { color: var(--bb-amber); } body.bb-site .bb-contact-ico--emerald .elementor-shortcode { color: #10B981; } body.bb-site .bb-label-mono { font-family: var(--bb-mono); font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--bb-s400); margin-bottom: 4px; --bb-mb: 4px; } body.bb-site .bb-contact-val { font-size: 14px; line-height: 1.625; color: var(--bb-s300); } body.bb-site .bb-contact-val--strong { font-weight: 500; } body.bb-site .bb-contact-val a { color: var(--bb-s300); transition: color .2s; } body.bb-site .bb-contact-val a:hover { color: var(--bb-coral); } body.bb-site .bb-channels { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--bb-s800); } body.bb-site .bb-channels .bb-label-mono { letter-spacing: 0.1em; margin-bottom: 16px; --bb-mb: 16px; } body.bb-site .bb-channel-btns { display: flex; flex-direction: row; gap: 12px; } body.bb-site .bb-channel { flex: 1 1 0%; } body.bb-site .bb-channel .elementor-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: rgb(30 41 59 / 0.9); border: 1px solid var(--bb-s700); color: #E2E8F0; font-family: var(--bb-body); font-size: 12px; line-height: 16px; font-weight: 700; transition: all .3s; } body.bb-site .bb-channel .elementor-button-text { display: inline-flex; align-items: center; gap: 10px; } body.bb-site .bb-channel .elementor-button-text::before { content: ""; width: 16px; height: 16px; background: var(--bb-brand); transition: background-color .3s; -webkit-mask: var(--bb-brand-mask) center/contain no-repeat; mask: var(--bb-brand-mask) center/contain no-repeat; } body.bb-site .bb-channel .elementor-button-text::after { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center/contain no-repeat; } body.bb-site .bb-channel .elementor-button:hover { background: var(--bb-brand); color: #fff; } body.bb-site .bb-channel .elementor-button:hover .elementor-button-text::before { background: #fff; } body.bb-site .bb-channel .elementor-button:hover .elementor-button-text::after { opacity: 1; } body.bb-site .bb-channel--li { --bb-brand: #0077B5; --bb-brand-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect width='4' height='12' x='2' y='9'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E"); } body.bb-site .bb-channel--fb { --bb-brand: #1877F2; --bb-brand-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); } body.bb-site .bb-form-card { position: relative; padding: 32px; border-radius: 24px; background: rgb(15 23 42 / 0.9); border: 1px solid var(--bb-s800); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); height: 100%; justify-content: space-between; } @media (min-width: 640px) { body.bb-site .bb-form-card { padding: 40px; } } body.bb-site .bb-form-title { font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: -0.025em; color: #fff; margin-bottom: 8px; --bb-mb: 8px; } body.bb-site .bb-form-sub { font-size: 12px; line-height: 16px; color: var(--bb-s400); margin-bottom: 24px; --bb-mb: 24px; } body.bb-site .bb-form-sub strong { color: #fff; font-weight: 500; } /* Contact Form 7 — styled to match the original inquiry form */ body.bb-site .bb-cf7 .elementor-shortcode { line-height: normal; } body.bb-site .bb-cf7 .wpcf7 form { display: flex; flex-direction: column; gap: 24px; } body.bb-site .bb-cf7 .bb-f-row { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { body.bb-site .bb-cf7 .bb-f-row { grid-template-columns: 1fr 1fr; } } body.bb-site .bb-cf7 label { display: block; font-family: var(--bb-mono); font-size: 12px; line-height: 16px; text-transform: uppercase; font-weight: 700; color: var(--bb-s400); } body.bb-site .bb-cf7 label > .bb-f-label { display: block; margin-bottom: 8px; --bb-mb: 8px; } body.bb-site .bb-cf7 .wpcf7-form-control-wrap { display: block; } body.bb-site .bb-cf7 input[type="text"], body.bb-site .bb-cf7 input[type="email"], body.bb-site .bb-cf7 select, body.bb-site .bb-cf7 textarea { width: 100%; padding: 14px 16px; border-radius: 12px; background: rgb(30 41 59 / 0.8); border: 1px solid var(--bb-s700); color: #fff; font-family: var(--bb-body); font-size: 14px; line-height: 20px; text-transform: none; font-weight: 400; outline: none; transition: border-color .2s; box-shadow: none; margin: 0; } body.bb-site .bb-cf7 select { background-color: var(--bb-s800); cursor: pointer; appearance: auto; } body.bb-site .bb-cf7 select option { background: var(--bb-s900); color: #fff; } body.bb-site .bb-cf7 textarea { padding-block: 12px; resize: none; height: auto; min-height: 0; } body.bb-site .bb-cf7 input::placeholder, body.bb-site .bb-cf7 textarea::placeholder { color: var(--bb-s500); opacity: 1; } body.bb-site .bb-cf7 input:focus, body.bb-site .bb-cf7 select:focus, body.bb-site .bb-cf7 textarea:focus { border-color: var(--bb-coral); } body.bb-site .bb-cf7 .bb-f-submit { position: relative; } body.bb-site .bb-cf7 .wpcf7-submit { width: 100%; padding: 16px; border: 0; border-radius: 12px; background: var(--bb-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E") no-repeat calc(50% + 88px) 50% / 16px; color: #fff; font-family: var(--bb-body); font-weight: 700; font-size: 14px; line-height: 20px; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: 0 10px 15px -3px rgb(231 111 81 / 0.2), 0 4px 6px -4px rgb(231 111 81 / 0.2); transition: background-color .3s, transform .15s; padding-right: 40px; } body.bb-site .bb-cf7 .wpcf7-submit:hover { background-color: var(--bb-coral-dark); } body.bb-site .bb-cf7 .wpcf7-submit:active { transform: scale(0.98); } body.bb-site .bb-cf7 form.submitting .wpcf7-submit { opacity: .5; animation: bbPulse 1.5s ease-in-out infinite; background-image: none; padding-right: 16px; } body.bb-site .bb-cf7 .wpcf7-spinner { position: absolute; right: 16px; top: 50%; margin: -12px 0 0; background-color: rgb(255 255 255 / 0.6); } body.bb-site .bb-cf7 .wpcf7-not-valid { border-color: #F43F5E !important; } body.bb-site .bb-cf7 .wpcf7-not-valid-tip { margin-top: 6px; font-family: var(--bb-body); font-size: 12px; text-transform: none; font-weight: 500; color: #FB7185; } body.bb-site .bb-cf7 .wpcf7-response-output { margin: 0 !important; padding: 12px 16px !important; border-radius: 12px; border: 1px solid var(--bb-s700) !important; color: var(--bb-s300); font-size: 13px; line-height: 1.5; } body.bb-site .bb-cf7 form.invalid .wpcf7-response-output, body.bb-site .bb-cf7 form.failed .wpcf7-response-output, body.bb-site .bb-cf7 form.aborted .wpcf7-response-output, body.bb-site .bb-cf7 form.spam .wpcf7-response-output { border-color: rgb(244 63 94 / 0.5) !important; color: #FDA4AF; } body.bb-site .bb-cf7 form.sent .wpcf7-response-output { display: none; } @keyframes bbPulse { 50% { opacity: .35; } } /* Success state (shown after a successful submission) */ body.bb-site .bb-form-success { display: none; padding: 64px 0; text-align: center; align-items: center; justify-content: center; height: 100%; } body.bb-site .bb-form-card.is-sent .bb-form-wrap { display: none; } body.bb-site .bb-form-card.is-sent .bb-form-success { display: flex; animation: bbPop .35s var(--bb-ease) both; } @keyframes bbPop { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } } body.bb-site .bb-success-ico { width: auto; margin-bottom: 24px; --bb-mb: 24px; } body.bb-site .bb-success-ico .elementor-shortcode { width: 64px; height: 64px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgb(16 185 129 / 0.2); border: 1px solid rgb(16 185 129 / 0.3); color: #34D399; font-size: 32px; } body.bb-site .bb-success-title { font-weight: 800; font-size: 24px; line-height: 32px; color: #fff; margin-bottom: 12px; --bb-mb: 12px; } @media (min-width: 640px) { body.bb-site .bb-success-title { font-size: 30px; line-height: 36px; } } body.bb-site .bb-success-text { font-size: 14px; line-height: 1.625; color: var(--bb-s300); max-width: 448px !important; margin-bottom: 24px; --bb-mb: 24px; } body.bb-site .bb-success-bar-wrap { width: 224px; margin-bottom: 16px; --bb-mb: 16px; line-height: 0; } body.bb-site .bb-success-bar { width: 224px; height: 6px; border-radius: 9999px; overflow: hidden; background: rgb(30 41 59 / 0.8); border: 1px solid rgb(51 65 85 / 0.6); } body.bb-site .bb-success-bar span { display: block; height: 100%; width: 100%; border-radius: 9999px; background: linear-gradient(to right, var(--bb-coral), #34D399); } body.bb-site .bb-form-card.is-sent .bb-success-bar span { animation: bbShrink 4.5s linear forwards; } @keyframes bbShrink { from { width: 100%; } to { width: 0%; } } body.bb-site .bb-success-count { font-family: var(--bb-mono); font-size: 11px; line-height: 16px; color: var(--bb-s400); margin-bottom: 24px; --bb-mb: 24px; } body.bb-site .bb-success-count p { display: inline-flex; align-items: center; gap: 6px; } body.bb-site .bb-pulse-dot { width: 6px; height: 6px; border-radius: 9999px; background: #34D399; display: inline-block; animation: bbPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } body.bb-site .bb-btn--ghost-dark .elementor-button { background: var(--bb-s800); border: 1px solid var(--bb-s700); font-size: 12px; line-height: 16px; padding: 10px 24px; box-shadow: none; } body.bb-site .bb-btn--ghost-dark .elementor-button:hover { background: var(--bb-s700); border-color: #475569; color: #fff; } /* ========================================================================== FOOTER ========================================================================== */ body.bb-site .bb-footer { position: relative; background: var(--bb-cream); color: var(--bb-navy); padding: 32px 0 24px; border-top: 1px solid var(--bb-border); overflow: hidden; } @media (min-width: 640px) { body.bb-site .bb-footer { padding-top: 40px; } } body.bb-site .bb-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--bb-border); } @media (min-width: 768px) { body.bb-site .bb-footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { body.bb-site .bb-footer-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; } body.bb-site .bb-footer-brand { grid-column: 1 / span 4; } body.bb-site .bb-footer-legal { grid-column: 5 / span 3; } body.bb-site .bb-footer-services { grid-column: 8 / span 5; } } body.bb-site .bb-footer-logo { margin-bottom: 16px; --bb-mb: 16px; } body.bb-site .bb-footer-logo .bb-logo { height: 56px; max-width: 100%; } @media (min-width: 640px) { body.bb-site .bb-footer-logo .bb-logo { height: 64px; } } body.bb-site .bb-footer-about { font-size: 14px; line-height: 1.625; color: var(--bb-s600); max-width: 384px !important; } body.bb-site .bb-footer .bb-eyebrow { margin-bottom: 14px; --bb-mb: 14px; } body.bb-site .bb-flinks .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } body.bb-site .bb-flinks .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; } body.bb-site .bb-flinks .elementor-icon-list-item::after { display: none !important; } body.bb-site .bb-flinks .elementor-icon-list-icon { display: none; } body.bb-site .bb-flinks .elementor-icon-list-text { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--bb-s600); padding: 0 !important; transition: color .2s; } body.bb-site .bb-flinks a:hover .elementor-icon-list-text { color: var(--bb-coral); } body.bb-site .bb-flinks--amber a:hover .elementor-icon-list-text { color: var(--bb-amber); } body.bb-site .bb-footer-svc-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 10px; } body.bb-site .bb-footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 12px; line-height: 16px; color: var(--bb-s500); } @media (min-width: 640px) { body.bb-site .bb-footer-bottom { flex-direction: row; } } body.bb-site .bb-copy { width: auto; font-size: 12px; line-height: 16px; color: var(--bb-s500); } body.bb-site .bb-copy span { color: var(--bb-s600); } body.bb-site .bb-footer-actions { display: flex; flex-direction: row; align-items: center; gap: 20px; width: auto; } body.bb-site .bb-fsocial { width: auto; } body.bb-site .bb-fsocial p { display: flex; align-items: center; gap: 16px; } body.bb-site .bb-fs { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--bb-s600); transition: color .2s; } body.bb-site .bb-fs--fb:hover { color: #1877F2; } body.bb-site .bb-fs--li:hover { color: #0A66C2; } body.bb-site .bb-fs-badge { width: 16px; height: 16px; border-radius: 2px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 9px; line-height: 1; } body.bb-site .bb-fs--fb .bb-fs-badge { background: #1877F2; } body.bb-site .bb-fs--li .bb-fs-badge { background: #0A66C2; } body.bb-site .bb-fs .bb-ico { width: 12px; height: 12px; color: var(--bb-s400); } body.bb-site .bb-top-btn { width: auto; position: relative; padding-left: 20px; } body.bb-site .bb-top-btn::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--bb-s300); } body.bb-site .bb-top-btn .elementor-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; background: #fff; color: var(--bb-navy); border: 1px solid var(--bb-border); box-shadow: var(--bb-shadow-2xs); font-family: var(--bb-body); font-size: 12px; line-height: 16px; font-weight: 600; transition: background-color .2s; } body.bb-site .bb-top-btn .elementor-button:hover { background: #F1F5F9; color: var(--bb-navy); } body.bb-site .bb-top-btn .elementor-button-text::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E") center/contain no-repeat; } /* ========================================================================== LEGAL PAGES ========================================================================== */ body.bb-site .bb-legal { padding: 112px 0 96px; background: var(--bb-cream); } @media (min-width: 640px) { body.bb-site .bb-legal { padding: 144px 0 128px; } } body.bb-site .bb-legal-inner { max-width: 896px !important; width: 100%; margin: 0 auto; padding: 0 24px; } @media (min-width: 640px) { body.bb-site .bb-legal-inner { padding: 0 40px; } } body.bb-site .bb-back { margin-bottom: 32px; --bb-mb: 32px; width: auto; align-self: flex-start; } body.bb-site .bb-back .elementor-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; border: 0; box-shadow: none; font-family: var(--bb-mono); font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--bb-s500); transition: color .2s; } body.bb-site .bb-back .elementor-button:hover { color: var(--bb-coral); background: transparent; } body.bb-site .bb-back .elementor-button-text::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; background: currentColor; transition: transform .2s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center/contain no-repeat; } body.bb-site .bb-back .elementor-button:hover .elementor-button-text::before { transform: translateX(-4px); } body.bb-site .bb-legal-title { font-weight: 700; font-size: 30px; line-height: 36px; letter-spacing: -0.025em; color: var(--bb-navy); margin-bottom: 32px; --bb-mb: 32px; } @media (min-width: 640px) { body.bb-site .bb-legal-title { font-size: 36px; line-height: 40px; } } @media (min-width: 1024px) { body.bb-site .bb-legal-title { font-size: 48px; line-height: 1; } } body.bb-site .bb-legal-title--imprint { margin-bottom: 40px; --bb-mb: 40px; } body.bb-site .bb-legal-body { font-size: 16px; line-height: 1.625; color: var(--bb-s800); } @media (min-width: 640px) { body.bb-site .bb-legal-body { font-size: 18px; } } body.bb-site .bb-legal-body > * + * { margin-top: 12px; } body.bb-site .bb-legal-body > p + p { margin-top: 32px; } body.bb-site .bb-legal-body h2 { margin-top: 32px !important; font-weight: 700; font-size: 20px; line-height: 28px; color: var(--bb-navy); } @media (min-width: 640px) { body.bb-site .bb-legal-body h2 { font-size: 24px; line-height: 32px; } } body.bb-site .bb-legal-body h3 { margin-top: 16px; font-weight: 600; font-size: 18px; line-height: 28px; color: var(--bb-navy); } @media (min-width: 640px) { body.bb-site .bb-legal-body h3 { font-size: 20px; } } body.bb-site .bb-legal-body h2 ~ p, body.bb-site .bb-legal-body h2 ~ ul, body.bb-site .bb-legal-body h3 ~ p { margin-top: 12px !important; } body.bb-site .bb-legal-body ul { list-style: disc; padding-left: 24px; margin: 12px 0 0; } body.bb-site .bb-legal-body li + li { margin-top: 8px; } body.bb-site .bb-legal-body strong { font-weight: 600; color: var(--bb-navy); } body.bb-site .bb-legal-body a { color: var(--bb-s800); transition: color .2s; } body.bb-site .bb-legal-body a:hover { color: var(--bb-coral); } body.bb-site .bb-legal-body .bb-contact-lines { margin-top: 12px; } body.bb-site .bb-legal-body .bb-contact-lines p + p { margin-top: 4px; } body.bb-site .bb-legal-body--imprint > p + p { margin-top: 24px !important; } /* ========================================================================== Floating UI: custom cursor + scroll-to-top ========================================================================== */ .bb-cursor { display: none; } @media (pointer: fine) { .bb-cursor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .2s; } .bb-cursor.is-visible { opacity: 1; } .bb-cursor-ring, .bb-cursor-dot { position: fixed; top: 0; left: 0; border-radius: 9999px; pointer-events: none; } .bb-cursor-ring { width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 1px solid rgb(231 111 81 / 0.5); transition: transform .15s ease-out, background-color .15s, border-color .15s; } .bb-cursor.is-pointer .bb-cursor-ring { background: rgb(231 111 81 / 0.12); border-color: var(--bb-amber); } .bb-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--bb-coral); } } .bb-scrolltop { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 48px; height: 48px; padding: 0; border-radius: 9999px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bb-navy); background: rgb(255 255 255 / 0.9); border: 1px solid var(--bb-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.08); opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.6); transition: opacity .25s ease-out, transform .25s ease-out, visibility .25s, box-shadow .3s, border-color .3s; } @media (min-width: 640px) { .bb-scrolltop { right: 32px; bottom: 32px; width: 52px; height: 52px; } } .bb-scrolltop.is-visible { opacity: 1; visibility: visible; transform: none; } .bb-scrolltop:hover { box-shadow: 0 20px 25px -5px rgb(231 111 81 / 0.15), 0 8px 10px -6px rgb(231 111 81 / 0.15); border-color: rgb(231 111 81 / 0.4); } .bb-scrolltop:active { transform: scale(0.95); } .bb-scrolltop:focus-visible { outline: 2px solid var(--bb-coral); outline-offset: 2px; } .bb-scrolltop-ring { position: absolute; inset: 0; width: 100%; height: 100%; padding: 2px; transform: rotate(-90deg); pointer-events: none; } .bb-scrolltop-progress { transition: stroke-dashoffset .1s ease-out; } .bb-scrolltop-icon { position: relative; z-index: 10; width: 32px; height: 32px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: var(--bb-s700); font-size: 20px; transition: color .2s, background-color .2s; } .bb-scrolltop-icon .bb-ico { width: 20px; height: 20px; transition: transform .3s; } .bb-scrolltop:hover .bb-scrolltop-icon { background: rgb(231 111 81 / 0.1); color: var(--bb-coral); } .bb-scrolltop:hover .bb-scrolltop-icon .bb-ico { transform: translateY(-2px); } .bb-scrolltop-tip { position: absolute; bottom: 100%; right: 50%; transform: translateX(50%); margin-bottom: 10px; --bb-mb: 10px; padding: 4px 10px; border-radius: 8px; background: var(--bb-navy); color: #fff; font-family: var(--bb-body); font-size: 11px; font-weight: 500; letter-spacing: 0.025em; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: var(--bb-shadow-md); } .bb-scrolltop-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--bb-navy); } .bb-scrolltop:hover .bb-scrolltop-tip { opacity: 1; } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { body.bb-site .bb-line, body.bb-site .bb-reveal { animation-duration: .3s; animation-name: bbFade; } body.bb-site .bb-marquee-roll, body.bb-site .bb-tmarquee-roll { animation-duration: 120s; } } @keyframes bbFade { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================== Elementor editor: show hidden/overlay content so it can be edited ========================================================================== */ body.elementor-editor-active.bb-site .bb-modals { display: block; padding: 24px; background: #E2E8F0; } body.elementor-editor-active.bb-site .bb-modals::before { content: "Service detail pop-ups (hidden on the live site, opened by clicking a service row)"; display: block; font: 600 13px/1.4 var(--bb-sans); color: var(--bb-s600); margin-bottom: 16px; --bb-mb: 16px; } body.elementor-editor-active.bb-site .bb-modal { position: relative; inset: auto; visibility: visible; opacity: 1; padding: 0 0 24px; overflow: visible; } body.elementor-editor-active.bb-site .bb-modal-panel { transform: none; max-height: none; } body.elementor-editor-active.bb-site .bb-modal-body { overflow: visible; } body.elementor-editor-active.bb-site .bb-form-success { display: flex; margin-top: 32px; border-top: 1px dashed var(--bb-s700); } body.elementor-editor-active.bb-site .bb-form-success::before { content: "Success message (shown after the form is sent)"; font: 600 12px/1.4 var(--bb-sans); color: var(--bb-s400); margin-bottom: 16px; --bb-mb: 16px; } body.elementor-editor-active.bb-site .bb-header { position: relative; } body.elementor-editor-active.bb-site .bb-mobile-menu { position: relative; top: auto; opacity: 1; visibility: visible; transform: none; } body.elementor-editor-active.bb-site .bb-line, body.elementor-editor-active.bb-site .bb-reveal { animation: none; } /* Centered section headers: widgets span the full column like the original block elements */ body.bb-site .bb-center-head > .elementor-widget, body.bb-site .bb-approach-head > .elementor-widget { width: 100%; } /* Warm theme scrollbar (as in the original) */ body.bb-site::-webkit-scrollbar, html:has(body.bb-site)::-webkit-scrollbar { width: 8px; } html:has(body.bb-site)::-webkit-scrollbar-track { background: #FAF7F2; } html:has(body.bb-site)::-webkit-scrollbar-thumb { background: #E2DACF; border-radius: 4px; } html:has(body.bb-site)::-webkit-scrollbar-thumb:hover { background: #E76F51; } /* Elementor makes every container wrap on mobile; the original layout never wraps these rows/columns */ body.bb-site .e-con { flex-wrap: nowrap; } body.bb-site .e-con.bb-hero-actions { flex-wrap: wrap; } body.bb-site .bb-modal-body > .elementor-element, body.bb-site .bb-modal-panel > .elementor-element { flex-shrink: 0; } body.bb-site .bb-modal-panel > .bb-modal-body { flex-shrink: 1; min-height: 0; } /* Back link occupies the same 19px line box as the original inline button */ body.bb-site .bb-back { line-height: 0; padding-top: 3px; }