h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .marquee-warm-text, [class*="-title"] { font-family: "Funnel Display", sans-serif !important; } body { background-color: #fbfaf7; } .hero-shell { display: flow-root; background: linear-gradient( to bottom, rgba(55, 116, 223, 0.026) 0%, rgba(55, 116, 223, 0.026) 30%, rgba(55, 116, 223, 0.008) 66%, rgba(55, 116, 223, 0) 100% ); background-size: 100% clamp(240px, 28vw, 360px); background-repeat: no-repeat; } header .navbar { background-color: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } .marquee-warm-text { display: inline-block; width: max-content; background-image: linear-gradient( to bottom, rgba(20, 20, 20, 0.04) 0%, rgba(20, 20, 20, 0.14) 50%, rgba(20, 20, 20, 0.04) 100% ); line-height: 1.1; padding-top: 12px; padding-bottom: 28px; will-change: transform; } .claverio-button.primary, .claverio-button.icon, .claverio-play-glass { --glass-x: 50%; --glass-y: 50%; --edge-x: 50%; --edge-y: 0px; --content-x: 0px; --content-y: 0px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 27px; overflow: hidden; color: #171717; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.2px; border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 7px 16px rgba(28, 24, 21, 0.06), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(69, 59, 52, 0.12), inset 1px 0 1px rgba(255, 255, 255, 0.62), inset -1px 0 1px rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateZ(0) scale(1); transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 450ms cubic-bezier(.16, 1, .3, 1), background-color 500ms cubic-bezier(.16, 1, .3, 1), border-color 500ms cubic-bezier(.16, 1, .3, 1), color 250ms ease; } .claverio-play-glass { flex: 0 0 60px; width: 60px; height: 60px; min-height: 60px; padding: 0; gap: 0; } .claverio-button.icon { flex: 0 0 90px; justify-content: center; width: 90px; height: 90px; min-height: 90px; padding: 0; gap: 0; } .claverio-button.icon > i { position: relative; z-index: 2; margin: 0; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary.claverio-button--compact { min-height: 40px; padding: 0 17px; gap: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.45px; text-transform: uppercase; } .claverio-play-glass i { position: relative; z-index: 2; margin-left: 2px; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-play-glass--sonar { overflow: visible; } .claverio-play-glass--sonar .video-icon-sonar .video-icon-sonar-bfr { border: 1px solid rgba(255, 255, 255, 0.44); background: rgba(255, 255, 255, 0.13) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.52); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .claverio-button.primary::before, .claverio-button.icon::before, .claverio-play-glass::before { content: ""; position: absolute; z-index: 1; inset: -1px; padding: 1.5px; border-radius: inherit; background: radial-gradient(54px 30px at var(--edge-x) var(--edge-y), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 18%, rgba(255, 255, 255, 0.34) 46%, transparent 75%), radial-gradient(46px 24px at calc(var(--edge-x) - 7px) calc(var(--edge-y) + 2px), rgba(255, 213, 128, 0.48), transparent 72%), radial-gradient(46px 24px at calc(var(--edge-x) + 8px) calc(var(--edge-y) - 2px), rgba(139, 202, 255, 0.42), transparent 72%), linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.14) 44%, rgba(62, 56, 51, 0.1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.46; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)); transition: opacity 380ms cubic-bezier(.16, 1, .3, 1); } .claverio-button.primary::after, .claverio-button.icon::after, .claverio-play-glass::after { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: inherit; background: radial-gradient(76px 16px at 50% 100%, rgba(40, 34, 30, 0.032), transparent 74%), radial-gradient(88px 56px at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.46), transparent 72%), radial-gradient(112px 66px at calc(var(--glass-x) - 58px) calc(var(--glass-y) + 34px), rgba(255, 128, 91, 0.13), transparent 74%), radial-gradient(112px 66px at calc(var(--glass-x) + 62px) calc(var(--glass-y) - 34px), rgba(255, 228, 137, 0.14), transparent 74%), radial-gradient(108px 64px at calc(var(--glass-x) + 72px) calc(var(--glass-y) + 31px), rgba(151, 199, 255, 0.12), transparent 74%), linear-gradient(180deg, transparent 48%, rgba(48, 41, 36, 0.028) 79%, rgba(255, 255, 255, 0.11) 100%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.60), inset 0 9px 11px -12px rgba(255, 255, 255, 0.96), inset 0 -4px 5px -5px rgba(37, 31, 27, 0.12), inset -3px 0 4px -5px rgba(37, 31, 27, 0.07); opacity: 0.64; pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .claverio-button__icon { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #252742; transform: translate3d(var(--content-x), var(--content-y), 0); transition: color 350ms ease; } .claverio-button__icon::before { content: none; } .claverio-button__icon i { position: relative; z-index: 1; font-size: 18px; } .claverio-button__label { position: relative; z-index: 2; white-space: nowrap; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary:hover, .claverio-button.primary.is-hovered, .claverio-button.icon:hover, .claverio-button.icon.is-hovered, .claverio-play-glass:hover, .claverio-play-glass.is-hovered { color: #111; border-color: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 18px rgba(28, 24, 21, 0.065), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.98), inset 0 -1px 1px rgba(69, 59, 52, 0.13), inset 1px 0 1px rgba(255, 255, 255, 0.68), inset -1px 0 1px rgba(255, 255, 255, 0.42); } .claverio-button.primary:hover::before, .claverio-button.primary.is-hovered::before, .claverio-button.icon:hover::before, .claverio-button.icon.is-hovered::before, .claverio-play-glass:hover::before, .claverio-play-glass.is-hovered::before { opacity: 1; } .claverio-button.primary:hover::after, .claverio-button.primary.is-hovered::after, .claverio-button.icon:hover::after, .claverio-button.icon.is-hovered::after, .claverio-play-glass:hover::after, .claverio-play-glass.is-hovered::after { opacity: 0.9; } .claverio-button.primary:hover .claverio-button__icon, .claverio-button.primary.is-hovered .claverio-button__icon { color: #252742; } .claverio-button.primary:active, .claverio-button.icon:active, .claverio-play-glass:active { transform: translateZ(0) scale(0.985); transition-duration: 90ms; } .claverio-button.primary.is-pressed, .claverio-button.icon.is-pressed, .claverio-play-glass.is-pressed { transform: translateZ(0) scale(0.985); } .claverio-button.primary:focus-visible, .claverio-button.icon:focus-visible, .claverio-play-link:focus-visible .claverio-play-glass { outline: 3px solid rgba(55, 116, 223, 0.28); outline-offset: 4px; } /* Mobile + tablet liquid glass dock */ .mobile-liquid-dock, .mobile-liquid-search { display: none; } @media all { :root { --mobile-dock-bottom: max(14px, env(safe-area-inset-bottom)); --mobile-dock-height: 80px; } html { scroll-padding-bottom: 124px; } body { padding-bottom: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 24px); } .navbar .menu-order.left-nav { display: none !important; } .navbar .tablet-hide-header-cta { display: none !important; } .mobile-liquid-dock { --active-index: 0; --rim-x: 18%; --rim-y: 0%; --rim-shadow-x: 82%; --rim-shadow-y: 100%; --rim-angle: 112deg; --rim-energy: 0.70; --rim-dark-boost: 1; position: fixed; z-index: 1048; left: 50%; bottom: var(--mobile-dock-bottom); display: block; width: min(620px, calc(100% - 28px)); height: var(--mobile-dock-height); padding: 7px; border: 0; border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 15px 30px rgba(28, 24, 21, 0.105), 0 4px 10px rgba(28, 24, 21, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -1px 0 rgba(35, 31, 28, 0.085); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateX(-50%) translateZ(0); isolation: isolate; overflow: visible; -webkit-tap-highlight-color: transparent; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(110px 72px at 12% -8%, rgba(255, 255, 255, 0.72), transparent 70%), radial-gradient(170px 90px at 30% 112%, rgba(255, 128, 91, 0.12), transparent 72%), radial-gradient(180px 92px at 70% -14%, rgba(255, 228, 137, 0.14), transparent 72%), radial-gradient(160px 85px at 92% 105%, rgba(151, 199, 255, 0.11), transparent 72%), linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.12)); opacity: 0.84; pointer-events: none; } .mobile-liquid-dock::after { content: ""; position: absolute; z-index: 4; inset: 1px; border-radius: inherit; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), inset 0 10px 12px -12px rgba(255, 255, 255, 0.62), inset 0 -11px 13px -13px rgba(27, 24, 22, 0.22); pointer-events: none; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__tone { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(12, 13, 16, 0.82), rgba(25, 27, 31, 0.68) 48%, rgba(9, 10, 13, 0.78)), rgba(10, 11, 14, 0.70); opacity: 0; pointer-events: none; transition: opacity 720ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after { position: absolute; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .mobile-liquid-dock__rim { z-index: 6; inset: -1px; padding: 1.35px; background: conic-gradient( from var(--rim-angle), rgba(255, 255, 255, 0.72) 0deg, rgba(255, 255, 255, 0.19) 42deg, rgba(255, 255, 255, 0.045) 100deg, rgba(18, 18, 20, 0.14) 168deg, rgba(18, 18, 20, 0.045) 220deg, rgba(255, 255, 255, 0.11) 278deg, rgba(255, 255, 255, 0.58) 340deg, rgba(255, 255, 255, 0.72) 360deg ); filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.42)) drop-shadow(0 2px 3px rgba(24, 21, 19, 0.075)); opacity: 0.88; transform: translateZ(0); transition: filter 680ms cubic-bezier(.22, 1, .36, 1), opacity 680ms ease; } .mobile-liquid-dock__rim::before { content: ""; inset: 0; padding: 1.8px; background: radial-gradient( 150px 62px at var(--rim-x) var(--rim-y), rgb(255 255 255 / calc(0.58 * var(--rim-energy) * var(--rim-dark-boost))), rgb(255 255 255 / calc(0.17 * var(--rim-energy))) 45%, transparent 78% ); filter: blur(0.15px); mix-blend-mode: screen; } .mobile-liquid-dock__rim::after { content: ""; inset: 0; padding: 1.45px; background: radial-gradient( 185px 76px at var(--rim-shadow-x) var(--rim-shadow-y), rgb(11 12 14 / calc(0.18 * var(--rim-energy))), rgb(11 12 14 / calc(0.05 * var(--rim-energy))) 50%, transparent 78% ); mix-blend-mode: multiply; } .mobile-liquid-dock.is-on-dark { --rim-dark-boost: 1.06; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), 0 4px 11px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } .mobile-liquid-dock.is-on-dark::after { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.11), inset 0 10px 12px -12px rgba(255, 255, 255, 0.48), inset 0 -11px 13px -13px rgba(0, 0, 0, 0.30); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__rim { filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.54)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.13)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__tone { opacity: 0.78; } .mobile-liquid-dock__items { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; height: 100%; } .mobile-liquid-dock__lens { position: absolute; z-index: 1; top: 7px; bottom: 7px; left: 7px; width: calc((100% - 14px) / 5); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.32), transparent 50%), linear-gradient(135deg, rgba(79, 73, 69, 0.11), rgba(48, 43, 40, 0.06)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -1px 1px rgba(27, 24, 22, 0.08), 0 3px 7px rgba(33, 29, 26, 0.04); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); transform: translateX(calc(var(--active-index) * 100%)); transition: transform 560ms cubic-bezier(.22, 1, .36, 1), width 300ms ease; pointer-events: none; } .mobile-liquid-dock__lens::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(150deg, rgba(255, 255, 255, 0.25), transparent 46%); pointer-events: none; } .mobile-liquid-dock__lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(8, 9, 11, 0.54), rgba(20, 22, 26, 0.38)); opacity: 0; pointer-events: none; transition: opacity 620ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens { border-color: rgba(255, 255, 255, 0.20); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.18), 0 3px 7px rgba(0, 0, 0, 0.10); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens::after { opacity: 0.82; } .mobile-liquid-dock__item { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 58px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(18, 18, 19, 0.82); font: inherit; cursor: pointer; transition: color 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); appearance: none; -webkit-tap-highlight-color: transparent; } .mobile-liquid-dock__item i { position: relative; z-index: 1; display: block; font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42)); transition: transform 500ms cubic-bezier(.22, 1, .36, 1), filter 280ms ease; } .mobile-liquid-dock__item.is-active, .mobile-liquid-dock__item[aria-current="page"] { color: #111214; } .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock__item[aria-current="page"] i { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.64)) drop-shadow(0 3px 5px rgba(20, 18, 17, 0.10)); } .mobile-liquid-dock__label { display: block; max-width: 100%; overflow: hidden; color: inherit; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: -0.08px; text-overflow: ellipsis; white-space: nowrap; opacity: 0.72; transform: translateY(0); transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__item.is-active .mobile-liquid-dock__label, .mobile-liquid-dock__item[aria-current="page"] .mobile-liquid-dock__label { opacity: 1; transform: translateY(-1px); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item { color: rgba(255, 255, 255, 0.76); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] { color: #fff; } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] i { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock__item:active { transform: scale(0.88); transition-duration: 90ms; } .mobile-liquid-dock__item:focus-visible { outline: 3px solid rgba(55, 116, 223, 0.42); outline-offset: -4px; } .mobile-liquid-dock__badge { position: absolute; top: 9px; left: calc(50% + 11px); width: 8px; height: 8px; border: 1.5px solid rgba(255, 255, 255, 0.92); border-radius: 50%; background: #ff3158; box-shadow: 0 1px 5px rgba(255, 49, 88, 0.48); } .mobile-liquid-dock__badge--online { background: #20c868; box-shadow: 0 1px 5px rgba(32, 200, 104, 0.45); } .mobile-liquid-search { position: fixed; z-index: 1047; left: 50%; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); display: block; width: min(590px, calc(100% - 42px)); padding: 12px; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 26px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(250, 247, 242, 0.34)), rgba(250, 248, 244, 0.30); box-shadow: 0 14px 30px rgba(30, 26, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(50, 44, 40, 0.10); -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06); backdrop-filter: blur(32px) saturate(185%) brightness(1.06); opacity: 0; visibility: hidden; transform: translate(-50%, 14px) scale(0.96); transform-origin: 70% 100%; transition: opacity 240ms ease, visibility 240ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-search.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } .mobile-liquid-search__bar { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 9px 0 16px; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 18px; background: rgba(255, 255, 255, 0.36); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.78), inset 0 -1px 1px rgba(40, 35, 31, 0.06); } .mobile-liquid-search__bar > i { flex: 0 0 auto; color: rgba(30, 29, 29, 0.58); font-size: 20px; } .mobile-liquid-search__input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #1b1a1a; font-size: 16px; line-height: 1.2; } .mobile-liquid-search__input::placeholder { color: rgba(30, 29, 29, 0.46); } .mobile-liquid-search__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 50%; background: rgba(72, 67, 64, 0.10); color: #232222; } .mobile-liquid-search__results { display: grid; gap: 4px; max-height: min(36vh, 260px); margin: 8px 2px 0; overflow-y: auto; overscroll-behavior: contain; } .mobile-liquid-search__result, .mobile-liquid-search__empty { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; border-radius: 14px; color: #242222; font-size: 14px; line-height: 1.3; } .mobile-liquid-search__result:hover, .mobile-liquid-search__result:focus-visible { background: rgba(255, 255, 255, 0.38); } .mobile-liquid-search__result i { color: #3774df; } .mobile-liquid-search__empty { justify-content: flex-start; color: rgba(36, 34, 34, 0.62); } } @media (min-width: 1181px) { :root { --mobile-dock-bottom: 24px; --mobile-dock-height: 72px; } html { scroll-padding-bottom: 0; } body { padding-bottom: 0; } .navbar .menu-order.left-nav, .navbar .tablet-hide-header-cta { display: flex !important; } .mobile-liquid-dock { right: 24px; left: auto; bottom: var(--mobile-dock-bottom); width: 520px; height: var(--mobile-dock-height); padding: 6px; transform: translateZ(0); } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 60px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 10px); } .mobile-liquid-search { right: 24px; left: auto; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); width: 520px; transform: translate(0, 14px) scale(0.96); transform-origin: 100% 100%; } .mobile-liquid-search.is-open { transform: translate(0, 0) scale(1); } } @media (max-width: 1180px) { .is-nav-dark { position: relative; overflow: visible !important; } .is-nav-dark::after { content: ""; position: absolute; z-index: 0; top: calc(100% - 1px); right: 0; left: 0; height: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 25px); background: #151515; pointer-events: none; } } @media (max-width: 420px) { :root { --mobile-dock-height: 74px; } .mobile-liquid-dock { width: calc(100% - 20px); padding: 6px; } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 54px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 9px); } } /* Claverio pointer-fluid effect, adapted to this page's hero/footer. */ .clv-fluid-hero, .clv-fluid-footer { position: relative; isolation: isolate; } .clv-fluid-hero { contain: layout paint; } .clv-fluid-hero::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-image: radial-gradient(circle, rgba(24, 24, 22, 0.18) 0.7px, transparent 0.95px); background-position: center; background-size: 10px 10px; opacity: 0.42; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); } .clv-fluid-footer { overflow: hidden; background-color: #050910 !important; background-image: none !important; } .clv-fluid-footer::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-color: #050910; background-image: radial-gradient(circle, rgba(237, 243, 254, 0.075) 1px, transparent 1.25px); background-position: center; background-size: 7px 7px; transition: opacity 160ms linear; } .clv-fluid-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; } .clv-fluid-canvas { display: block; width: 100%; height: 100%; pointer-events: none; } .clv-fluid-hero > .clv-fluid-layer-overlay { inset: 0; z-index: 2; background: transparent; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform; } .clv-fluid-footer > .container-fluid { position: relative; } .clv-fluid-copy-column, .clv-fluid-foreground { position: relative; z-index: 3; } /* Avoid re-blurring an animated WebGL surface every frame. The existing glass gradients, rim, refraction and shadows remain. */ .clv-fluid-hero.clv-fluid-ready .claverio-button.primary, .clv-fluid-hero.clv-fluid-ready .claverio-button.icon, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass--sonar .video-icon-sonar-bfr { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .clv-fluid-hero .animation-rotation, .clv-fluid-hero .animation-rotation-slow { backface-visibility: hidden; will-change: transform; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 0 !important; } .clv-fluid-footer > .clv-fluid-layer-dark { z-index: 0; background: #050910; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 0; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer .clv-footer-logo-aberration { position: relative; display: inline-block; isolation: isolate; } .clv-fluid-footer .clv-footer-logo-aberration > img:not(.clv-footer-logo-channel) { position: relative; z-index: 2; } .clv-fluid-footer .clv-footer-logo-channel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-height: none; opacity: 0; pointer-events: none; transform-origin: center; will-change: transform, opacity; } .clv-fluid-footer .clv-footer-logo-cyan { filter: brightness(0) saturate(100%) invert(80%) sepia(93%) saturate(2806%) hue-rotate(141deg) brightness(102%) contrast(105%); } .clv-fluid-footer .clv-footer-logo-magenta { filter: brightness(0) saturate(100%) invert(42%) sepia(94%) saturate(2748%) hue-rotate(316deg) brightness(104%) contrast(101%); } .clv-ecosystem-section { position: relative; overflow: hidden; padding: 90px 0; border-top: 1px solid rgba(32, 32, 32, 0.10); border-bottom: 1px solid rgba(32, 32, 32, 0.10); background: #fbfaf7; } .clv-ecosystem-eyebrow, .clv-ecosystem-card__label { color: #326fdf; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 18px; text-transform: uppercase; } .clv-ecosystem-title { max-width: 620px; margin: 16px 0 20px; font-size: clamp(40px, 4vw, 56px); line-height: 1.08; letter-spacing: -0.035em; } .clv-ecosystem-copy { max-width: 560px; margin: 0; color: #51545b; font-size: 18px; line-height: 1.65; } .clv-ecosystem-card { position: relative; z-index: 1; display: flex; min-height: 260px; padding: 40px; flex-direction: column; align-items: flex-start; border: 1px solid rgba(32, 32, 32, 0.10); border-radius: 20px; background: #ffffff; box-shadow: 0 24px 60px rgba(28, 32, 38, 0.08); transition: box-shadow 300ms ease, transform 300ms ease; } .clv-ecosystem-card:hover, .clv-ecosystem-card:focus-visible { box-shadow: 0 30px 70px rgba(28, 32, 38, 0.12); transform: translateY(-4px); } .clv-ecosystem-card__logo { display: block; width: 215px; height: auto; margin-top: 20px; } .clv-ecosystem-card__footer { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 26px; border-top: 1px solid rgba(32, 32, 32, 0.10); color: var(--dark-gray); font-size: 15px; font-weight: 500; } /* Universal Apple-style Liquid Glass material for content containers. */ .claverio-glass-container { --container-glass-radius: 15px; --container-glass-blur: 30px; --container-glass-x: 22%; --container-glass-y: 10%; --container-edge-x: 18%; --container-edge-y: 0%; --container-glass-tint: rgba(246, 244, 240, 0.14); position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: var(--container-glass-radius); background: linear-gradient(118deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.13) 46%, rgba(255, 255, 255, 0.25)), var(--container-glass-tint); background-clip: padding-box; box-shadow: 0 9px 22px rgba(30, 27, 24, 0.045), 0 1px 5px rgba(30, 27, 24, 0.03), inset 0 1px 0.5px rgba(255, 255, 255, 0.84), inset 0 -1px 0.5px rgba(51, 45, 40, 0.10), inset 1px 0 0.5px rgba(255, 255, 255, 0.46), inset -1px 0 0.5px rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(var(--container-glass-blur)) saturate(185%) contrast(103%) brightness(1.07); backdrop-filter: blur(var(--container-glass-blur)) saturate(185%) contrast(103%) brightness(1.07); transform: translateZ(0); -webkit-tap-highlight-color: transparent; transition: border-color 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms cubic-bezier(.16, 1, .3, 1), background-color 520ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container::before { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: calc(var(--container-glass-radius) - 1px); background: radial-gradient(135% 110% at 50% 38%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025) 61%, rgba(255, 255, 255, 0.09)), radial-gradient(128px 88px at var(--container-edge-x) var(--container-edge-y), rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.13) 40%, transparent 76%), radial-gradient(172px 112px at var(--container-glass-x) var(--container-glass-y), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 46%, transparent 80%), radial-gradient(190px 116px at calc(var(--container-glass-x) - 66px) calc(var(--container-glass-y) + 36px), rgba(255, 135, 91, 0.10), transparent 74%), radial-gradient(194px 118px at calc(var(--container-glass-x) + 70px) calc(var(--container-glass-y) - 34px), rgba(255, 220, 119, 0.11), transparent 74%), radial-gradient(186px 114px at calc(var(--container-glass-x) + 80px) calc(var(--container-glass-y) + 40px), rgba(120, 188, 255, 0.12), transparent 74%), linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(255, 255, 255, 0.035) 68%, rgba(55, 48, 43, 0.025)); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.34), inset 0 12px 15px -17px rgba(255, 255, 255, 0.90), inset 0 -8px 12px -14px rgba(41, 35, 31, 0.12); opacity: 0.64; pointer-events: none; transition: opacity 460ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container::after { content: ""; position: absolute; z-index: 5; inset: -1px; padding: 1.8px; border-radius: inherit; background: radial-gradient(124px 58px at var(--container-edge-x) var(--container-edge-y), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.78) 38%, transparent 79%), radial-gradient(112px 52px at calc(var(--container-edge-x) - 13px) calc(var(--container-edge-y) + 4px), rgba(255, 195, 92, 0.76), transparent 73%), radial-gradient(112px 52px at calc(var(--container-edge-x) + 14px) calc(var(--container-edge-y) - 4px), rgba(91, 171, 255, 0.68), transparent 73%), conic-gradient(from 128deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.10) 25%, rgba(38, 34, 31, 0.09) 50%, rgba(255, 255, 255, 0.11) 75%, rgba(255, 255, 255, 0.62)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.52)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)) drop-shadow(0 1.5px 2px rgba(32, 28, 25, 0.075)); opacity: 0.64; pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container > :not(.position-absolute) { position: relative; z-index: 2; } .claverio-glass-container:hover, .claverio-glass-container:focus-visible, .claverio-glass-container.is-glass-hovered { border-color: rgba(255, 255, 255, 0.82); box-shadow: 0 10px 24px rgba(30, 27, 24, 0.05), 0 1px 5px rgba(30, 27, 24, 0.03), inset 0 1px 0.5px rgba(255, 255, 255, 0.90), inset 0 -1px 0.5px rgba(51, 45, 40, 0.11), inset 1px 0 0.5px rgba(255, 255, 255, 0.50), inset -1px 0 0.5px rgba(255, 255, 255, 0.30); transform: translateZ(0); } .claverio-glass-container:hover::before, .claverio-glass-container:focus-visible::before, .claverio-glass-container.is-glass-hovered::before { opacity: 1; } .claverio-glass-container:hover::after, .claverio-glass-container:focus-visible::after, .claverio-glass-container.is-glass-hovered::after { opacity: 1; } .claverio-glass-container:focus-visible { outline: 3px solid rgba(55, 116, 223, 0.24); outline-offset: 4px; } .claverio-glass-container--compact { --container-glass-radius: 15px; --container-glass-blur: 32px; --container-glass-tint: rgba(248, 247, 244, 0.16); } .claverio-glass-container--metric { --container-glass-radius: 15px; --container-glass-blur: 30px; --container-glass-tint: rgba(248, 247, 244, 0.14); } .claverio-glass-container--service { --container-glass-radius: 15px; --container-glass-blur: 34px; --container-glass-tint: rgba(246, 244, 240, 0.12); } .claverio-glass-container--ecosystem { --container-glass-radius: 20px; --container-glass-blur: 32px; --container-glass-tint: rgba(246, 244, 240, 0.13); } .claverio-glass-container--accent { --container-glass-radius: 15px; --container-glass-blur: 28px; --container-glass-tint: rgba(39, 101, 218, 0.46); border-color: rgba(218, 237, 255, 0.48); background: radial-gradient(120% 100% at 18% 0%, rgba(255, 255, 255, 0.08), transparent 56%), linear-gradient(142deg, rgba(75, 137, 232, 0.69), rgba(40, 98, 210, 0.60)), var(--container-glass-tint); box-shadow: 0 7px 16px rgba(30, 73, 148, 0.08), 0 1px 4px rgba(24, 61, 127, 0.055), inset 0 1px 0.5px rgba(255, 255, 255, 0.56), inset 0 -1px 0.5px rgba(12, 50, 121, 0.18), inset 1px 0 0.5px rgba(255, 255, 255, 0.20), inset -1px 0 0.5px rgba(193, 226, 255, 0.16); -webkit-backdrop-filter: blur(var(--container-glass-blur)) saturate(185%) contrast(104%) brightness(1.08); backdrop-filter: blur(var(--container-glass-blur)) saturate(185%) contrast(104%) brightness(1.08); } .claverio-glass-container--accent::before { background: radial-gradient(135% 110% at 50% 38%, rgba(255, 255, 255, 0.055), transparent 66%), radial-gradient(128px 88px at var(--container-edge-x) var(--container-edge-y), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.045) 42%, transparent 77%), radial-gradient(172px 112px at var(--container-glass-x) var(--container-glass-y), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.025) 48%, transparent 81%), radial-gradient(190px 116px at calc(var(--container-glass-x) - 66px) calc(var(--container-glass-y) + 36px), rgba(255, 132, 91, 0.08), transparent 74%), radial-gradient(194px 118px at calc(var(--container-glass-x) + 70px) calc(var(--container-glass-y) - 34px), rgba(255, 220, 119, 0.08), transparent 74%), radial-gradient(186px 114px at calc(var(--container-glass-x) + 80px) calc(var(--container-glass-y) + 40px), rgba(104, 181, 255, 0.11), transparent 74%); opacity: 0.36; } .claverio-glass-container--accent::after { background: radial-gradient(124px 58px at var(--container-edge-x) var(--container-edge-y), rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.27) 38%, transparent 79%), radial-gradient(112px 52px at calc(var(--container-edge-x) - 13px) calc(var(--container-edge-y) + 4px), rgba(255, 190, 87, 0.66), transparent 73%), radial-gradient(112px 52px at calc(var(--container-edge-x) + 14px) calc(var(--container-edge-y) - 4px), rgba(83, 167, 255, 0.62), transparent 73%), conic-gradient(from 128deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.07) 25%, rgba(19, 54, 127, 0.11) 50%, rgba(255, 255, 255, 0.07) 75%, rgba(255, 255, 255, 0.34)); opacity: 0.44; } .claverio-glass-container--accent:hover, .claverio-glass-container--accent:focus-visible, .claverio-glass-container--accent.is-glass-hovered { border-color: rgba(235, 246, 255, 0.66); box-shadow: 0 8px 17px rgba(30, 73, 148, 0.085), 0 1px 4px rgba(24, 61, 127, 0.055), inset 0 1px 0.5px rgba(255, 255, 255, 0.64), inset 0 -1px 0.5px rgba(12, 50, 121, 0.19), inset 1px 0 0.5px rgba(255, 255, 255, 0.23), inset -1px 0 0.5px rgba(193, 226, 255, 0.19); } .claverio-glass-container--accent:hover::before, .claverio-glass-container--accent:focus-visible::before, .claverio-glass-container--accent.is-glass-hovered::before { opacity: 0.70; } .claverio-glass-container--accent:hover::after, .claverio-glass-container--accent:focus-visible::after, .claverio-glass-container--accent.is-glass-hovered::after { opacity: 0.76; } .claverio-glass-container.is-glass-idle::before { opacity: 0.18; } .claverio-glass-container.is-glass-idle::after { opacity: 0.24; } .claverio-glass-container--accent.is-glass-idle::before { opacity: 0.12; } .claverio-glass-container--accent.is-glass-idle::after { opacity: 0.16; } .clv-product-selector-hint { display: block; margin-top: 32px; color: rgba(255, 255, 255, 0.68); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 18px; text-transform: uppercase; } .clv-product-selector { width: min(100%, 480px); } .clv-product-selector .nav-item { width: 100%; margin-bottom: 0 !important; } .clv-product-selector .nav-link { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0 !important; box-shadow: inset 0 -1px rgba(255, 255, 255, 0.22); } .clv-product-selector .nav-link::after { content: "\2197"; flex: 0 0 auto; font-family: Arial, sans-serif; font-size: 28px; font-weight: 400; line-height: 1; opacity: 0.62; transition: opacity 250ms ease, transform 250ms ease; } .clv-product-selector .nav-link.active { box-shadow: inset 0 -2px #ffffff; } .clv-product-selector .nav-link.active::after, .clv-product-selector .nav-link:hover::after, .clv-product-selector .nav-link:focus-visible::after { opacity: 1; transform: translate(2px, -2px); } @media (max-width: 767px), (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .clv-fluid-layer { display: none; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 1 !important; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: revert !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 1; } .clv-fluid-footer .clv-footer-logo-channel { display: none; } } @media (max-width: 575px) { .clv-ecosystem-section { padding: 60px 0; } .clv-ecosystem-title { margin: 14px 0 18px; font-size: 36px; line-height: 1.08; } .clv-ecosystem-copy { font-size: 17px; line-height: 1.6; } .clv-ecosystem-card { min-height: 220px; margin-top: 32px; padding: 28px; border-radius: 16px; } .clv-ecosystem-card__logo { width: 190px; margin-top: 16px; } .clv-proof-strip .vertical-counter { display: none !important; } .clv-proof-strip .clv-stat-static { display: inline !important; } .clv-product-selector-hint { margin-top: 30px; } .clv-product-selector { margin-top: 8px !important; } .clv-product-selector .nav-link::after { font-size: 24px; } .clv-path-selector .path-table-header { display: none; } .clv-path-selector .services-box-style-09 { display: block; padding: 28px 20px !important; } .clv-path-selector .services-box-style-09 > div.col-sm { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 4px 0; text-align: left !important; } .clv-path-selector .services-box-style-09 > div.col-sm::before { color: #707070; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 21px; text-transform: uppercase; } .clv-path-selector .services-box-style-09 > div.col-sm:nth-of-type(1) { display: block; margin-bottom: 8px; padding: 0 40px 14px 0; border-bottom: 1px solid rgba(21, 21, 21, 0.12); } .clv-path-selector .services-box-style-09 > div.col-sm:nth-of-type(1) .reveal-title { font-size: 19px; font-weight: 500; } .clv-path-selector .services-box-style-09 > div.col-sm:nth-of-type(2)::before { content: "Path"; } .clv-path-selector .services-box-style-09 > div.col-sm:nth-of-type(3)::before { content: "Delivery"; } .clv-path-selector .services-box-style-09 > div.col-sm:nth-of-type(4)::before { content: "Next"; } .clv-path-selector .services-box-style-09 > .col-sm-1 { position: absolute; top: 27px; right: 20px; width: auto; } } @media (prefers-reduced-motion: reduce) { .claverio-button.primary, .claverio-button.primary::before, .claverio-button.icon, .claverio-button.icon::before, .claverio-button__icon, .claverio-button__icon i, .claverio-play-glass, .claverio-play-glass::before, .claverio-glass-container, .claverio-glass-container::before, .claverio-glass-container::after, .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after, .mobile-liquid-dock__lens, .mobile-liquid-dock__item, .mobile-liquid-dock__item i, .mobile-liquid-search { transition-duration: 0.01ms !important; } } /* projects */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .marquee-warm-text, [class*="-title"] { font-family: "Funnel Display", sans-serif !important; } body { background-color: #fbfaf7; } .hero-shell { display: flow-root; background: linear-gradient( to bottom, rgba(55, 116, 223, 0.026) 0%, rgba(55, 116, 223, 0.026) 30%, rgba(55, 116, 223, 0.008) 66%, rgba(55, 116, 223, 0) 100% ); background-size: 100% clamp(240px, 28vw, 360px); background-repeat: no-repeat; } header .navbar { background-color: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } .marquee-warm-text { display: inline-block; width: max-content; background-image: linear-gradient( to bottom, rgba(20, 20, 20, 0.04) 0%, rgba(20, 20, 20, 0.14) 50%, rgba(20, 20, 20, 0.04) 100% ); line-height: 1.1; padding-top: 12px; padding-bottom: 28px; will-change: transform; } .claverio-button.primary, .claverio-button.icon, .claverio-play-glass { --glass-x: 50%; --glass-y: 50%; --edge-x: 50%; --edge-y: 0px; --content-x: 0px; --content-y: 0px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 27px; overflow: hidden; color: #171717; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.2px; border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 7px 16px rgba(28, 24, 21, 0.06), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(69, 59, 52, 0.12), inset 1px 0 1px rgba(255, 255, 255, 0.62), inset -1px 0 1px rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateZ(0) scale(1); transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 450ms cubic-bezier(.16, 1, .3, 1), background-color 500ms cubic-bezier(.16, 1, .3, 1), border-color 500ms cubic-bezier(.16, 1, .3, 1), color 250ms ease; } .claverio-play-glass { flex: 0 0 60px; width: 60px; height: 60px; min-height: 60px; padding: 0; gap: 0; } .claverio-button.icon { flex: 0 0 90px; justify-content: center; width: 90px; height: 90px; min-height: 90px; padding: 0; gap: 0; } .claverio-button.icon > i { position: relative; z-index: 2; margin: 0; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary.claverio-button--compact { min-height: 40px; padding: 0 17px; gap: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.45px; text-transform: uppercase; } .claverio-play-glass i { position: relative; z-index: 2; margin-left: 2px; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-play-glass--sonar { overflow: visible; } .claverio-play-glass--sonar .video-icon-sonar .video-icon-sonar-bfr { border: 1px solid rgba(255, 255, 255, 0.44); background: rgba(255, 255, 255, 0.13) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.52); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .claverio-button.primary::before, .claverio-button.icon::before, .claverio-play-glass::before { content: ""; position: absolute; z-index: 1; inset: -1px; padding: 1.5px; border-radius: inherit; background: radial-gradient(54px 30px at var(--edge-x) var(--edge-y), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 18%, rgba(255, 255, 255, 0.34) 46%, transparent 75%), radial-gradient(46px 24px at calc(var(--edge-x) - 7px) calc(var(--edge-y) + 2px), rgba(255, 213, 128, 0.48), transparent 72%), radial-gradient(46px 24px at calc(var(--edge-x) + 8px) calc(var(--edge-y) - 2px), rgba(139, 202, 255, 0.42), transparent 72%), linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.14) 44%, rgba(62, 56, 51, 0.1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.46; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)); transition: opacity 380ms cubic-bezier(.16, 1, .3, 1); } .claverio-button.primary::after, .claverio-button.icon::after, .claverio-play-glass::after { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: inherit; background: radial-gradient(76px 16px at 50% 100%, rgba(40, 34, 30, 0.032), transparent 74%), radial-gradient(88px 56px at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.46), transparent 72%), radial-gradient(112px 66px at calc(var(--glass-x) - 58px) calc(var(--glass-y) + 34px), rgba(255, 128, 91, 0.13), transparent 74%), radial-gradient(112px 66px at calc(var(--glass-x) + 62px) calc(var(--glass-y) - 34px), rgba(255, 228, 137, 0.14), transparent 74%), radial-gradient(108px 64px at calc(var(--glass-x) + 72px) calc(var(--glass-y) + 31px), rgba(151, 199, 255, 0.12), transparent 74%), linear-gradient(180deg, transparent 48%, rgba(48, 41, 36, 0.028) 79%, rgba(255, 255, 255, 0.11) 100%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.60), inset 0 9px 11px -12px rgba(255, 255, 255, 0.96), inset 0 -4px 5px -5px rgba(37, 31, 27, 0.12), inset -3px 0 4px -5px rgba(37, 31, 27, 0.07); opacity: 0.64; pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .claverio-button__icon { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #252742; transform: translate3d(var(--content-x), var(--content-y), 0); transition: color 350ms ease; } .claverio-button__icon::before { content: none; } .claverio-button__icon i { position: relative; z-index: 1; font-size: 18px; } .claverio-button__label { position: relative; z-index: 2; white-space: nowrap; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary:hover, .claverio-button.primary.is-hovered, .claverio-button.icon:hover, .claverio-button.icon.is-hovered, .claverio-play-glass:hover, .claverio-play-glass.is-hovered { color: #111; border-color: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 18px rgba(28, 24, 21, 0.065), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.98), inset 0 -1px 1px rgba(69, 59, 52, 0.13), inset 1px 0 1px rgba(255, 255, 255, 0.68), inset -1px 0 1px rgba(255, 255, 255, 0.42); } .claverio-button.primary:hover::before, .claverio-button.primary.is-hovered::before, .claverio-button.icon:hover::before, .claverio-button.icon.is-hovered::before, .claverio-play-glass:hover::before, .claverio-play-glass.is-hovered::before { opacity: 1; } .claverio-button.primary:hover::after, .claverio-button.primary.is-hovered::after, .claverio-button.icon:hover::after, .claverio-button.icon.is-hovered::after, .claverio-play-glass:hover::after, .claverio-play-glass.is-hovered::after { opacity: 0.9; } .claverio-button.primary:hover .claverio-button__icon, .claverio-button.primary.is-hovered .claverio-button__icon { color: #252742; } .claverio-button.primary:active, .claverio-button.icon:active, .claverio-play-glass:active { transform: translateZ(0) scale(0.985); transition-duration: 90ms; } .claverio-button.primary.is-pressed, .claverio-button.icon.is-pressed, .claverio-play-glass.is-pressed { transform: translateZ(0) scale(0.985); } .claverio-button.primary:focus-visible, .claverio-button.icon:focus-visible, .claverio-play-link:focus-visible .claverio-play-glass { outline: 3px solid rgba(55, 116, 223, 0.28); outline-offset: 4px; } /* Mobile + tablet liquid glass dock */ .mobile-liquid-dock, .mobile-liquid-search { display: none; } @media all { :root { --mobile-dock-bottom: max(14px, env(safe-area-inset-bottom)); --mobile-dock-height: 80px; } html { scroll-padding-bottom: 124px; } body { padding-bottom: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 24px); } .navbar .menu-order.left-nav { display: none !important; } .navbar .tablet-hide-header-cta { display: none !important; } .mobile-liquid-dock { --active-index: 0; --rim-x: 18%; --rim-y: 0%; --rim-shadow-x: 82%; --rim-shadow-y: 100%; --rim-angle: 112deg; --rim-energy: 0.70; --rim-dark-boost: 1; position: fixed; z-index: 1048; left: 50%; bottom: var(--mobile-dock-bottom); display: block; width: min(620px, calc(100% - 28px)); height: var(--mobile-dock-height); padding: 7px; border: 0; border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 15px 30px rgba(28, 24, 21, 0.105), 0 4px 10px rgba(28, 24, 21, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -1px 0 rgba(35, 31, 28, 0.085); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateX(-50%) translateZ(0); isolation: isolate; overflow: visible; -webkit-tap-highlight-color: transparent; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(110px 72px at 12% -8%, rgba(255, 255, 255, 0.72), transparent 70%), radial-gradient(170px 90px at 30% 112%, rgba(255, 128, 91, 0.12), transparent 72%), radial-gradient(180px 92px at 70% -14%, rgba(255, 228, 137, 0.14), transparent 72%), radial-gradient(160px 85px at 92% 105%, rgba(151, 199, 255, 0.11), transparent 72%), linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.12)); opacity: 0.84; pointer-events: none; } .mobile-liquid-dock::after { content: ""; position: absolute; z-index: 4; inset: 1px; border-radius: inherit; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), inset 0 10px 12px -12px rgba(255, 255, 255, 0.62), inset 0 -11px 13px -13px rgba(27, 24, 22, 0.22); pointer-events: none; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__tone { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(12, 13, 16, 0.82), rgba(25, 27, 31, 0.68) 48%, rgba(9, 10, 13, 0.78)), rgba(10, 11, 14, 0.70); opacity: 0; pointer-events: none; transition: opacity 720ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after { position: absolute; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .mobile-liquid-dock__rim { z-index: 6; inset: -1px; padding: 1.35px; background: conic-gradient( from var(--rim-angle), rgba(255, 255, 255, 0.72) 0deg, rgba(255, 255, 255, 0.19) 42deg, rgba(255, 255, 255, 0.045) 100deg, rgba(18, 18, 20, 0.14) 168deg, rgba(18, 18, 20, 0.045) 220deg, rgba(255, 255, 255, 0.11) 278deg, rgba(255, 255, 255, 0.58) 340deg, rgba(255, 255, 255, 0.72) 360deg ); filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.42)) drop-shadow(0 2px 3px rgba(24, 21, 19, 0.075)); opacity: 0.88; transform: translateZ(0); transition: filter 680ms cubic-bezier(.22, 1, .36, 1), opacity 680ms ease; } .mobile-liquid-dock__rim::before { content: ""; inset: 0; padding: 1.8px; background: radial-gradient( 150px 62px at var(--rim-x) var(--rim-y), rgb(255 255 255 / calc(0.58 * var(--rim-energy) * var(--rim-dark-boost))), rgb(255 255 255 / calc(0.17 * var(--rim-energy))) 45%, transparent 78% ); filter: blur(0.15px); mix-blend-mode: screen; } .mobile-liquid-dock__rim::after { content: ""; inset: 0; padding: 1.45px; background: radial-gradient( 185px 76px at var(--rim-shadow-x) var(--rim-shadow-y), rgb(11 12 14 / calc(0.18 * var(--rim-energy))), rgb(11 12 14 / calc(0.05 * var(--rim-energy))) 50%, transparent 78% ); mix-blend-mode: multiply; } .mobile-liquid-dock.is-on-dark { --rim-dark-boost: 1.06; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), 0 4px 11px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } .mobile-liquid-dock.is-on-dark::after { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.11), inset 0 10px 12px -12px rgba(255, 255, 255, 0.48), inset 0 -11px 13px -13px rgba(0, 0, 0, 0.30); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__rim { filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.54)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.13)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__tone { opacity: 0.78; } .mobile-liquid-dock__items { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; height: 100%; } .mobile-liquid-dock__lens { position: absolute; z-index: 1; top: 7px; bottom: 7px; left: 7px; width: calc((100% - 14px) / 5); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.32), transparent 50%), linear-gradient(135deg, rgba(79, 73, 69, 0.11), rgba(48, 43, 40, 0.06)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -1px 1px rgba(27, 24, 22, 0.08), 0 3px 7px rgba(33, 29, 26, 0.04); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); transform: translateX(calc(var(--active-index) * 100%)); transition: transform 560ms cubic-bezier(.22, 1, .36, 1), width 300ms ease; pointer-events: none; } .mobile-liquid-dock__lens::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(150deg, rgba(255, 255, 255, 0.25), transparent 46%); pointer-events: none; } .mobile-liquid-dock__lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(8, 9, 11, 0.54), rgba(20, 22, 26, 0.38)); opacity: 0; pointer-events: none; transition: opacity 620ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens { border-color: rgba(255, 255, 255, 0.20); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.18), 0 3px 7px rgba(0, 0, 0, 0.10); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens::after { opacity: 0.82; } .mobile-liquid-dock__item { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 58px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(18, 18, 19, 0.82); font: inherit; cursor: pointer; transition: color 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); appearance: none; -webkit-tap-highlight-color: transparent; } .mobile-liquid-dock__item i { position: relative; z-index: 1; display: block; font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42)); transition: transform 500ms cubic-bezier(.22, 1, .36, 1), filter 280ms ease; } .mobile-liquid-dock__item.is-active, .mobile-liquid-dock__item[aria-current="page"] { color: #111214; } .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock__item[aria-current="page"] i { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.64)) drop-shadow(0 3px 5px rgba(20, 18, 17, 0.10)); } .mobile-liquid-dock__label { display: block; max-width: 100%; overflow: hidden; color: inherit; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: -0.08px; text-overflow: ellipsis; white-space: nowrap; opacity: 0.72; transform: translateY(0); transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__item.is-active .mobile-liquid-dock__label, .mobile-liquid-dock__item[aria-current="page"] .mobile-liquid-dock__label { opacity: 1; transform: translateY(-1px); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item { color: rgba(255, 255, 255, 0.76); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] { color: #fff; } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] i { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock__item:active { transform: scale(0.88); transition-duration: 90ms; } .mobile-liquid-dock__item:focus-visible { outline: 3px solid rgba(55, 116, 223, 0.42); outline-offset: -4px; } .mobile-liquid-dock__badge { position: absolute; top: 9px; left: calc(50% + 11px); width: 8px; height: 8px; border: 1.5px solid rgba(255, 255, 255, 0.92); border-radius: 50%; background: #ff3158; box-shadow: 0 1px 5px rgba(255, 49, 88, 0.48); } .mobile-liquid-dock__badge--online { background: #20c868; box-shadow: 0 1px 5px rgba(32, 200, 104, 0.45); } .mobile-liquid-search { position: fixed; z-index: 1047; left: 50%; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); display: block; width: min(590px, calc(100% - 42px)); padding: 12px; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 26px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(250, 247, 242, 0.34)), rgba(250, 248, 244, 0.30); box-shadow: 0 14px 30px rgba(30, 26, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(50, 44, 40, 0.10); -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06); backdrop-filter: blur(32px) saturate(185%) brightness(1.06); opacity: 0; visibility: hidden; transform: translate(-50%, 14px) scale(0.96); transform-origin: 70% 100%; transition: opacity 240ms ease, visibility 240ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-search.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } .mobile-liquid-search__bar { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 9px 0 16px; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 18px; background: rgba(255, 255, 255, 0.36); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.78), inset 0 -1px 1px rgba(40, 35, 31, 0.06); } .mobile-liquid-search__bar > i { flex: 0 0 auto; color: rgba(30, 29, 29, 0.58); font-size: 20px; } .mobile-liquid-search__input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #1b1a1a; font-size: 16px; line-height: 1.2; } .mobile-liquid-search__input::placeholder { color: rgba(30, 29, 29, 0.46); } .mobile-liquid-search__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 50%; background: rgba(72, 67, 64, 0.10); color: #232222; } .mobile-liquid-search__results { display: grid; gap: 4px; max-height: min(36vh, 260px); margin: 8px 2px 0; overflow-y: auto; overscroll-behavior: contain; } .mobile-liquid-search__result, .mobile-liquid-search__empty { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; border-radius: 14px; color: #242222; font-size: 14px; line-height: 1.3; } .mobile-liquid-search__result:hover, .mobile-liquid-search__result:focus-visible { background: rgba(255, 255, 255, 0.38); } .mobile-liquid-search__result i { color: #3774df; } .mobile-liquid-search__empty { justify-content: flex-start; color: rgba(36, 34, 34, 0.62); } } @media (min-width: 1181px) { :root { --mobile-dock-bottom: 24px; --mobile-dock-height: 72px; } html { scroll-padding-bottom: 0; } body { padding-bottom: 0; } .navbar .menu-order.left-nav, .navbar .tablet-hide-header-cta { display: flex !important; } .mobile-liquid-dock { right: 24px; left: auto; bottom: var(--mobile-dock-bottom); width: 520px; height: var(--mobile-dock-height); padding: 6px; transform: translateZ(0); } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 60px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 10px); } .mobile-liquid-search { right: 24px; left: auto; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); width: 520px; transform: translate(0, 14px) scale(0.96); transform-origin: 100% 100%; } .mobile-liquid-search.is-open { transform: translate(0, 0) scale(1); } } @media (max-width: 1180px) { .is-nav-dark { position: relative; overflow: visible !important; } .is-nav-dark::after { content: ""; position: absolute; z-index: 0; top: calc(100% - 1px); right: 0; left: 0; height: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 25px); background: #151515; pointer-events: none; } } @media (max-width: 420px) { :root { --mobile-dock-height: 74px; } .mobile-liquid-dock { width: calc(100% - 20px); padding: 6px; } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 54px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 9px); } } /* Claverio pointer-fluid effect, adapted to this page's hero/footer. */ .clv-fluid-hero, .clv-fluid-title-surface, .clv-fluid-footer { position: relative; isolation: isolate; } .clv-fluid-hero, .clv-fluid-title-surface { contain: layout paint; } .clv-fluid-hero::before, .clv-fluid-title-surface::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-image: radial-gradient(circle, rgba(24, 24, 22, 0.18) 0.7px, transparent 0.95px); background-position: center; background-size: 10px 10px; opacity: 0.42; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); } .clv-fluid-footer { overflow: hidden; background-color: #050910 !important; background-image: none !important; } .clv-fluid-footer::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-color: #050910; background-image: radial-gradient(circle, rgba(237, 243, 254, 0.075) 1px, transparent 1.25px); background-position: center; background-size: 7px 7px; transition: opacity 160ms linear; } .clv-fluid-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; } .clv-fluid-canvas { display: block; width: 100%; height: 100%; pointer-events: none; } .clv-fluid-hero > .clv-fluid-layer-overlay, .clv-fluid-title-surface > .clv-fluid-layer-overlay { inset: 0; z-index: 2; background: transparent; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform; } .clv-fluid-footer > .container-fluid { position: relative; } .clv-fluid-copy-column, .clv-fluid-title-surface > .container, .clv-fluid-foreground { position: relative; z-index: 3; } /* Avoid re-blurring an animated WebGL surface every frame. The existing glass gradients, rim, refraction and shadows remain. */ .clv-fluid-hero.clv-fluid-ready .claverio-button.primary, .clv-fluid-hero.clv-fluid-ready .claverio-button.icon, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass--sonar .video-icon-sonar-bfr { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .clv-fluid-hero .animation-rotation, .clv-fluid-hero .animation-rotation-slow { backface-visibility: hidden; will-change: transform; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 0 !important; } .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title, .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer > .clv-fluid-layer-dark { z-index: 0; background: #050910; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 0; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer .clv-footer-logo-aberration { position: relative; display: inline-block; isolation: isolate; } .clv-fluid-footer .clv-footer-logo-aberration > img:not(.clv-footer-logo-channel) { position: relative; z-index: 2; } .clv-fluid-footer .clv-footer-logo-channel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-height: none; opacity: 0; pointer-events: none; transform-origin: center; will-change: transform, opacity; } .clv-fluid-footer .clv-footer-logo-cyan { filter: brightness(0) saturate(100%) invert(80%) sepia(93%) saturate(2806%) hue-rotate(141deg) brightness(102%) contrast(105%); } .clv-fluid-footer .clv-footer-logo-magenta { filter: brightness(0) saturate(100%) invert(42%) sepia(94%) saturate(2748%) hue-rotate(316deg) brightness(104%) contrast(101%); } @media (max-width: 767px), (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .clv-fluid-layer { display: none; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 1 !important; } .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title, .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: revert !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 1; } .clv-fluid-footer .clv-footer-logo-channel { display: none; } } @media (prefers-reduced-motion: reduce) { .claverio-button.primary, .claverio-button.primary::before, .claverio-button.icon, .claverio-button.icon::before, .claverio-button__icon, .claverio-button__icon i, .claverio-play-glass, .claverio-play-glass::before, .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after, .mobile-liquid-dock__lens, .mobile-liquid-dock__item, .mobile-liquid-dock__item i, .mobile-liquid-search { transition-duration: 0.01ms !important; } } .clv-projects-breadcrumb { min-height: 520px; padding-bottom: 90px !important; overflow: hidden; } .clv-projects-breadcrumb-title { font-family: "Funnel Display", sans-serif !important; } .clv-projects-breadcrumb .page-title-extra-large { isolation: isolate; } .clv-projects-breadcrumb-heading { position: relative; z-index: 1; } .clv-projects-breadcrumb-heading .clv-projects-breadcrumb-title { position: relative; z-index: 1; } .clv-projects-breadcrumb .page-title-extra-large > .clv-breadcrumb-blue-mesh { top: 0; right: -5vw; left: auto; width: clamp(260px, 25vw, 420px) !important; transform-origin: top right; z-index: 0; } .clv-breadcrumb-blue-mesh { opacity: .34; pointer-events: none; } .clv-breadcrumb-brand-badge { width: 96px; height: 96px; object-fit: contain; } @media (max-width: 767px) { .clv-projects-breadcrumb { min-height: 460px; padding-bottom: 70px !important; } } /* services */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .marquee-warm-text, [class*="-title"] { font-family: "Funnel Display", sans-serif !important; } body { background-color: #fbfaf7; } .hero-shell { display: flow-root; background: linear-gradient( to bottom, rgba(55, 116, 223, 0.026) 0%, rgba(55, 116, 223, 0.026) 30%, rgba(55, 116, 223, 0.008) 66%, rgba(55, 116, 223, 0) 100% ); background-size: 100% clamp(240px, 28vw, 360px); background-repeat: no-repeat; } header .navbar { background-color: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } .marquee-warm-text { display: inline-block; width: max-content; background-image: linear-gradient( to bottom, rgba(20, 20, 20, 0.04) 0%, rgba(20, 20, 20, 0.14) 50%, rgba(20, 20, 20, 0.04) 100% ); line-height: 1.1; padding-top: 12px; padding-bottom: 28px; will-change: transform; } .claverio-button.primary, .claverio-button.icon, .claverio-play-glass { --glass-x: 50%; --glass-y: 50%; --edge-x: 50%; --edge-y: 0px; --content-x: 0px; --content-y: 0px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 27px; overflow: hidden; color: #171717; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.2px; border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 7px 16px rgba(28, 24, 21, 0.06), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(69, 59, 52, 0.12), inset 1px 0 1px rgba(255, 255, 255, 0.62), inset -1px 0 1px rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateZ(0) scale(1); transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 450ms cubic-bezier(.16, 1, .3, 1), background-color 500ms cubic-bezier(.16, 1, .3, 1), border-color 500ms cubic-bezier(.16, 1, .3, 1), color 250ms ease; } .claverio-play-glass { flex: 0 0 60px; width: 60px; height: 60px; min-height: 60px; padding: 0; gap: 0; } .claverio-button.icon { flex: 0 0 90px; justify-content: center; width: 90px; height: 90px; min-height: 90px; padding: 0; gap: 0; } .claverio-button.icon > i { position: relative; z-index: 2; margin: 0; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary.claverio-button--compact { min-height: 40px; padding: 0 17px; gap: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.45px; text-transform: uppercase; } .claverio-play-glass i { position: relative; z-index: 2; margin-left: 2px; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-play-glass--sonar { overflow: visible; } .claverio-play-glass--sonar .video-icon-sonar .video-icon-sonar-bfr { border: 1px solid rgba(255, 255, 255, 0.44); background: rgba(255, 255, 255, 0.13) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.52); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .claverio-button.primary::before, .claverio-button.icon::before, .claverio-play-glass::before { content: ""; position: absolute; z-index: 1; inset: -1px; padding: 1.5px; border-radius: inherit; background: radial-gradient(54px 30px at var(--edge-x) var(--edge-y), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 18%, rgba(255, 255, 255, 0.34) 46%, transparent 75%), radial-gradient(46px 24px at calc(var(--edge-x) - 7px) calc(var(--edge-y) + 2px), rgba(255, 213, 128, 0.48), transparent 72%), radial-gradient(46px 24px at calc(var(--edge-x) + 8px) calc(var(--edge-y) - 2px), rgba(139, 202, 255, 0.42), transparent 72%), linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.14) 44%, rgba(62, 56, 51, 0.1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.46; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)); transition: opacity 380ms cubic-bezier(.16, 1, .3, 1); } .claverio-button.primary::after, .claverio-button.icon::after, .claverio-play-glass::after { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: inherit; background: radial-gradient(76px 16px at 50% 100%, rgba(40, 34, 30, 0.032), transparent 74%), radial-gradient(88px 56px at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.46), transparent 72%), radial-gradient(112px 66px at calc(var(--glass-x) - 58px) calc(var(--glass-y) + 34px), rgba(255, 128, 91, 0.13), transparent 74%), radial-gradient(112px 66px at calc(var(--glass-x) + 62px) calc(var(--glass-y) - 34px), rgba(255, 228, 137, 0.14), transparent 74%), radial-gradient(108px 64px at calc(var(--glass-x) + 72px) calc(var(--glass-y) + 31px), rgba(151, 199, 255, 0.12), transparent 74%), linear-gradient(180deg, transparent 48%, rgba(48, 41, 36, 0.028) 79%, rgba(255, 255, 255, 0.11) 100%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.60), inset 0 9px 11px -12px rgba(255, 255, 255, 0.96), inset 0 -4px 5px -5px rgba(37, 31, 27, 0.12), inset -3px 0 4px -5px rgba(37, 31, 27, 0.07); opacity: 0.64; pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .claverio-button__icon { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #252742; transform: translate3d(var(--content-x), var(--content-y), 0); transition: color 350ms ease; } .claverio-button__icon::before { content: none; } .claverio-button__icon i { position: relative; z-index: 1; font-size: 18px; } .claverio-button__label { position: relative; z-index: 2; white-space: nowrap; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary:hover, .claverio-button.primary.is-hovered, .claverio-button.icon:hover, .claverio-button.icon.is-hovered, .claverio-play-glass:hover, .claverio-play-glass.is-hovered { color: #111; border-color: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 18px rgba(28, 24, 21, 0.065), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.98), inset 0 -1px 1px rgba(69, 59, 52, 0.13), inset 1px 0 1px rgba(255, 255, 255, 0.68), inset -1px 0 1px rgba(255, 255, 255, 0.42); } .claverio-button.primary:hover::before, .claverio-button.primary.is-hovered::before, .claverio-button.icon:hover::before, .claverio-button.icon.is-hovered::before, .claverio-play-glass:hover::before, .claverio-play-glass.is-hovered::before { opacity: 1; } .claverio-button.primary:hover::after, .claverio-button.primary.is-hovered::after, .claverio-button.icon:hover::after, .claverio-button.icon.is-hovered::after, .claverio-play-glass:hover::after, .claverio-play-glass.is-hovered::after { opacity: 0.9; } .claverio-button.primary:hover .claverio-button__icon, .claverio-button.primary.is-hovered .claverio-button__icon { color: #252742; } .claverio-button.primary:active, .claverio-button.icon:active, .claverio-play-glass:active { transform: translateZ(0) scale(0.985); transition-duration: 90ms; } .claverio-button.primary.is-pressed, .claverio-button.icon.is-pressed, .claverio-play-glass.is-pressed { transform: translateZ(0) scale(0.985); } .claverio-button.primary:focus-visible, .claverio-button.icon:focus-visible, .claverio-play-link:focus-visible .claverio-play-glass { outline: 3px solid rgba(55, 116, 223, 0.28); outline-offset: 4px; } /* Mobile + tablet liquid glass dock */ .mobile-liquid-dock, .mobile-liquid-search { display: none; } @media all { :root { --mobile-dock-bottom: max(14px, env(safe-area-inset-bottom)); --mobile-dock-height: 80px; } html { scroll-padding-bottom: 124px; } body { padding-bottom: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 24px); } .navbar .menu-order.left-nav { display: none !important; } .navbar .tablet-hide-header-cta { display: none !important; } .mobile-liquid-dock { --active-index: 0; --rim-x: 18%; --rim-y: 0%; --rim-shadow-x: 82%; --rim-shadow-y: 100%; --rim-angle: 112deg; --rim-energy: 0.70; --rim-dark-boost: 1; position: fixed; z-index: 1048; left: 50%; bottom: var(--mobile-dock-bottom); display: block; width: min(620px, calc(100% - 28px)); height: var(--mobile-dock-height); padding: 7px; border: 0; border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 15px 30px rgba(28, 24, 21, 0.105), 0 4px 10px rgba(28, 24, 21, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -1px 0 rgba(35, 31, 28, 0.085); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateX(-50%) translateZ(0); isolation: isolate; overflow: visible; -webkit-tap-highlight-color: transparent; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(110px 72px at 12% -8%, rgba(255, 255, 255, 0.72), transparent 70%), radial-gradient(170px 90px at 30% 112%, rgba(255, 128, 91, 0.12), transparent 72%), radial-gradient(180px 92px at 70% -14%, rgba(255, 228, 137, 0.14), transparent 72%), radial-gradient(160px 85px at 92% 105%, rgba(151, 199, 255, 0.11), transparent 72%), linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.12)); opacity: 0.84; pointer-events: none; } .mobile-liquid-dock::after { content: ""; position: absolute; z-index: 4; inset: 1px; border-radius: inherit; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), inset 0 10px 12px -12px rgba(255, 255, 255, 0.62), inset 0 -11px 13px -13px rgba(27, 24, 22, 0.22); pointer-events: none; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__tone { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(12, 13, 16, 0.82), rgba(25, 27, 31, 0.68) 48%, rgba(9, 10, 13, 0.78)), rgba(10, 11, 14, 0.70); opacity: 0; pointer-events: none; transition: opacity 720ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after { position: absolute; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .mobile-liquid-dock__rim { z-index: 6; inset: -1px; padding: 1.35px; background: conic-gradient( from var(--rim-angle), rgba(255, 255, 255, 0.72) 0deg, rgba(255, 255, 255, 0.19) 42deg, rgba(255, 255, 255, 0.045) 100deg, rgba(18, 18, 20, 0.14) 168deg, rgba(18, 18, 20, 0.045) 220deg, rgba(255, 255, 255, 0.11) 278deg, rgba(255, 255, 255, 0.58) 340deg, rgba(255, 255, 255, 0.72) 360deg ); filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.42)) drop-shadow(0 2px 3px rgba(24, 21, 19, 0.075)); opacity: 0.88; transform: translateZ(0); transition: filter 680ms cubic-bezier(.22, 1, .36, 1), opacity 680ms ease; } .mobile-liquid-dock__rim::before { content: ""; inset: 0; padding: 1.8px; background: radial-gradient( 150px 62px at var(--rim-x) var(--rim-y), rgb(255 255 255 / calc(0.58 * var(--rim-energy) * var(--rim-dark-boost))), rgb(255 255 255 / calc(0.17 * var(--rim-energy))) 45%, transparent 78% ); filter: blur(0.15px); mix-blend-mode: screen; } .mobile-liquid-dock__rim::after { content: ""; inset: 0; padding: 1.45px; background: radial-gradient( 185px 76px at var(--rim-shadow-x) var(--rim-shadow-y), rgb(11 12 14 / calc(0.18 * var(--rim-energy))), rgb(11 12 14 / calc(0.05 * var(--rim-energy))) 50%, transparent 78% ); mix-blend-mode: multiply; } .mobile-liquid-dock.is-on-dark { --rim-dark-boost: 1.06; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), 0 4px 11px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } .mobile-liquid-dock.is-on-dark::after { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.11), inset 0 10px 12px -12px rgba(255, 255, 255, 0.48), inset 0 -11px 13px -13px rgba(0, 0, 0, 0.30); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__rim { filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.54)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.13)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__tone { opacity: 0.78; } .mobile-liquid-dock__items { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; height: 100%; } .mobile-liquid-dock__lens { position: absolute; z-index: 1; top: 7px; bottom: 7px; left: 7px; width: calc((100% - 14px) / 5); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.32), transparent 50%), linear-gradient(135deg, rgba(79, 73, 69, 0.11), rgba(48, 43, 40, 0.06)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -1px 1px rgba(27, 24, 22, 0.08), 0 3px 7px rgba(33, 29, 26, 0.04); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); transform: translateX(calc(var(--active-index) * 100%)); transition: transform 560ms cubic-bezier(.22, 1, .36, 1), width 300ms ease; pointer-events: none; } .mobile-liquid-dock__lens::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(150deg, rgba(255, 255, 255, 0.25), transparent 46%); pointer-events: none; } .mobile-liquid-dock__lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(8, 9, 11, 0.54), rgba(20, 22, 26, 0.38)); opacity: 0; pointer-events: none; transition: opacity 620ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens { border-color: rgba(255, 255, 255, 0.20); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.18), 0 3px 7px rgba(0, 0, 0, 0.10); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens::after { opacity: 0.82; } .mobile-liquid-dock__item { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 58px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(18, 18, 19, 0.82); font: inherit; cursor: pointer; transition: color 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); appearance: none; -webkit-tap-highlight-color: transparent; } .mobile-liquid-dock__item i { position: relative; z-index: 1; display: block; font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42)); transition: transform 500ms cubic-bezier(.22, 1, .36, 1), filter 280ms ease; } .mobile-liquid-dock__item.is-active, .mobile-liquid-dock__item[aria-current="page"] { color: #111214; } .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock__item[aria-current="page"] i { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.64)) drop-shadow(0 3px 5px rgba(20, 18, 17, 0.10)); } .mobile-liquid-dock__label { display: block; max-width: 100%; overflow: hidden; color: inherit; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: -0.08px; text-overflow: ellipsis; white-space: nowrap; opacity: 0.72; transform: translateY(0); transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__item.is-active .mobile-liquid-dock__label, .mobile-liquid-dock__item[aria-current="page"] .mobile-liquid-dock__label { opacity: 1; transform: translateY(-1px); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item { color: rgba(255, 255, 255, 0.76); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] { color: #fff; } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] i { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock__item:active { transform: scale(0.88); transition-duration: 90ms; } .mobile-liquid-dock__item:focus-visible { outline: 3px solid rgba(55, 116, 223, 0.42); outline-offset: -4px; } .mobile-liquid-dock__badge { position: absolute; top: 9px; left: calc(50% + 11px); width: 8px; height: 8px; border: 1.5px solid rgba(255, 255, 255, 0.92); border-radius: 50%; background: #ff3158; box-shadow: 0 1px 5px rgba(255, 49, 88, 0.48); } .mobile-liquid-dock__badge--online { background: #20c868; box-shadow: 0 1px 5px rgba(32, 200, 104, 0.45); } .mobile-liquid-search { position: fixed; z-index: 1047; left: 50%; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); display: block; width: min(590px, calc(100% - 42px)); padding: 12px; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 26px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(250, 247, 242, 0.34)), rgba(250, 248, 244, 0.30); box-shadow: 0 14px 30px rgba(30, 26, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(50, 44, 40, 0.10); -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06); backdrop-filter: blur(32px) saturate(185%) brightness(1.06); opacity: 0; visibility: hidden; transform: translate(-50%, 14px) scale(0.96); transform-origin: 70% 100%; transition: opacity 240ms ease, visibility 240ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-search.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } .mobile-liquid-search__bar { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 9px 0 16px; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 18px; background: rgba(255, 255, 255, 0.36); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.78), inset 0 -1px 1px rgba(40, 35, 31, 0.06); } .mobile-liquid-search__bar > i { flex: 0 0 auto; color: rgba(30, 29, 29, 0.58); font-size: 20px; } .mobile-liquid-search__input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #1b1a1a; font-size: 16px; line-height: 1.2; } .mobile-liquid-search__input::placeholder { color: rgba(30, 29, 29, 0.46); } .mobile-liquid-search__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 50%; background: rgba(72, 67, 64, 0.10); color: #232222; } .mobile-liquid-search__results { display: grid; gap: 4px; max-height: min(36vh, 260px); margin: 8px 2px 0; overflow-y: auto; overscroll-behavior: contain; } .mobile-liquid-search__result, .mobile-liquid-search__empty { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; border-radius: 14px; color: #242222; font-size: 14px; line-height: 1.3; } .mobile-liquid-search__result:hover, .mobile-liquid-search__result:focus-visible { background: rgba(255, 255, 255, 0.38); } .mobile-liquid-search__result i { color: #3774df; } .mobile-liquid-search__empty { justify-content: flex-start; color: rgba(36, 34, 34, 0.62); } } @media (min-width: 1181px) { :root { --mobile-dock-bottom: 24px; --mobile-dock-height: 72px; } html { scroll-padding-bottom: 0; } body { padding-bottom: 0; } .navbar .menu-order.left-nav, .navbar .tablet-hide-header-cta { display: flex !important; } .mobile-liquid-dock { right: 24px; left: auto; bottom: var(--mobile-dock-bottom); width: 520px; height: var(--mobile-dock-height); padding: 6px; transform: translateZ(0); } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 60px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 10px); } .mobile-liquid-search { right: 24px; left: auto; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); width: 520px; transform: translate(0, 14px) scale(0.96); transform-origin: 100% 100%; } .mobile-liquid-search.is-open { transform: translate(0, 0) scale(1); } } @media (max-width: 1180px) { .is-nav-dark { position: relative; overflow: visible !important; } .is-nav-dark::after { content: ""; position: absolute; z-index: 0; top: calc(100% - 1px); right: 0; left: 0; height: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 25px); background: #151515; pointer-events: none; } } @media (max-width: 420px) { :root { --mobile-dock-height: 74px; } .mobile-liquid-dock { width: calc(100% - 20px); padding: 6px; } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 54px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 9px); } } /* Claverio pointer-fluid effect, adapted to this page's hero/footer. */ .clv-fluid-hero, .clv-fluid-title-surface, .clv-fluid-footer { position: relative; isolation: isolate; } .clv-fluid-hero, .clv-fluid-title-surface { contain: layout paint; } .clv-fluid-hero::before, .clv-fluid-title-surface::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-image: radial-gradient(circle, rgba(24, 24, 22, 0.18) 0.7px, transparent 0.95px); background-position: center; background-size: 10px 10px; opacity: 0.42; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); } .clv-fluid-footer { overflow: hidden; background-color: #050910 !important; background-image: none !important; } .clv-fluid-footer::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-color: #050910; background-image: radial-gradient(circle, rgba(237, 243, 254, 0.075) 1px, transparent 1.25px); background-position: center; background-size: 7px 7px; transition: opacity 160ms linear; } .clv-fluid-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; } .clv-fluid-canvas { display: block; width: 100%; height: 100%; pointer-events: none; } .clv-fluid-hero > .clv-fluid-layer-overlay, .clv-fluid-title-surface > .clv-fluid-layer-overlay { inset: 0; z-index: 2; background: transparent; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform; } .clv-fluid-footer > .container-fluid { position: relative; } .clv-fluid-copy-column, .clv-fluid-title-surface > .container, .clv-fluid-foreground { position: relative; z-index: 3; } /* Avoid re-blurring an animated WebGL surface every frame. The existing glass gradients, rim, refraction and shadows remain. */ .clv-fluid-hero.clv-fluid-ready .claverio-button.primary, .clv-fluid-hero.clv-fluid-ready .claverio-button.icon, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass--sonar .video-icon-sonar-bfr { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .clv-fluid-hero .animation-rotation, .clv-fluid-hero .animation-rotation-slow { backface-visibility: hidden; will-change: transform; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 0 !important; } .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title, .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer > .clv-fluid-layer-dark { z-index: 0; background: #050910; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 0; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer .clv-footer-logo-aberration { position: relative; display: inline-block; isolation: isolate; } .clv-fluid-footer .clv-footer-logo-aberration > img:not(.clv-footer-logo-channel) { position: relative; z-index: 2; } .clv-fluid-footer .clv-footer-logo-channel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-height: none; opacity: 0; pointer-events: none; transform-origin: center; will-change: transform, opacity; } .clv-fluid-footer .clv-footer-logo-cyan { filter: brightness(0) saturate(100%) invert(80%) sepia(93%) saturate(2806%) hue-rotate(141deg) brightness(102%) contrast(105%); } .clv-fluid-footer .clv-footer-logo-magenta { filter: brightness(0) saturate(100%) invert(42%) sepia(94%) saturate(2748%) hue-rotate(316deg) brightness(104%) contrast(101%); } @media (max-width: 767px), (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .clv-fluid-layer { display: none; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 1 !important; } .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title, .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: revert !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 1; } .clv-fluid-footer .clv-footer-logo-channel { display: none; } } @media (prefers-reduced-motion: reduce) { .claverio-button.primary, .claverio-button.primary::before, .claverio-button.icon, .claverio-button.icon::before, .claverio-button__icon, .claverio-button__icon i, .claverio-play-glass, .claverio-play-glass::before, .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after, .mobile-liquid-dock__lens, .mobile-liquid-dock__item, .mobile-liquid-dock__item i, .mobile-liquid-search { transition-duration: 0.01ms !important; } } .clv-projects-breadcrumb { min-height: 520px; padding-bottom: 90px !important; overflow: hidden; } .clv-projects-breadcrumb-title { font-family: "Funnel Display", sans-serif !important; } .clv-projects-breadcrumb .page-title-extra-large { isolation: isolate; } .clv-projects-breadcrumb-heading { position: relative; z-index: 1; } .clv-projects-breadcrumb-heading .clv-projects-breadcrumb-title { position: relative; z-index: 1; } .clv-projects-breadcrumb .page-title-extra-large > .clv-breadcrumb-blue-mesh { top: 0; right: -5vw; left: auto; width: clamp(260px, 25vw, 420px) !important; transform-origin: top right; z-index: 0; } .clv-breadcrumb-blue-mesh { opacity: .34; pointer-events: none; } .clv-breadcrumb-brand-badge { width: 96px; height: 96px; object-fit: contain; } /* Universal Apple-style Liquid Glass material for content containers. */ .claverio-glass-container { --container-glass-radius: 15px; --container-glass-blur: 30px; --container-glass-x: 22%; --container-glass-y: 10%; --container-edge-x: 18%; --container-edge-y: 0%; --container-glass-tint: rgba(246, 244, 240, 0.14); position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: var(--container-glass-radius); background: linear-gradient(118deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.13) 46%, rgba(255, 255, 255, 0.25)), var(--container-glass-tint); background-clip: padding-box; box-shadow: 0 9px 22px rgba(30, 27, 24, 0.045), 0 1px 5px rgba(30, 27, 24, 0.03), inset 0 1px 0.5px rgba(255, 255, 255, 0.84), inset 0 -1px 0.5px rgba(51, 45, 40, 0.10), inset 1px 0 0.5px rgba(255, 255, 255, 0.46), inset -1px 0 0.5px rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(var(--container-glass-blur)) saturate(185%) contrast(103%) brightness(1.07); backdrop-filter: blur(var(--container-glass-blur)) saturate(185%) contrast(103%) brightness(1.07); transform: translateZ(0); -webkit-tap-highlight-color: transparent; transition: border-color 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms cubic-bezier(.16, 1, .3, 1), background-color 520ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container::before { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: calc(var(--container-glass-radius) - 1px); background: radial-gradient(135% 110% at 50% 38%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025) 61%, rgba(255, 255, 255, 0.09)), radial-gradient(128px 88px at var(--container-edge-x) var(--container-edge-y), rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.13) 40%, transparent 76%), radial-gradient(172px 112px at var(--container-glass-x) var(--container-glass-y), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 46%, transparent 80%), radial-gradient(190px 116px at calc(var(--container-glass-x) - 66px) calc(var(--container-glass-y) + 36px), rgba(255, 135, 91, 0.10), transparent 74%), radial-gradient(194px 118px at calc(var(--container-glass-x) + 70px) calc(var(--container-glass-y) - 34px), rgba(255, 220, 119, 0.11), transparent 74%), radial-gradient(186px 114px at calc(var(--container-glass-x) + 80px) calc(var(--container-glass-y) + 40px), rgba(120, 188, 255, 0.12), transparent 74%), linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(255, 255, 255, 0.035) 68%, rgba(55, 48, 43, 0.025)); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.34), inset 0 12px 15px -17px rgba(255, 255, 255, 0.90), inset 0 -8px 12px -14px rgba(41, 35, 31, 0.12); opacity: 0.64; pointer-events: none; transition: opacity 460ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container::after { content: ""; position: absolute; z-index: 5; inset: -1px; padding: 1.8px; border-radius: inherit; background: radial-gradient(124px 58px at var(--container-edge-x) var(--container-edge-y), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.78) 38%, transparent 79%), radial-gradient(112px 52px at calc(var(--container-edge-x) - 13px) calc(var(--container-edge-y) + 4px), rgba(255, 195, 92, 0.76), transparent 73%), radial-gradient(112px 52px at calc(var(--container-edge-x) + 14px) calc(var(--container-edge-y) - 4px), rgba(91, 171, 255, 0.68), transparent 73%), conic-gradient(from 128deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.10) 25%, rgba(38, 34, 31, 0.09) 50%, rgba(255, 255, 255, 0.11) 75%, rgba(255, 255, 255, 0.62)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.52)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)) drop-shadow(0 1.5px 2px rgba(32, 28, 25, 0.075)); opacity: 0.64; pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container > :not(.position-absolute) { position: relative; z-index: 2; } .claverio-glass-container:hover, .claverio-glass-container:focus-visible, .claverio-glass-container.is-glass-hovered { border-color: rgba(255, 255, 255, 0.82); box-shadow: 0 10px 24px rgba(30, 27, 24, 0.05), 0 1px 5px rgba(30, 27, 24, 0.03), inset 0 1px 0.5px rgba(255, 255, 255, 0.90), inset 0 -1px 0.5px rgba(51, 45, 40, 0.11), inset 1px 0 0.5px rgba(255, 255, 255, 0.50), inset -1px 0 0.5px rgba(255, 255, 255, 0.30); transform: translateZ(0); } .claverio-glass-container:hover::before, .claverio-glass-container:focus-visible::before, .claverio-glass-container.is-glass-hovered::before { opacity: 1; } .claverio-glass-container:hover::after, .claverio-glass-container:focus-visible::after, .claverio-glass-container.is-glass-hovered::after { opacity: 1; } .claverio-glass-container:focus-visible { outline: 3px solid rgba(55, 116, 223, 0.24); outline-offset: 4px; } .claverio-glass-container--compact { --container-glass-radius: 15px; --container-glass-blur: 32px; --container-glass-tint: rgba(248, 247, 244, 0.16); } .claverio-glass-container--metric { --container-glass-radius: 15px; --container-glass-blur: 30px; --container-glass-tint: rgba(248, 247, 244, 0.14); } .claverio-glass-container--service { --container-glass-radius: 15px; --container-glass-blur: 34px; --container-glass-tint: rgba(246, 244, 240, 0.12); } .claverio-glass-container--ecosystem { --container-glass-radius: 20px; --container-glass-blur: 32px; --container-glass-tint: rgba(246, 244, 240, 0.13); } .claverio-glass-container.is-glass-idle::before { opacity: 0.18; } .claverio-glass-container.is-glass-idle::after { opacity: 0.24; } .clv-services-cards { padding: clamp(72px, 7vw, 110px) 0 clamp(84px, 8vw, 126px); border-top: 1px solid rgba(23, 23, 23, 0.10); background: #fbfaf7; } .clv-services-process { padding-bottom: clamp(90px, 9vw, 140px); background: #fbfaf7; } .clv-services-process .feature-box-icon img { width: 64px; height: 64px; object-fit: contain; } @media (max-width: 767px) { .clv-projects-breadcrumb { min-height: 460px; padding-bottom: 70px !important; } } @media (max-width: 767px) { .clv-services-cards { padding-top: 58px; } } /* High-contrast content for light glass badges. */ .clv-featured-project-badge__icon { filter: brightness(0) saturate(100%); } .clv-featured-project-badge__label, .clv-review-score__value, .clv-review-score__label { color: var(--base-color) !important; } .clv-review-score__stars { color: var(--dark-gray) !important; } /* The header markup stays shared; only its contrast adapts on the dark project hero. */ .page-project header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; } .page-project header .clv-brand-logo { filter: brightness(0) invert(1); } .page-project header .navbar-nav .nav-link, .page-project header .header-icon > span, .page-project header .header-button .btn, .page-project header .header-button .btn i { color: #fff !important; } .page-project header .navbar-nav .nav-link:hover { color: #fff !important; opacity: .72; } .page-project header .header-button .btn { border-color: rgba(255, 255, 255, .42) !important; background: rgba(255, 255, 255, .075) !important; -webkit-backdrop-filter: blur(18px) saturate(155%); backdrop-filter: blur(18px) saturate(155%); } .page-project header .navbar-toggler-line { background-color: #fff !important; } /* project */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .marquee-warm-text, [class*="-title"] { font-family: "Funnel Display", sans-serif !important; } body { background-color: #fbfaf7; } .hero-shell { display: flow-root; background: linear-gradient( to bottom, rgba(55, 116, 223, 0.026) 0%, rgba(55, 116, 223, 0.026) 30%, rgba(55, 116, 223, 0.008) 66%, rgba(55, 116, 223, 0) 100% ); background-size: 100% clamp(240px, 28vw, 360px); background-repeat: no-repeat; } header .navbar { background-color: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } .clv-project-hero-shell { position: relative; background: none; } .clv-project-overlay-header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; } .clv-project-overlay-header .navbar-nav .nav-link, .clv-project-overlay-header .header-icon > span, .clv-project-overlay-header .header-button .btn, .clv-project-overlay-header .header-button .btn i { color: #fff !important; } .clv-project-overlay-header .navbar-nav .nav-link:hover { color: #fff !important; opacity: 0.72; } .clv-project-overlay-header .header-icon > span .text-decoration-line-bottom { border-color: rgba(255, 255, 255, 0.72); } .clv-project-overlay-header .header-button .btn { border-color: rgba(255, 255, 255, 0.42) !important; background: rgba(255, 255, 255, 0.075) !important; -webkit-backdrop-filter: blur(18px) saturate(155%); backdrop-filter: blur(18px) saturate(155%); } .clv-project-overlay-header .navbar-toggler-line { background-color: #fff !important; } .clv-project-detail-hero { min-height: clamp(650px, 57vw, 825px); margin-top: 0 !important; padding-top: clamp(150px, 11vw, 190px) !important; } .clv-project-detail-hero .clv-project-detail-title { color: #fff !important; } .clv-project-detail-hero .clv-project-detail-intro { color: rgba(255, 255, 255, 0.78); } .marquee-warm-text { display: inline-block; width: max-content; background-image: linear-gradient( to bottom, rgba(20, 20, 20, 0.04) 0%, rgba(20, 20, 20, 0.14) 50%, rgba(20, 20, 20, 0.04) 100% ); line-height: 1.1; padding-top: 12px; padding-bottom: 28px; will-change: transform; } .claverio-button.primary, .claverio-button.icon, .claverio-play-glass { --glass-x: 50%; --glass-y: 50%; --edge-x: 50%; --edge-y: 0px; --content-x: 0px; --content-y: 0px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 27px; overflow: hidden; color: #171717; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.2px; border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 7px 16px rgba(28, 24, 21, 0.06), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(69, 59, 52, 0.12), inset 1px 0 1px rgba(255, 255, 255, 0.62), inset -1px 0 1px rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateZ(0) scale(1); transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 450ms cubic-bezier(.16, 1, .3, 1), background-color 500ms cubic-bezier(.16, 1, .3, 1), border-color 500ms cubic-bezier(.16, 1, .3, 1), color 250ms ease; } .claverio-play-glass { flex: 0 0 60px; width: 60px; height: 60px; min-height: 60px; padding: 0; gap: 0; } .claverio-button.icon { flex: 0 0 90px; justify-content: center; width: 90px; height: 90px; min-height: 90px; padding: 0; gap: 0; } .claverio-button.icon > i { position: relative; z-index: 2; margin: 0; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary.claverio-button--compact { min-height: 40px; padding: 0 17px; gap: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.45px; text-transform: uppercase; } .claverio-play-glass i { position: relative; z-index: 2; margin-left: 2px; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-play-glass--sonar { overflow: visible; } .claverio-play-glass--sonar .video-icon-sonar .video-icon-sonar-bfr { border: 1px solid rgba(255, 255, 255, 0.44); background: rgba(255, 255, 255, 0.13) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.52); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .claverio-button.primary::before, .claverio-button.icon::before, .claverio-play-glass::before { content: ""; position: absolute; z-index: 1; inset: -1px; padding: 1.5px; border-radius: inherit; background: radial-gradient(54px 30px at var(--edge-x) var(--edge-y), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 18%, rgba(255, 255, 255, 0.34) 46%, transparent 75%), radial-gradient(46px 24px at calc(var(--edge-x) - 7px) calc(var(--edge-y) + 2px), rgba(255, 213, 128, 0.48), transparent 72%), radial-gradient(46px 24px at calc(var(--edge-x) + 8px) calc(var(--edge-y) - 2px), rgba(139, 202, 255, 0.42), transparent 72%), linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.14) 44%, rgba(62, 56, 51, 0.1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.46; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)); transition: opacity 380ms cubic-bezier(.16, 1, .3, 1); } .claverio-button.primary::after, .claverio-button.icon::after, .claverio-play-glass::after { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: inherit; background: radial-gradient(76px 16px at 50% 100%, rgba(40, 34, 30, 0.032), transparent 74%), radial-gradient(88px 56px at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.46), transparent 72%), radial-gradient(112px 66px at calc(var(--glass-x) - 58px) calc(var(--glass-y) + 34px), rgba(255, 128, 91, 0.13), transparent 74%), radial-gradient(112px 66px at calc(var(--glass-x) + 62px) calc(var(--glass-y) - 34px), rgba(255, 228, 137, 0.14), transparent 74%), radial-gradient(108px 64px at calc(var(--glass-x) + 72px) calc(var(--glass-y) + 31px), rgba(151, 199, 255, 0.12), transparent 74%), linear-gradient(180deg, transparent 48%, rgba(48, 41, 36, 0.028) 79%, rgba(255, 255, 255, 0.11) 100%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.60), inset 0 9px 11px -12px rgba(255, 255, 255, 0.96), inset 0 -4px 5px -5px rgba(37, 31, 27, 0.12), inset -3px 0 4px -5px rgba(37, 31, 27, 0.07); opacity: 0.64; pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .claverio-button__icon { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #252742; transform: translate3d(var(--content-x), var(--content-y), 0); transition: color 350ms ease; } .claverio-button__icon::before { content: none; } .claverio-button__icon i { position: relative; z-index: 1; font-size: 18px; } .claverio-button__label { position: relative; z-index: 2; white-space: nowrap; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary:hover, .claverio-button.primary.is-hovered, .claverio-button.icon:hover, .claverio-button.icon.is-hovered, .claverio-play-glass:hover, .claverio-play-glass.is-hovered { color: #111; border-color: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 18px rgba(28, 24, 21, 0.065), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.98), inset 0 -1px 1px rgba(69, 59, 52, 0.13), inset 1px 0 1px rgba(255, 255, 255, 0.68), inset -1px 0 1px rgba(255, 255, 255, 0.42); } .claverio-button.primary:hover::before, .claverio-button.primary.is-hovered::before, .claverio-button.icon:hover::before, .claverio-button.icon.is-hovered::before, .claverio-play-glass:hover::before, .claverio-play-glass.is-hovered::before { opacity: 1; } .claverio-button.primary:hover::after, .claverio-button.primary.is-hovered::after, .claverio-button.icon:hover::after, .claverio-button.icon.is-hovered::after, .claverio-play-glass:hover::after, .claverio-play-glass.is-hovered::after { opacity: 0.9; } .claverio-button.primary:hover .claverio-button__icon, .claverio-button.primary.is-hovered .claverio-button__icon { color: #252742; } .claverio-button.primary:active, .claverio-button.icon:active, .claverio-play-glass:active { transform: translateZ(0) scale(0.985); transition-duration: 90ms; } .claverio-button.primary.is-pressed, .claverio-button.icon.is-pressed, .claverio-play-glass.is-pressed { transform: translateZ(0) scale(0.985); } .claverio-button.primary:focus-visible, .claverio-button.icon:focus-visible, .claverio-play-link:focus-visible .claverio-play-glass { outline: 3px solid rgba(55, 116, 223, 0.28); outline-offset: 4px; } /* Mobile + tablet liquid glass dock */ .mobile-liquid-dock, .mobile-liquid-search { display: none; } @media all { :root { --mobile-dock-bottom: max(14px, env(safe-area-inset-bottom)); --mobile-dock-height: 80px; } html { scroll-padding-bottom: 124px; } body { padding-bottom: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 24px); } .navbar .menu-order.left-nav { display: none !important; } .navbar .tablet-hide-header-cta { display: none !important; } .mobile-liquid-dock { --active-index: 0; --rim-x: 18%; --rim-y: 0%; --rim-shadow-x: 82%; --rim-shadow-y: 100%; --rim-angle: 112deg; --rim-energy: 0.70; --rim-dark-boost: 1; position: fixed; z-index: 1048; left: 50%; bottom: var(--mobile-dock-bottom); display: block; width: min(620px, calc(100% - 28px)); height: var(--mobile-dock-height); padding: 7px; border: 0; border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 15px 30px rgba(28, 24, 21, 0.105), 0 4px 10px rgba(28, 24, 21, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -1px 0 rgba(35, 31, 28, 0.085); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateX(-50%) translateZ(0); isolation: isolate; overflow: visible; -webkit-tap-highlight-color: transparent; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(110px 72px at 12% -8%, rgba(255, 255, 255, 0.72), transparent 70%), radial-gradient(170px 90px at 30% 112%, rgba(255, 128, 91, 0.12), transparent 72%), radial-gradient(180px 92px at 70% -14%, rgba(255, 228, 137, 0.14), transparent 72%), radial-gradient(160px 85px at 92% 105%, rgba(151, 199, 255, 0.11), transparent 72%), linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.12)); opacity: 0.84; pointer-events: none; } .mobile-liquid-dock::after { content: ""; position: absolute; z-index: 4; inset: 1px; border-radius: inherit; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), inset 0 10px 12px -12px rgba(255, 255, 255, 0.62), inset 0 -11px 13px -13px rgba(27, 24, 22, 0.22); pointer-events: none; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__tone { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(12, 13, 16, 0.82), rgba(25, 27, 31, 0.68) 48%, rgba(9, 10, 13, 0.78)), rgba(10, 11, 14, 0.70); opacity: 0; pointer-events: none; transition: opacity 720ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after { position: absolute; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .mobile-liquid-dock__rim { z-index: 6; inset: -1px; padding: 1.35px; background: conic-gradient( from var(--rim-angle), rgba(255, 255, 255, 0.72) 0deg, rgba(255, 255, 255, 0.19) 42deg, rgba(255, 255, 255, 0.045) 100deg, rgba(18, 18, 20, 0.14) 168deg, rgba(18, 18, 20, 0.045) 220deg, rgba(255, 255, 255, 0.11) 278deg, rgba(255, 255, 255, 0.58) 340deg, rgba(255, 255, 255, 0.72) 360deg ); filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.42)) drop-shadow(0 2px 3px rgba(24, 21, 19, 0.075)); opacity: 0.88; transform: translateZ(0); transition: filter 680ms cubic-bezier(.22, 1, .36, 1), opacity 680ms ease; } .mobile-liquid-dock__rim::before { content: ""; inset: 0; padding: 1.8px; background: radial-gradient( 150px 62px at var(--rim-x) var(--rim-y), rgb(255 255 255 / calc(0.58 * var(--rim-energy) * var(--rim-dark-boost))), rgb(255 255 255 / calc(0.17 * var(--rim-energy))) 45%, transparent 78% ); filter: blur(0.15px); mix-blend-mode: screen; } .mobile-liquid-dock__rim::after { content: ""; inset: 0; padding: 1.45px; background: radial-gradient( 185px 76px at var(--rim-shadow-x) var(--rim-shadow-y), rgb(11 12 14 / calc(0.18 * var(--rim-energy))), rgb(11 12 14 / calc(0.05 * var(--rim-energy))) 50%, transparent 78% ); mix-blend-mode: multiply; } .mobile-liquid-dock.is-on-dark { --rim-dark-boost: 1.06; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), 0 4px 11px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } .mobile-liquid-dock.is-on-dark::after { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.11), inset 0 10px 12px -12px rgba(255, 255, 255, 0.48), inset 0 -11px 13px -13px rgba(0, 0, 0, 0.30); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__rim { filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.54)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.13)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__tone { opacity: 0.78; } .mobile-liquid-dock__items { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; height: 100%; } .mobile-liquid-dock__lens { position: absolute; z-index: 1; top: 7px; bottom: 7px; left: 7px; width: calc((100% - 14px) / 5); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.32), transparent 50%), linear-gradient(135deg, rgba(79, 73, 69, 0.11), rgba(48, 43, 40, 0.06)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -1px 1px rgba(27, 24, 22, 0.08), 0 3px 7px rgba(33, 29, 26, 0.04); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); transform: translateX(calc(var(--active-index) * 100%)); transition: transform 560ms cubic-bezier(.22, 1, .36, 1), width 300ms ease; pointer-events: none; } .mobile-liquid-dock__lens::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(150deg, rgba(255, 255, 255, 0.25), transparent 46%); pointer-events: none; } .mobile-liquid-dock__lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(8, 9, 11, 0.54), rgba(20, 22, 26, 0.38)); opacity: 0; pointer-events: none; transition: opacity 620ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens { border-color: rgba(255, 255, 255, 0.20); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.18), 0 3px 7px rgba(0, 0, 0, 0.10); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens::after { opacity: 0.82; } .mobile-liquid-dock__item { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 58px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(18, 18, 19, 0.82); font: inherit; cursor: pointer; transition: color 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); appearance: none; -webkit-tap-highlight-color: transparent; } .mobile-liquid-dock__item i { position: relative; z-index: 1; display: block; font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42)); transition: transform 500ms cubic-bezier(.22, 1, .36, 1), filter 280ms ease; } .mobile-liquid-dock__item.is-active, .mobile-liquid-dock__item[aria-current="page"] { color: #111214; } .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock__item[aria-current="page"] i { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.64)) drop-shadow(0 3px 5px rgba(20, 18, 17, 0.10)); } .mobile-liquid-dock__label { display: block; max-width: 100%; overflow: hidden; color: inherit; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: -0.08px; text-overflow: ellipsis; white-space: nowrap; opacity: 0.72; transform: translateY(0); transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__item.is-active .mobile-liquid-dock__label, .mobile-liquid-dock__item[aria-current="page"] .mobile-liquid-dock__label { opacity: 1; transform: translateY(-1px); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item { color: rgba(255, 255, 255, 0.76); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] { color: #fff; } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] i { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock__item:active { transform: scale(0.88); transition-duration: 90ms; } .mobile-liquid-dock__item:focus-visible { outline: 3px solid rgba(55, 116, 223, 0.42); outline-offset: -4px; } .mobile-liquid-dock__badge { position: absolute; top: 9px; left: calc(50% + 11px); width: 8px; height: 8px; border: 1.5px solid rgba(255, 255, 255, 0.92); border-radius: 50%; background: #ff3158; box-shadow: 0 1px 5px rgba(255, 49, 88, 0.48); } .mobile-liquid-dock__badge--online { background: #20c868; box-shadow: 0 1px 5px rgba(32, 200, 104, 0.45); } .mobile-liquid-search { position: fixed; z-index: 1047; left: 50%; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); display: block; width: min(590px, calc(100% - 42px)); padding: 12px; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 26px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(250, 247, 242, 0.34)), rgba(250, 248, 244, 0.30); box-shadow: 0 14px 30px rgba(30, 26, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(50, 44, 40, 0.10); -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06); backdrop-filter: blur(32px) saturate(185%) brightness(1.06); opacity: 0; visibility: hidden; transform: translate(-50%, 14px) scale(0.96); transform-origin: 70% 100%; transition: opacity 240ms ease, visibility 240ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-search.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } .mobile-liquid-search__bar { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 9px 0 16px; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 18px; background: rgba(255, 255, 255, 0.36); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.78), inset 0 -1px 1px rgba(40, 35, 31, 0.06); } .mobile-liquid-search__bar > i { flex: 0 0 auto; color: rgba(30, 29, 29, 0.58); font-size: 20px; } .mobile-liquid-search__input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #1b1a1a; font-size: 16px; line-height: 1.2; } .mobile-liquid-search__input::placeholder { color: rgba(30, 29, 29, 0.46); } .mobile-liquid-search__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 50%; background: rgba(72, 67, 64, 0.10); color: #232222; } .mobile-liquid-search__results { display: grid; gap: 4px; max-height: min(36vh, 260px); margin: 8px 2px 0; overflow-y: auto; overscroll-behavior: contain; } .mobile-liquid-search__result, .mobile-liquid-search__empty { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; border-radius: 14px; color: #242222; font-size: 14px; line-height: 1.3; } .mobile-liquid-search__result:hover, .mobile-liquid-search__result:focus-visible { background: rgba(255, 255, 255, 0.38); } .mobile-liquid-search__result i { color: #3774df; } .mobile-liquid-search__empty { justify-content: flex-start; color: rgba(36, 34, 34, 0.62); } } @media (min-width: 1181px) { :root { --mobile-dock-bottom: 24px; --mobile-dock-height: 72px; } html { scroll-padding-bottom: 0; } body { padding-bottom: 0; } .navbar .menu-order.left-nav, .navbar .tablet-hide-header-cta { display: flex !important; } .mobile-liquid-dock { right: 24px; left: auto; bottom: var(--mobile-dock-bottom); width: 520px; height: var(--mobile-dock-height); padding: 6px; transform: translateZ(0); } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 60px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 10px); } .mobile-liquid-search { right: 24px; left: auto; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); width: 520px; transform: translate(0, 14px) scale(0.96); transform-origin: 100% 100%; } .mobile-liquid-search.is-open { transform: translate(0, 0) scale(1); } } @media (max-width: 1180px) { .is-nav-dark { position: relative; overflow: visible !important; } .is-nav-dark::after { content: ""; position: absolute; z-index: 0; top: calc(100% - 1px); right: 0; left: 0; height: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 25px); background: #151515; pointer-events: none; } } @media (max-width: 420px) { :root { --mobile-dock-height: 74px; } .mobile-liquid-dock { width: calc(100% - 20px); padding: 6px; } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 54px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 9px); } } /* Claverio pointer-fluid effect, adapted to this page's hero/footer. */ .clv-fluid-hero, .clv-fluid-title-surface, .clv-fluid-footer { position: relative; isolation: isolate; } .clv-fluid-hero, .clv-fluid-title-surface { contain: layout paint; } .clv-fluid-hero::before, .clv-fluid-title-surface::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-image: radial-gradient(circle, rgba(24, 24, 22, 0.18) 0.7px, transparent 0.95px); background-position: center; background-size: 10px 10px; opacity: 0.42; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); } .clv-fluid-footer { overflow: hidden; background-color: #050910 !important; background-image: none !important; } .clv-fluid-footer::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-color: #050910; background-image: radial-gradient(circle, rgba(237, 243, 254, 0.075) 1px, transparent 1.25px); background-position: center; background-size: 7px 7px; transition: opacity 160ms linear; } .clv-fluid-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; } .clv-fluid-canvas { display: block; width: 100%; height: 100%; pointer-events: none; } .clv-fluid-hero > .clv-fluid-layer-overlay, .clv-fluid-title-surface > .clv-fluid-layer-overlay { inset: 0; z-index: 2; background: transparent; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform; } .clv-fluid-footer > .container-fluid { position: relative; } .clv-fluid-copy-column, .clv-fluid-title-surface > .container, .clv-fluid-foreground { position: relative; z-index: 3; } /* Avoid re-blurring an animated WebGL surface every frame. The existing glass gradients, rim, refraction and shadows remain. */ .clv-fluid-hero.clv-fluid-ready .claverio-button.primary, .clv-fluid-hero.clv-fluid-ready .claverio-button.icon, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass--sonar .video-icon-sonar-bfr { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .clv-fluid-hero .animation-rotation, .clv-fluid-hero .animation-rotation-slow { backface-visibility: hidden; will-change: transform; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 0 !important; } .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title, .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer > .clv-fluid-layer-dark { z-index: 0; background: #050910; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 0; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer .clv-footer-logo-aberration { position: relative; display: inline-block; isolation: isolate; } .clv-fluid-footer .clv-footer-logo-aberration > img:not(.clv-footer-logo-channel) { position: relative; z-index: 2; } .clv-fluid-footer .clv-footer-logo-channel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-height: none; opacity: 0; pointer-events: none; transform-origin: center; will-change: transform, opacity; } .clv-fluid-footer .clv-footer-logo-cyan { filter: brightness(0) saturate(100%) invert(80%) sepia(93%) saturate(2806%) hue-rotate(141deg) brightness(102%) contrast(105%); } .clv-fluid-footer .clv-footer-logo-magenta { filter: brightness(0) saturate(100%) invert(42%) sepia(94%) saturate(2748%) hue-rotate(316deg) brightness(104%) contrast(101%); } @media (max-width: 767px), (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .clv-fluid-layer { display: none; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 1 !important; } .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title, .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: revert !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 1; } .clv-fluid-footer .clv-footer-logo-channel { display: none; } } @media (prefers-reduced-motion: reduce) { .claverio-button.primary, .claverio-button.primary::before, .claverio-button.icon, .claverio-button.icon::before, .claverio-button__icon, .claverio-button__icon i, .claverio-play-glass, .claverio-play-glass::before, .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after, .mobile-liquid-dock__lens, .mobile-liquid-dock__item, .mobile-liquid-dock__item i, .mobile-liquid-search { transition-duration: 0.01ms !important; } } .clv-projects-breadcrumb { min-height: 520px; padding-bottom: 90px !important; overflow: hidden; } .clv-projects-breadcrumb-title { font-family: "Funnel Display", sans-serif !important; } .clv-project-detail-title { font-family: "Funnel Display", sans-serif !important; } .clv-project-detail-list { margin: 0; padding-left: 20px; color: var(--medium-gray); } .clv-project-detail-list li { margin-bottom: 8px; padding-left: 3px; line-height: 1.5; } .clv-project-detail-list li:last-child { margin-bottom: 0; } ul.clv-project-detail-list li { list-style: disc; } ol.clv-project-detail-list li { list-style: decimal; } .clv-breadcrumb-blue-mesh { opacity: .34; pointer-events: none; } .clv-breadcrumb-brand-badge { width: 96px; height: 96px; object-fit: contain; } @media (max-width: 767px) { .clv-projects-breadcrumb { min-height: 460px; padding-bottom: 70px !important; } } @media (max-width: 767px) { .clv-project-detail-hero { min-height: 760px; padding-top: 118px !important; } } /* service */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .marquee-warm-text, [class*="-title"] { font-family: "Funnel Display", sans-serif !important; } body { background-color: #fbfaf7; } .hero-shell { display: flow-root; background: linear-gradient( to bottom, rgba(55, 116, 223, 0.026) 0%, rgba(55, 116, 223, 0.026) 30%, rgba(55, 116, 223, 0.008) 66%, rgba(55, 116, 223, 0) 100% ); background-size: 100% clamp(240px, 28vw, 360px); background-repeat: no-repeat; } header .navbar { background-color: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } .marquee-warm-text { display: inline-block; width: max-content; background-image: linear-gradient( to bottom, rgba(20, 20, 20, 0.04) 0%, rgba(20, 20, 20, 0.14) 50%, rgba(20, 20, 20, 0.04) 100% ); line-height: 1.1; padding-top: 12px; padding-bottom: 28px; will-change: transform; } .claverio-button.primary, .claverio-button.icon, .claverio-play-glass { --glass-x: 50%; --glass-y: 50%; --edge-x: 50%; --edge-y: 0px; --content-x: 0px; --content-y: 0px; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 27px; overflow: hidden; color: #171717; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.2px; border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 7px 16px rgba(28, 24, 21, 0.06), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(69, 59, 52, 0.12), inset 1px 0 1px rgba(255, 255, 255, 0.62), inset -1px 0 1px rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateZ(0) scale(1); transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 450ms cubic-bezier(.16, 1, .3, 1), background-color 500ms cubic-bezier(.16, 1, .3, 1), border-color 500ms cubic-bezier(.16, 1, .3, 1), color 250ms ease; } .claverio-play-glass { flex: 0 0 60px; width: 60px; height: 60px; min-height: 60px; padding: 0; gap: 0; } .claverio-button.icon { flex: 0 0 90px; justify-content: center; width: 90px; height: 90px; min-height: 90px; padding: 0; gap: 0; } .claverio-button.icon > i { position: relative; z-index: 2; margin: 0; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary.claverio-button--compact { min-height: 40px; padding: 0 17px; gap: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.45px; text-transform: uppercase; } .claverio-play-glass i { position: relative; z-index: 2; margin-left: 2px; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-play-glass--sonar { overflow: visible; } .claverio-play-glass--sonar .video-icon-sonar .video-icon-sonar-bfr { border: 1px solid rgba(255, 255, 255, 0.44); background: rgba(255, 255, 255, 0.13) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.52); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); } .claverio-button.primary::before, .claverio-button.icon::before, .claverio-play-glass::before { content: ""; position: absolute; z-index: 1; inset: -1px; padding: 1.5px; border-radius: inherit; background: radial-gradient(54px 30px at var(--edge-x) var(--edge-y), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 18%, rgba(255, 255, 255, 0.34) 46%, transparent 75%), radial-gradient(46px 24px at calc(var(--edge-x) - 7px) calc(var(--edge-y) + 2px), rgba(255, 213, 128, 0.48), transparent 72%), radial-gradient(46px 24px at calc(var(--edge-x) + 8px) calc(var(--edge-y) - 2px), rgba(139, 202, 255, 0.42), transparent 72%), linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.14) 44%, rgba(62, 56, 51, 0.1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.46; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)); transition: opacity 380ms cubic-bezier(.16, 1, .3, 1); } .claverio-button.primary::after, .claverio-button.icon::after, .claverio-play-glass::after { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: inherit; background: radial-gradient(76px 16px at 50% 100%, rgba(40, 34, 30, 0.032), transparent 74%), radial-gradient(88px 56px at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.46), transparent 72%), radial-gradient(112px 66px at calc(var(--glass-x) - 58px) calc(var(--glass-y) + 34px), rgba(255, 128, 91, 0.13), transparent 74%), radial-gradient(112px 66px at calc(var(--glass-x) + 62px) calc(var(--glass-y) - 34px), rgba(255, 228, 137, 0.14), transparent 74%), radial-gradient(108px 64px at calc(var(--glass-x) + 72px) calc(var(--glass-y) + 31px), rgba(151, 199, 255, 0.12), transparent 74%), linear-gradient(180deg, transparent 48%, rgba(48, 41, 36, 0.028) 79%, rgba(255, 255, 255, 0.11) 100%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.60), inset 0 9px 11px -12px rgba(255, 255, 255, 0.96), inset 0 -4px 5px -5px rgba(37, 31, 27, 0.12), inset -3px 0 4px -5px rgba(37, 31, 27, 0.07); opacity: 0.64; pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .claverio-button__icon { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #252742; transform: translate3d(var(--content-x), var(--content-y), 0); transition: color 350ms ease; } .claverio-button__icon::before { content: none; } .claverio-button__icon i { position: relative; z-index: 1; font-size: 18px; } .claverio-button__label { position: relative; z-index: 2; white-space: nowrap; transform: translate3d(var(--content-x), var(--content-y), 0); } .claverio-button.primary:hover, .claverio-button.primary.is-hovered, .claverio-button.icon:hover, .claverio-button.icon.is-hovered, .claverio-play-glass:hover, .claverio-play-glass.is-hovered { color: #111; border-color: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 18px rgba(28, 24, 21, 0.065), 0 1px 3px rgba(28, 24, 21, 0.05), inset 0 1.5px 1px rgba(255, 255, 255, 0.98), inset 0 -1px 1px rgba(69, 59, 52, 0.13), inset 1px 0 1px rgba(255, 255, 255, 0.68), inset -1px 0 1px rgba(255, 255, 255, 0.42); } .claverio-button.primary:hover::before, .claverio-button.primary.is-hovered::before, .claverio-button.icon:hover::before, .claverio-button.icon.is-hovered::before, .claverio-play-glass:hover::before, .claverio-play-glass.is-hovered::before { opacity: 1; } .claverio-button.primary:hover::after, .claverio-button.primary.is-hovered::after, .claverio-button.icon:hover::after, .claverio-button.icon.is-hovered::after, .claverio-play-glass:hover::after, .claverio-play-glass.is-hovered::after { opacity: 0.9; } .claverio-button.primary:hover .claverio-button__icon, .claverio-button.primary.is-hovered .claverio-button__icon { color: #252742; } .claverio-button.primary:active, .claverio-button.icon:active, .claverio-play-glass:active { transform: translateZ(0) scale(0.985); transition-duration: 90ms; } .claverio-button.primary.is-pressed, .claverio-button.icon.is-pressed, .claverio-play-glass.is-pressed { transform: translateZ(0) scale(0.985); } .claverio-button.primary:focus-visible, .claverio-button.icon:focus-visible, .claverio-play-link:focus-visible .claverio-play-glass { outline: 3px solid rgba(55, 116, 223, 0.28); outline-offset: 4px; } /* Mobile + tablet liquid glass dock */ .mobile-liquid-dock, .mobile-liquid-search { display: none; } @media all { :root { --mobile-dock-bottom: max(14px, env(safe-area-inset-bottom)); --mobile-dock-height: 80px; } html { scroll-padding-bottom: 124px; } body { padding-bottom: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 24px); } .navbar .menu-order.left-nav { display: none !important; } .navbar .tablet-hide-header-cta { display: none !important; } .mobile-liquid-dock { --active-index: 0; --rim-x: 18%; --rim-y: 0%; --rim-shadow-x: 82%; --rim-shadow-y: 100%; --rim-angle: 112deg; --rim-energy: 0.70; --rim-dark-boost: 1; position: fixed; z-index: 1048; left: 50%; bottom: var(--mobile-dock-bottom); display: block; width: min(620px, calc(100% - 28px)); height: var(--mobile-dock-height); padding: 7px; border: 0; border-radius: 999px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.17) 45%, rgba(255, 255, 255, 0.30)), rgba(250, 248, 244, 0.22); background-clip: padding-box; box-shadow: 0 15px 30px rgba(28, 24, 21, 0.105), 0 4px 10px rgba(28, 24, 21, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -1px 0 rgba(35, 31, 28, 0.085); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); backdrop-filter: blur(28px) saturate(190%) contrast(104%) brightness(1.08); transform: translateX(-50%) translateZ(0); isolation: isolate; overflow: visible; -webkit-tap-highlight-color: transparent; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(110px 72px at 12% -8%, rgba(255, 255, 255, 0.72), transparent 70%), radial-gradient(170px 90px at 30% 112%, rgba(255, 128, 91, 0.12), transparent 72%), radial-gradient(180px 92px at 70% -14%, rgba(255, 228, 137, 0.14), transparent 72%), radial-gradient(160px 85px at 92% 105%, rgba(151, 199, 255, 0.11), transparent 72%), linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.12)); opacity: 0.84; pointer-events: none; } .mobile-liquid-dock::after { content: ""; position: absolute; z-index: 4; inset: 1px; border-radius: inherit; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), inset 0 10px 12px -12px rgba(255, 255, 255, 0.62), inset 0 -11px 13px -13px rgba(27, 24, 22, 0.22); pointer-events: none; transition: box-shadow 680ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__tone { position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(12, 13, 16, 0.82), rgba(25, 27, 31, 0.68) 48%, rgba(9, 10, 13, 0.78)), rgba(10, 11, 14, 0.70); opacity: 0; pointer-events: none; transition: opacity 720ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after { position: absolute; border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .mobile-liquid-dock__rim { z-index: 6; inset: -1px; padding: 1.35px; background: conic-gradient( from var(--rim-angle), rgba(255, 255, 255, 0.72) 0deg, rgba(255, 255, 255, 0.19) 42deg, rgba(255, 255, 255, 0.045) 100deg, rgba(18, 18, 20, 0.14) 168deg, rgba(18, 18, 20, 0.045) 220deg, rgba(255, 255, 255, 0.11) 278deg, rgba(255, 255, 255, 0.58) 340deg, rgba(255, 255, 255, 0.72) 360deg ); filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.42)) drop-shadow(0 2px 3px rgba(24, 21, 19, 0.075)); opacity: 0.88; transform: translateZ(0); transition: filter 680ms cubic-bezier(.22, 1, .36, 1), opacity 680ms ease; } .mobile-liquid-dock__rim::before { content: ""; inset: 0; padding: 1.8px; background: radial-gradient( 150px 62px at var(--rim-x) var(--rim-y), rgb(255 255 255 / calc(0.58 * var(--rim-energy) * var(--rim-dark-boost))), rgb(255 255 255 / calc(0.17 * var(--rim-energy))) 45%, transparent 78% ); filter: blur(0.15px); mix-blend-mode: screen; } .mobile-liquid-dock__rim::after { content: ""; inset: 0; padding: 1.45px; background: radial-gradient( 185px 76px at var(--rim-shadow-x) var(--rim-shadow-y), rgb(11 12 14 / calc(0.18 * var(--rim-energy))), rgb(11 12 14 / calc(0.05 * var(--rim-energy))) 50%, transparent 78% ); mix-blend-mode: multiply; } .mobile-liquid-dock.is-on-dark { --rim-dark-boost: 1.06; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), 0 4px 11px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } .mobile-liquid-dock.is-on-dark::after { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.11), inset 0 10px 12px -12px rgba(255, 255, 255, 0.48), inset 0 -11px 13px -13px rgba(0, 0, 0, 0.30); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__rim { filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.54)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.13)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__tone { opacity: 0.78; } .mobile-liquid-dock__items { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; height: 100%; } .mobile-liquid-dock__lens { position: absolute; z-index: 1; top: 7px; bottom: 7px; left: 7px; width: calc((100% - 14px) / 5); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 999px; background: radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.32), transparent 50%), linear-gradient(135deg, rgba(79, 73, 69, 0.11), rgba(48, 43, 40, 0.06)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -1px 1px rgba(27, 24, 22, 0.08), 0 3px 7px rgba(33, 29, 26, 0.04); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); transform: translateX(calc(var(--active-index) * 100%)); transition: transform 560ms cubic-bezier(.22, 1, .36, 1), width 300ms ease; pointer-events: none; } .mobile-liquid-dock__lens::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(150deg, rgba(255, 255, 255, 0.25), transparent 46%); pointer-events: none; } .mobile-liquid-dock__lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, rgba(8, 9, 11, 0.54), rgba(20, 22, 26, 0.38)); opacity: 0; pointer-events: none; transition: opacity 620ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens { border-color: rgba(255, 255, 255, 0.20); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0, 0, 0, 0.18), 0 3px 7px rgba(0, 0, 0, 0.10); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__lens::after { opacity: 0.82; } .mobile-liquid-dock__item { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 58px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(18, 18, 19, 0.82); font: inherit; cursor: pointer; transition: color 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); appearance: none; -webkit-tap-highlight-color: transparent; } .mobile-liquid-dock__item i { position: relative; z-index: 1; display: block; font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42)); transition: transform 500ms cubic-bezier(.22, 1, .36, 1), filter 280ms ease; } .mobile-liquid-dock__item.is-active, .mobile-liquid-dock__item[aria-current="page"] { color: #111214; } .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock__item[aria-current="page"] i { transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.64)) drop-shadow(0 3px 5px rgba(20, 18, 17, 0.10)); } .mobile-liquid-dock__label { display: block; max-width: 100%; overflow: hidden; color: inherit; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: -0.08px; text-overflow: ellipsis; white-space: nowrap; opacity: 0.72; transform: translateY(0); transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-dock__item.is-active .mobile-liquid-dock__label, .mobile-liquid-dock__item[aria-current="page"] .mobile-liquid-dock__label { opacity: 1; transform: translateY(-1px); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item { color: rgba(255, 255, 255, 0.76); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] { color: #fff; } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item.is-active i, .mobile-liquid-dock.is-on-dark .mobile-liquid-dock__item[aria-current="page"] i { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34)); } .mobile-liquid-dock__item:active { transform: scale(0.88); transition-duration: 90ms; } .mobile-liquid-dock__item:focus-visible { outline: 3px solid rgba(55, 116, 223, 0.42); outline-offset: -4px; } .mobile-liquid-dock__badge { position: absolute; top: 9px; left: calc(50% + 11px); width: 8px; height: 8px; border: 1.5px solid rgba(255, 255, 255, 0.92); border-radius: 50%; background: #ff3158; box-shadow: 0 1px 5px rgba(255, 49, 88, 0.48); } .mobile-liquid-dock__badge--online { background: #20c868; box-shadow: 0 1px 5px rgba(32, 200, 104, 0.45); } .mobile-liquid-search { position: fixed; z-index: 1047; left: 50%; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); display: block; width: min(590px, calc(100% - 42px)); padding: 12px; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 26px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(250, 247, 242, 0.34)), rgba(250, 248, 244, 0.30); box-shadow: 0 14px 30px rgba(30, 26, 23, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 -1px 0 rgba(50, 44, 40, 0.10); -webkit-backdrop-filter: blur(32px) saturate(185%) brightness(1.06); backdrop-filter: blur(32px) saturate(185%) brightness(1.06); opacity: 0; visibility: hidden; transform: translate(-50%, 14px) scale(0.96); transform-origin: 70% 100%; transition: opacity 240ms ease, visibility 240ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1); } .mobile-liquid-search.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); } .mobile-liquid-search__bar { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 9px 0 16px; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: 18px; background: rgba(255, 255, 255, 0.36); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.78), inset 0 -1px 1px rgba(40, 35, 31, 0.06); } .mobile-liquid-search__bar > i { flex: 0 0 auto; color: rgba(30, 29, 29, 0.58); font-size: 20px; } .mobile-liquid-search__input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #1b1a1a; font-size: 16px; line-height: 1.2; } .mobile-liquid-search__input::placeholder { color: rgba(30, 29, 29, 0.46); } .mobile-liquid-search__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 50%; background: rgba(72, 67, 64, 0.10); color: #232222; } .mobile-liquid-search__results { display: grid; gap: 4px; max-height: min(36vh, 260px); margin: 8px 2px 0; overflow-y: auto; overscroll-behavior: contain; } .mobile-liquid-search__result, .mobile-liquid-search__empty { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; border-radius: 14px; color: #242222; font-size: 14px; line-height: 1.3; } .mobile-liquid-search__result:hover, .mobile-liquid-search__result:focus-visible { background: rgba(255, 255, 255, 0.38); } .mobile-liquid-search__result i { color: #3774df; } .mobile-liquid-search__empty { justify-content: flex-start; color: rgba(36, 34, 34, 0.62); } } @media (min-width: 1181px) { :root { --mobile-dock-bottom: 24px; --mobile-dock-height: 72px; } html { scroll-padding-bottom: 0; } body { padding-bottom: 0; } .navbar .menu-order.left-nav, .navbar .tablet-hide-header-cta { display: flex !important; } .mobile-liquid-dock { right: 24px; left: auto; bottom: var(--mobile-dock-bottom); width: 520px; height: var(--mobile-dock-height); padding: 6px; transform: translateZ(0); } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 60px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 10px); } .mobile-liquid-search { right: 24px; left: auto; bottom: calc(var(--mobile-dock-bottom) + var(--mobile-dock-height) + 12px); width: 520px; transform: translate(0, 14px) scale(0.96); transform-origin: 100% 100%; } .mobile-liquid-search.is-open { transform: translate(0, 0) scale(1); } } @media (max-width: 1180px) { .is-nav-dark { position: relative; overflow: visible !important; } .is-nav-dark::after { content: ""; position: absolute; z-index: 0; top: calc(100% - 1px); right: 0; left: 0; height: calc(var(--mobile-dock-height) + var(--mobile-dock-bottom) + 25px); background: #151515; pointer-events: none; } } @media (max-width: 420px) { :root { --mobile-dock-height: 74px; } .mobile-liquid-dock { width: calc(100% - 20px); padding: 6px; } .mobile-liquid-dock__lens { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); } .mobile-liquid-dock__item { min-height: 54px; } .mobile-liquid-dock__item i { font-size: 22px; } .mobile-liquid-dock__label { font-size: 10px; } .mobile-liquid-dock__badge { top: 8px; left: calc(50% + 9px); } } /* Claverio pointer-fluid effect, adapted to this page's hero/footer. */ .clv-fluid-hero, .clv-fluid-title-surface, .clv-fluid-footer { position: relative; isolation: isolate; } .clv-fluid-hero, .clv-fluid-title-surface { contain: layout paint; } .clv-fluid-hero::before, .clv-fluid-title-surface::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-image: radial-gradient(circle, rgba(24, 24, 22, 0.18) 0.7px, transparent 0.95px); background-position: center; background-size: 10px 10px; opacity: 0.42; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%); } .clv-fluid-footer { overflow: hidden; background-color: #050910 !important; background-image: none !important; } .clv-fluid-footer::before { position: absolute; inset: 0; z-index: 0; content: ""; pointer-events: none; background-color: #050910; background-image: radial-gradient(circle, rgba(237, 243, 254, 0.075) 1px, transparent 1.25px); background-position: center; background-size: 7px 7px; transition: opacity 160ms linear; } .clv-fluid-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; } .clv-fluid-canvas { display: block; width: 100%; height: 100%; pointer-events: none; } .clv-fluid-hero > .clv-fluid-layer-overlay, .clv-fluid-title-surface > .clv-fluid-layer-overlay { inset: 0; z-index: 2; background: transparent; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform; } .clv-fluid-footer > .container-fluid { position: relative; } .clv-fluid-copy-column, .clv-fluid-title-surface > .container, .clv-fluid-foreground { position: relative; z-index: 3; } /* Avoid re-blurring an animated WebGL surface every frame. The existing glass gradients, rim, refraction and shadows remain. */ .clv-fluid-hero.clv-fluid-ready .claverio-button.primary, .clv-fluid-hero.clv-fluid-ready .claverio-button.icon, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass, .clv-fluid-hero.clv-fluid-ready .claverio-play-glass--sonar .video-icon-sonar-bfr { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .clv-fluid-hero .animation-rotation, .clv-fluid-hero .animation-rotation-slow { backface-visibility: hidden; will-change: transform; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 0 !important; } .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title, .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer > .clv-fluid-layer-dark { z-index: 0; background: #050910; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 0; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; } .clv-fluid-footer .clv-footer-logo-aberration { position: relative; display: inline-block; isolation: isolate; } .clv-fluid-footer .clv-footer-logo-aberration > img:not(.clv-footer-logo-channel) { position: relative; z-index: 2; } .clv-fluid-footer .clv-footer-logo-channel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-height: none; opacity: 0; pointer-events: none; transform-origin: center; will-change: transform, opacity; } .clv-fluid-footer .clv-footer-logo-cyan { filter: brightness(0) saturate(100%) invert(80%) sepia(93%) saturate(2806%) hue-rotate(141deg) brightness(102%) contrast(105%); } .clv-fluid-footer .clv-footer-logo-magenta { filter: brightness(0) saturate(100%) invert(42%) sepia(94%) saturate(2748%) hue-rotate(316deg) brightness(104%) contrast(101%); } @media (max-width: 767px), (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .clv-fluid-layer { display: none; } .clv-fluid-hero.clv-fluid-ready h1, .clv-fluid-hero.clv-fluid-ready h1 * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-hero.clv-fluid-ready h1 .highlight-separator::after { opacity: 1 !important; } .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title, .clv-fluid-title-surface.clv-fluid-ready .clv-projects-breadcrumb-title * { color: #151515 !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title, .clv-fluid-footer.clv-fluid-ready .clv-footer-effect-title * { color: revert !important; -webkit-text-fill-color: currentColor !important; } .clv-fluid-footer.clv-fluid-ready::before { opacity: 1; } .clv-fluid-footer .clv-footer-logo-channel { display: none; } } @media (prefers-reduced-motion: reduce) { .claverio-button.primary, .claverio-button.primary::before, .claverio-button.icon, .claverio-button.icon::before, .claverio-button__icon, .claverio-button__icon i, .claverio-play-glass, .claverio-play-glass::before, .mobile-liquid-dock__rim, .mobile-liquid-dock__rim::before, .mobile-liquid-dock__rim::after, .mobile-liquid-dock__lens, .mobile-liquid-dock__item, .mobile-liquid-dock__item i, .mobile-liquid-search { transition-duration: 0.01ms !important; } } .clv-projects-breadcrumb { min-height: 520px; padding-bottom: 90px !important; overflow: hidden; } .clv-projects-breadcrumb-title { font-family: "Funnel Display", sans-serif !important; } .clv-projects-breadcrumb .page-title-extra-large { isolation: isolate; } .clv-projects-breadcrumb-heading { position: relative; z-index: 1; } .clv-projects-breadcrumb-heading .clv-projects-breadcrumb-title { position: relative; z-index: 1; } .clv-projects-breadcrumb .page-title-extra-large > .clv-breadcrumb-blue-mesh { top: 0; right: -5vw; left: auto; width: clamp(260px, 25vw, 420px) !important; transform-origin: top right; z-index: 0; } .clv-project-detail-list { margin: 0; padding-left: 20px; color: var(--medium-gray); } .clv-project-detail-list li { margin-bottom: 8px; padding-left: 3px; line-height: 1.5; } .clv-project-detail-list li:last-child { margin-bottom: 0; } ul.clv-project-detail-list li { list-style: disc; } ol.clv-project-detail-list li { list-style: decimal; } .clv-service-streamfield-spacer { height: clamp(64px, 8vw, 120px); } .clv-breadcrumb-blue-mesh { opacity: .34; pointer-events: none; } .clv-breadcrumb-brand-badge { width: 96px; height: 96px; object-fit: contain; } /* Universal Apple-style Liquid Glass material for content containers. */ .claverio-glass-container { --container-glass-radius: 15px; --container-glass-blur: 30px; --container-glass-x: 22%; --container-glass-y: 10%; --container-edge-x: 18%; --container-edge-y: 0%; --container-glass-tint: rgba(246, 244, 240, 0.14); position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.66); border-radius: var(--container-glass-radius); background: linear-gradient(118deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.13) 46%, rgba(255, 255, 255, 0.25)), var(--container-glass-tint); background-clip: padding-box; box-shadow: 0 9px 22px rgba(30, 27, 24, 0.045), 0 1px 5px rgba(30, 27, 24, 0.03), inset 0 1px 0.5px rgba(255, 255, 255, 0.84), inset 0 -1px 0.5px rgba(51, 45, 40, 0.10), inset 1px 0 0.5px rgba(255, 255, 255, 0.46), inset -1px 0 0.5px rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(var(--container-glass-blur)) saturate(185%) contrast(103%) brightness(1.07); backdrop-filter: blur(var(--container-glass-blur)) saturate(185%) contrast(103%) brightness(1.07); transform: translateZ(0); -webkit-tap-highlight-color: transparent; transition: border-color 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms cubic-bezier(.16, 1, .3, 1), background-color 520ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container::before { content: ""; position: absolute; z-index: 0; inset: 1px; border-radius: calc(var(--container-glass-radius) - 1px); background: radial-gradient(135% 110% at 50% 38%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025) 61%, rgba(255, 255, 255, 0.09)), radial-gradient(128px 88px at var(--container-edge-x) var(--container-edge-y), rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.13) 40%, transparent 76%), radial-gradient(172px 112px at var(--container-glass-x) var(--container-glass-y), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08) 46%, transparent 80%), radial-gradient(190px 116px at calc(var(--container-glass-x) - 66px) calc(var(--container-glass-y) + 36px), rgba(255, 135, 91, 0.10), transparent 74%), radial-gradient(194px 118px at calc(var(--container-glass-x) + 70px) calc(var(--container-glass-y) - 34px), rgba(255, 220, 119, 0.11), transparent 74%), radial-gradient(186px 114px at calc(var(--container-glass-x) + 80px) calc(var(--container-glass-y) + 40px), rgba(120, 188, 255, 0.12), transparent 74%), linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(255, 255, 255, 0.035) 68%, rgba(55, 48, 43, 0.025)); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.34), inset 0 12px 15px -17px rgba(255, 255, 255, 0.90), inset 0 -8px 12px -14px rgba(41, 35, 31, 0.12); opacity: 0.64; pointer-events: none; transition: opacity 460ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container::after { content: ""; position: absolute; z-index: 5; inset: -1px; padding: 1.8px; border-radius: inherit; background: radial-gradient(124px 58px at var(--container-edge-x) var(--container-edge-y), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.78) 38%, transparent 79%), radial-gradient(112px 52px at calc(var(--container-edge-x) - 13px) calc(var(--container-edge-y) + 4px), rgba(255, 195, 92, 0.76), transparent 73%), radial-gradient(112px 52px at calc(var(--container-edge-x) + 14px) calc(var(--container-edge-y) - 4px), rgba(91, 171, 255, 0.68), transparent 73%), conic-gradient(from 128deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.10) 25%, rgba(38, 34, 31, 0.09) 50%, rgba(255, 255, 255, 0.11) 75%, rgba(255, 255, 255, 0.62)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.52)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.22)) drop-shadow(0 1.5px 2px rgba(32, 28, 25, 0.075)); opacity: 0.64; pointer-events: none; transition: opacity 420ms cubic-bezier(.16, 1, .3, 1); } .claverio-glass-container > :not(.position-absolute) { position: relative; z-index: 2; } .claverio-glass-container:hover, .claverio-glass-container:focus-visible, .claverio-glass-container.is-glass-hovered { border-color: rgba(255, 255, 255, 0.82); box-shadow: 0 10px 24px rgba(30, 27, 24, 0.05), 0 1px 5px rgba(30, 27, 24, 0.03), inset 0 1px 0.5px rgba(255, 255, 255, 0.90), inset 0 -1px 0.5px rgba(51, 45, 40, 0.11), inset 1px 0 0.5px rgba(255, 255, 255, 0.50), inset -1px 0 0.5px rgba(255, 255, 255, 0.30); transform: translateZ(0); } .claverio-glass-container:hover::before, .claverio-glass-container:focus-visible::before, .claverio-glass-container.is-glass-hovered::before { opacity: 1; } .claverio-glass-container:hover::after, .claverio-glass-container:focus-visible::after, .claverio-glass-container.is-glass-hovered::after { opacity: 1; } .claverio-glass-container:focus-visible { outline: 3px solid rgba(55, 116, 223, 0.24); outline-offset: 4px; } .claverio-glass-container--compact { --container-glass-radius: 15px; --container-glass-blur: 32px; --container-glass-tint: rgba(248, 247, 244, 0.16); } .claverio-glass-container--metric { --container-glass-radius: 15px; --container-glass-blur: 30px; --container-glass-tint: rgba(248, 247, 244, 0.14); } .claverio-glass-container--service { --container-glass-radius: 15px; --container-glass-blur: 34px; --container-glass-tint: rgba(246, 244, 240, 0.12); } .claverio-glass-container--ecosystem { --container-glass-radius: 20px; --container-glass-blur: 32px; --container-glass-tint: rgba(246, 244, 240, 0.13); } .claverio-glass-container.is-glass-idle::before { opacity: 0.18; } .claverio-glass-container.is-glass-idle::after { opacity: 0.24; } .clv-services-cards { padding: clamp(72px, 7vw, 110px) 0 clamp(84px, 8vw, 126px); border-top: 1px solid rgba(23, 23, 23, 0.10); background: #fbfaf7; } .clv-services-process { padding-bottom: clamp(90px, 9vw, 140px); background: #fbfaf7; } .clv-services-process .feature-box-icon img { width: 64px; height: 64px; object-fit: contain; } @media (max-width: 767px) { .clv-projects-breadcrumb { min-height: 460px; padding-bottom: 70px !important; } } @media (max-width: 767px) { .clv-services-cards { padding-top: 58px; } }