/* ========================================================================== BizBookNow — directory theme (Oct 2026) Visual language adapted from syncro-temp.webflow.io: white canvas, deep teal + lime accents, Inter / Inter Display, soft grey cards, 12px buttons, 24px cards. Legacy hook classes (homz-project-*, pinvoy-directory-faq__*, featured-category-*, single-listing-*, category-single-sidebar__*, renvia-*, visaland-*, sitemap-premium__*) are kept so main.js and the WordPress templates keep working. -------------------------------------------------------------------------- 00 Fonts & tokens 07 Category cards 14 Testimonials 21 Single listing 01 Base 08 Feature bento + mocks 15 FAQ 22 Contact 02 Layout helpers 09 Tabs / steps 16 Blog cards 23 Services 03 Buttons & tags 10 Listing cards 17 Footer CTA+footer 24 Sitemap / 404 04 Header & menu 11 Use cases 18 Page hero 25 Blog single 05 Search panel 12 Stats panel 19 Toolbars 26 Motion 06 Home hero + band 13 (reserved) 20 Category pages 27 Responsive ========================================================================== */ /* 00 ---------------------------------------------------------------- fonts */ @font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Display"; src: url("../fonts/InterDisplay-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } :root { --ink: #0a0d14; --text: #525866; --muted: #7a8090; --teal: #205865; --teal-600: #1a4b56; --teal-700: #143c45; --night: #0d252a; --teal-soft: #e6eff1; --lime: #c3f96d; --lime-600: #b0ec4f; --lime-soft: #effed6; --amber: #ffc94a; --surface: #f6f8fa; --surface-2: #eef1f4; --line: #e2e4e9; --line-2: #cdd0d5; --white: #ffffff; --ok-bg: #cef5ca; --ok-ink: #114e0b; --no-bg: #f8e4e4; --no-ink: #7a1d1d; --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif; --r-xs: 8px; --r-sm: 10px; --r: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 32px; --sh-xs: 0 2px 3px rgba(10, 13, 20, 0.06); --sh-sm: 0 6px 16px -6px rgba(13, 37, 42, 0.14); --sh-md: 0 18px 40px -18px rgba(13, 37, 42, 0.22); --sh-lg: 0 30px 70px -28px rgba(13, 37, 42, 0.34); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --container: 1280px; --gutter: clamp(20px, 4vw, 40px); --header-h: 80px; --section: clamp(72px, 9vw, 120px); } /* 01 ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--f-body); font-size: 17px; line-height: 1.6; letter-spacing: -0.011em; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } figure, blockquote, dl, dd { margin: 0; } address { font-style: normal; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-family: var(--f-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.08; letter-spacing: -0.03em; } h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); letter-spacing: -0.028em; } h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; } h4 { font-size: 1.125rem; } h5, h6 { font-size: 1rem; } ::selection { background: var(--lime); color: var(--ink); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; } .bb-ico { flex: none; } .bb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .bb-skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); font-weight: 500; transition: top .2s; } .bb-skip:focus { top: 16px; } [hidden] { display: none !important; } /* 02 ---------------------------------------------------------------- layout */ .x-container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section-padding, .bb-section { padding-block: var(--section); } .bb-section + .bb-section { padding-top: 0; } .bb-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .bb-head h2 { margin: 0; } .bb-head__lead { max-width: 560px; font-size: 1.0625rem; margin: 0; } .bb-head--split { max-width: none; text-align: left; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .bb-head--split > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 680px; } .bb-head__actions { display: flex; align-items: center; gap: 24px; } .section-title h6, .featured-categories__label { margin: 0; font: inherit; } .bb-br { display: block; } .bb-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-600); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 3px var(--lime-soft); } .bb-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: bbPulse 2s infinite; margin-right: 6px; vertical-align: middle; flex: none; } @keyframes bbPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } /* 03 ---------------------------------------------------------------- buttons, tags, links */ .theme-btn { --bg: var(--teal); --fg: #fff; --bd: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: var(--r); border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease-out), background-color .3s, box-shadow .3s, border-color .3s, color .3s; } .theme-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 60%); opacity: 0; transition: opacity .3s; } .theme-btn:hover { --bg: var(--teal-600); transform: translateY(-2px); box-shadow: var(--sh-sm); } .theme-btn:hover::before { opacity: 1; } .theme-btn:active { transform: translateY(0) scale(.98); } .theme-btn > span:not([class]) { display: none; } /* legacy arrow spans */ .bb-btn__label { display: inline-block; } .bb-btn__arrow { display: inline-grid; place-items: center; width: 18px; height: 18px; overflow: hidden; position: relative; } .bb-btn__arrow .bb-arrow { transition: transform .45s var(--ease-out); } .theme-btn:hover .bb-btn__arrow .bb-arrow { animation: bbArrow .55s var(--ease-out); } @keyframes bbArrow { 0% { transform: translateX(0); } 45% { transform: translateX(120%); } 46% { transform: translateX(-120%); } 100% { transform: translateX(0); } } .theme-btn.bg-white { --bg: #fff; --fg: var(--ink); --bd: var(--line-2); box-shadow: var(--sh-xs); } .theme-btn.bg-white:hover { --bg: var(--surface); --bd: var(--line-2); } .theme-btn.bg-white::before { background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(32, 88, 101, .08), transparent 60%); } .theme-btn.bb-btn--lime { --bg: var(--lime); --fg: var(--ink); } .theme-btn.bb-btn--lime:hover { --bg: var(--lime-600); } .theme-btn.bb-btn--block { width: 100%; } .theme-btn .bb-ico { width: 18px; height: 18px; } .bb-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 100px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; } .bb-tag .bb-ico { width: 15px; height: 15px; } .bb-tag--ink { background: var(--night); color: var(--lime); } .bb-tag--hero { padding: 6px 8px 6px 14px; text-transform: none; letter-spacing: -0.005em; font-size: 14px; transition: transform .3s var(--ease-out), box-shadow .3s; } .bb-tag--hero:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(140, 200, 40, .8); } .bb-tag__arrow { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--lime); margin-left: 4px; transition: transform .3s var(--ease-out); } .bb-tag--hero:hover .bb-tag__arrow { transform: translateX(3px); } .bb-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 500; font-size: 17px; transition: gap .3s var(--ease-out), color .2s; } .bb-link .bb-ico { width: 18px; height: 18px; transition: transform .3s var(--ease-out); } .bb-link:hover { color: var(--teal-700); gap: 12px; } .bb-icon-chip { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--lime); color: var(--ink); flex: none; } .bb-icon-chip .bb-ico { width: 22px; height: 22px; } .bb-checks { display: grid; gap: 12px; margin-top: 4px; } .bb-checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-weight: 500; font-size: 16px; } .bb-checks .bb-ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--teal); color: #fff; stroke-width: 2.6; margin-top: 1px; } /* 04 ---------------------------------------------------------------- header & mobile menu */ .bb-header { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background-color .3s, transform .45s var(--ease-out); } .bb-header.is-scrolled { border-color: var(--line); box-shadow: 0 10px 30px -24px rgba(13, 37, 42, .5); } .bb-header.is-hidden { transform: translateY(-100%); } .bb-header .header-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: var(--header-h); max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .bb-header .logo { justify-self: start; display: inline-flex; } .bb-header .logo img { height: 36px; width: auto; } .main-menu ul { display: flex; align-items: center; gap: 4px; } .main-menu a { position: relative; display: inline-flex; padding: 10px 14px; border-radius: 10px; color: var(--ink); font-size: 16px; font-weight: 500; transition: color .2s, background-color .2s; } .main-menu a:hover { background: var(--surface); } .main-menu a.active { color: var(--teal); } .main-menu a.active::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); transform: translateX(-50%); } .header-tools { justify-self: end; display: flex; align-items: center; gap: 10px; } .bb-header__search { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); border: 1px solid var(--line); transition: background-color .2s, border-color .2s; } .bb-header__search:hover { background: var(--surface); border-color: var(--line-2); } .header-quote { min-height: 44px; padding: 10px 20px; } .menu-icon { display: none; position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); } .menu-icon span, .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .2s; } .menu-icon::before { top: 15px; } .menu-icon span { top: 21px; } .menu-icon::after { top: 27px; } .mobile-panel { position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: 120; width: min(420px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: 24px; padding: 20px 24px 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-lg); transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform .55s var(--ease-out), visibility 0s .55s; } .mobile-panel__top { display: flex; align-items: center; justify-content: space-between; } .mobile-panel__brand img { height: 34px; width: auto; } .close-menu { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); color: var(--ink); } .mobile-panel nav { display: grid; gap: 4px; margin-top: 8px; } .mobile-panel nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--f-display); font-size: 26px; font-weight: 500; letter-spacing: -.02em; opacity: 0; transform: translateX(24px); transition: opacity .4s, transform .5s var(--ease-out), color .2s; } .mobile-panel nav a .bb-ico { color: var(--muted); transition: transform .3s var(--ease-out), color .2s; } .mobile-panel nav a:hover, .mobile-panel nav a.active { color: var(--teal); } .mobile-panel nav a:hover .bb-ico { transform: translate(3px, -3px); color: var(--teal); } .mobile-panel__foot { margin-top: auto; display: grid; gap: 10px; } .bb-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(10, 13, 20, .32); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; } body.menu-open { overflow: hidden; } body.menu-open .mobile-panel { transform: none; visibility: visible; transition: transform .55s var(--ease-out); } body.menu-open .bb-scrim { opacity: 1; visibility: visible; transition: opacity .4s; } body.menu-open .mobile-panel nav a { opacity: 1; transform: none; } body.menu-open .mobile-panel nav a:nth-child(2) { transition-delay: .05s; } body.menu-open .mobile-panel nav a:nth-child(3) { transition-delay: .1s; } body.menu-open .mobile-panel nav a:nth-child(4) { transition-delay: .15s; } body.menu-open .mobile-panel nav a:nth-child(5) { transition-delay: .2s; } body.menu-open .mobile-panel nav a:nth-child(6) { transition-delay: .25s; } .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ink); color: var(--lime); box-shadow: var(--sh-md); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out), background-color .2s; } .back-to-top.show { opacity: 1; transform: none; pointer-events: auto; } .back-to-top:hover { background: var(--teal); } /* 05 ---------------------------------------------------------------- search panel */ .search-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: stretch; padding: 8px; gap: 0; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10, 13, 20, .04), 0 20px 50px -24px rgba(13, 37, 42, .3); text-align: left; transition: box-shadow .3s, border-color .3s; } .search-panel:focus-within { border-color: var(--line-2); box-shadow: 0 0 0 4px rgba(32, 88, 101, .08), 0 24px 60px -24px rgba(13, 37, 42, .35); } .search-panel .field { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 8px 16px 8px 50px; border-radius: 14px; transition: background-color .2s; min-width: 0; } .search-panel .field + .field::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); } .search-panel .field:hover { background: var(--surface); } .search-panel .field label { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } .search-panel .field__ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--teal); } .search-panel input, .search-panel select { width: 100%; border: 0; outline: 0; background: transparent; padding: 2px 0 0; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.5; min-width: 0; text-overflow: ellipsis; } .search-panel input::placeholder { color: #9aa0ab; font-weight: 400; } .search-panel input::-webkit-search-cancel-button { display: none; } .search-panel select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23525866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center no-repeat; } .search-panel .xbuild-hero-search__button { min-height: 60px; padding-inline: 28px; border-radius: 14px; } .bb-popular { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 14px; } .bb-popular > span { color: var(--muted); margin-right: 2px; } .bb-popular a { padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 500; transition: border-color .2s, background-color .2s, transform .3s var(--ease-out); } .bb-popular a:hover { border-color: var(--teal); background: var(--teal-soft); transform: translateY(-1px); } /* 06 ---------------------------------------------------------------- home hero */ .bb-hero { position: relative; padding-top: clamp(48px, 7vw, 88px); padding-bottom: 0; overflow: hidden; isolation: isolate; } .bb-hero__grid, .bb-pagehero__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; background-position: center -1px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 0%, rgba(0, 0, 0, .25) 55%, transparent 80%); mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 0%, rgba(0, 0, 0, .25) 55%, transparent 80%); opacity: .7; } .bb-hero__content { max-width: 940px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .bb-hero h1 { margin: 24px 0 20px; max-width: 900px; } .bb-hero__lead { max-width: 620px; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); margin: 0 auto; } .bb-hero__search { width: 100%; max-width: 860px; margin-top: 36px; } .bb-hero__stage { position: relative; height: clamp(420px, 44vw, 560px); margin-top: clamp(48px, 6vw, 72px); } .bb-hero__panel { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 62%; border-radius: 28px 28px 0 0; background: var(--teal); overflow: hidden; transform-origin: 50% 100%; } .bb-hero__panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 120%, rgba(195, 249, 109, .22), transparent 70%); } .bb-hero__swirl { position: absolute; width: 46%; height: auto; left: -4%; bottom: -10%; fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 46; stroke-linecap: round; } .bb-hero__swirl--b { left: auto; right: -6%; bottom: -24%; width: 40%; stroke: rgba(255, 255, 255, .06); } .bb-hero__person { position: absolute; left: 50%; bottom: 0; width: clamp(300px, 34vw, 470px); height: auto; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 30px 40px rgba(13, 37, 42, .28)); } .bb-bubble { position: absolute; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--ink); box-shadow: var(--sh-sm); } .bb-bubble--lime { background: var(--lime); left: 34%; top: 8%; } .bb-bubble--amber { background: var(--amber); right: 33%; top: 2%; } .bb-float { position: absolute; z-index: 4; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(10, 13, 20, .05), 0 24px 50px -22px rgba(13, 37, 42, .4); border: 1px solid rgba(226, 228, 233, .7); font-size: 13px; color: var(--text); } .bb-float__label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); } .bb-float__label .bb-ico { width: 14px; height: 14px; color: var(--teal); } .bb-float strong { display: block; font-family: var(--f-display); font-size: 26px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; margin-top: 2px; } .bb-float strong small { font-size: 14px; color: var(--muted); } .bb-float__meta { display: block; font-size: 12px; margin-top: 2px; } .bb-float--rating { left: calc(var(--gutter) + 3%); top: 26%; width: 210px; } .bb-spark { width: 100%; height: 36px; margin: 6px 0 4px; fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: bbDraw 1.8s .9s var(--ease-out) forwards; } @keyframes bbDraw { to { stroke-dashoffset: 0; } } .bb-float--biz { left: calc(var(--gutter) + 8%); bottom: 12%; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; } .bb-float--biz b { display: block; color: var(--ink); font-size: 14px; line-height: 1.3; } .bb-float--biz small { display: flex; align-items: center; font-size: 12px; color: var(--ok-ink); } .bb-pill-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: 12px; margin-left: 6px; } .bb-float--brand { right: calc(var(--gutter) + 6%); top: 20%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 600; color: var(--ink); font-size: 14px; } .bb-float--chart { right: calc(var(--gutter) + 3%); bottom: 10%; width: 250px; } .bb-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 12px; padding-top: 18px; } .bb-bars i { position: relative; flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: var(--surface-2); transform-origin: bottom; animation: bbGrow 1s var(--ease-out) both; } .bb-bars i:nth-child(2) { animation-delay: .9s; } .bb-bars i:nth-child(1) { animation-delay: .85s; } .bb-bars i:nth-child(3) { animation-delay: .95s; } .bb-bars i:nth-child(4) { animation-delay: 1s; } .bb-bars i:nth-child(5) { animation-delay: 1.05s; } .bb-bars i:nth-child(6) { animation-delay: 1.1s; } .bb-bars i:nth-child(7) { animation-delay: 1.15s; } .bb-bars i:nth-child(8) { animation-delay: 1.2s; } .bb-bars i.is-hi { background: var(--teal); } .bb-bars em { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); padding: 2px 6px; border-radius: 6px; background: var(--ink); color: var(--lime); font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; } @keyframes bbGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bb-float__axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; } .bb-mock__logo { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--teal); color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: .02em; } .bb-mock__logo.is-b { background: var(--lime); color: var(--ink); } /* home: category band */ .bb-band { padding-top: clamp(24px, 3vw, 40px); } .bb-band__inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px; padding: 26px 32px; border-radius: var(--r-xl); background: var(--night); color: #fff; overflow: hidden; } .bb-band__label { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .7); max-width: 180px; line-height: 1.4; } .bb-band__label b { color: var(--lime); font-weight: 600; } .bb-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .bb-marquee ul { display: flex; width: max-content; gap: 44px; animation: bbMarquee var(--dur, 40s) linear infinite; } .bb-marquee:hover ul { animation-play-state: paused; } .bb-marquee li { display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: #fff; opacity: .92; } .bb-marquee__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .08); color: var(--lime); } @keyframes bbMarquee { to { transform: translateX(calc(-50% - 22px)); } } /* 07 ---------------------------------------------------------------- category cards (home carousel + index grid) */ .featured-categories__top { margin-bottom: clamp(32px, 4vw, 48px); } .featured-categories__title h2 { margin: 0; } .featured-categories__nav { display: flex; gap: 10px; } .featured-categories__nav button, .bb-arrows button { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); box-shadow: var(--sh-xs); transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease-out), opacity .25s; } .featured-categories__nav button:last-child, .bb-arrows button:last-child { background: var(--teal); border-color: var(--teal); color: #fff; } .featured-categories__nav button:hover:not(:disabled), .bb-arrows button:hover:not(:disabled) { transform: translateY(-2px); } .featured-categories__nav button:disabled, .bb-arrows button:disabled { opacity: .4; cursor: not-allowed; } .featured-categories__viewport { overflow: hidden; margin: -12px; padding: 12px; } .featured-categories__track { display: flex; gap: 24px; transition: transform .7s var(--ease-out); will-change: transform; } .featured-categories__track > .featured-category-card { flex: 0 0 calc((100% - 72px) / 4); } .featured-category-card { position: relative; display: flex; flex-direction: column; padding: 10px; border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s, box-shadow .4s var(--ease-out), transform .45s var(--ease-out); } .featured-category-card:hover { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-md); transform: translateY(-4px); } .featured-category-card__image { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--surface-2); } .featured-category-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .featured-category-card:hover .featured-category-card__image img { transform: scale(1.06); } .bb-cat__icon { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .94); color: var(--teal); box-shadow: var(--sh-xs); backdrop-filter: blur(6px); } .bb-cat__icon .bb-ico { width: 20px; height: 20px; } .featured-category-card__content { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 16px 8px 8px; } .featured-category-card__content h3 { grid-column: 1; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; } .featured-category-card__content h3 a::after { content: ""; position: absolute; inset: -400px 0 0; } /* whole card clickable */ .featured-category-card__content p { grid-column: 1; margin: 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; } .bb-cat__go { grid-column: 2; grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease-out); } .featured-category-card:hover .bb-cat__go { background: var(--teal); border-color: var(--teal); color: #fff; transform: rotate(45deg); } .featured-category-card:hover .bb-cat__go .bb-ico { transform: rotate(-45deg); } .bb-cat__go .bb-ico { transition: transform .35s var(--ease-out); } /* 08 ---------------------------------------------------------------- feature bento + UI mocks */ .bb-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .bb-feature { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px; border-radius: var(--r-xl); background: var(--surface); overflow: hidden; isolation: isolate; } .bb-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(195, 249, 109, .28), transparent 60%); transition: opacity .4s; } .bb-feature:hover::after { opacity: 1; } .bb-feature h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-top: 6px; } .bb-feature p { margin: 0; max-width: 460px; } .bb-feature .bb-link { margin-top: 6px; } .bb-feature__visual { position: relative; width: 100%; height: 280px; margin-bottom: 18px; display: grid; place-items: center; border-radius: var(--r-lg); overflow: hidden; } .bb-feature__visual::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 1px 1px, rgba(10, 13, 20, .12) 1px, transparent 0) 0 0 / 16px 16px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 20%, transparent 75%); } .bb-feature--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; padding: 40px; } .bb-feature--wide .bb-feature__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .bb-feature--wide .bb-feature__visual { margin: 0; height: 320px; } .bb-mock { position: relative; z-index: 1; width: min(100% - 40px, 380px); padding: 18px; border-radius: var(--r-md); background: #fff; box-shadow: 0 1px 2px rgba(10, 13, 20, .05), 0 20px 44px -22px rgba(13, 37, 42, .34); font-size: 13px; color: var(--text); text-align: left; transition: transform .6s var(--ease-out); } .bb-feature:hover .bb-mock, .bb-tabs__panel:hover .bb-mock { transform: translateY(-6px); } .bb-mock b { color: var(--ink); font-weight: 600; } .bb-mock small { color: var(--muted); font-size: 12px; } .bb-mock__brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 14px; } .bb-mock__title { margin: 14px 0 10px; font-family: var(--f-display); font-size: 20px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; } .bb-mock__input { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500; } .bb-mock__input .bb-ico { color: var(--teal); } .bb-mock__input kbd { margin-left: auto; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font: 600 12px var(--f-body); color: var(--muted); } .bb-type::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--teal); animation: bbCaret 1s steps(1) infinite; } @keyframes bbCaret { 50% { opacity: 0; } } .bb-mock__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .bb-mock__chips span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 100px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: 12px; } .bb-mock__chips span.is-on { background: var(--teal); border-color: var(--teal); color: #fff; } .bb-mock__chips .bb-ico { width: 12px; height: 12px; stroke-width: 3; } .bb-mock__rows { margin-top: 12px; display: grid; gap: 6px; } .bb-mock__rows li { display: grid; grid-template-columns: 1fr auto; padding: 9px 10px; border-radius: 10px; background: var(--surface); } .bb-mock__rows li:first-child { background: var(--lime-soft); } .bb-mock__rows small { grid-column: 1; } .bb-mock__rows em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 600; color: var(--ink); } .bb-mock__rows em::before { content: "\2605 "; color: #f5a524; } .bb-mock__count { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); } .bb-mock__count b { font-size: 16px; } .bb-mock__biz { display: flex; align-items: center; gap: 12px; } .bb-mock__biz small { display: flex; align-items: center; } .bb-verified { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 100px; background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 600; } .bb-verified .bb-ico { width: 12px; height: 12px; } .bb-mock__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 14px; } .bb-mock__facts li { padding: 10px; border-radius: 10px; background: var(--surface); } .bb-mock__facts small, .bb-mock__facts b { display: block; } .bb-mock__facts b { font-size: 15px; margin-top: 2px; } .bb-mock__line { height: 8px; border-radius: 8px; background: var(--surface-2); } .bb-mock__line.is-short { width: 60%; margin-top: 8px; } .bb-mock__btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 600; font-size: 13px; } .bb-mock__btn.is-primary { background: var(--teal); border-color: var(--teal); color: #fff; } .bb-mock__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .bb-mock__toast { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-ink); } .bb-mock__toast b, .bb-mock__toast small { display: block; color: var(--ok-ink); } .bb-mock--connect .bb-mock__biz { margin-bottom: 14px; } .bb-mock__score { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; } .bb-mock__score strong { grid-row: 1 / span 2; font-family: var(--f-display); font-size: 48px; font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -.03em; } .bb-mock__score span { color: #f5a524; letter-spacing: 2px; font-size: 15px; } .bb-mock__bars { display: grid; gap: 7px; margin-top: 16px; } .bb-mock__bars li { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 12px; } .bb-mock__bars i { position: relative; height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; } .bb-mock__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--teal); transform-origin: left; transform: scaleX(0); transition: transform 1.2s .2s var(--ease-out); } .in-view .bb-mock__bars i::after, .bb-tabs__panel.is-active .bb-mock__bars i::after { transform: scaleX(1); } .bb-mock blockquote { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1.5; } .bb-mock blockquote cite { display: block; margin-top: 6px; font-style: normal; color: var(--muted); font-size: 12px; } .bb-mock__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bb-mock__cmp > div { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border-radius: 12px; background: var(--surface); text-align: center; } .bb-mock__cmp > div:first-child { background: var(--lime-soft); box-shadow: inset 0 0 0 1px rgba(32, 88, 101, .15); } .bb-mock__cmp em { font-style: normal; font-weight: 600; color: var(--ink); } .bb-mock__cmp i { display: grid; place-items: center; width: 100%; height: 26px; border-top: 1px dashed var(--line-2); font-style: normal; } .bb-ok .bb-ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--teal); color: #fff; stroke-width: 3; } .bb-no { color: var(--muted); font-weight: 600; } .bb-mock__legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; font-size: 11px; text-align: center; color: var(--muted); } .bb-mock--dash { width: min(100% - 40px, 460px); } .bb-mock__dash-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .bb-mock__dash-head span { font-size: 12px; padding: 4px 8px; border-radius: 6px; background: var(--surface); } .bb-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; } .bb-mock__kpis > div { padding: 10px 12px; border-radius: 12px; background: var(--surface); } .bb-mock__kpis small, .bb-mock__kpis b, .bb-mock__kpis em { display: block; } .bb-mock__kpis b { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -.02em; } .bb-mock__kpis em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ok-ink); } .bb-mock__area { width: 100%; height: 90px; } .bb-mock__area .a { fill: rgba(32, 88, 101, .1); } .bb-mock__area .l { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2s .3s var(--ease-out); } .in-view .bb-mock__area .l { stroke-dashoffset: 0; } /* 09 ---------------------------------------------------------------- tabs / steps */ .bb-tabs__list { display: flex; justify-content: center; gap: clamp(8px, 3vw, 40px); margin: 0 auto 40px; border-bottom: 1px solid var(--line); max-width: 860px; overflow-x: auto; scrollbar-width: none; } .bb-tabs__list::-webkit-scrollbar { display: none; } .bb-tabs__btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 8px 18px; color: var(--muted); font-family: var(--f-display); font-size: clamp(1.0625rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; white-space: nowrap; transition: color .25s; } .bb-tabs__btn:hover { color: var(--ink); } .bb-tabs__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 14px; font-family: var(--f-body); font-weight: 600; transition: background-color .25s, color .25s, border-color .25s; } .bb-tabs__btn.is-active { color: var(--ink); } .bb-tabs__btn.is-active .bb-tabs__num { background: var(--teal); border-color: var(--teal); color: #fff; } .bb-tabs__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--line); overflow: hidden; opacity: 0; } .bb-tabs__bar::after { content: ""; position: absolute; inset: 0; background: var(--teal); transform: scaleX(var(--p, 0)); transform-origin: left; } .bb-tabs__btn.is-active .bb-tabs__bar { opacity: 1; } .bb-tabs__panel { display: none; } .bb-tabs__panel.is-active { display: grid; animation: bbPanelIn .7s var(--ease-out); } @keyframes bbPanelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .bb-steps .bb-tabs__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 5vw, 80px); } .bb-steps__visual { display: grid; place-items: center; min-height: 440px; padding: 40px; border-radius: var(--r-2xl); background: var(--surface); background-image: radial-gradient(circle at 1px 1px, rgba(10, 13, 20, .08) 1px, transparent 0); background-size: 18px 18px; } .bb-steps__visual .bb-mock { width: min(100%, 400px); padding: 24px; } .bb-steps__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .bb-steps__copy h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.025em; } .bb-steps__copy p { margin: 0; font-size: 1.0625rem; } /* 10 ---------------------------------------------------------------- listing cards (home slider + result grids) */ .homz-project-slider { max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .homz-project-viewport { overflow: hidden; margin: -16px; padding: 16px; } .homz-project-track { display: flex; gap: 24px; transition: transform .75s var(--ease-out); touch-action: pan-y; cursor: grab; } .homz-project-track.is-dragging { transition: none; cursor: grabbing; } .homz-project-track > .homz-project-slide { flex: 0 0 calc((100% - 48px) / 3); } .homz-project-slide { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: box-shadow .45s var(--ease-out), transform .45s var(--ease-out), border-color .3s; } .homz-project-slide:hover { border-color: var(--line-2); box-shadow: 0 1px 2px rgba(10, 13, 20, .04), 0 18px 40px -22px rgba(13, 37, 42, .3); transform: translateY(-3px); } /* logo plate + rating, Syncro "integration logo" row */ .homz-project-image { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .homz-project-image img { width: 132px; height: 60px; object-fit: contain; padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: #fff; transition: transform .45s var(--ease-out), border-color .3s; -webkit-user-drag: none; user-select: none; } .homz-project-image img[src*="-720.webp"] { object-fit: cover; padding: 0; } /* photo instead of a logo */ .homz-project-slide:hover .homz-project-image img { transform: translateY(-2px); border-color: var(--line-2); } .homz-project-review-badge { position: static; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; background: #fff6dc; color: #7a4b00; font-size: 14px; font-weight: 500; line-height: 1.3; } .homz-project-review-badge > span { color: #f5a524; } .homz-project-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 0; } .homz-project-category { order: 1; display: inline-flex; padding: 4px 10px; border-radius: 6px; background: var(--teal-soft); color: var(--teal); font-size: 13px; font-weight: 500; line-height: 1.4; } .homz-project-panel h3 { order: 0; font-size: 20px; line-height: 1.33; letter-spacing: -.015em; } .homz-project-panel h3 a { transition: color .2s; } .homz-project-panel h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card clickable */ .homz-project-panel h3 a:hover { color: var(--teal); } .homz-project-description { order: 2; margin: 2px 0 0; font-size: 16px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .homz-project-meta { order: 3; display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--muted); } .homz-project-location-icon { width: 16px; height: 16px; flex: none; color: var(--teal); margin-top: 2px; } .homz-project-cta { order: 4; position: relative; z-index: 1; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 16px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; box-shadow: var(--sh-xs); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.5; transition: box-shadow .3s, transform .3s var(--ease-out), background-color .3s, border-color .3s, color .3s; } .homz-project-panel > .homz-project-meta + .homz-project-cta, .homz-project-description + .homz-project-cta { margin-top: auto; } .homz-project-cta span { display: inline-block; transition: transform .35s var(--ease-out); } .homz-project-cta:hover, .homz-project-slide:hover .homz-project-cta { background: var(--teal); border-color: var(--teal); color: #fff; } .homz-project-cta:hover span, .homz-project-slide:hover .homz-project-cta span { transform: translateX(3px); } .homz-project-cta:active { transform: scale(.97); } .homz-project-dots { display: flex; justify-content: center; gap: 8px; margin-top: 40px; } .homz-project-dots button { width: 8px; height: 8px; border-radius: 8px; background: var(--line-2); transition: width .4s var(--ease-out), background-color .3s; } .homz-project-dots button.is-active { width: 32px; background: var(--teal); } .search-results-grid, .category-single-listing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* 11 ---------------------------------------------------------------- use cases */ .bb-seg { display: flex; width: max-content; max-width: 100%; margin: 0 auto 32px; padding: 4px; gap: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .bb-seg__btn { padding: 10px 18px; border-radius: 10px; color: var(--text); font-weight: 500; font-size: 15px; white-space: nowrap; transition: background-color .25s, color .25s, box-shadow .25s; } .bb-seg__btn:hover { color: var(--ink); } .bb-seg__btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--sh-xs), 0 0 0 1px var(--line); } .bb-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 64px); max-width: 1060px; margin: 0 auto; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-2xl); background: var(--surface); } .bb-case__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .bb-case__copy h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.025em; } .bb-case__copy p { margin: 0; } .bb-case__media { aspect-ratio: 4 / 3.2; border-radius: var(--r-xl); overflow: hidden; } .bb-case__media img { width: 100%; height: 100%; object-fit: cover; } /* 12 ---------------------------------------------------------------- stats panel */ .bb-stats__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 32px; padding: clamp(36px, 5vw, 64px); padding-bottom: 0; border-radius: var(--r-2xl); background: var(--teal); color: rgba(255, 255, 255, .78); overflow: hidden; isolation: isolate; } .bb-stats__swirl { position: absolute; left: 22%; top: -10%; width: 60%; z-index: -1; fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 60; stroke-linecap: round; } .bb-stats__copy { align-self: center; padding-bottom: clamp(36px, 5vw, 64px); } .bb-stats__copy h2 { color: #fff; max-width: 560px; font-size: clamp(2rem, 3.6vw, 3.25rem); } .counter-list { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px clamp(24px, 4vw, 56px); margin: 36px 0; } .counter-card h3 { color: #fff; font-size: clamp(2.25rem, 4vw, 3.25rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .counter-card > span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .72); } .bb-stats__media { position: relative; align-self: end; height: 100%; min-height: 380px; display: flex; align-items: flex-end; justify-content: center; } .bb-stats__disc { position: absolute; bottom: -12%; left: 50%; width: min(440px, 92%); aspect-ratio: 1; border-radius: 50%; background: var(--lime); transform: translateX(-50%); } .bb-stats__media img { position: relative; width: min(400px, 88%); height: auto; } .bb-float--lead { left: -6%; bottom: 22%; width: 220px; } .bb-chip-up { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; margin-right: 4px; } /* 14 ---------------------------------------------------------------- testimonials */ .bb-arrows { display: flex; gap: 10px; } .bb-testi__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; } .bb-testi__track::-webkit-scrollbar { display: none; } .bb-testi__card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s; } .bb-testi__card:hover { background: var(--surface-2); } .bb-testi__stars { color: #f5a524; letter-spacing: 3px; font-size: 16px; } .bb-testi__card > p { margin: 0; color: var(--ink); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; letter-spacing: -.015em; } .bb-testi__person { display: flex; align-items: center; gap: 14px; margin-top: auto; } .bb-testi__person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .bb-testi__person b { display: block; color: var(--ink); font-weight: 600; } .bb-testi__person small { font-size: 14px; color: var(--muted); } .bb-testi__metric { padding-top: 22px; border-top: 1px solid var(--line-2); } .bb-testi__metric strong { display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 500; color: var(--teal); letter-spacing: -.03em; line-height: 1.1; } .bb-testi__metric strong .bb-ico { width: 26px; height: 26px; } .bb-testi__metric small { font-size: 14px; color: var(--text); } /* 15 ---------------------------------------------------------------- FAQ */ .pinvoy-directory-faq__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .pinvoy-directory-faq__left { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .pinvoy-directory-faq__eyebrow { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .pinvoy-directory-faq__intro { margin: 0; max-width: 440px; } .bb-faq__help { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; width: 100%; max-width: 460px; margin-top: 12px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); } .bb-faq__help .bb-icon-chip { grid-row: span 2; } .bb-faq__help b { display: block; color: var(--ink); font-weight: 600; } .bb-faq__help small { color: var(--muted); font-size: 14px; } .bb-faq__help .theme-btn { grid-column: 1 / -1; margin-top: 12px; justify-self: start; } .pinvoy-directory-faq__accordion { display: grid; gap: 12px; } .pinvoy-directory-faq__item { border-radius: var(--r-lg); background: var(--surface); border: 1px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; } .pinvoy-directory-faq__item.is-open { background: #fff; border-color: var(--line); box-shadow: var(--sh-sm); } .pinvoy-directory-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 24px; text-align: left; color: var(--ink); font-family: var(--f-display); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 500; letter-spacing: -.015em; } .pinvoy-directory-faq__icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--line); transition: background-color .3s, border-color .3s, transform .45s var(--ease-out); } .pinvoy-directory-faq__icon::before, .pinvoy-directory-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .45s var(--ease-out), background-color .3s; } .pinvoy-directory-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .pinvoy-directory-faq__item.is-open .pinvoy-directory-faq__icon { background: var(--teal); border-color: var(--teal); transform: rotate(180deg); } .pinvoy-directory-faq__item.is-open .pinvoy-directory-faq__icon::before, .pinvoy-directory-faq__item.is-open .pinvoy-directory-faq__icon::after { background: #fff; } .pinvoy-directory-faq__item.is-open .pinvoy-directory-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); } .pinvoy-directory-faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); } .pinvoy-directory-faq__answer > p { min-height: 0; overflow: hidden; margin: 0; padding: 0 24px; opacity: 0; transition: opacity .4s, padding .5s var(--ease-out); } .pinvoy-directory-faq__item.is-open .pinvoy-directory-faq__answer { grid-template-rows: 1fr; } .pinvoy-directory-faq__item.is-open .pinvoy-directory-faq__answer > p { padding-bottom: 24px; opacity: 1; } .pinvoy-directory-faq__image, .pinvoy-directory-faq__right > h3 { display: none; } /* 16 ---------------------------------------------------------------- blog cards */ .renvia-news__top { margin-bottom: clamp(32px, 4vw, 48px); } .renvia-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .renvia-news-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 10px 10px 22px; border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s, box-shadow .4s var(--ease-out), transform .45s var(--ease-out); } .renvia-news-card:hover { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-md); transform: translateY(-4px); } .renvia-news-card__image { display: block; aspect-ratio: 16 / 11; border-radius: 18px; overflow: hidden; } .renvia-news-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .renvia-news-card:hover .renvia-news-card__image img { transform: scale(1.05); } .renvia-news-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 12px; flex: 1; } .renvia-news-card__meta span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px; background: #fff; border: 1px solid var(--line); color: var(--teal); font-size: 13px; font-weight: 600; } .renvia-news-card__meta svg { width: 14px; height: 14px; } .renvia-news-card__body h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.02em; } .renvia-news-card__body h3 a::after { content: ""; position: absolute; inset: 0; } .renvia-news-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 500; font-size: 15px; transition: gap .3s var(--ease-out); } .renvia-news-card:hover .renvia-news-card__link { gap: 12px; } .renvia-news-card__link svg { width: 16px; height: 16px; } /* 17 ---------------------------------------------------------------- footer CTA + footer */ .bb-footer { background: #fff; } .bb-cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; margin-bottom: var(--section); padding: clamp(48px, 7vw, 88px) clamp(24px, 4vw, 48px); border-radius: var(--r-2xl); background: var(--lime); text-align: center; overflow: hidden; isolation: isolate; } .bb-cta__blob { position: absolute; z-index: -1; width: clamp(160px, 22vw, 300px); fill: var(--lime-600); opacity: .55; } .bb-cta__blob--a { left: -40px; bottom: -60px; transform: rotate(-20deg); } .bb-cta__blob--b { right: -50px; top: -70px; transform: rotate(40deg); } .footer-solutek-cta__message { display: flex; flex-direction: column; align-items: center; gap: 18px; } .footer-solutek-cta__message h2 { font-size: clamp(2rem, 4vw, 3.5rem); } .footer-solutek-cta__message p { margin: 0; max-width: 520px; color: #2b3a19; font-size: 1.0625rem; } .footer-solutek-cta__action { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .bb-cta .theme-btn.bg-white { --bd: transparent; } .bb-footer__body { background: var(--teal); color: rgba(255, 255, 255, .72); padding: clamp(56px, 7vw, 88px) 0 32px; } .bb-footer__news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: 24px 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .14); } .bb-footer__news h3 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.025em; } .bb-footer__news p { margin: 10px 0 0; max-width: 420px; } .bb-footer__form { position: relative; display: flex; gap: 10px; flex-wrap: wrap; } .bb-footer__form input { flex: 1; min-width: 200px; height: 54px; padding: 0 18px; border-radius: var(--r); border: 1px solid transparent; background: #fff; color: var(--ink); font-size: 16px; font-weight: 500; outline: 0; transition: box-shadow .2s; } .bb-footer__form input:focus { box-shadow: 0 0 0 4px rgba(195, 249, 109, .45); } .bb-footer__form button { height: 54px; padding: 0 24px; border-radius: var(--r); background: var(--lime); color: var(--ink); font-weight: 600; transition: background-color .2s, transform .3s var(--ease-out); } .bb-footer__form button:hover { background: var(--lime-600); transform: translateY(-2px); } .bb-footer__form-status { flex-basis: 100%; margin: 0; min-height: 1.2em; font-size: 14px; color: var(--lime); } .bb-footer__brand { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 0 8px; } .bb-footer__brand img { height: 36px; width: auto; } .footer-social-links__list { display: flex; gap: 8px; } .footer-social-links__list a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .25s, color .25s, transform .3s var(--ease-out); } .footer-social-links__list a:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); } .footer-widgets-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 40px 0 48px; } .single-footer-widget h5 { margin-bottom: 18px; color: #fff; font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .single-footer-widget .list-area { display: grid; gap: 12px; } .single-footer-widget .list-area a, .single-footer-widget .list-area span { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .78); font-size: 15px; transition: color .2s, transform .3s var(--ease-out); } .single-footer-widget .list-area a:hover { color: var(--lime); transform: translateX(3px); } .bb-footer__contact .bb-ico { color: var(--lime); } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; } .footer-bottom p { margin: 0; } .bb-footer__legal { display: flex; gap: 20px; } .bb-footer__legal a:hover { color: var(--lime); } /* 18 ---------------------------------------------------------------- inner page hero */ .bb-pagehero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 80px); text-align: center; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--surface) 0%, #fff 100%); } .bb-pagehero::before, .bb-pagehero::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: .45; pointer-events: none; } .bb-pagehero::before { left: -180px; top: -260px; background: rgba(32, 88, 101, .35); } .bb-pagehero::after { right: -160px; top: -200px; background: rgba(195, 249, 109, .7); } .bb-pagehero__inner { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; } .breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 100px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-xs); font-size: 14px; color: var(--muted); } .breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; transition: color .2s; } .breadcrumb a:first-child { padding: 3px 10px 3px 6px; border-radius: 100px; background: var(--lime); color: var(--ink); } .breadcrumb a:hover { color: var(--teal); } .breadcrumb a:first-child:hover { color: var(--ink); background: var(--lime-600); } .breadcrumb [aria-current] { color: var(--ink); font-weight: 600; } .bb-sep { color: var(--line-2); } .bb-pagehero h1 { margin: 24px 0 16px; font-size: clamp(2.25rem, 4.6vw, 3.75rem); } .bb-pagehero__lead { max-width: 640px; margin: 0 auto; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); } .bb-pagehero__search { width: 100%; max-width: 860px; margin-top: 32px; } .bb-pagehero__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 32px; padding: 6px; border-radius: 16px; background: #fff; border: 1px solid var(--line); } .bb-pagehero__stats li { display: flex; align-items: center; gap: 10px; padding: 8px 20px; font-size: 14px; } .bb-pagehero__stats li + li { border-left: 1px solid var(--line); } .bb-pagehero__stats b { display: inline-flex; color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; } .bb-pagehero__stats b .bb-ico { color: var(--teal); } .bb-pagehero--article h1 { font-size: clamp(2rem, 4vw, 3.25rem); } .bb-article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; } .bb-article-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 100px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--ink); font-weight: 500; } .bb-article-meta .bb-ico { color: var(--teal); } /* 19 ---------------------------------------------------------------- toolbars, filters */ .bb-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 28px; padding: 10px 10px 10px 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); } .bb-toolbar__count { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 15px; } .bb-toolbar__count b { color: var(--ink); font-weight: 600; } .bb-toolbar__tools { display: flex; gap: 10px; } .bb-query { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; background: var(--lime); color: var(--ink); font-weight: 600; font-size: 14px; } .bb-filter, .bb-select { position: relative; display: flex; align-items: center; } .bb-filter .bb-ico, .bb-select .bb-ico { position: absolute; left: 14px; color: var(--teal); pointer-events: none; } .bb-filter input, .bb-select select { height: 46px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; padding: 0 16px 0 42px; color: var(--ink); font-size: 15px; font-weight: 500; outline: 0; transition: border-color .2s, box-shadow .2s; } .bb-filter input { width: min(320px, 70vw); } .bb-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23525866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center no-repeat; } .bb-filter input:focus, .bb-select select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(32, 88, 101, .1); } .bb-empty { padding: 32px; border-radius: var(--r-lg); background: var(--surface); text-align: center; color: var(--ink); } .bb-empty a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* 20 ---------------------------------------------------------------- category pages */ .bb-catindex { padding-top: clamp(24px, 3vw, 40px); } .featured-categories__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .category-single-listing-directory { padding-top: clamp(40px, 5vw, 64px); } .category-single-listing-layout > *, .single-listing-tabs-layout > *, .listing-reference-hero-grid > * { min-width: 0; } .category-single-listing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; } .category-single-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-single-sidebar { position: sticky; top: calc(var(--header-h) + 24px); padding: 20px; border-radius: var(--r-xl); background: var(--surface); } .category-single-sidebar__header { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .category-single-sidebar__header-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--lime); color: var(--ink); } .category-single-sidebar__header-icon svg { width: 20px; height: 20px; } .category-single-sidebar__header h3 { font-size: 19px; } .category-single-sidebar__list { display: grid; gap: 2px; max-height: min(62vh, 640px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .category-single-sidebar__link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 500; transition: background-color .2s, color .2s; } .category-single-sidebar__link:hover { background: #fff; color: var(--teal); } .category-single-sidebar__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--teal); border: 1px solid var(--line); } .category-single-sidebar__icon svg { width: 18px; height: 18px; } .category-single-sidebar__arrow { width: 16px; height: 16px; color: var(--muted); transition: transform .3s var(--ease-out), color .2s; } .category-single-sidebar__link:hover .category-single-sidebar__arrow { transform: translateX(3px); color: var(--teal); } .category-single-sidebar__link.is-active { background: var(--teal); color: #fff; } .search-results-section { padding-top: clamp(40px, 5vw, 64px); } /* 21 ---------------------------------------------------------------- single listing */ .listing-detail-hero { padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); background: linear-gradient(180deg, var(--surface) 0%, #fff 100%); } .listing-reference-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 64px); align-items: start; } .listing-reference-left { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .bb-crumb { justify-content: flex-start; } .listing-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; } .listing-detail-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; } .listing-detail-badge .bb-ico { width: 14px; height: 14px; color: var(--teal); } .listing-detail-badge.is-verified { background: var(--lime); border-color: var(--lime); } .listing-detail-badge.is-verified .bb-ico { color: var(--ink); } .listing-detail-badge.is-open { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok-ink); } .listing-detail-badge.is-open.is-closed { background: var(--no-bg); border-color: var(--no-bg); color: var(--no-ink); } .listing-detail-badge.is-open.is-closed .bb-live { background: #dc2626; animation: none; } .listing-detail-title-row { display: flex; align-items: center; gap: 20px; } .listing-detail-logo-card { order: -1; flex: none; display: grid; place-items: center; width: 92px; height: 92px; padding: 8px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); overflow: hidden; } .listing-detail-logo-card img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; } .listing-detail-title-row h1 { display: inline; font-size: clamp(2.25rem, 4.4vw, 3.5rem); } .listing-detail-badge.is-trusted { display: inline-grid; vertical-align: middle; padding: 0; width: 34px; height: 34px; border: 0; background: none; margin-left: 4px; } .listing-detail-badge.is-trusted img { width: 30px; height: 30px; } .listing-reference-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 15px; } .rating-star { color: #f5a524; letter-spacing: 2px; font-size: 18px; } .listing-reference-rating strong { color: var(--ink); font-weight: 600; } .listing-reference-rating > span:last-child { padding-left: 10px; border-left: 1px solid var(--line-2); } .listing-reference-contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; } .listing-reference-contact-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .3s, transform .3s var(--ease-out); } a.listing-reference-contact-item:hover { border-color: var(--teal); box-shadow: var(--sh-sm); transform: translateY(-2px); } .listing-reference-contact-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--teal-soft); } .listing-reference-contact-icon img { width: 20px; height: 20px; } .listing-reference-contact-item > span:last-child { min-width: 0; } .listing-reference-contact-item small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; } .listing-reference-contact-item strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .listing-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; } .single-listing-copy-status { margin: -8px 0 0; min-height: 1.2em; font-size: 14px; color: var(--teal); font-weight: 500; } .bb-lhero__card { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; padding: 10px 10px 14px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); } .bb-lhero__media { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; } .bb-lhero__media img { width: 100%; height: 100%; object-fit: cover; } .bb-lhero__badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 600; } .bb-lhero__facts { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 6px; } .bb-lhero__facts div { padding: 4px 10px; text-align: center; } .bb-lhero__facts div + div { border-left: 1px solid var(--line); } .bb-lhero__facts dt { font-size: 12px; color: var(--muted); } .bb-lhero__facts dd { font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; } .bb-lhero__facts dd small { font-size: 13px; color: var(--muted); } .bb-lhero__card .theme-btn { margin: 0 4px; width: calc(100% - 8px); } .single-listing-tabs-section { padding: clamp(24px, 3vw, 40px) 0 var(--section); } .single-listing-tabs-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; } .single-listing-tabs { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 4px; padding: 8px; border-radius: var(--r-xl); background: var(--surface); } .single-listing-tab-button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; color: var(--text); font-weight: 500; font-size: 15px; text-align: left; transition: background-color .2s, color .2s; } .single-listing-tab-button:hover { background: #fff; color: var(--ink); } .single-listing-tab-button.active { background: var(--teal); color: #fff; box-shadow: var(--sh-sm); } .single-listing-tab-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; color: var(--teal); flex: none; transition: background-color .2s, color .2s; } .single-listing-tab-button.active .single-listing-tab-icon { background: rgba(255, 255, 255, .14); color: var(--lime); } .single-listing-tab-icon svg { width: 18px; height: 18px; } .single-listing-pane { display: grid; gap: 20px; } .bb-notabs { grid-template-columns: minmax(0, 1fr); } .single-listing-pane:not(.active) { display: none; } .single-listing-overview-copy { display: grid; gap: 20px; } .listing-detail-panel { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); } .listing-detail-panel > h2, .listing-review-heading h2 { margin-bottom: 20px; font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -.025em; } .listing-detail-panel > h2::first-letter { text-transform: uppercase; } .listing-overview-subtitle { margin-bottom: 12px; font-size: 18px; color: var(--teal); } .business-overview-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--teal); font-weight: 600; } .business-overview-link::after { content: "\2192"; transition: transform .3s var(--ease-out); } .business-overview-link:hover::after { transform: translateX(4px); } .listing-detail-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .listing-detail-info-grid > div { padding: 16px; border-radius: var(--r-md); background: var(--surface); } .listing-detail-info-grid > div > span:first-child, .listing-detail-info-grid small { display: block; font-size: 13px; color: var(--muted); } .listing-detail-info-grid strong { display: block; margin-top: 4px; color: var(--ink); font-weight: 600; font-size: 17px; } .single-listing-reference-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .single-listing-reference-info-item { display: flex; align-items: center; gap: 14px; } .single-listing-reference-copy span { display: block; font-size: 13px; color: var(--muted); } .single-listing-detail-card__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-style: normal; } .single-listing-detail-card__icon img { width: 24px; height: 24px; } .single-listing-detail-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .single-listing-detail-card, .single-listing-highlight-grid > span { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); background: var(--surface); } .single-listing-detail-card strong, .single-listing-highlight-grid strong { color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.35; } .listing-trust-premium-signal { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; background: var(--night) !important; } .listing-trust-premium-signal span { color: #fff !important; font-weight: 600; } .listing-trust-premium-signal img { height: 46px; width: auto; } .listing-lightbox-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 170px); gap: 12px; } .listing-lightbox-item { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; } .listing-lightbox-item.is-large { grid-row: span 2; } .listing-lightbox-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); } .listing-lightbox-item::after { content: ""; position: absolute; inset: 0; background: rgba(13, 37, 42, 0); transition: background-color .3s; } .listing-lightbox-item:hover img { transform: scale(1.06); } .listing-lightbox-item:hover::after { background: rgba(13, 37, 42, .15); } .listing-lightbox-grid.is-web-gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: 180px; } .listing-video-frame { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--night); } .listing-video-frame iframe { width: 100%; height: 100%; border: 0; } .listing-map-panel iframe { width: 100%; height: 340px; border: 0; border-radius: var(--r-md); background: var(--surface); } .listing-map-panel address { margin: 16px 0; color: var(--ink); font-weight: 500; } .listing-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .listing-review-heading h2 { margin: 0; } .listing-review-write-btn { min-height: 44px; } .listing-review-summary { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; border-radius: var(--r-lg); background: var(--surface); } .listing-review-score { text-align: center; } .listing-review-score strong { display: block; font-family: var(--f-display); font-size: 64px; font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -.04em; } .listing-review-score span { color: #f5a524; letter-spacing: 2px; } .listing-review-score p { margin: 6px 0 0; font-size: 13px; } .listing-review-bars { display: grid; gap: 8px; } .listing-review-bar-row { display: grid; grid-template-columns: 56px 1fr 40px; align-items: center; gap: 12px; font-size: 13px; } .listing-review-bar-row span { color: var(--ink); font-weight: 500; } .listing-review-bar-row em { font-style: normal; text-align: right; color: var(--muted); } .listing-review-track { height: 8px; border-radius: 8px; background: #fff; overflow: hidden; } .listing-review-track i { display: block; height: 100%; border-radius: inherit; background: var(--teal); } .listing-review-track .bar-82 { width: 82%; } .listing-review-track .bar-12 { width: 12%; } .listing-review-track .bar-4 { width: 4%; } .listing-review-track .bar-1 { width: 1.5%; } .listing-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .listing-review-grid article { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--r-md); border: 1px solid var(--line); } .listing-review-grid cite { font-style: normal; color: var(--ink); font-weight: 600; } .listing-review-grid span { color: #f5a524; letter-spacing: 2px; font-size: 13px; } .listing-review-grid p { margin: 0; font-size: 15px; } .listing-review-grid time { margin-top: auto; font-size: 13px; color: var(--muted); } .single-listing-reference-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .single-listing-reference-contact-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; border-radius: var(--r-md); background: var(--surface); transition: background-color .2s, box-shadow .3s; } a.single-listing-reference-contact-card:hover { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-sm); } .single-listing-reference-contact-icon, .single-listing-reference-company-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--lime); color: var(--ink); flex: none; } .single-listing-reference-contact-icon svg, .single-listing-reference-company-icon svg { width: 20px; height: 20px; } .single-listing-reference-contact-card small, .single-listing-reference-company-grid small { display: block; font-size: 12px; color: var(--muted); } .single-listing-reference-contact-card strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } .single-listing-reference-social-wrap { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); } .single-listing-reference-social-wrap h3 { font-size: 17px; } .single-listing-reference-social-links { display: flex; gap: 8px; } .single-listing-reference-social-links a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--ink); transition: background-color .2s, color .2s; } .single-listing-reference-social-links a:hover { background: var(--teal); color: #fff; } .single-listing-reference-social-links svg { width: 18px; height: 18px; } .single-listing-reference-hours-list { display: grid; } .single-listing-reference-hours-list > div { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); } .single-listing-reference-hours-list > div:last-child { border-bottom: 0; } .single-listing-reference-hours-list > div.is-today { margin: 0 -12px; padding-inline: 16px; border-radius: 12px; background: var(--lime-soft); border-bottom-color: transparent; } .single-listing-reference-hours-list span { color: var(--ink); font-weight: 600; } .single-listing-reference-hours-list strong { font-weight: 500; color: var(--text); } .single-listing-reference-hours-list b { display: none; } .single-listing-reference-hours-list em { padding: 4px 10px; border-radius: 100px; background: var(--ok-bg); color: var(--ok-ink); font-style: normal; font-weight: 600; font-size: 12px; } .single-listing-reference-hours-list em.is-closed { background: var(--no-bg); color: var(--no-ink); } .single-listing-reference-company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .single-listing-reference-company-grid > div { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-md); background: var(--surface); } .single-listing-reference-company-grid strong { display: block; color: var(--ink); font-size: 18px; font-weight: 600; } .similar-listings-section { padding: var(--section) 0; background: var(--surface); } .similar-listings-section .bb-head { margin-bottom: 40px; } .similar-listings-section .homz-project-slide { border-color: transparent; } .similar-listings-section .homz-project-slide:hover { border-color: var(--line-2); } /* bare inline icons inherited from the original markup */ .single-listing-tab-icon svg, .single-listing-reference-contact-icon svg, .single-listing-reference-company-icon svg, .contact-modern-info__badge svg, .contact-modern-info__cards svg, .category-single-sidebar__header-icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* 22 ---------------------------------------------------------------- contact */ .contact-modern-section { padding-top: clamp(40px, 5vw, 64px); } .contact-modern-shell { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } .contact-modern-form-card { padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); } .bb-formhead { margin-bottom: 28px; } .bb-formhead h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 8px; } .bb-formhead p { margin: 0; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .form-grid .full { grid-column: 1 / -1; } .factory-field { display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; } .factory-field em { color: var(--teal); font-style: normal; margin-left: 2px; } .factory-field input, .factory-field select, .factory-field textarea { width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 500; outline: 0; transition: border-color .2s, box-shadow .2s, background-color .2s; } .factory-field select { appearance: none; -webkit-appearance: none; cursor: pointer; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23525866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center no-repeat; } .factory-field textarea { height: 150px; padding: 14px 16px; resize: vertical; line-height: 1.5; } .factory-field input:focus, .factory-field select:focus, .factory-field textarea:focus { background-color: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(32, 88, 101, .1); } .factory-field input::placeholder, .factory-field textarea::placeholder { color: #9aa0ab; font-weight: 400; } .factory-field input:user-invalid, .factory-field textarea:user-invalid { border-color: #dc2626; } .bb-formfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; } .bb-formfoot p { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); } .bb-formfoot p .bb-ico { color: var(--teal); } .bb-form-status { margin: 0; min-height: 1.2em; color: var(--teal); font-weight: 600; } .contact-modern-info { position: relative; display: flex; flex-direction: column; gap: 24px; padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: var(--teal); color: rgba(255, 255, 255, .78); overflow: hidden; isolation: isolate; } .contact-modern-info::after { content: ""; position: absolute; right: -90px; bottom: -90px; z-index: -1; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(195, 249, 109, .35), transparent 70%); } .contact-modern-info__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--lime); color: var(--ink); margin-bottom: 16px; } .contact-modern-info__badge svg { width: 24px; height: 24px; } .contact-modern-info h3 { color: #fff; font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: 10px; } .bb-contact-lines { display: grid; gap: 10px; } .bb-contact-lines li { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .07); } .bb-contact-lines .bb-icon-chip { width: 42px; height: 42px; border-radius: 12px; } .bb-contact-lines small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); } .bb-contact-lines a, .bb-contact-lines b { color: #fff; font-weight: 600; } .bb-contact-lines a:hover { color: var(--lime); } .contact-modern-info__cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .contact-modern-info__cards span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 14px; font-weight: 500; } .contact-modern-info__cards svg { width: 16px; height: 16px; color: var(--lime); } /* 23 ---------------------------------------------------------------- services */ .visaland-services-main { padding: clamp(48px, 6vw, 80px) 0 var(--section); } .visaland-services-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-bottom: clamp(56px, 7vw, 96px); } .visaland-services-intro__content h2 { margin-bottom: 20px; font-size: clamp(2rem, 3.6vw, 3rem); } .visaland-services-menu { display: grid; margin-top: 28px; border-top: 1px solid var(--line); } .visaland-services-menu a { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -.015em; transition: color .2s, padding .35s var(--ease-out); } .visaland-services-menu a::after { content: ""; width: 34px; height: 34px; border-radius: 10px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%230a0d14' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center no-repeat; transition: background-color .25s, transform .35s var(--ease-out); } .visaland-services-menu a:hover { color: var(--teal); padding-left: 12px; } .visaland-services-menu a:hover::after { background-color: var(--lime); transform: rotate(45deg); } .visaland-services-intro__aside { position: relative; padding-bottom: 60px; } .visaland-services-intro__image { aspect-ratio: 4 / 3.4; border-radius: var(--r-2xl); overflow: hidden; } .visaland-services-intro__image img { width: 100%; height: 100%; object-fit: cover; } .visaland-services-intro__note { position: absolute; left: -24px; right: 15%; bottom: 0; padding: 24px; border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-lg); } .visaland-services-intro__note span { display: inline-flex; padding: 5px 10px; border-radius: 100px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .visaland-services-intro__note strong { display: block; margin: 12px 0 6px; color: var(--ink); font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; } .visaland-services-intro__note p { margin: 0; font-size: 15px; } .visaland-service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .visaland-service-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 10px 10px 24px; border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s, box-shadow .4s var(--ease-out), transform .45s var(--ease-out); } .visaland-service-card:hover { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-md); transform: translateY(-4px); } .visaland-service-card__image { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; } .visaland-service-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .visaland-service-card:hover .visaland-service-card__image img { transform: scale(1.05); } .visaland-service-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 12px; } .visaland-service-card__tag { display: inline-flex; padding: 4px 10px; border-radius: 100px; background: var(--teal-soft); color: var(--teal); font-size: 12px; font-weight: 600; } .visaland-service-card__body h3 a::after { content: ""; position: absolute; inset: 0; } .visaland-service-card__body p { margin: 0; font-size: 15px; } .visaland-services-support { padding: var(--section) 0; background: var(--teal); color: rgba(255, 255, 255, .75); } .visaland-services-support__heading { max-width: 720px; margin: 0 auto 48px; text-align: center; } .visaland-services-support__heading h2 { color: #fff; margin-bottom: 16px; } .visaland-services-support__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .visaland-support-card { display: flex; flex-direction: column; gap: 18px; padding: 10px 10px 24px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background-color .3s, transform .45s var(--ease-out); } .visaland-support-card:hover { background: rgba(255, 255, 255, .1); transform: translateY(-4px); } .visaland-support-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; } .visaland-support-card > div { padding: 0 12px; } .visaland-support-card h3 { color: #fff; margin-bottom: 8px; } .visaland-support-card p { margin: 0; font-size: 15px; } /* 24 ---------------------------------------------------------------- sitemap & 404 */ .sitemap-premium { padding: clamp(48px, 6vw, 80px) 0 var(--section); } .sitemap-premium__hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: end; margin-bottom: 48px; } .sitemap-premium__hero h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); } .sitemap-premium__hero p { margin: 0; } .sitemap-premium__layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .sitemap-premium__card { padding: 28px; border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s, box-shadow .3s; } .sitemap-premium__card:hover { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-sm); } .sitemap-premium__card--featured { background: var(--teal); color: rgba(255, 255, 255, .8); } .sitemap-premium__card--featured:hover { background: var(--teal); } .sitemap-premium__card--featured h3, .sitemap-premium__card--featured a { color: #fff !important; } .sitemap-premium__card--featured .sitemap-premium__card-head span { background: var(--lime); } .sitemap-premium__card--featured .sitemap-premium__links li { border-color: rgba(255, 255, 255, .14); } .sitemap-premium__card-head { margin-bottom: 18px; } .sitemap-premium__card-head span { display: inline-flex; margin-bottom: 10px; padding: 4px 10px; border-radius: 100px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .sitemap-premium__card-head svg { display: none; } .sitemap-premium__card-head h3 { font-size: 24px; } .sitemap-premium__links li { border-top: 1px solid var(--line); } .sitemap-premium__links a { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; color: var(--ink); font-weight: 500; transition: color .2s, padding .3s var(--ease-out); } .sitemap-premium__links a::after { content: "\2192"; color: var(--muted); transition: transform .3s var(--ease-out), color .2s; } .sitemap-premium__links a:hover { color: var(--teal); padding-left: 6px; } .sitemap-premium__links a:hover::after { transform: translateX(3px); color: var(--teal); } .sitemap-premium__card--categories { grid-column: 1 / -1; } .sitemap-premium__card--support { grid-column: span 2; } .sitemap-premium__card--support .sitemap-premium__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } .sitemap-premium__links--categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; } .error-reference-section { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 80px 0; } .error-reference-content { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; } .error-reference-number { margin: 20px 0 4px; font-family: var(--f-display); font-size: clamp(7rem, 20vw, 14rem); font-weight: 600; line-height: .9; letter-spacing: -.06em; background: linear-gradient(180deg, var(--teal) 30%, rgba(32, 88, 101, .25)); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-reference-content h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; } .bb-404__search { width: 100%; margin-top: 32px; } .bb-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; } /* 25 ---------------------------------------------------------------- blog index + single */ .bb-blogindex { padding-top: clamp(40px, 5vw, 64px); } .renvia-blog-details { padding-top: clamp(40px, 5vw, 64px); } .renvia-blog-details__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 64px); align-items: start; } .renvia-blog-details__main { max-width: 760px; font-size: 18px; line-height: 1.75; } .renvia-blog-details__main > h3 { margin: 40px 0 12px; font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -.025em; } .renvia-blog-details__featured { margin-bottom: 8px; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; } .renvia-blog-details__featured img { width: 100%; height: 100%; object-fit: cover; } .renvia-blog-details__quote { position: relative; margin: 36px 0; padding: 32px 32px 32px 88px; border-radius: var(--r-xl); background: var(--surface); } .renvia-blog-details__quote-mark { position: absolute; left: 24px; top: 26px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lime); color: var(--ink); font-family: var(--f-display); font-size: 40px; line-height: 1; padding-top: 12px; } .renvia-blog-details__quote p { margin: 0; color: var(--ink); font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.45; letter-spacing: -.015em; } .renvia-blog-details__list { display: grid; gap: 12px; margin: 20px 0 28px; } .renvia-blog-details__list li { position: relative; padding-left: 36px; color: var(--ink); } .renvia-blog-details__list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E") center no-repeat; } .renvia-blog-details__image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; } .renvia-blog-details__image-grid figure { aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; } .renvia-blog-details__image-grid img { width: 100%; height: 100%; object-fit: cover; } .renvia-blog-sidebar { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; } .renvia-blog-sidebar__widget { padding: 24px; border-radius: var(--r-xl); background: var(--surface); } .renvia-blog-sidebar__widget h3 { font-size: 20px; margin-bottom: 14px; } .renvia-blog-sidebar__categories li + li { border-top: 1px solid var(--line); } .renvia-blog-sidebar__categories a { display: flex; justify-content: space-between; padding: 12px 2px; color: var(--ink); font-weight: 500; transition: color .2s, padding .3s var(--ease-out); } .renvia-blog-sidebar__categories a span { color: var(--muted); transition: transform .3s var(--ease-out), color .2s; } .renvia-blog-sidebar__categories a:hover { color: var(--teal); padding-left: 6px; } .renvia-blog-sidebar__categories a:hover span { color: var(--teal); transform: translateX(3px); } .renvia-blog-sidebar__posts { display: grid; gap: 14px; } .renvia-blog-sidebar__post { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.4; transition: color .2s; } .renvia-blog-sidebar__post img { width: 76px; height: 64px; object-fit: cover; border-radius: 12px; } .renvia-blog-sidebar__post:hover { color: var(--teal); } /* 26 ---------------------------------------------------------------- motion */ .bb-js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease-out) var(--d, 0s), filter .9s var(--ease) var(--d, 0s); } .bb-js .reveal.in-view { opacity: 1; transform: none; filter: none; } .bb-js .bb-load { opacity: 0; animation: bbRise 1s var(--ease-out) forwards; } .bb-js .bb-load:nth-child(1) { animation-delay: .05s; } .bb-js .bb-load:nth-child(2) { animation-delay: .12s; } .bb-js .bb-load:nth-child(3) { animation-delay: .4s; } .bb-js .bb-load:nth-child(4) { animation-delay: .52s; } @keyframes bbRise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .bb-js [data-bb-split].is-split { opacity: 1; animation: none; } .bb-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .bb-word > span { display: inline-block; transform: translateY(105%); animation: bbWord 1s var(--ease-out) forwards; animation-delay: calc(.15s + var(--i) * .06s); } @keyframes bbWord { to { transform: none; } } .bb-js .bb-hero__stage { opacity: 0; animation: bbStage 1.3s .45s var(--ease-out) forwards; } @keyframes bbStage { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } } .bb-float, .bb-bubble { transition: translate .6s var(--ease-out); translate: var(--tx, 0) var(--ty, 0); } .bb-js .bb-hero .bb-float, .bb-js .bb-hero .bb-bubble { animation: bbPop .9s var(--ease-out) both; } .bb-hero .bb-float--rating { animation-delay: 1s !important; } .bb-hero .bb-float--biz { animation-delay: 1.15s !important; } .bb-hero .bb-float--brand { animation-delay: 1.25s !important; } .bb-hero .bb-float--chart { animation-delay: 1.1s !important; } .bb-hero .bb-bubble--lime { animation-delay: 1.3s !important; } .bb-hero .bb-bubble--amber { animation-delay: 1.4s !important; } @keyframes bbPop { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } } .bb-bubble > svg, .bb-float--brand img { animation: bbBob 5s ease-in-out infinite; } @keyframes bbBob { 50% { transform: translateY(-4px) rotate(-6deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .bb-js .reveal, .bb-js .bb-load, .bb-js .bb-hero__stage { opacity: 1; transform: none; filter: none; } .bb-marquee ul { animation: none; flex-wrap: wrap; } } /* 27 ---------------------------------------------------------------- responsive */ @media (max-width: 1199px) { .featured-categories__track > .featured-category-card { flex-basis: calc((100% - 24px) / 2); } .homz-project-track > .homz-project-slide { flex-basis: calc((100% - 24px) / 2); } .featured-categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .search-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bb-float--rating { left: var(--gutter); } .bb-float--chart { right: var(--gutter); width: 220px; } .bb-float--brand { right: calc(var(--gutter) + 2%); } .bb-bubble--lime { left: 28%; } .bb-bubble--amber { right: 27%; } .bb-float--lead { left: 0; } } @media (max-width: 1100px) { :root { --header-h: 72px; } .main-menu, .bb-header__search { display: none; } .bb-header .header-main { grid-template-columns: 1fr auto; } .menu-icon { display: block; } } @media (max-width: 991px) { .bb-bento, .bb-feature--wide { grid-template-columns: 1fr; } .bb-feature--wide { gap: 28px; padding: 32px; } .bb-feature--wide .bb-feature__visual { order: -1; height: 300px; } .bb-steps .bb-tabs__panel, .bb-case { grid-template-columns: 1fr; } .bb-steps__visual { min-height: 380px; padding: 28px; } .bb-case__media { order: -1; } .bb-stats__panel { grid-template-columns: 1fr; padding-bottom: 0; } .bb-stats__copy { padding-bottom: 0; } .bb-stats__media { min-height: 360px; } .bb-float--lead { left: 4%; bottom: 18%; } .bb-testi__track { grid-auto-columns: 78%; } .pinvoy-directory-faq__grid { grid-template-columns: 1fr; } .pinvoy-directory-faq__left { position: static; } .renvia-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .renvia-news__grid > :nth-child(3):last-child { display: none; } .bb-blogindex .renvia-news__grid > :nth-child(3):last-child { display: flex; } .bb-footer__news { grid-template-columns: 1fr; } .footer-widgets-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .category-single-listing-layout { grid-template-columns: 1fr; } .category-single-sidebar { position: static; order: -1; padding: 14px; } .category-single-sidebar__header { padding: 0 0 12px; } .category-single-sidebar__list { display: flex; flex-wrap: nowrap; gap: 8px; max-height: none; overflow-x: auto; padding-bottom: 6px; } .category-single-sidebar__list li { flex: none; } .category-single-sidebar__link { grid-template-columns: auto auto; background: #fff; padding: 8px 14px 8px 8px; border-radius: 100px; white-space: nowrap; } .category-single-sidebar__arrow { display: none; } .category-single-sidebar__icon { width: 30px; height: 30px; border-radius: 50%; } .listing-reference-hero-grid { grid-template-columns: 1fr; } .bb-lhero__card { position: static; max-width: 560px; } .single-listing-tabs-layout { grid-template-columns: 1fr; gap: 20px; } .single-listing-tabs { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; display: flex; overflow-x: auto; scrollbar-width: none; box-shadow: var(--sh-sm); } .single-listing-tabs::-webkit-scrollbar { display: none; } .single-listing-tab-button { flex: none; padding: 8px 12px 8px 8px; } .single-listing-tab-icon { width: 28px; height: 28px; } .listing-review-grid { grid-template-columns: 1fr; } .contact-modern-shell, .visaland-services-intro, .sitemap-premium__hero, .renvia-blog-details__layout { grid-template-columns: 1fr; } .renvia-blog-sidebar { position: static; } .visaland-service-cards, .visaland-services-support__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sitemap-premium__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sitemap-premium__card--support { grid-column: auto; } .sitemap-premium__card--support .sitemap-premium__links { display: block; } .sitemap-premium__links--categories { grid-template-columns: repeat(3, minmax(0, 1fr)); } .visaland-services-intro__note { left: 16px; } } @media (max-width: 767px) { body { font-size: 16px; } .bb-br { display: none; } .bb-head--split { align-items: flex-start; } .bb-head__actions { width: 100%; justify-content: space-between; } .header-quote { display: none; } .search-panel { grid-template-columns: 1fr; padding: 6px; gap: 2px; } .search-panel .field { padding: 10px 14px 10px 48px; } .search-panel .field + .field::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; } .search-panel .xbuild-hero-search__button { width: 100%; min-height: 54px; margin-top: 4px; } .bb-popular { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .bb-popular::-webkit-scrollbar { display: none; } .bb-popular a, .bb-popular span { flex: none; } .bb-hero__content { text-align: left; align-items: flex-start; } .bb-hero__lead { margin: 0; } .bb-hero__stage { height: 400px; } .bb-hero__panel { height: 58%; border-radius: 22px 22px 0 0; } .bb-hero__person { width: 74vw; max-width: 340px; } .bb-float--chart, .bb-float--brand { display: none; } .bb-float--rating { top: 10%; width: 168px; padding: 10px 12px; } .bb-float--rating strong { font-size: 20px; } .bb-spark { height: 26px; } .bb-float--biz { left: auto; right: var(--gutter); bottom: 6%; padding: 8px; gap: 8px; } .bb-float--biz .bb-pill-btn { display: none; } .bb-float--biz .bb-mock__logo { width: 32px; height: 32px; font-size: 12px; border-radius: 9px; } .bb-bubble { width: 42px; height: 42px; } .bb-bubble--lime { left: auto; right: 12%; top: 4%; } .bb-bubble--amber { right: auto; left: 10%; top: auto; bottom: 46%; } .bb-band__inner { grid-template-columns: 1fr; gap: 16px; padding: 20px; } .bb-band__label { max-width: none; } .featured-categories__track > .featured-category-card, .homz-project-track > .homz-project-slide { flex-basis: 100%; } .featured-categories__grid, .search-results-grid, .category-single-listing-grid, .renvia-news__grid, .visaland-service-cards, .visaland-services-support__grid, .sitemap-premium__layout { grid-template-columns: 1fr; } .renvia-news__grid > :nth-child(3):last-child { display: flex; } .bb-feature { padding: 22px; } .bb-feature__visual { height: 250px; } .bb-mock { width: calc(100% - 24px); padding: 14px; } .bb-tabs__list { justify-content: flex-start; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .bb-tabs__btn { font-size: 17px; } .bb-steps__visual { min-height: 0; padding: 20px 12px; border-radius: var(--r-xl); } .bb-seg { margin-inline: 0; } .bb-case { padding: 12px 12px 24px; border-radius: var(--r-xl); } .bb-case__copy { padding: 0 8px; } .counter-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .counter-card h3 { font-size: 30px; } .counter-card > span { font-size: 12px; } .bb-stats__media { min-height: 300px; } .bb-float--lead { width: 168px; left: auto; right: -4px; top: 4px; bottom: auto; padding: 10px 12px; } .bb-float--lead strong { font-size: 18px; } .bb-testi__track { grid-auto-columns: 88%; gap: 14px; } .bb-cta { border-radius: var(--r-xl); text-align: left; align-items: flex-start; } .footer-solutek-cta__message { align-items: flex-start; } .footer-solutek-cta__action { justify-content: flex-start; width: 100%; } .footer-solutek-cta__action .theme-btn { flex: 1 1 100%; } .bb-footer__brand { flex-direction: column; align-items: flex-start; } .footer-widgets-wrapper { gap: 32px 16px; } .footer-bottom { flex-direction: column; } .bb-pagehero { text-align: left; } .bb-pagehero__inner { align-items: flex-start; } .bb-pagehero__lead { margin: 0; } .breadcrumb { justify-content: flex-start; } .bb-pagehero__stats { width: 100%; justify-content: space-between; } .bb-pagehero__stats li { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 12px; flex: 1; } .bb-toolbar { padding: 12px; } .bb-toolbar__tools, .bb-filter, .bb-select, .bb-filter input, .bb-select select { width: 100%; } .listing-detail-title-row { flex-direction: column; align-items: flex-start; gap: 14px; } .listing-detail-logo-card { width: 76px; height: 76px; border-radius: 18px; } .listing-reference-contact-list { grid-template-columns: 1fr; } .listing-detail-actions { width: 100%; } .listing-detail-actions .theme-btn { flex: 1 1 calc(50% - 5px); padding-inline: 12px; } .listing-detail-actions .theme-btn:first-child { flex-basis: 100%; } .single-listing-reference-info-grid, .single-listing-reference-contact-grid { grid-template-columns: 1fr; } .listing-detail-info-grid:not(.single-listing-reference-info-grid), .single-listing-reference-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .listing-review-summary { grid-template-columns: 1fr; } .listing-lightbox-grid { grid-template-rows: repeat(2, 120px); } .listing-lightbox-grid.is-web-gallery { grid-template-rows: 110px; } .single-listing-reference-hours-list > div { grid-template-columns: 96px 1fr auto; font-size: 14px; } .form-grid { grid-template-columns: 1fr; } .bb-formfoot .theme-btn { width: 100%; } .visaland-services-intro__note { position: relative; left: 0; right: 0; margin: -48px 12px 0; } .visaland-services-intro__aside { padding-bottom: 0; } .sitemap-premium__links--categories { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } .renvia-blog-details__quote { padding: 76px 22px 24px; } .renvia-blog-details__image-grid { grid-template-columns: 1fr; } .back-to-top { right: 14px; bottom: 14px; } } @media (max-width: 420px) { .footer-widgets-wrapper { grid-template-columns: 1fr 1fr; } .sitemap-premium__links--categories { grid-template-columns: 1fr; } } /* 28 ---------------------------------------------------------------- category single (Syncro "Integrations" layout) */ .bb-cathero { padding-bottom: 0; background: #fff; } .bb-cathero::before, .bb-cathero::after { opacity: .28; } .bb-pagehero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; } .bb-hub { position: relative; height: clamp(220px, 24vw, 320px); margin-top: clamp(32px, 4vw, 56px); } .bb-hub::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 75%); opacity: .8; } .bb-hub__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .bb-hub__line { fill: none; stroke: var(--line-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .bb-hub__svg path { stroke-dasharray: 6 10; animation: bbFlow 1.6s linear infinite; animation-delay: calc(var(--i) * -.2s); } .bb-hub__svg path:nth-child(odd) { stroke: rgba(32, 88, 101, .35); } @keyframes bbFlow { to { stroke-dashoffset: -32; } } .bb-hub__tile, .bb-hub__core { position: absolute; z-index: 1; display: grid; place-items: center; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10, 13, 20, .05), 0 14px 30px -16px rgba(13, 37, 42, .35); } .bb-hub__tile { width: 58px; height: 58px; border-radius: 16px; color: var(--teal); transition: transform .45s var(--ease-out), background-color .3s, color .3s, border-color .3s; animation: bbHubFloat 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.75s); } .bb-hub__tile:nth-child(3n) { color: var(--ink); background: var(--lime); border-color: var(--lime); } .bb-hub__tile em { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-style: normal; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s; } .bb-hub__tile:hover em { opacity: 1; } @keyframes bbHubFloat { 50% { translate: 0 -6px; } } .bb-hub__core { left: 50%; top: 46%; width: 76px; height: 76px; border-radius: 22px; box-shadow: 0 0 0 10px rgba(255, 255, 255, .9), 0 0 0 11px var(--line), 0 24px 50px -18px rgba(13, 37, 42, .45); } .bb-hub__core::after { content: ""; position: absolute; inset: -22px; border-radius: 32px; border: 1px solid rgba(32, 88, 101, .25); animation: bbRing 2.6s var(--ease-out) infinite; } @keyframes bbRing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } } .bb-libbar { display: grid; gap: 18px; max-width: 980px; margin: 0 auto 40px; } .bb-libbar__search { max-width: none; } .bb-libbar__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; } .bb-libbar__row .bb-seg { margin: 0; } .bb-libbar__count { margin: 0; font-size: 15px; } .bb-libbar__count b { color: var(--ink); font-weight: 600; } .bb-catlayout { grid-template-columns: 1fr; gap: 48px; } .bb-catlayout .category-single-listing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bb-catcloud { position: static; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-2xl); } .bb-catcloud .category-single-sidebar__header { border: 0; margin: 0 0 8px; padding: 0 0 12px; justify-content: center; } .bb-catcloud .category-single-sidebar__header h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } .bb-catcloud .category-single-sidebar__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-height: none; overflow: visible; padding: 0; } .bb-catcloud .category-single-sidebar__link { grid-template-columns: auto auto auto; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 100px; background: #fff; border: 1px solid var(--line); font-size: 14px; transition: border-color .2s, color .2s, transform .3s var(--ease-out), box-shadow .3s; } .bb-catcloud .category-single-sidebar__link:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--sh-sm); } .bb-catcloud .category-single-sidebar__icon { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--teal-soft); } .bb-catcloud .category-single-sidebar__icon svg { width: 15px; height: 15px; } .bb-catcloud .category-single-sidebar__arrow { width: 14px; height: 14px; } .bb-benefits__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); } .bb-benefits__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .bb-benefits__copy h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); } .bb-benefits__copy > p { margin: 0; max-width: 540px; } .bb-benefits__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 8px; } .bb-orbit { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; } .bb-orbit__circle { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid var(--line); } .bb-orbit__circle.is-1 { width: 100%; height: 100%; } .bb-orbit__circle.is-2 { width: 72%; height: 72%; } .bb-orbit__circle.is-3 { width: 44%; height: 44%; background: radial-gradient(circle, var(--surface), transparent 70%); } .bb-orbit__ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; animation: bbSpin 60s linear infinite; } .bb-orbit__ring.is-a { width: 72%; height: 72%; } .bb-orbit__ring.is-b { width: 100%; height: 100%; animation-duration: 90s; animation-direction: reverse; } .bb-orbit__dot { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); color: var(--teal); left: calc(50% + 50% * cos(var(--a))); top: calc(50% + 50% * sin(var(--a))); } .bb-orbit__ring.is-b .bb-orbit__dot:nth-child(2n) { background: var(--lime); border-color: var(--lime); color: var(--ink); } .bb-orbit__dot svg { animation: bbSpin 60s linear infinite reverse; } .bb-orbit__ring.is-b .bb-orbit__dot svg { animation-duration: 90s; animation-direction: normal; } @keyframes bbSpin { to { rotate: 360deg; } } .bb-orbit__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 18px; white-space: nowrap; } @media (max-width: 991px) { .bb-catlayout .category-single-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bb-catcloud { order: 0; } .bb-catcloud .category-single-sidebar__list { flex-wrap: wrap; overflow: visible; } .bb-benefits__grid { grid-template-columns: 1fr; } .bb-benefits__visual { order: -1; } } @media (max-width: 767px) { .bb-hub { height: 200px; margin-top: 28px; } .bb-hub__tile { width: 44px; height: 44px; border-radius: 12px; } .bb-hub__tile .bb-ico { width: 18px; height: 18px; } .bb-hub__tile:nth-of-type(n+7) { display: none; } .bb-hub__core { width: 60px; height: 60px; border-radius: 18px; } .bb-pagehero__actions { justify-content: flex-start; width: 100%; } .bb-pagehero__actions .theme-btn { flex: 1 1 auto; } .bb-catlayout .category-single-listing-grid { grid-template-columns: 1fr; } .bb-libbar__row .bb-seg { width: 100%; } .bb-catcloud .category-single-sidebar__list { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } .bb-catcloud .category-single-sidebar__header { justify-content: flex-start; } .bb-orbit { width: 88%; } .bb-orbit__dot { width: 38px; height: 38px; margin: -19px; border-radius: 11px; } .bb-orbit__core { font-size: 15px; padding: 10px 14px; } } .bb-catcloud .category-single-sidebar__link.is-active { background: var(--teal); border-color: var(--teal); color: #fff; } .bb-catcloud .category-single-sidebar__link.is-active .category-single-sidebar__icon { background: rgba(255, 255, 255, .15); color: var(--lime); } .bb-catcloud .category-single-sidebar__link.is-active .category-single-sidebar__arrow { color: var(--lime); } /* 29 ---------------------------------------------------------------- home: RSS headlines (news desk) */ .bb-news__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .bb-news__status { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 100px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500; } .bb-news__status.is-error .bb-live { background: #dc2626; animation: none; } .bb-news__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 24px; align-items: stretch; } .bb-news__lead { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 10px 10px 26px; border-radius: var(--r-xl); background: var(--surface); transition: background-color .3s, box-shadow .4s var(--ease-out); } .bb-news__lead:not(.is-skeleton):hover { background: #fff; box-shadow: 0 0 0 1px var(--line), var(--sh-md); } .bb-news__img { position: relative; display: block; aspect-ratio: 16 / 9.5; border-radius: 18px; overflow: hidden; background: var(--surface-2); } .bb-news__img img, .bb-news__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .bb-news__lead:hover .bb-news__img img { transform: scale(1.04); } .bb-news__img.is-empty, .bb-news__thumb.is-empty { background: var(--teal) url("../images/bizbooknow/favicon.svg") center / 44px no-repeat; } .bb-news__img.is-empty img, .bb-news__thumb.is-empty img { display: none; } .bb-news__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 16px; } .bb-news__kicker { display: inline-flex; padding: 3px 9px; border-radius: 6px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .02em; } .bb-news__lead h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -.025em; } .bb-news__lead h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .bb-news__desc { margin: 0; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bb-news__by { margin: 0; font-size: 13px; color: var(--muted); font-weight: 500; } .bb-news__list { display: flex; flex-direction: column; padding: 8px; border-radius: var(--r-xl); border: 1px solid var(--line); background: #fff; counter-reset: bbnews; } .bb-news__item { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px; border-radius: 16px; transition: background-color .25s; } .bb-news__item + .bb-news__item::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line); } .bb-news__item:not(.is-skeleton):hover { background: var(--surface); } .bb-news__item:hover + .bb-news__item::before, .bb-news__item:not(.is-skeleton):hover::before { opacity: 0; } .bb-news__thumb { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--surface-2); } .bb-news__item:hover .bb-news__thumb img { transform: scale(1.06); } .bb-news__item > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .bb-news__item .bb-news__kicker { padding: 2px 8px; font-size: 11px; background: var(--teal-soft); color: var(--teal); } .bb-news__item h4 { font-size: 16px; line-height: 1.35; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bb-news__item h4 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .bb-news__item h4 a:hover { color: var(--teal); } .bb-news__grid.is-ready .bb-news__item { animation: bbRise .7s var(--ease-out) both; animation-delay: var(--d, 0s); } .bb-news__grid.is-ready .bb-news__lead { animation: bbRise .7s var(--ease-out) both; } .bb-news__credit { margin: 20px 0 0; font-size: 13px; color: var(--muted); } .bb-news__empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 24px; border-radius: var(--r-xl); background: var(--surface); text-align: center; color: var(--ink); font-weight: 500; } /* skeleton */ .is-skeleton .bb-news__img, .is-skeleton .bb-news__thumb, .is-skeleton i { position: relative; overflow: hidden; background: var(--surface-2); } .is-skeleton i { display: block; width: 100%; height: 14px; border-radius: 6px; } .bb-news__lead.is-skeleton i:first-child { width: 22%; height: 18px; } .bb-news__lead.is-skeleton i:nth-child(2) { height: 30px; width: 90%; } .is-skeleton i.is-short { width: 55%; } .bb-news__item.is-skeleton > div { width: 100%; gap: 10px; } .is-skeleton .bb-news__img::after, .is-skeleton .bb-news__thumb::after, .is-skeleton i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: bbShimmer 1.4s infinite; } @keyframes bbShimmer { to { transform: translateX(100%); } } @media (max-width: 991px) { .bb-news__grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .bb-news__meta { width: 100%; justify-content: space-between; } .bb-news__item { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px; } .bb-news__body { padding: 0 8px; } }