.fig-expertise-nav {
--fig-nav-size: clamp(390px, 27vw, 520px);
--active-angle: 0deg;
--segment-angle: 60deg;
--segment-half-angle: 30deg;
--dial-green: #0f2e32;
--dial-green-mid: #17383c;
--dial-warm: #d5c8b7;
position: sticky;
top: 120px;
width: var(--fig-nav-size);
aspect-ratio: 1;
margin-inline: auto;
color: #fff;
}
@media (min-width: 1025px) {
.fig-expertise-nav { top: calc(50svh - clamp(195px, 13.5vw, 260px) + 40px);
transform: translateX(clamp(-56px, -3vw, -24px));
}
}
.fig-expertise-nav::before {
content: "";
position: absolute;
inset: 4%;
border: 1px solid rgb(255 255 255 / 9%);
border-radius: 50%;
box-shadow: 0 0 70px rgb(8 27 29 / 40%);
}
.fig-expertise-nav::after {
content: "";
position: absolute;
z-index: 1;
inset: 7%;
border-radius: 50%;
background: conic-gradient(
from calc(-1 * var(--segment-half-angle)),
rgb(213 200 183 / 24%) 0deg,
rgb(213 200 183 / 14%) calc(var(--segment-angle) - 1deg),
transparent var(--segment-angle) 360deg
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 32px), #000 calc(100% - 31px));
mask: radial-gradient(farthest-side, transparent calc(100% - 32px), #000 calc(100% - 31px));
opacity: 0;
transform: rotate(var(--preview-angle, 0deg));
transition: opacity .18s ease;
pointer-events: none;
}
.fig-expertise-nav.has-preview::after {
opacity: 1;
} .fig-expertise-number {
min-width: 0;
}
.fig-expertise-number .wp-block-kadence-advancedheading {
white-space: nowrap;
overflow-wrap: normal;
word-break: keep-all;
} @media (min-width: 768px) {
.fig-expertise-row > .kt-row-column-wrap {
grid-template-columns: clamp(72px, 9vw, 150px) minmax(0, 1fr) !important;
}
.fig-expertise-row
> .kt-row-column-wrap
> .wp-block-kadence-column:not(.fig-expertise-number),
.fig-expertise-row
> .kt-row-column-wrap
> .wp-block-kadence-column:not(.fig-expertise-number)
> .kt-inside-inner-col {
width: 100%;
min-width: 0;
}
.fig-expertise-row
> .kt-row-column-wrap
> .wp-block-kadence-column:not(.fig-expertise-number)
.wp-block-kadence-advancedheading {
width: 100%;
max-width: none;
}
} .fig-expertise-number
+ .wp-block-kadence-column
.wp-block-kadence-advancedheading {
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.fig-expertise-nav__orbit {
position: absolute;
inset: 7%;
border-radius: 50%;
background: conic-gradient(from calc(-1 * var(--segment-half-angle)), var(--dial-warm) 0deg, #f4eee5 calc(var(--segment-angle) - 1deg), rgb(255 255 255 / 7%) var(--segment-angle) 360deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 32px), #000 calc(100% - 31px));
mask: radial-gradient(farthest-side, transparent calc(100% - 32px), #000 calc(100% - 31px));
filter: drop-shadow(0 0 8px rgb(213 200 183 / 18%));
transform: rotate(var(--active-angle));
transition: transform .35s ease;
}
.fig-expertise-nav__instruction {
position: absolute;
z-index: 4;
top: calc(100% + 38px);
left: 50%;
width: min(100%, 430px);
margin: 0;
color: #bfd0ce;
font-size: 13px;
line-height: 1.5;
text-align: center;
transform: translateX(-50%);
}
.fig-expertise-nav__center {
position: absolute;
inset: 24%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
}
.fig-expertise-nav__center strong {
color: #fff;
font-size: clamp(18px, 1.7vw, 28px);
font-weight: 550;
line-height: 1.1;
overflow-wrap: normal;
word-break: keep-all;
hyphens: none;
}
.fig-expertise-nav__item {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
width: 1px;
height: 1px;
color: #fff;
transform: rotate(var(--angle)) translateX(calc(var(--fig-nav-size) * .43)) rotate(var(--negative-angle));
}
.fig-expertise-nav__item > i {
position: absolute;
left: -6px;
top: -6px;
width: 11px;
height: 11px;
border: 1px solid #d5c8b7;
border-radius: 50%;
background: #17383c;
transition: .22s ease;
}
.fig-expertise-nav__item > span {
position: absolute;
left: 0;
top: 15px;
width: max-content;
max-width: 125px;
padding: 5px 8px 6px;
text-align: center;
background: transparent;
transform: translateX(-50%);
transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.fig-expertise-nav__item b,
.fig-expertise-nav__item strong {
display: block;
font-weight: 500;
line-height: 1.2;
}
.fig-expertise-nav__item b { color: #91aaa7; font-size: 9px; }
.fig-expertise-nav__item strong { margin-top: 3px; color: #fff; font-size: 10px; }
.fig-expertise-nav__item.is-active > i {
border: 2px solid var(--dial-warm);
background: var(--dial-green);
box-shadow: 0 0 0 5px var(--dial-green-mid), 0 0 0 8px rgb(213 200 183 / 53%);
transform: scale(1.55);
}
.fig-expertise-nav__item.is-active > span {
color: var(--dial-warm);
background: var(--dial-green);
box-shadow: 0 0 0 1px rgb(213 200 183 / 29%), 0 5px 16px rgb(11 36 39 / 29%);
}
.fig-expertise-nav__item.is-active b,
.fig-expertise-nav__item.is-active strong { color: #d5c8b7; }
.fig-expertise-nav__item:focus-visible { outline: none; }
.fig-expertise-nav__hotspots {
position: absolute;
z-index: 3;
inset: 7%;
border-radius: 50%;
-webkit-mask: radial-gradient(circle, transparent 0 67%, #000 68%);
mask: radial-gradient(circle, transparent 0 67%, #000 68%);
}
.fig-expertise-nav__hotspots > a {
position: absolute;
inset: 0;
display: block;
clip-path: polygon(50% 50%, 25% 6.7%, 50% 0, 75% 6.7%);
transform: rotate(calc(var(--index) * var(--segment-angle)));
cursor: pointer;
} .fig-expertise-nav__center {
padding: 0;
border: 0;
background: transparent;
font: inherit;
} @media (max-width: 767px) {
.fig-split-band__panel--start:has(.fig-expertise-nav),
.fig-split-band__panel--start:has(.fig-expertise-nav) > .kt-inside-inner-col {
min-height: 0 !important;
}
.fig-expertise-row {
position: relative;
isolation: isolate;
}
.fig-expertise-row > .kt-row-column-wrap {
position: relative;
grid-template-columns: minmax(0, 1fr) !important;
}
.fig-expertise-row .fig-expertise-number {
position: static;
z-index: auto;
inset: auto;
overflow: visible;
pointer-events: none;
}
.fig-expertise-row .fig-expertise-number .wp-block-kadence-advancedheading {
position: absolute !important;
z-index: 0;
top: 8px !important;
right: 12px !important;
left: auto !important;
margin: 0 !important;
opacity: .09 !important;
color: var(--global-palette1, #304d51) !important;
-webkit-text-fill-color: var(--global-palette1, #304d51);
font-size: clamp(82px, 25vw, 108px) !important;
font-weight: 500 !important;
line-height: .78 !important;
letter-spacing: -.08em !important;
}
.fig-expertise-row
> .kt-row-column-wrap
> .wp-block-kadence-column:not(.fig-expertise-number) {
position: relative;
z-index: 1;
grid-column: 1;
min-width: 0;
background: transparent !important;
text-align: left;
}
.fig-expertise-row
> .kt-row-column-wrap
> .wp-block-kadence-column:not(.fig-expertise-number)
> .kt-inside-inner-col {
background: transparent !important;
}
.fig-expertise-row
> .kt-row-column-wrap
> .wp-block-kadence-column:not(.fig-expertise-number)
.wp-block-kadence-advancedheading {
text-align: left !important;
}
.fig-split-band__panel--start.fig-green-gradient:has(.fig-expertise-nav) {
background: transparent !important;
}
.fig-split-band__panel--start:has(.fig-expertise-nav) > .kt-inside-inner-col {
padding-block: 0 !important;
}
.fig-expertise-nav {
--fig-nav-size: auto;
position: relative;
top: auto;
z-index: 20;
width: 100%;
aspect-ratio: auto;
padding: 0;
overflow: visible;
background: transparent;
color: var(--global-palette1, #304d51);
}
.fig-expertise-nav::before,
.fig-expertise-nav::after,
.fig-expertise-nav__orbit,
.fig-expertise-nav__hotspots,
.fig-expertise-nav__item > i {
display: none;
}
.fig-expertise-nav__center {
display: none;
}
.fig-expertise-nav__instruction {
position: static;
width: 100%;
margin: 0 0 18px;
color: var(--global-palette1, #304d51);
text-align: left;
transform: none;
}
.fig-expertise-nav__items,
.fig-expertise-nav.is-open .fig-expertise-nav__items {
position: static;
display: grid;
gap: 0;
width: 100%;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.fig-expertise-nav__item {
position: relative;
display: block;
left: auto;
top: auto;
width: auto;
height: auto;
padding: 17px 0;
border: 0;
border-top: 1px solid color-mix(in srgb, var(--global-palette1, #304d51) 18%, transparent);
border-radius: 0;
background: transparent;
color: var(--global-palette1, #304d51);
transform: none;
white-space: nowrap;
}
.fig-expertise-nav__item:last-child {
border-bottom: 1px solid color-mix(in srgb, var(--global-palette1, #304d51) 18%, transparent);
}
.fig-expertise-nav__item > span {
position: static;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: baseline;
gap: 10px;
max-width: none;
padding: 0;
text-align: left;
transform: none;
}
.fig-expertise-nav__item b {
margin: 0;
color: color-mix(in srgb, var(--global-palette1, #304d51) 52%, transparent);
font-size: 11px;
letter-spacing: .08em;
}
.fig-expertise-nav__item strong {
margin: 0;
color: var(--global-palette1, #304d51);
font-size: 16px;
font-weight: 500;
}
.fig-expertise-nav__item.is-active {
background: transparent;
}
.fig-expertise-nav__item.is-active b {
color: #a3927d;
}
.fig-expertise-nav__item.is-active strong {
color: var(--global-palette1, #304d51);
font-weight: 650;
}
}
@media (prefers-reduced-motion: reduce) {
.fig-expertise-nav__item > i { transition: none; }
}