/* ------------------------------------------------------------------
eX Tech Wheel v3
Two-ring segmented donut wheel.
- Outer ring = primary platforms (icons + labels)
- Inner ring = supporting tech (icons only, named on hover)
Hovering any segment lights it up and shows that technology's
info inside the center hub.
------------------------------------------------------------------ */
.ex-tech-wheel-wrap {
position: relative;
width: 100%;
max-width: 640px;
margin: 24px auto 48px auto;
-webkit-user-select: none;
user-select: none;
}
.ex-tech-wheel-stage {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
}
/* Subtle radial glow behind the wheel */
.ex-tech-wheel-stage::before {
content: "";
position: absolute;
inset: 3%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,
rgba(0, 86, 166, 0.10) 0%,
rgba(0, 86, 166, 0.04) 45%,
rgba(255, 255, 255, 0) 70%);
z-index: 0;
}
.ex-tech-wheel-svg {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
z-index: 1;
display: block;
}
/* ------------------------------------------------------------------
Segments (shared)
------------------------------------------------------------------ */
/* The SVG wrapper - no native link styling */
.ex-tech-segment-link {
cursor: pointer;
text-decoration: none;
outline: none;
}
.ex-tech-segment-link:focus-visible .ex-tech-segment-shape {
stroke: #ffffff;
stroke-width: 4;
}
.ex-tech-segment {
outline: none;
transform-origin: 300px 300px;
transform-box: view-box;
opacity: 0;
transform: scale(0.94);
transition:
opacity 0.45s ease,
transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
filter 0.3s ease;
}
.ex-tech-segment.is-in {
opacity: 1;
transform: scale(1);
}
.ex-tech-segment-shape {
fill: var(--ex-seg-color, #0056A6);
stroke: #ffffff;
stroke-width: 2;
stroke-linejoin: round;
transition:
fill-opacity 0.25s ease,
filter 0.25s ease;
}
.ex-tech-segment-icon {
pointer-events: none;
transition: transform 0.25s ease, opacity 0.25s ease;
transform-origin: center;
transform-box: fill-box;
}
.ex-tech-segment-label {
pointer-events: none;
fill: #ffffff;
font-weight: 700;
font-family: inherit;
letter-spacing: 0.06em;
text-transform: uppercase;
paint-order: stroke;
stroke: rgba(0, 0, 0, 0.18);
stroke-width: 0.5;
}
/* Primary (outer) ring is fully saturated by default */
.ex-tech-segment.is-primary .ex-tech-segment-shape {
fill-opacity: 0.95;
}
/* Secondary (inner) ring is subtler so the eye reads outer first */
.ex-tech-segment.is-secondary .ex-tech-segment-shape {
fill-opacity: 0.78;
}
/* Dim non-hovered, non-related segments when something is active */
.ex-tech-wheel-svg.has-hover .ex-tech-segment:not(.is-hovered):not(.is-related) .ex-tech-segment-shape {
fill-opacity: 0.32;
}
.ex-tech-wheel-svg.has-hover .ex-tech-segment:not(.is-hovered):not(.is-related) .ex-tech-segment-icon {
opacity: 0.45;
}
/* Related segments stay lit (slightly under the hovered one) */
.ex-tech-wheel-svg.has-hover .ex-tech-segment.is-related .ex-tech-segment-shape {
fill-opacity: 0.95;
stroke: #ffffff;
stroke-width: 2.5;
}
.ex-tech-wheel-svg.has-hover .ex-tech-segment.is-related .ex-tech-segment-icon {
opacity: 1;
transform: scale(1.05);
}
/* Hovered segment - the brightest of the bunch */
.ex-tech-segment.is-hovered .ex-tech-segment-shape {
fill-opacity: 1;
filter: url(#ex-wheel-shadow) brightness(1.05);
}
.ex-tech-segment.is-hovered .ex-tech-segment-icon {
transform: scale(1.18);
opacity: 1;
}
/* ------------------------------------------------------------------
Center Hub (rendered as so it's a real link when active)
------------------------------------------------------------------ */
.ex-tech-wheel-hub {
--ex-hub-accent: #0056A6;
position: absolute;
top: 50%;
left: 50%;
/* SEC_IN is 116/600 = 19.3%, so hub diameter ~ 36% feels right */
width: 36%;
height: 36%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #ffffff;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.16),
0 2px 6px rgba(0, 0, 0, 0.06),
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.3s ease;
}
.ex-tech-wheel-hub[href] {
cursor: pointer;
}
.ex-tech-wheel-hub.is-active {
box-shadow:
0 0 0 4px color-mix(in srgb, var(--ex-hub-accent) 18%, transparent),
0 14px 44px rgba(0, 0, 0, 0.18),
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.ex-tech-wheel-hub:focus-visible {
outline: 3px solid var(--ex-hub-accent);
outline-offset: 3px;
}
.ex-tech-hub-default,
.ex-tech-hub-info {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: opacity 0.22s ease, transform 0.22s ease;
}
.ex-tech-hub-default {
padding: 3% 4%;
}
.ex-tech-hub-info {
padding: 7% 10%;
}
.ex-tech-hub-default {
opacity: 1;
transform: scale(1);
}
.ex-tech-hub-info {
opacity: 0;
transform: scale(0.96);
pointer-events: none;
}
.ex-tech-wheel-hub.is-active .ex-tech-hub-default {
opacity: 0;
transform: scale(0.96);
pointer-events: none;
}
.ex-tech-wheel-hub.is-active .ex-tech-hub-info {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.ex-tech-hub-default img {
max-width: 94%;
max-height: 80%;
width: auto;
height: auto;
display: block;
margin: 0 auto;
object-fit: contain;
}
.ex-tech-hub-tagline {
margin-top: 4px;
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.45);
line-height: 1;
}
.ex-tech-hub-title {
font-size: clamp(13px, 2.1vw, 21px);
font-weight: 800;
line-height: 1.1;
color: var(--ex-hub-accent);
margin-bottom: 6px;
}
.ex-tech-hub-desc {
font-size: clamp(10px, 1.1vw, 12.5px);
line-height: 1.35;
color: #333;
max-width: 96%;
}
.ex-tech-hub-cta {
margin-top: 8px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ex-hub-accent);
opacity: 0.85;
}
/* ------------------------------------------------------------------
Hidden data list (rendered for SEO / no-JS fallback)
------------------------------------------------------------------ */
.ex-tech-wheel-data {
list-style: none;
margin: 0;
padding: 0;
}
.ex-tech-wheel-data[hidden] {
display: none;
}
/* ------------------------------------------------------------------
Responsive
------------------------------------------------------------------ */
@media (max-width: 600px) {
.ex-tech-wheel-wrap {
max-width: 94vw;
}
.ex-tech-hub-tagline,
.ex-tech-hub-cta {
font-size: 9px;
}
}
/* Graceful fallback for browsers without color-mix() */
@supports not (background: color-mix(in srgb, red, blue)) {
.ex-tech-wheel-hub.is-active {
box-shadow:
0 0 0 4px rgba(0, 86, 166, 0.18),
0 14px 44px rgba(0, 0, 0, 0.18);
}
}
@media (prefers-reduced-motion: reduce) {
.ex-tech-segment,
.ex-tech-segment-shape,
.ex-tech-segment-icon,
.ex-tech-hub-default,
.ex-tech-hub-info,
.ex-tech-wheel-hub {
transition: none !important;
}
}