.trades-orbit {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--ty-color-ink);
color: var(--ty-color-text-onink);
margin-top: -56px;
margin-bottom: -48px;
padding: 96px 0 132px;
clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 32px), 0 100%);
}
@media (max-width: 61.9375rem) {
.trades-orbit { padding: 72px 0 104px; margin-top: -40px; margin-bottom: -36px; }
}
@media (max-width: 47.9375rem) {
.trades-orbit {
padding: 56px 0 84px; margin-top: -28px; margin-bottom: -28px;
clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%);
}
}
.trades-orbit__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.trades-orbit__ring-echo {
position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08);
left: 50%; top: 10%; transform: translate(-50%, -50%);
}
.trades-orbit__ring-echo--a { width: 120vw; height: 120vw; }
.trades-orbit__ring-echo--b { width: 80vw; height: 80vw; border-color: rgba(255,255,255,.05); }
.trades-orbit::before {
content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%; z-index: 0; pointer-events: none;
background: radial-gradient(ellipse at 50% 0%, rgba(30,111,217,.22), transparent 65%);
}
.trades-orbit::after {
content: ""; position: absolute; inset: auto -10% -20% -10%; height: 55%; z-index: 0; pointer-events: none;
background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.06), transparent 70%);
}
.trades-orbit__inner { position: relative; z-index: 1; text-align: center; }
.trades-orbit__eyebrow {
text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700;
color: var(--ty-color-primary-onink); margin: 0 0 12px;
}
.trades-orbit__modes { border: 0; padding: 0; margin: 0; min-width: 0; }
.trades-orbit__mode-input {
position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.trades-orbit__tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--ty-radius-pill); background: rgba(255,255,255,.08); margin: 0 auto 40px; }
.trades-orbit__tab {
display: inline-block; padding: 10px 20px; border-radius: var(--ty-radius-pill); cursor: pointer;
font-weight: 700; font-size: .92rem; color: var(--ty-color-text-onink-muted);
transition: background var(--ty-motion-standard), color var(--ty-motion-standard);
}
.trades-orbit__tab:hover { color: #fff; }
.trades-orbit__mode-input:first-of-type:checked ~ .trades-orbit__tabs .trades-orbit__tab--solo,
.trades-orbit__mode-input:last-of-type:checked ~ .trades-orbit__tabs .trades-orbit__tab--project {
background: #fff; color: var(--ty-color-ink);
}
.trades-orbit__mode-input:focus-visible ~ .trades-orbit__tabs { outline: 2px solid #fff; outline-offset: 3px; }
.trades-orbit__panel--project { display: none; }
.trades-orbit__mode-input:last-of-type:checked ~ .trades-orbit__panel--project { display: block; }
.trades-orbit__mode-input:last-of-type:checked ~ .trades-orbit__panel--solo { display: none; }
.trades-orbit__headline { font-size: clamp(1.3rem, .6vw + 1.2rem, 1.7rem); font-weight: 800; color: #fff; max-width: 640px; margin: 0 auto 10px; }
.trades-orbit__desc { color: var(--ty-color-text-onink-muted); max-width: 38em; margin: 0 auto 12px; text-align: center; }
.trades-orbit__path {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 560px; margin: 0 auto 18px;
font-weight: 700; font-size: .88rem; color: #fff;
}
.trades-orbit__path span { color: var(--ty-color-text-onink-muted); font-weight: 400; }
.trades-orbit__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ty-color-primary-onink); text-decoration: none; }
.trades-orbit__cta:hover, .trades-orbit__cta:focus-visible { text-decoration: underline; }
.trades-orbit__stage { display: flex; justify-content: center; margin: 8px auto 48px; }
.trades-orbit__ring { position: relative; width: min(420px, 82vw); aspect-ratio: 1 / 1; }
.trades-orbit__hub {
position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
box-shadow: 0 0 0 10px rgba(255,255,255,.03), 0 0 40px rgba(30,111,217,.35);
}
.trades-orbit__hub-mark { width: 30px; height: 22px; color: #fff; }
.trades-orbit__hub-word { font-size: .58rem; font-weight: 800; letter-spacing: .04em; color: var(--ty-color-text-onink-muted); }
.trades-orbit__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trades-orbit__link { stroke: rgba(255,255,255,.12); stroke-width: 1.5; }
.trades-orbit__project-link, .trades-orbit__pulse-line { opacity: 0; }
.trades-orbit__project-link { stroke-width: 3; }
.trades-orbit__mode-input:last-of-type:checked ~ .trades-orbit__stage .trades-orbit__project-link { opacity: .85; }
.trades-orbit__pulse-line {
stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 36 400; stroke-dashoffset: 0;
filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}
.trades-orbit__mode-input:last-of-type:checked ~ .trades-orbit__stage .trades-orbit__pulse-line {
opacity: 1;
animation: trades-orbit-pulse 3.6s linear infinite;
animation-delay: calc(-3.6s * var(--i) / var(--n));
}
@keyframes trades-orbit-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -440; } }
.trades-orbit__spot { position: absolute; width: 0; height: 0; text-align: center; }
.trades-orbit__body {
position: absolute; left: 0; top: 0; width: clamp(60px, 8vw, 96px); height: clamp(60px, 8vw, 96px);
transform: translate(-50%, -50%);
border-radius: 50%; display: grid; place-items: center;
background: var(--ty-color-primary); color: #fff;
box-shadow: 0 0 0 6px color-mix(in srgb, var(--ty-color-primary) 30%, transparent),
0 0 28px 4px color-mix(in srgb, var(--ty-color-primary) 55%, transparent);
transition: transform var(--ty-motion-standard);
}
.trades-orbit__body-icon { width: 44%; height: 44%; }
.trades-orbit__body-icon svg { width: 100%; height: 100%; }
.trades-orbit__body-name {
position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
white-space: nowrap; font-size: .78rem; font-weight: 800; color: #fff;
background: color-mix(in srgb, var(--ty-color-ink) 55%, transparent); padding: 2px 9px; border-radius: var(--ty-radius-pill);
}
.trades-orbit__handoff-tag {
position: absolute; top: calc(100% + 32px); left: 50%; transform: translateX(-50%); white-space: nowrap;
font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
color: var(--ty-color-ink); background: var(--ty-color-primary-onink); padding: 2px 8px; border-radius: var(--ty-radius-pill);
opacity: 0;
}
.trades-orbit__mode-input:last-of-type:checked ~ .trades-orbit__stage .trades-orbit__handoff-tag { opacity: 1; }
.trades-orbit__body { opacity: .55; }
.trades-orbit__mode-input:first-of-type:checked ~ .trades-orbit__stage .trades-orbit__body {
animation: trades-orbit-cycle 10s ease-in-out infinite;
animation-delay: calc(-10s * var(--i) / var(--n));
}
@keyframes trades-orbit-cycle {
0%, 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
24%, 100% { opacity: .68; transform: translate(-50%, -50%) scale(1); }
}
.trades-orbit__mode-input:last-of-type:checked ~ .trades-orbit__stage .trades-orbit__body { opacity: 1; animation: none; }
.trades-orbit__grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; text-align: left;
}
@media (max-width: 61.9375rem) { .trades-orbit__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 47.9375rem) { .trades-orbit__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 47.9375rem) { .trades-orbit__tile--lead { grid-column: 1 / -1; } }
.trades-orbit__tile {
position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 16px 44px;
min-height: 48px; border-radius: var(--ty-radius-panel); text-decoration: none; color: #fff;
background: color-mix(in srgb, var(--ty-color-primary) 16%, var(--ty-color-ink) 84%);
border: 1px solid color-mix(in srgb, var(--ty-color-primary) 35%, transparent);
border-top: 4px solid var(--ty-color-primary);
transition: background var(--ty-motion-standard), border-color var(--ty-motion-standard), transform var(--ty-motion-standard), box-shadow var(--ty-motion-standard);
overflow: hidden;
}
.trades-orbit__tile:hover, .trades-orbit__tile:focus-visible {
background: color-mix(in srgb, var(--ty-color-primary) 32%, var(--ty-color-ink) 68%);
border-color: var(--ty-color-primary);
box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ty-color-primary) 60%, transparent);
transform: translateY(-3px);
text-decoration: none;
outline: none;
}
.trades-orbit__tile:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ty-color-primary) 70%, #fff); }
.trades-orbit__tile-icon {
width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
background: var(--ty-color-primary); color: #fff;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ty-color-primary) 25%, transparent);
}
.trades-orbit__tile-icon svg { width: 19px; height: 19px; }
.trades-orbit__tile-name { font-weight: 800; font-size: 1.05rem; }
.trades-orbit__tile-promise { font-size: .84rem; color: var(--ty-color-text-onink-muted); line-height: 1.35; }
.trades-orbit__tile-proof {
display: flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; color: var(--ty-color-primary-onink);
}
.trades-orbit__tile-proof svg { width: 12px; height: 12px; flex: none; }
.trades-orbit__tile-status {
position: absolute; top: 14px; right: 14px; font-size: .64rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .04em; padding: 3px 9px; border-radius: var(--ty-radius-pill);
}
.trades-orbit__tile-status--live { background: color-mix(in srgb, var(--ty-color-success-ink) 30%, transparent); color: #b7f7c8; }
.trades-orbit__tile-status--pilot { background: rgba(255,255,255,.16); color: #fff; }
.trades-orbit__tile-link {
position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: .82rem; font-weight: 700;
color: var(--ty-color-primary-onink); display: flex; align-items: center; gap: 4px;
}
.trades-orbit__tile-link span { transition: transform var(--ty-motion-standard); }
.trades-orbit__tile:hover .trades-orbit__tile-link span,
.trades-orbit__tile:focus-visible .trades-orbit__tile-link span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.trades-orbit__body { animation: none !important; opacity: .85; }
.trades-orbit__mode-input:first-of-type:checked ~ .trades-orbit__stage .trades-orbit__body { transform: translate(-50%, -50%) scale(1); }
.trades-orbit__pulse-line { animation: none !important; opacity: .6; stroke-dasharray: none; }
.trades-orbit__mode-input:last-of-type:checked ~ .trades-orbit__stage .trades-orbit__project-link { opacity: .85; }
.trades-orbit__panel--solo, .trades-orbit__panel--project { display: block !important; }
.trades-orbit__panel--project { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
}