/* ===================================================================
California Global LLC — Landing Styles
Minimalist · Dark & White · Apple-inspired
=================================================================== */
:root {
--black: #000000;
--ink: #0a0a0b;
--surface: #111113;
--surface-2: #161618;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.16);
--white: #ffffff;
--text: #f5f5f7;
--muted: #a1a1a6;
--muted-2: #6e6e73;
--accent: #ffffff;
--radius: 18px;
--radius-lg: 26px;
--maxw: 1180px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--display: "Manrope", var(--font);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
background: var(--black);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* Accessibility: keyboard focus indicator (shown only for keyboard users,
never on mouse/touch — so the normal visual appearance is unchanged). */
:focus-visible {
outline: 2px solid var(--white);
outline-offset: 3px;
border-radius: 6px;
}
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
/* ---------- Shared bits ---------- */
.eyebrow {
display: inline-block;
font-size: 12.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin-bottom: 18px;
}
.section { padding: clamp(80px, 11vw, 150px) 0; position: relative; }
.section__head { max-width: 640px; margin-bottom: 64px; }
.section__title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 4.4vw, 50px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--white);
}
.section__lead { color: var(--muted); font-size: 18px; margin-top: 20px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
font-size: 15.5px;
padding: 14px 30px;
border-radius: 980px;
border: 1px solid transparent;
cursor: pointer;
transition: transform .35s var(--ease), background .35s var(--ease),
border-color .35s var(--ease), color .35s var(--ease), opacity .3s var(--ease);
white-space: nowrap;
}
.btn--solid { background: var(--white); color: var(--black); }
.btn--solid:hover { transform: translateY(-2px); background: #e9e9ec; }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--white); background: rgba(255,255,255,.04); }
.btn--small { padding: 10px 20px; font-size: 14px; }
/* ===================================================================
Button micro-interactions — Technology page only (scoped via
.page-technology on ; buttons are a shared site-wide component,
so this keeps the Global Trade page and legal pages untouched).
Colors and sizes are unchanged — only motion/glow is added.
=================================================================== */
.page-technology .btn {
transition: transform .2s var(--ease), box-shadow .2s var(--ease),
background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.page-technology .btn--solid:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18);
}
.page-technology .btn--ghost:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 0 16px rgba(255, 255, 255, 0.1);
}
.page-technology .btn:active { transform: scale(0.98); }
/* ===================================================================
Navigation
=================================================================== */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
border-bottom: 1px solid transparent;
}
.nav.scrolled {
background: rgba(10, 10, 11, 0.72);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--line);
}
.nav__inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 16px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.01em; }
.brand__mark {
display: block;
height: 40px;
width: auto;
object-fit: contain;
}
.brand__name { font-size: 16px; color: var(--white); }
.nav__links { display: flex; gap: 34px; }
.nav__links a {
font-size: 15px;
color: var(--muted);
font-weight: 500;
transition: color .3s var(--ease);
}
.nav__links a:hover { color: var(--white); }
.nav__cta { display: inline-flex; }
/* Clear two-page switcher (segmented toggle) */
.nav__switch {
display: inline-flex;
gap: 4px;
padding: 5px;
border-radius: 980px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.04);
}
.nav__switch-btn {
position: relative;
padding: 9px 22px;
border-radius: 980px;
font-size: 14px;
font-weight: 600;
color: var(--muted);
transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__switch-btn:hover { color: var(--white); }
.nav__switch-btn.is-active { background: var(--white); color: var(--black); }
/* Centered section head (for vision/statement blocks) */
.center-head { text-align: center; margin-left: auto; margin-right: auto; }
.center-head .section__lead { margin-left: auto; margin-right: auto; }
/* Status badge (e.g. "under active development") */
.badge {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 24px;
padding: 8px 16px;
border-radius: 980px;
border: 1px solid var(--line-strong);
background: rgba(255, 255, 255, 0.04);
font-size: 13px;
font-weight: 500;
color: var(--muted);
}
.badge::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.nav__toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 42px; height: 42px;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: 11px;
cursor: pointer;
}
.nav__toggle span {
display: block;
width: 18px; height: 1.5px;
margin: 0 auto;
background: var(--white);
transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav__toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav__mobile {
display: none;
flex-direction: column;
background: rgba(10,10,11,.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
overflow: hidden;
max-height: 0;
transition: max-height .45s var(--ease);
}
.nav__mobile.open { max-height: 320px; }
.nav__mobile a {
padding: 17px 28px;
font-size: 17px;
color: var(--text);
border-top: 1px solid var(--line);
}
.nav__mobile a:first-child { border-top: none; }
/* ===================================================================
Hero
=================================================================== */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding: 140px 0 90px;
overflow: hidden;
background: radial-gradient(120% 90% at 50% -10%, #1b1b1f 0%, #0a0a0b 46%, #000 100%);
}
.hero__glow {
position: absolute;
top: -28%; left: 50%;
transform: translateX(-50%);
width: 900px; height: 900px;
background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 62%);
pointer-events: none;
animation: floatGlow 12s ease-in-out infinite alternate;
}
@keyframes floatGlow {
from { transform: translateX(-50%) translateY(0) scale(1); }
to { transform: translateX(-50%) translateY(34px) scale(1.06); }
}
.hero__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
-webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
pointer-events: none;
}
.hero__content { position: relative; text-align: center; max-width: 880px; }
.hero__title {
font-family: var(--display);
font-weight: 800;
font-size: clamp(36px, 6.6vw, 76px);
line-height: 1.04;
letter-spacing: -0.035em;
color: var(--white);
}
.hero__subtitle {
margin: 26px auto 0;
max-width: 660px;
font-size: clamp(16px, 2vw, 20px);
color: var(--muted);
line-height: 1.55;
}
.hero__actions {
margin-top: 38px;
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.hero__meta {
margin-top: 72px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 720px;
margin-inline: auto;
border-top: 1px solid var(--line);
padding-top: 34px;
}
.hero__meta div { display: flex; flex-direction: column; gap: 4px; }
.hero__meta strong {
font-family: var(--display);
font-size: clamp(18px, 3vw, 24px);
font-weight: 700;
color: var(--white);
}
.hero__meta span { font-size: 13px; color: var(--muted-2); letter-spacing: .02em; }
/* ===================================================================
Services
=================================================================== */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.card {
background: linear-gradient(180deg, var(--surface) 0%, var(--ink) 100%);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 34px 30px;
transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.card:hover {
transform: translateY(-6px);
border-color: var(--line-strong);
background: linear-gradient(180deg, var(--surface-2) 0%, var(--ink) 100%);
}
.card__icon {
width: 52px; height: 52px;
border-radius: 14px;
display: grid; place-items: center;
background: rgba(255,255,255,.05);
border: 1px solid var(--line);
color: var(--white);
margin-bottom: 22px;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--white); margin-bottom: 10px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 15.5px; }
/* ===================================================================
About
=================================================================== */
.section--about { background: linear-gradient(180deg, #000 0%, #0a0a0b 50%, #000 100%); }
.about {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: center;
}
.about__text p { color: var(--muted); font-size: 17px; margin-top: 20px; max-width: 540px; }
.about__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.stat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 24px;
transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.stat:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.stat strong {
display: block;
font-family: var(--display);
font-size: 30px;
font-weight: 800;
color: var(--white);
letter-spacing: -0.02em;
}
.stat span { color: var(--muted-2); font-size: 14px; margin-top: 6px; display: block; }
/* ===================================================================
Why Choose Us
=================================================================== */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.feature {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 34px 30px;
background: var(--ink);
transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.feature:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.feature__num {
font-family: var(--display);
font-size: 14px;
font-weight: 700;
color: var(--muted-2);
letter-spacing: .1em;
margin-bottom: 20px;
}
.feature h3 { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 15.5px; }
/* ===================================================================
"How we build" card micro-interactions (Technology page only —
scoped to .features--tech so the Global Trade page's own
"Why Choose" cards, which share this component, are untouched).
=================================================================== */
.features--tech .feature.reveal { transform: translateY(12px); }
.features--tech .feature.reveal.in { transform: none; }
#why .features--tech .feature:nth-child(1) { transition-delay: 0s; }
#why .features--tech .feature:nth-child(2) { transition-delay: .1s; }
#why .features--tech .feature:nth-child(3) { transition-delay: .2s; }
#why .features--tech .feature:nth-child(4) { transition-delay: .3s; }
#why .features--tech .feature:nth-child(5) { transition-delay: .4s; }
#why .features--tech .feature:nth-child(6) { transition-delay: .5s; }
.features--tech .feature:hover {
transform: translateY(-4px);
border-color: var(--line-strong);
}
.features--tech .feature__num { transition: color .4s var(--ease), text-shadow .4s var(--ease); }
.features--tech .feature:hover .feature__num {
color: var(--white);
text-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
}
/* ===================================================================
Contact
=================================================================== */
.section--contact {
background: radial-gradient(120% 90% at 50% 120%, #18181b 0%, #000 60%);
/* Tighter bottom so the footer reads as a natural extension of Contact */
padding-bottom: clamp(56px, 7vw, 88px);
}
.section--contact .section__head { margin-bottom: 0; }
.contact { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
.contact__intro p { color: var(--muted); font-size: 18px; margin-top: 18px; max-width: 420px; }
.contact__cards { display: grid; gap: 14px; }
.contact__card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px 28px;
transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
a.contact__card:hover { border-color: var(--line-strong); transform: translateY(-4px); background: var(--surface-2); }
.contact__label { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.contact__value { font-size: 18px; color: var(--white); font-weight: 500; line-height: 1.5; }
/* ===================================================================
Footer
=================================================================== */
.footer { border-top: 1px solid var(--line); padding: 44px 0; background: #000; }
.footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
}
.footer__brand { display: flex; align-items: center; gap: 11px; color: var(--white); font-weight: 600; font-size: 15px; }
.footer__brand .brand__mark { height: 34px; width: auto; }
.footer__brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.footer__brand-text small { font-size: 12px; font-weight: 500; color: var(--muted-2); letter-spacing: .02em; }
.footer__social { display: flex; gap: 12px; }
.social-icon {
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 11px;
border: 1px solid var(--line);
color: var(--muted);
transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
cursor: pointer;
}
.social-icon:hover { color: var(--white); border-color: var(--line-strong); transform: translateY(-3px); background: rgba(255,255,255,.04); }
.social-icon svg { width: 18px; height: 18px; }
.footer__copy { text-align: right; color: var(--muted-2); font-size: 13.5px; line-height: 1.5; }
/* ===================================================================
Reveal animation
=================================================================== */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
/* ===================================================================
Smooth page transitions (between index.html & global-trade.html)
Pure cross-fade — no blank/loading flash.
=================================================================== */
html { background: #000; } /* kills any flash between loads */
@keyframes pageIn {
from { opacity: 0; }
to { opacity: 1; }
}
body { animation: pageIn .4s var(--ease) both; }
/* Native seamless cross-document morph where supported (Chrome/Edge) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .4s; }
.cards .card:nth-child(2), .features .feature:nth-child(2) { transition-delay: .07s; }
.cards .card:nth-child(3), .features .feature:nth-child(3) { transition-delay: .14s; }
.cards .card:nth-child(4) { transition-delay: .07s; }
.cards .card:nth-child(5) { transition-delay: .14s; }
.cards .card:nth-child(6) { transition-delay: .21s; }
/* ===================================================================
Responsive
=================================================================== */
@media (max-width: 960px) {
.cards, .features { grid-template-columns: repeat(2, 1fr); }
.about { grid-template-columns: 1fr; gap: 40px; }
.contact { grid-template-columns: 1fr; gap: 36px; }
/* Keep the page-switch toggle visible at every size (no hamburger). */
.nav__links, .nav__cta { display: none; }
}
@media (max-width: 620px) {
.container, .nav__inner { padding-left: 20px; padding-right: 20px; }
.cards, .features { grid-template-columns: 1fr; }
.hero__meta { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
.about__stats { grid-template-columns: 1fr 1fr; }
.hero__actions .btn { flex: 1 1 auto; }
.footer__inner { flex-direction: column; text-align: center; }
.footer__copy { text-align: center; }
.brand__name { display: none; }
/* Compact the page-switch toggle so it always fits next to the logo. */
.nav__switch { padding: 4px; }
.nav__switch-btn { padding: 8px 15px; font-size: 13px; }
}
/* ===================================================================
Global Trade page additions
=================================================================== */
/* Active nav link */
.nav__links a.is-active { color: var(--white); }
.nav__mobile a.is-active {
color: var(--white);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--white);
}
/* Inner-page hero (shorter than full landing hero) */
.hero--page { min-height: auto; padding: 180px 0 110px; }
/* Service group (scalable: drop in more .trade-group blocks freely) */
.trade-group { margin-top: 56px; }
.trade-group:first-of-type { margin-top: 0; }
.trade-group__head {
display: flex;
align-items: center;
gap: 18px;
padding-bottom: 26px;
margin-bottom: 30px;
border-bottom: 1px solid var(--line);
}
.trade-group__icon {
flex: none;
width: 56px; height: 56px;
display: grid; place-items: center;
border-radius: 16px;
background: rgba(255,255,255,.05);
border: 1px solid var(--line);
color: var(--white);
}
.trade-group__icon svg { width: 28px; height: 28px; }
.trade-group__title {
font-family: var(--display);
font-size: clamp(22px, 3vw, 30px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--white);
}
.trade-group__sub { color: var(--muted); font-size: 15.5px; margin-top: 4px; }
/* Auto-fitting grid — add items and it scales automatically */
.trade-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.trade-item {
display: flex;
gap: 16px;
align-items: flex-start;
background: linear-gradient(180deg, var(--surface) 0%, var(--ink) 100%);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px 22px;
transition: transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.trade-item:hover {
transform: translateY(-5px);
border-color: var(--line-strong);
background: linear-gradient(180deg, var(--surface-2) 0%, var(--ink) 100%);
}
/* Cursor affordance only (no visual/layout change) for service cards that
trigger a chat response — see chat.js. Existing global :focus-visible
already covers the keyboard-focus ring, so nothing new is needed there. */
.trade-item[data-chat-topic] { cursor: pointer; }
.trade-item__icon {
flex: none;
width: 42px; height: 42px;
display: grid; place-items: center;
border-radius: 12px;
background: rgba(255,255,255,.05);
border: 1px solid var(--line);
color: var(--white);
}
.trade-item__icon svg { width: 21px; height: 21px; }
.trade-item h4 { font-family: var(--display); font-size: 16.5px; font-weight: 700; color: var(--white); letter-spacing: -0.01em; }
.trade-item p { color: var(--muted); font-size: 14.5px; margin-top: 5px; line-height: 1.5; }
/* ===================================================================
Service card micro-interactions (Technology page "For Our Clients"
cards only — scoped to .solutions--tech so the Global Trade page's
own .trade-item cards, which share this component, are untouched).
=================================================================== */
.solutions--tech .trade-item {
position: relative;
overflow: hidden; /* clips the light-sweep to the card's rounded corners */
}
.solutions--tech .trade-item:hover {
transform: translateY(-6px);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 22px rgba(255, 255, 255, 0.06);
}
.solutions--tech .trade-item__icon { transition: transform .4s var(--ease); }
.solutions--tech .trade-item:hover .trade-item__icon { transform: scale(1.08); }
.solutions--tech .trade-item::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58%);
transform: translateX(-120%);
pointer-events: none;
}
.solutions--tech .trade-item:hover::after {
animation: tradeCardSweep .9s var(--ease) 1;
}
@keyframes tradeCardSweep {
to { transform: translateX(120%); }
}
/* Our Markets */
.markets {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.markets__text p { color: var(--muted); font-size: 18px; margin-top: 20px; max-width: 480px; }
.markets__panel {
position: relative;
aspect-ratio: 1 / 1;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: radial-gradient(120% 100% at 50% 0%, #161618 0%, #0a0a0b 70%);
overflow: hidden;
display: grid;
place-items: center;
}
.markets__grid {
position: absolute; inset: 0;
background-size: 44px 44px;
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
}
.markets__orbit {
position: relative;
width: 72%; aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: grid; place-items: center;
animation: spin 26s linear infinite;
}
.markets__orbit::before {
content: "";
position: absolute;
width: 64%; aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--line);
}
.markets__core {
width: 30%; aspect-ratio: 1;
border-radius: 50%;
display: grid; place-items: center;
background: var(--white);
color: var(--black);
animation: spin 26s linear infinite reverse;
}
.markets__core svg { width: 56%; height: 56%; }
.markets__dot {
position: absolute;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 0 18px rgba(255,255,255,.45);
}
.markets__dot:nth-child(1) { top: -6px; left: 50%; transform: translateX(-50%); }
.markets__dot:nth-child(2) { bottom: -6px; left: 50%; transform: translateX(-50%); }
.markets__dot:nth-child(3) { left: -6px; top: 50%; transform: translateY(-50%); }
.markets__dot:nth-child(4) { right: -6px; top: 50%; transform: translateY(-50%); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 960px) {
.markets { grid-template-columns: 1fr; gap: 40px; }
.markets__panel { max-width: 420px; }
.hero--page { padding: 150px 0 90px; }
}
@media (max-width: 620px) {
.trade-list { grid-template-columns: 1fr; }
.trade-group__head { gap: 14px; }
}
/* ===================================================================
AI Assistant chat widget
=================================================================== */
.chat {
max-width: 720px;
margin: 56px auto 0;
background: linear-gradient(180deg, var(--surface) 0%, var(--ink) 100%);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.chat__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.02);
}
.chat__id { display: flex; align-items: center; gap: 12px; }
.chat__avatar {
width: 42px; height: 42px;
flex: none;
border-radius: 13px;
display: grid; place-items: center;
background: var(--white);
color: var(--black);
}
.chat__avatar svg { width: 22px; height: 22px; }
.chat__id strong {
display: block;
font-family: var(--display);
font-size: 15px;
color: var(--white);
letter-spacing: -0.01em;
}
.chat__status {
display: flex; align-items: center; gap: 7px;
font-size: 12.5px;
color: var(--muted-2);
}
.chat__status i {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 0 9px rgba(255, 255, 255, 0.7);
animation: chatPulse 2s ease-in-out infinite;
}
@keyframes chatPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.chat__badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--muted-2);
border: 1px solid var(--line);
border-radius: 980px;
padding: 6px 12px;
white-space: nowrap;
}
.chat__badge svg { width: 13px; height: 13px; }
.chat__window {
height: 380px;
overflow-y: auto;
padding: 22px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
}
.chat__window::-webkit-scrollbar { width: 8px; }
.chat__window::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.chat__welcome {
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.02);
border-radius: 18px;
padding: 26px 22px;
text-align: center;
animation: bubbleIn .4s var(--ease) both;
}
.chat__welcome-icon {
width: 48px; height: 48px;
border-radius: 14px;
display: inline-grid;
place-items: center;
background: var(--white);
color: var(--black);
margin-bottom: 14px;
}
.chat__welcome-icon svg { width: 24px; height: 24px; }
.chat__welcome h4 {
font-family: var(--display);
font-size: 18px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.01em;
margin-bottom: 10px;
}
.chat__welcome p {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
max-width: 48ch;
margin: 0 auto 10px;
}
.chat__welcome-hint { color: var(--muted-2); font-size: 13px; margin-top: 6px; }
/* Idle "ready" indicator — calm, premium, non-conversational */
.chat__ready {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 18px;
font-size: 13px;
color: var(--muted);
}
.chat__ready-dots { display: inline-flex; gap: 5px; }
.chat__ready-dots span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--white);
opacity: .4;
animation: readyPulse 1.6s ease-in-out infinite;
}
.chat__ready-dots span:nth-child(2) { animation-delay: .2s; }
.chat__ready-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes readyPulse {
0%, 100% { opacity: .25; transform: scale(.85); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
50% { opacity: .9; transform: scale(1); box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); }
}
/* Suggestion chips (clickable conversation starters) */
.chat__suggestions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.chat__chip {
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 980px;
padding: 9px 15px;
cursor: pointer;
transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.chat__chip:hover {
border-color: var(--line-strong);
background: var(--surface-2);
transform: translateY(-2px);
}
/* Multilingual greeting cycler — types in, pauses, fades, moves to the next
language. Plain typography only (no chips/borders/icons). */
.chat__greeting {
min-height: 24px;
margin: 2px 0 16px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-size: 16px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.005em;
transition: opacity .45s var(--ease);
}
.chat__greeting.is-fading { opacity: 0; }
.chat__greeting-caret {
display: inline-block;
width: 2px;
height: 1em;
margin-left: 2px;
background: var(--muted);
animation: greetingCaret 1s step-end infinite;
}
@keyframes greetingCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.chat__msg { display: flex; align-items: flex-end; gap: 9px; max-width: 84%; }
.chat__msg--user { align-self: flex-end; justify-content: flex-end; }
.chat__msg--ai { align-self: flex-start; }
/* AI message avatar — existing logo in a premium dark container */
.chat__avatar-sm {
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--surface-2);
border: 1px solid var(--line);
box-shadow: 0 0 14px rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.chat__avatar-sm img { width: 66%; height: auto; display: block; }
.chat__bubble {
padding: 12px 16px;
border-radius: 16px;
font-size: 14.5px;
line-height: 1.55;
word-wrap: break-word;
animation: bubbleIn .35s var(--ease) both;
}
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat__msg--ai .chat__bubble {
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--text);
border-top-left-radius: 5px;
}
.chat__msg--user .chat__bubble {
background: var(--white);
color: var(--black);
font-weight: 500;
border-top-right-radius: 5px;
}
.chat__bubble[dir="rtl"] { text-align: right; }
.chat__typing { display: flex; gap: 5px; align-items: center; }
.chat__typing span {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--muted);
animation: typingDot 1.2s infinite ease-in-out;
}
.chat__typing span:nth-child(2) { animation-delay: .18s; }
.chat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typingDot {
0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.chat__input {
display: flex;
gap: 10px;
padding: 16px 18px;
border-top: 1px solid var(--line);
background: rgba(255, 255, 255, 0.02);
}
.chat__input input {
flex: 1;
background: var(--ink);
border: 1px solid var(--line);
border-radius: 980px;
padding: 13px 18px;
color: var(--text);
font-family: var(--font);
font-size: 14.5px;
outline: none;
transition: border-color .3s var(--ease);
}
.chat__input input:focus { border-color: var(--line-strong); }
.chat__input input::placeholder { color: var(--muted-2); }
.chat__input input:disabled { opacity: .55; }
.chat__send {
width: 46px; height: 46px;
flex: none;
border: none;
border-radius: 50%;
background: var(--white);
color: var(--black);
cursor: pointer;
display: grid;
place-items: center;
transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.chat__send:hover { transform: translateY(-2px); }
.chat__send:disabled { opacity: .5; cursor: default; transform: none; }
.chat__send svg { width: 20px; height: 20px; }
.chat__disclaimer {
text-align: center;
font-size: 12px;
color: var(--muted-2);
padding: 0 18px 18px;
}
@media (max-width: 620px) {
.chat__window { height: 320px; padding: 18px; }
.chat__msg { max-width: 90%; }
.chat__badge { display: none; }
.chat__avatar-sm { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ===================================================================
Existing-logo animations (loader, watermark, header hover)
Uses logo.png only — no new logo, no brand/layout changes.
=================================================================== */
/* 1) Page-transition logo loader */
.logo-transition-overlay {
position: fixed;
inset: 0;
z-index: 2000;
display: grid;
place-items: center;
background: var(--black);
opacity: 0;
visibility: hidden;
transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.logo-transition-overlay.is-active { opacity: 1; visibility: visible; }
.logo-transition-overlay.no-anim { transition: none; }
.logo-transition-mark {
width: 76px;
height: auto;
animation: logoLoader 1.1s var(--ease) both;
}
@keyframes logoLoader {
0% { transform: scale(.8) rotate(0deg); opacity: .35; }
55% { opacity: 1; }
100% { transform: scale(1) rotate(360deg); opacity: 1; }
}
@media (max-width: 620px) { .logo-transition-mark { width: 64px; } }
/* 2) AI chat background logo watermark (holographic, subtle) */
.chat { position: relative; }
.chat__header,
.chat__window,
.chat__input,
.chat__disclaimer { position: relative; z-index: 1; }
.ai-chat-logo-watermark {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
display: grid;
place-items: center;
}
.ai-chat-logo-watermark::before {
content: "";
width: 78%;
max-width: 460px;
aspect-ratio: 756 / 433;
background: url("logo.png") center / contain no-repeat;
opacity: .06;
filter: drop-shadow(0 0 32px rgba(255, 255, 255, 0.06));
animation: watermarkSpin 64s linear infinite, watermarkPulse 9s ease-in-out infinite;
}
@keyframes watermarkSpin { to { transform: rotate(360deg); } }
@keyframes watermarkPulse { 0%, 100% { opacity: .045; } 50% { opacity: .08; } }
/* 3) Header logo — subtle hover (existing mark, header only) */
.nav .brand .brand__mark {
transition: transform .55s var(--ease);
will-change: transform;
}
.nav .brand:hover .brand__mark { transform: scale(1.03) rotate(-3deg); }
/* ===================================================================
Technology signature (end-of-page engineering visual, no CTA)
=================================================================== */
.tech-signature {
background: radial-gradient(120% 90% at 50% 120%, #18181b 0%, #000 60%);
padding-bottom: clamp(56px, 7vw, 88px);
}
.ts-stage {
position: relative;
max-width: 720px;
margin: 0 auto;
pointer-events: none;
}
.ts-svg { width: 100%; height: auto; display: block; }
/* Center mark — existing logo, soft breathing glow */
.ts-logo {
position: absolute;
top: 50%; left: 50%;
width: clamp(56px, 10vw, 80px);
height: auto;
transform: translate(-50%, -50%);
filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.22));
animation: tsPulse 6s ease-in-out infinite;
}
@keyframes tsPulse {
0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.16)); }
50% { filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.38)); }
}
/* Emblem + orbital rings — the network's literal slow "orbit" (40-60s per
full turn). Labeled capability nodes stay fixed (see below) so their
text never rotates out of reading orientation; these unlabeled
satellites are what visibly orbits the center. */
.ts-emblem { fill: rgba(255, 255, 255, 0.035); stroke: rgba(255, 255, 255, 0.12); }
.ts-ring { stroke: rgba(150, 190, 255, 0.16); }
.ts-ring--dash { stroke-dasharray: 2 10; }
.ts-satellite { fill: rgba(190, 215, 255, 0.85); filter: drop-shadow(0 0 4px rgba(150, 190, 255, 0.6)); }
.ts-orbit {
transform-box: fill-box;
transform-origin: center;
animation: spin 48s linear infinite;
}
.ts-orbit--reverse { animation-duration: 58s; animation-direction: reverse; }
.ts-orbit--slow { animation-duration: 60s; }
/* Subtle abstract neural pattern behind the center logo — soft curved
links + tiny nodes, pure accent that never competes with the logo
(5-10% opacity, and the .ts-logo ![]()
always renders above the SVG
this lives in). */
.ts-neural {
fill: none;
stroke: rgba(150, 190, 255, 0.9);
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.07;
filter: drop-shadow(0 0 5px rgba(120, 170, 255, 0.7));
transform-box: fill-box;
transform-origin: center;
animation: tsNeuralBreathe 7s ease-in-out infinite;
}
.ts-neural__nodes circle { fill: rgba(190, 215, 255, 0.9); stroke: none; }
@keyframes tsNeuralBreathe {
0%, 100% { opacity: 0.05; transform: scale(1); }
50% { opacity: 0.10; transform: scale(1.04); }
}
/* Faint rotating ring behind the logo (dashed, so rotation reads visibly
even though a plain circle wouldn't show motion). */
.ts-logo-ring {
fill: none;
stroke: rgba(150, 190, 255, 0.22);
stroke-width: 1;
stroke-dasharray: 1 7;
transform-box: fill-box;
transform-origin: center;
animation: spin 40s linear infinite;
}
/* Tiny ambient floating particles — atmosphere, not data */
.ts-mote {
fill: rgba(190, 215, 255, 0.5);
transform-box: fill-box;
transform-origin: center;
animation: tsMoteFloat 9s ease-in-out infinite;
}
.ts-mote--2 { animation-duration: 11s; animation-delay: -2s; }
.ts-mote--3 { animation-duration: 8s; animation-delay: -4s; }
.ts-mote--4 { animation-duration: 10s; animation-delay: -1s; }
.ts-mote--5 { animation-duration: 12s; animation-delay: -6s; }
.ts-mote--6 { animation-duration: 9.5s; animation-delay: -3s; }
@keyframes tsMoteFloat {
0%, 100% { transform: translateY(0); opacity: 0.12; }
50% { transform: translateY(-10px); opacity: 0.3; }
}
/* Connection lines + flowing data dashes — soft blue glow, slowed down */
.ts-link { stroke: rgba(150, 190, 255, 0.14); stroke-width: 1; }
.ts-flow {
stroke: rgba(190, 215, 255, 0.45);
stroke-width: 1;
stroke-linecap: round;
stroke-dasharray: 4 92;
filter: drop-shadow(0 0 3px rgba(150, 190, 255, 0.5));
animation: tsFlow 8s linear infinite;
}
@keyframes tsFlow { to { stroke-dashoffset: -96; } }
/* Data particles traveling along the same curves */
.ts-particle {
fill: #fff;
opacity: 0;
offset-rotate: 0deg;
filter: drop-shadow(0 0 6px rgba(170, 210, 255, 0.9));
}
.ts-particle--1 { offset-path: path("M400 200 C 400 150, 400 105, 400 52"); animation: tsTravel 7s linear infinite; }
.ts-particle--2 { offset-path: path("M400 200 C 495 175, 590 152, 676 128"); animation: tsTravel 8.4s linear infinite; animation-delay: -2.2s; }
.ts-particle--3 { offset-path: path("M400 200 C 488 238, 572 280, 648 316"); offset-rotate: 0deg; animation: tsTravel 7.8s linear infinite; animation-delay: -3.8s; }
.ts-particle--4 { offset-path: path("M400 200 C 312 238, 228 280, 152 316"); animation: tsTravel 9s linear infinite; animation-delay: -1.1s; }
.ts-particle--5 { offset-path: path("M400 200 C 305 175, 210 152, 124 128"); animation: tsTravel 8s linear infinite; animation-delay: -5.4s; }
@keyframes tsTravel {
0% { offset-distance: 0%; opacity: 0; }
12% { opacity: 0.9; }
82% { opacity: 0.9; }
100% { offset-distance: 100%; opacity: 0; }
}
/* Capability nodes — fixed position (readable labels), soft breathing via
opacity + glow on both the dot and its ring. Hoverable for a subtle
glow/scale boost and a native tooltip ( in the markup). */
.ts-node { pointer-events: auto; cursor: default; }
.ts-node__ring {
fill: rgba(150, 190, 255, 0.04);
stroke: rgba(150, 190, 255, 0.18);
transform-box: fill-box;
transform-origin: center;
transition: stroke .35s var(--ease), transform .35s var(--ease);
animation: tsRingBreathe 3.2s ease-in-out infinite;
}
.ts-node__dot {
fill: #fff;
filter: drop-shadow(0 0 7px rgba(170, 210, 255, 0.85));
transform-box: fill-box;
transform-origin: center;
transition: transform .35s var(--ease), filter .35s var(--ease);
animation: tsNodePulse 3.2s ease-in-out infinite;
}
.ts-node--d2 .ts-node__dot, .ts-node--d2 .ts-node__ring { animation-delay: 0.5s; }
.ts-node--d3 .ts-node__dot, .ts-node--d3 .ts-node__ring { animation-delay: 1s; }
.ts-node--d4 .ts-node__dot, .ts-node--d4 .ts-node__ring { animation-delay: 1.5s; }
.ts-node--d5 .ts-node__dot, .ts-node--d5 .ts-node__ring { animation-delay: 2s; }
@keyframes tsNodePulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes tsRingBreathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.ts-node:hover .ts-node__dot {
transform: scale(1.3);
filter: drop-shadow(0 0 12px rgba(190, 220, 255, 1));
}
.ts-node:hover .ts-node__ring {
stroke: rgba(190, 220, 255, 0.45);
transform: scale(1.06);
}
.ts-node__label {
fill: var(--muted-2);
font-family: var(--font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
}
/* Floating code symbols */
.ts-sym {
fill: rgba(255, 255, 255, 0.13);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 15px;
transform-box: fill-box;
animation: tsFloat 7s ease-in-out infinite;
}
.ts-sym--d2 { animation-delay: -1.4s; }
.ts-sym--d3 { animation-delay: -2.8s; }
.ts-sym--d4 { animation-delay: -4.2s; }
.ts-sym--d5 { animation-delay: -5.6s; }
.ts-sym--d6 { animation-delay: -3.5s; }
@keyframes tsFloat {
0%, 100% { transform: translateY(0); opacity: 0.10; }
50% { transform: translateY(-9px); opacity: 0.22; }
}
@media (max-width: 620px) {
.ts-node__label { font-size: 20px; letter-spacing: 0.12em; }
.ts-sym { font-size: 24px; }
}
/* ===================================================================
Global trade map (Contact section) — inline-SVG world trade routes
Premium enterprise-dashboard treatment: larger map, tiered hubs
(USA/China primary, Dubai mid as the East-West hinge), eased
traveling particles, faint grid, slow ambient glow.
=================================================================== */
.trade-map {
margin-top: 38px;
display: flex;
justify-content: center;
}
.tm-panel {
position: relative;
width: 100%;
max-width: 760px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-lg);
overflow: hidden;
background-color: rgba(10, 13, 22, 0.55);
background-image:
radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.3px),
radial-gradient(62% 58% at 22% 34%, rgba(80, 130, 255, 0.12), transparent 68%),
radial-gradient(58% 54% at 84% 42%, rgba(80, 130, 255, 0.11), transparent 68%);
background-size: 24px 24px, 100% 100%, 100% 100%;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 90px rgba(60, 110, 230, 0.06);
}
/* faint animated blue glow behind the entire network */
.tm-panel::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(46% 42% at 30% 38%, rgba(100, 150, 255, 0.09), transparent 72%),
radial-gradient(46% 42% at 78% 46%, rgba(100, 150, 255, 0.08), transparent 72%);
animation: tmGlow 13s ease-in-out infinite;
}
@keyframes tmGlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.tm-svg { display: block; width: 100%; height: auto; }
/* subtle logistics-dashboard grid */
.tm-grid line { stroke: rgba(255, 255, 255, 0.045); stroke-width: 1; }
/* dotted world silhouette — enlarged ~22%, slightly bolder for visibility */
.tm-map line {
stroke: rgba(105, 140, 220, 0.32);
stroke-width: 3.2;
stroke-linecap: round;
stroke-dasharray: 0 11.1;
}
.tm-map circle { fill: rgba(105, 140, 220, 0.32); }
/* trade routes — elegant cubic-bezier arcs, primary brighter/thicker */
.tm-route { stroke-linecap: round; }
.tm-route--primary {
stroke: rgba(150, 190, 255, 0.55);
stroke-width: 1.5;
filter: drop-shadow(0 0 5px rgba(120, 170, 255, 0.5));
}
.tm-route--secondary { stroke: rgba(130, 165, 240, 0.22); stroke-width: 1; }
/* directional light sweep along every route (subtle on secondary too) */
.tm-flow {
stroke-linecap: round;
fill: none;
}
.tm-flow--primary {
stroke: rgba(205, 226, 255, 0.6);
stroke-width: 1.4;
stroke-dasharray: 7 150;
animation-name: tmFlowDash;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 11s;
}
.tm-flow--secondary {
stroke: rgba(180, 205, 250, 0.28);
stroke-width: 1;
stroke-dasharray: 5 150;
animation-name: tmFlowDash;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 16s;
}
.tm-flow--d0 { animation-delay: 0s; }
.tm-flow--d1 { animation-delay: -2.4s; }
.tm-flow--d2 { animation-delay: -4.8s; }
.tm-flow--d3 { animation-delay: -7.2s; }
.tm-flow--d4 { animation-delay: -1.6s; }
.tm-flow--d5 { animation-delay: -5.5s; }
.tm-flow--d6 { animation-delay: -9.1s; }
.tm-flow--d7 { animation-delay: -3.3s; }
@keyframes tmFlowDash { to { stroke-dashoffset: -157; } }
/* data particles traveling the arcs — eased, staggered, calm pace */
.tm-particle {
fill: var(--white);
opacity: 0;
offset-rotate: 0deg;
animation-name: tmTravel;
animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
animation-iteration-count: infinite;
animation-duration: var(--pdur, 12s);
animation-delay: var(--pdelay, 0s);
}
.tm-particle--primary {
filter: drop-shadow(0 0 6px rgba(170, 210, 255, 0.95));
}
.tm-particle--secondary {
filter: drop-shadow(0 0 4px rgba(160, 200, 255, 0.75));
opacity: 0;
}
@keyframes tmTravel {
0% { offset-distance: 0%; opacity: 0; }
12% { opacity: 0.95; }
88% { opacity: 0.95; }
100% { offset-distance: 100%; opacity: 0; }
}
/* hubs — USA & China largest/brightest, Dubai medium (East-West hinge) */
.tm-hub__halo { fill: rgba(130, 170, 255, 0.13); }
.tm-hub__core {
fill: var(--white);
filter: drop-shadow(0 0 7px rgba(150, 195, 255, 0.9));
animation: tmPulse 5s ease-in-out infinite;
}
.tm-hub--primary .tm-hub__core {
filter: drop-shadow(0 0 13px rgba(170, 210, 255, 1));
animation-duration: 5.4s;
}
.tm-hub--mid .tm-hub__core {
filter: drop-shadow(0 0 9px rgba(160, 200, 255, 0.95));
animation-duration: 4.6s;
}
.tm-radar {
stroke: rgba(160, 195, 255, 0.5);
stroke-width: 1;
transform-box: fill-box;
transform-origin: center;
animation: tmRadar 5.6s ease-out infinite;
}
.tm-radar--d2 { animation-delay: 2.8s; }
.tm-radar--mid {
stroke: rgba(160, 195, 255, 0.4);
animation-duration: 5s;
}
@keyframes tmPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
@keyframes tmRadar {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(3.4); opacity: 0; }
}
/* labels — quieter, smaller, offset clear of the routes */
.tm-label {
fill: var(--muted-2);
font-family: var(--font);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
opacity: 0.7;
}
.tm-label--primary { fill: var(--text); font-size: 11.5px; opacity: 0.85; }
.tm-label--mid { fill: var(--muted); font-size: 10.5px; opacity: 0.78; }
/* legend */
.tm-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 26px;
padding: 13px 18px 15px;
border-top: 1px solid var(--line);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
}
.tm-legend__item { display: inline-flex; align-items: center; }
.tm-swatch {
display: inline-block;
width: 18px;
height: 2px;
border-radius: 2px;
margin-right: 8px;
}
.tm-swatch--primary {
background: linear-gradient(90deg, transparent, rgba(175, 208, 255, 0.95), transparent);
box-shadow: 0 0 6px rgba(140, 180, 255, 0.6);
}
.tm-swatch--secondary { background: rgba(140, 170, 240, 0.35); }
.tm-swatch--hub {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 0 8px 2px rgba(150, 190, 255, 0.8);
}
@media (max-width: 620px) {
.tm-label { font-size: 15px; letter-spacing: 0.07em; }
.tm-label--primary { font-size: 17px; }
.tm-label--mid { font-size: 16px; }
.tm-legend { gap: 8px 16px; font-size: 10.5px; }
}
/* Accessibility: disable rotation/motion when requested */
@media (prefers-reduced-motion: reduce) {
.logo-transition-mark,
.ai-chat-logo-watermark::before { animation: none !important; }
.nav .brand:hover .brand__mark { transform: none; }
.ts-orbit, .ts-flow, .ts-particle, .ts-logo,
.ts-node__dot, .ts-sym { animation: none !important; }
.ts-node__ring, .ts-logo-ring, .ts-mote, .ts-neural { animation: none !important; }
.tm-hub__core, .tm-radar, .tm-flow, .tm-particle, .tm-panel::after { animation: none !important; }
.chat__greeting-caret { animation: none !important; opacity: 1; }
.solutions--tech .trade-item::after { animation: none !important; }
.features--tech .feature.reveal,
.features--tech .feature.reveal.in { transform: none !important; transition-delay: 0s !important; }
}