/*
* Click Solutionz - custom CSS
*
* Use ONLY when Elementor Pro has no option for the style.
* Prefer Site Settings (Global Colors / Fonts) and widget Style tabs first.
* Classes below are added in Elementor > Advanced > CSS Classes.
*/
/* -------------------------------------------------------------------------
* Accent words in headings
* word -> italic serif (Instrument Serif)
* word -> word inside a brand pill
* ---------------------------------------------------------------------- */
.elementor-heading-title em,
.cs-serif {
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
}
.elementor-heading-title .cs-pill {
display: inline-block;
padding: 0.02em 0.32em 0.08em;
border-radius: 999px;
background: linear-gradient(135deg, #6A4A9E 0%, #4BC8EA 100%);
color: #fff;
line-height: 1.05;
}
.cs-accent-cyan em {
color: #4BC8EA;
}
.cs-accent-purple em {
color: #6A4A9E;
}
/* -------------------------------------------------------------------------
* Marquee
* .cs-marquee on the outer container; the scrolling row is either an Icon List
* inside it, or an inner container with class .cs-marquee__track.
* Put the items in twice so the loop is seamless.
* ---------------------------------------------------------------------- */
.cs-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cs-marquee .elementor-icon-list-items,
.cs-marquee .cs-marquee__track {
flex-wrap: nowrap !important;
width: max-content !important;
max-width: none !important;
animation: cs-marquee var(--cs-marquee-speed, 40s) linear infinite;
}
.cs-marquee .elementor-icon-list-item {
white-space: nowrap;
}
.cs-marquee:hover .elementor-icon-list-items,
.cs-marquee:hover .cs-marquee__track {
animation-play-state: paused;
}
@keyframes cs-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* -------------------------------------------------------------------------
* Glass card (class: cs-glass) - frosted panel on photos
* ---------------------------------------------------------------------- */
.cs-glass {
-webkit-backdrop-filter: blur(16px) saturate(160%);
backdrop-filter: blur(16px) saturate(160%);
}
/* -------------------------------------------------------------------------
* Image zoom on card hover (class: cs-zoom on the card container)
* ---------------------------------------------------------------------- */
.cs-zoom .elementor-widget-image {
overflow: hidden;
border-radius: inherit;
}
.cs-zoom .elementor-widget-image img {
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-zoom:hover .elementor-widget-image img {
transform: scale(1.06);
}
/* -------------------------------------------------------------------------
* Buttons: arrow nudges forward on hover
* ---------------------------------------------------------------------- */
.elementor-button .elementor-button-icon {
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.elementor-button:hover .elementor-button-icon,
.elementor-button:focus-visible .elementor-button-icon {
transform: translateX(4px);
}
/* -------------------------------------------------------------------------
* Header: transparent over the banner hero; dark glass once sticky effects kick in.
* Every page starts with a banner hero (class cs-banner), so the header overlays it.
* ---------------------------------------------------------------------- */
.elementor-location-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.admin-bar .elementor-location-header {
top: 32px;
}
.elementor-location-header .elementor-sticky--effects {
background-color: rgba(15, 11, 31, 0.78) !important;
-webkit-backdrop-filter: saturate(160%) blur(14px);
backdrop-filter: saturate(160%) blur(14px);
}
/* -------------------------------------------------------------------------
* Circle-arrow pill button (class: cs-btn-circle on a Button widget, icon left)
* ---------------------------------------------------------------------- */
.cs-btn-circle .elementor-button {
padding: 6px 24px 6px 6px !important;
}
.cs-btn-circle .elementor-button-content-wrapper {
align-items: center;
gap: 14px;
}
.cs-btn-circle .elementor-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #4BC8EA;
color: #0F0B1F;
fill: #0F0B1F;
margin: 0 !important;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-btn-circle .elementor-button-icon svg {
fill: #0F0B1F;
width: 14px;
}
.cs-btn-circle .elementor-button:hover .elementor-button-icon {
transform: rotate(-45deg);
}
/* -------------------------------------------------------------------------
* Vertical grid lines over banners (class: cs-lines on a container)
* ---------------------------------------------------------------------- */
/*
* Six static lines plus a glowing cyan dash travelling down each one.
* Each dash layer repeats vertically with its own period, and the animation moves
* every layer by exactly one period, so the loop is seamless and each line runs at
* a slightly different speed.
*/
.cs-lines::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
--cs-col: calc((min(100vw, 1240px) - 48px) / 5);
--cs-x: calc((100vw - min(100vw, 1240px)) / 2 + 24px);
--cs-dash: linear-gradient(to bottom, transparent 0%, transparent 86%, rgba(75, 200, 234, 0.35) 88%, #7FE3FF 95%, transparent 100%);
background-image:
var(--cs-dash), var(--cs-dash), var(--cs-dash), var(--cs-dash), var(--cs-dash), var(--cs-dash),
linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
background-size:
2px 520px, 2px 680px, 2px 600px, 2px 760px, 2px 560px, 2px 720px,
var(--cs-col) 100%;
background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat;
background-position:
var(--cs-x) 0,
calc(var(--cs-x) + var(--cs-col)) -240px,
calc(var(--cs-x) + var(--cs-col) * 2) -90px,
calc(var(--cs-x) + var(--cs-col) * 3) -420px,
calc(var(--cs-x) + var(--cs-col) * 4) -160px,
calc(var(--cs-x) + var(--cs-col) * 5) -330px,
var(--cs-x) 0;
animation: cs-line-dash 9s linear infinite;
}
@keyframes cs-line-dash {
to {
background-position:
var(--cs-x) 520px,
calc(var(--cs-x) + var(--cs-col)) 440px,
calc(var(--cs-x) + var(--cs-col) * 2) 510px,
calc(var(--cs-x) + var(--cs-col) * 3) 340px,
calc(var(--cs-x) + var(--cs-col) * 4) 400px,
calc(var(--cs-x) + var(--cs-col) * 5) 390px,
var(--cs-x) 0;
}
}
.cs-lines > .e-con-inner,
.cs-lines > .elementor-element {
position: relative;
z-index: 1;
}
/* -------------------------------------------------------------------------
* Spinning circular text badge (class: cs-spin on a Text Path widget)
* ---------------------------------------------------------------------- */
.cs-spin svg {
animation: cs-spin 14s linear infinite;
}
@keyframes cs-spin {
to { transform: rotate(360deg); }
}
/* Tilted accent pill (class: cs-tilt on a Button widget) */
.cs-tilt {
transform: rotate(-14deg);
}
.cs-tilt .elementor-button {
box-shadow: 0 18px 40px -16px rgba(75, 200, 234, 0.6);
}
/* Giant section word: never wrap (class: cs-giant on a Heading) */
.cs-giant .elementor-heading-title {
white-space: nowrap;
}
/* -------------------------------------------------------------------------
* Motion layer helpers (see assets/js/cs-motion.js)
* ---------------------------------------------------------------------- */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.cs-w {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding-bottom: 0.2em;
margin-bottom: -0.2em;
}
.cs-w > span {
display: inline-block;
will-change: transform;
}
.cs-parallax {
overflow: hidden;
}
/* Animated blurred gradient orbs (class: cs-orb on an absolutely positioned container) */
.cs-orb {
border-radius: 50%;
filter: blur(70px);
opacity: 0.55;
pointer-events: none;
animation: cs-orb 18s ease-in-out infinite alternate;
}
.cs-orb--b {
animation-duration: 22s;
animation-direction: alternate-reverse;
}
@keyframes cs-orb {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, -40px) scale(1.15); }
100% { transform: translate(-40px, 50px) scale(0.95); }
}
/* Floating UI chips (class: cs-float, cs-float--slow) */
.cs-float {
animation: cs-float 6s ease-in-out infinite;
}
.cs-float--slow {
animation-duration: 8s;
animation-delay: -2s;
}
@keyframes cs-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* Pulsing live dot (class: cs-live on an Icon widget) */
.cs-live .elementor-icon {
animation: cs-live 1.8s ease-out infinite;
border-radius: 50%;
}
@keyframes cs-live {
0% { box-shadow: 0 0 0 0 rgba(75, 200, 234, 0.6); }
100% { box-shadow: 0 0 0 10px rgba(75, 200, 234, 0); }
}
/* Subtle grid background (class: cs-grid-bg) */
.cs-grid-bg {
background-image:
linear-gradient(rgba(106, 74, 158, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(106, 74, 158, 0.06) 1px, transparent 1px);
background-size: 56px 56px;
}
/* Animated gradient background (class: cs-gradient-anim) */
.cs-gradient-anim {
background-image: linear-gradient(120deg, #2A1B52, #6A4A9E, #3E8FC9, #2A1B52) !important;
background-size: 300% 300% !important;
animation: cs-gradient 14s ease infinite;
}
@keyframes cs-gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Process timeline line that fills while scrolling (class: cs-progress) */
.cs-progress {
background-image: linear-gradient(90deg, #6A4A9E, #4BC8EA), linear-gradient(#E6E1F0, #E6E1F0);
background-size: var(--cs-progress, 0%) 2px, 100% 2px;
background-position: 0 31px, 0 31px;
background-repeat: no-repeat;
}
/* -------------------------------------------------------------------------
* Horizontal accordion (services). Structure built in Elementor:
* .cs-hacc > .cs-hacc__item > ( .cs-hacc__tab + .cs-hacc__panel )
* ---------------------------------------------------------------------- */
.cs-hacc {
align-items: stretch !important;
}
.cs-hacc > .cs-hacc__item {
flex: 0 0 104px !important;
width: auto !important;
min-height: 600px;
overflow: hidden;
cursor: pointer;
transition: flex-basis 0.8s cubic-bezier(0.65, 0, 0.35, 1), flex-grow 0.8s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease, transform 0.4s ease;
}
.cs-hacc > .cs-hacc__item:hover:not(.is-open) {
transform: translateY(-4px);
box-shadow: 0 20px 40px -24px rgba(23, 18, 43, 0.35);
}
.cs-hacc > .cs-hacc__item.is-open {
flex: 1 1 0 !important;
cursor: default;
}
.cs-hacc__tab {
transition: opacity 0.3s ease;
}
.cs-hacc__tab .cs-vertical .elementor-heading-title {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
.cs-hacc__item.is-open .cs-hacc__tab {
opacity: 0;
pointer-events: none;
position: absolute !important;
}
.cs-hacc__panel {
opacity: 0;
visibility: hidden;
position: absolute !important;
min-width: 760px;
transition: opacity 0.4s ease;
}
.cs-hacc__item.is-open .cs-hacc__panel {
opacity: 1;
visibility: visible;
position: relative !important;
transition-delay: 0.35s;
}
@media (max-width: 1024px) {
.cs-hacc {
flex-direction: column !important;
}
.cs-hacc > .cs-hacc__item,
.cs-hacc > .cs-hacc__item.is-open {
flex: 0 0 auto !important;
min-height: 0;
}
.cs-hacc__tab {
flex-direction: row !important;
align-items: center !important;
}
.cs-hacc__tab .cs-vertical .elementor-heading-title {
writing-mode: horizontal-tb;
transform: none;
}
.cs-hacc__panel {
min-width: 0;
}
.cs-hacc__item:not(.is-open) .cs-hacc__panel {
display: none !important;
}
}
/* Scroll-inside screenshot preview (class: cs-scrollshot on a fixed-height container) */
.cs-scrollshot {
overflow: hidden;
}
.cs-scrollshot img {
transition: transform 7s cubic-bezier(0.45, 0, 0.55, 1);
}
.cs-scrollshot:hover img {
transform: translateY(calc(-100% + var(--cs-frame, 460px)));
}
/* -------------------------------------------------------------------------
* Accessibility: visible keyboard focus + reduced motion
* ---------------------------------------------------------------------- */
a:focus-visible,
.elementor-button:focus-visible {
outline: 2px solid #4BC8EA;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
/* Gentle motion (reveals, marquee, floats) stays on; large movement is reduced. */
.cs-scrollshot img {
transition: none;
}
}
/* Icon list with the arrow after the text, rotated to point up-right (class: cs-icon-right) */
.cs-icon-right .elementor-icon-list-item > a,
.cs-icon-right .elementor-icon-list-item {
flex-direction: row-reverse;
justify-content: flex-end;
gap: 10px;
}
.cs-icon-right .elementor-icon-list-icon {
transform: rotate(45deg);
transition: transform 0.3s ease;
}
.cs-icon-right .elementor-icon-list-item:hover .elementor-icon-list-icon {
transform: rotate(90deg);
}
/* Petal image: one photo split across four rounded tiles (classes: cs-petal cs-petal--tl|tr|bl|br) */
.cs-petal {
background-size: 200% 200% !important;
}
.cs-petal--tl { background-position: 0 0 !important; }
.cs-petal--tr { background-position: 100% 0 !important; }
.cs-petal--bl { background-position: 0 100% !important; }
.cs-petal--br { background-position: 100% 100% !important; }
/* Circle link: text and arrow turn white on hover (class: cs-circle-link) */
.cs-circle-link,
.cs-circle-link * {
transition: color 0.3s ease, background-color 0.3s ease, transform 0.4s ease;
}
.cs-circle-link:hover .elementor-heading-title,
.cs-circle-link:hover .elementor-icon {
color: #fff !important;
}
.cs-circle-link:hover .elementor-icon {
transform: rotate(-45deg);
}
/* Photos start black & white and turn to colour on hover (class: cs-gray on a container) */
.cs-gray img {
filter: grayscale(1);
transition: filter 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-gray:hover img {
filter: grayscale(0);
}
/* Underlined serif accent words (class: cs-underline on a Heading) */
.cs-underline em {
color: #6A4A9E;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.12em;
}
/* Serif accent words stay lowercase inside caps headings (contrast like an editorial headline) */
.elementor-heading-title em {
text-transform: lowercase;
font-size: 1.08em;
line-height: 0.9;
}
/* Marquee running the other way (class: cs-marquee--reverse) */
.cs-marquee--reverse .cs-marquee__track {
animation-direction: reverse;
--cs-marquee-speed: 55s;
}
.cs-marquee .cs-marquee__track > .e-con {
flex-shrink: 0;
}
/* Industry rows: dark on hover, text turns white, photo slides in (class: cs-industry) */
.cs-industry,
.cs-industry * {
transition: color 0.35s ease, background-color 0.35s ease, width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, transform 0.4s ease;
}
.cs-industry .elementor-widget-image {
width: 0 !important;
opacity: 0;
overflow: hidden;
}
.cs-industry:hover .elementor-widget-image {
width: 170px !important;
opacity: 1;
}
.cs-industry:hover .elementor-heading-title,
.cs-industry:hover .elementor-widget-text-editor {
color: #FFFFFF !important;
}
.cs-industry:hover .elementor-icon {
transform: rotate(-45deg);
}
/* Big stat number with a small superscript unit (class: cs-bignum on a Heading) */
.cs-bignum sup {
font-size: 0.3em;
font-weight: 600;
letter-spacing: -0.01em;
vertical-align: top;
position: relative;
top: 0.12em;
margin-left: 0.06em;
}
/* Falling pills keep their own size and never wrap */
.cs-pillchip .elementor-heading-title {
white-space: nowrap;
}
/* Giant marquee: every other word outlined (class: cs-giant-marquee on the Icon List) */
.cs-giant-marquee .elementor-icon-list-item:nth-child(even) .elementor-icon-list-text {
color: transparent !important;
-webkit-text-stroke: 1.5px #17122B;
}
.cs-marquee--slow {
--cs-marquee-speed: 60s;
}
/* Mega menu link rows: arrow slides in on hover (class: cs-mlink) */
.cs-mlink .cs-mlink-arrow {
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.cs-mlink:hover .cs-mlink-arrow {
opacity: 1;
transform: translateX(0);
}
.cs-mlink:hover .elementor-heading-title {
color: #4BC8EA !important;
}
.cs-mlink:hover .elementor-heading-title + * .elementor-heading-title,
.cs-mlink:hover .e-con .elementor-element:last-child .elementor-heading-title {
color: rgba(255, 255, 255, 0.75) !important;
}