/* fx.css: the motion and graphics layer (loaded after site.css, unlayered so it wins over its layers).
Sections: motion, sculpture, globe, product UI. See DESIGN.md section 7. */
/* ==== motion ==== */
/* Hexabin site motion: v2-motion.css, plain rules to merge into site.css (no @layer). Pairs with
assets/js/motion.js, which documents the hooks. Anything that moves sits under html.motion, a class
motion.js adds only when the visitor allows motion, and every hidden state also needs a class
motion.js adds (.reveal, .is-armed). Without JavaScript, or with reduced motion, every page is
complete and still. Graphics on navy use thin luminous lines; the brand red stays rare. */
/* == 1. Tokens == */
:root {
--mo-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out: quick to start, a long soft landing */
--mo-enter: 700ms; /* entrances */
--mo-stagger: 55ms; /* between items entering together (motion.js STAGGER) */
--mo-fill: 1100ms; /* meters and rings */
--mo-rise: 16px;
--mo-slide: 24px;
--mo-spot: 31 91 216; /* spotlight, as rgb channels */
--mo-spot-edge: 0.36; /* alpha at the edge nearest the pointer */
--mo-spot-fill: 0.2; /* inside, as a share of the edge */
--mo-spot-size: 380px;
--mo-bracket: #B5AFAC;
--mo-tick: var(--line-strong);
--mo-track: var(--line); /* meter and ring track */
--mo-value: var(--primary); /* meter and ring value */
--mo-glow-a: #C4442A; /* the arc of .glow-border */
--mo-glow-b: #EC7356;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --mo-spot: 111 156 255; --mo-spot-edge: 0.42; --mo-bracket: #554D49; --mo-glow-a: #EC7356; --mo-glow-b: #F9F5F3; }
}
:root[data-theme="dark"] { --mo-spot: 111 156 255; --mo-spot-edge: 0.42; --mo-bracket: #554D49; --mo-glow-a: #EC7356; --mo-glow-b: #F9F5F3; }
/* On navy: the same in both themes. A product frame on navy keeps the page's theme inside. */
.on-navy, .section--navy, .site-footer {
--mo-spot: 111 156 255; --mo-spot-edge: 0.55; --mo-spot-fill: 0.22;
--mo-bracket: rgb(243 177 162 / 0.5); --mo-tick: rgb(243 177 162 / 0.3);
--mo-track: rgb(255 255 255 / 0.12); --mo-value: #EC7356; --mo-glow-a: #EC7356; --mo-glow-b: #F9F5F3;
}
.on-navy .frame, .section--navy .frame { --mo-track: var(--line); --mo-value: var(--primary); --mo-tick: var(--line-strong); }
/* == 2. Reveal on scroll ==
motion.js adds .reveal only to items still below the fold, then .is-in as each enters, and takes
.reveal away once it has landed. --reveal-i staggers items that enter together; --reveal-delay
(a time) adds to it. */
html.motion .reveal { --mo-from: 0 var(--mo-rise); --mo-from-scale: 1; }
html.motion .reveal[data-reveal="fade"] { --mo-from: 0 0; }
html.motion .reveal[data-reveal="scale"] { --mo-from: 0 0; --mo-from-scale: 0.98; }
html.motion .reveal[data-reveal="left"] { --mo-from: calc(var(--mo-slide) * -1) 0; }
html.motion .reveal[data-reveal="right"] { --mo-from: var(--mo-slide) 0; }
html.motion .reveal:not(.is-in) { opacity: 0; translate: var(--mo-from); scale: var(--mo-from-scale); }
html.motion .reveal.is-in {
animation: mo-enter var(--mo-enter) var(--mo-ease) backwards;
animation-delay: calc(var(--reveal-delay, 0ms) + var(--reveal-i, 0) * var(--mo-stagger));
}
@keyframes mo-enter {
from { opacity: 0; translate: var(--mo-from); scale: var(--mo-from-scale); }
65% { opacity: 1; }
}
/* Hairline grids draw their outer lines with the first cell, not before it */
html.motion .tiles, html.motion .stats { transition: border-color var(--mo-enter) var(--mo-ease); }
@media screen {
html.motion .tiles:has(> .reveal):not(:has(> .is-in)), html.motion .stats:has(> .reveal):not(:has(> .is-in)) { border-color: transparent; }
}
/* == 3. Meters and rings: --value from 0 to 1 on the [data-meter] element ==
82%
*/
.meter { --value: 0; position: relative; display: block; min-width: 48px; height: var(--meter-h, 6px); overflow: hidden; border-radius: 999px; background: var(--mo-track); }
.meter__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--mo-value); clip-path: inset(0 calc(100% - var(--value) * 100%) 0 0 round 999px); }
.meter--thin { --meter-h: 3px; }
.meter--warn { --mo-value: var(--warn); }
:is(.on-navy, .section--navy) .meter__fill { background: linear-gradient(90deg, #C4442A, #F08A6C); }
:is(.on-navy, .section--navy) .frame .meter__fill { background: var(--mo-value); }
.ring { --value: 0; position: relative; display: inline-grid; place-items: center; width: var(--ring-size, 96px); aspect-ratio: 1; flex: none; }
.ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ring__track, .ring__value { fill: none; stroke-width: var(--ring-stroke, 2.25); }
.ring__track { stroke: var(--mo-track); }
.ring__value { stroke: var(--mo-value); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--value) * 100); }
.ring__label { position: relative; color: var(--ink); font: 600 1.125rem / 1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: center; }
html.motion [data-meter].is-armed:not(.is-in) .meter__fill { clip-path: inset(0 100% 0 0 round 999px); }
html.motion [data-meter].is-armed:not(.is-in) .ring__value { stroke-dashoffset: 100; opacity: 0; }
html.motion [data-meter].is-in .meter__fill { transition: clip-path var(--mo-fill) var(--mo-ease) calc(120ms + var(--reveal-i, 0) * var(--mo-stagger)); }
html.motion [data-meter].is-in .ring__value {
transition: stroke-dashoffset var(--mo-fill) var(--mo-ease) calc(120ms + var(--reveal-i, 0) * var(--mo-stagger)), opacity 200ms linear calc(120ms + var(--reveal-i, 0) * var(--mo-stagger));
}
/* == 4. Count-up: the final number is in the markup; motion.js counts to it == */
[data-count] { font-variant-numeric: tabular-nums; }
html.motion [data-count].is-armed:not(.is-in) { opacity: 0; }
html.motion [data-count].is-in { transition: opacity 300ms var(--mo-ease); }
/* == 5. Spotlight: a soft light under the pointer and along the nearest edge ==
motion.js adds .spot (and .spot--pos where the element was not positioned) on mouse and pen
devices, sets --mx and --my in pixels and .is-lit while the pointer is over it. The light fades
through --mo-lit rather than opacity, so it is never put on its own layer and the text above it
keeps its subpixel rendering. */
@property --mo-lit { syntax: ""; inherits: false; initial-value: 0; }
.spot { isolation: isolate; }
.spot--pos { position: relative; }
.spot::after {
content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
background: radial-gradient(var(--mo-spot-size) circle at var(--mx, 50%) var(--my, 0%), rgb(var(--mo-spot) / calc(var(--mo-spot-edge) * var(--mo-spot-fill) * var(--mo-lit))), transparent 70%);
transition: --mo-lit 300ms var(--mo-ease);
}
@supports (mask-composite: exclude) {
.spot::after {
background: radial-gradient(var(--mo-spot-size) circle at var(--mx, 50%) var(--my, 0%), rgb(var(--mo-spot) / calc(var(--mo-spot-edge) * var(--mo-lit))), transparent 70%);
mask: linear-gradient(rgb(0 0 0 / var(--mo-spot-fill)) 0 0) content-box, linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
mask-composite: add, exclude, add; /* inside at a fifth, the 1px edge in full */
}
}
.spot.is-lit::after, .spot:focus-visible::after { --mo-lit: 1; }
/* == 6. Loops: running only while on screen (motion.js toggles .is-playing on .loop) == */
html.motion .loop:not(.is-playing), html.motion .loop:not(.is-playing)::before, html.motion .loop:not(.is-playing)::after,
html.motion .loop:not(.is-playing) *, html.motion .loop:not(.is-playing) *::before, html.motion .loop:not(.is-playing) *::after {
animation-play-state: paused !important;
}
/* Status pulse: a slow ring from the dot, on the compositor.
. ::before runs
along grid row --beam-row (1: above the copy), ::after down the column nearest --beam-x (wide
screens only), the optional back along the last row clear of the bottom edge. .beams--grid
also draws the grid, for a navy band without one. */
.beams {
--grid: 56px; --beam: 140 177 255; --beam-len: 240px;
position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 40%, transparent 100%);
}
.page-hero .beams { mask-image: linear-gradient(90deg, transparent, #000 60%); }
.beams--grid {
background-image: linear-gradient(var(--navy-grid) 1px, transparent 1px), linear-gradient(90deg, var(--navy-grid) 1px, transparent 1px);
background-size: var(--grid) var(--grid);
mask-image: radial-gradient(ellipse 90% 90% at 60% 40%, #000 30%, transparent 100%);
}
.beams::before, .beams::after, .beams > i { content: ""; position: absolute; opacity: 0; }
.beams::before, .beams > i {
left: 0; width: 100%; height: 7px; top: calc(var(--grid) * var(--beam-row, 1) - 3px);
background:
linear-gradient(90deg, transparent calc(100% - var(--beam-len)), rgb(var(--beam) / 0.5) calc(100% - 32px), rgb(249 245 243 / 0.95)) 0 50% / 100% 1px no-repeat,
radial-gradient(closest-side, rgb(var(--beam) / 0.4), transparent) 100% 50% / 140px 7px no-repeat;
transform: translateX(-100%);
}
.beams > i { display: none; scale: -1 1; }
.beams::after {
top: 0; height: 100%; width: 7px; left: calc(var(--grid) * 18 - 3px);
background:
linear-gradient(180deg, transparent calc(100% - var(--beam-len)), rgb(var(--beam) / 0.5) calc(100% - 32px), rgb(249 245 243 / 0.95)) 50% 0 / 1px 100% no-repeat,
radial-gradient(closest-side, rgb(var(--beam) / 0.4), transparent) 50% 100% / 7px 140px no-repeat;
transform: translateY(-100%);
}
@supports (top: round(down, 50%, 1px)) {
.beams > i { display: block; top: calc(round(down, 100% - 48px, var(--grid)) - 3px); }
.beams::after { left: calc(round(down, var(--beam-x, 74%), var(--grid)) - 3px); }
}
@media (max-width: 1023.98px) { .beams::after { display: none; } }
html.motion .beams::before { animation: mo-beam-x 30s linear 2s infinite; }
html.motion .beams > i { animation: mo-beam-x 36s linear 19s infinite; }
html.motion .beams::after { animation: mo-beam-y 40s linear 9s infinite; }
@keyframes mo-beam-x {
0% { opacity: 0; transform: translateX(-100%); }
4%, 36% { opacity: 1; }
40%, 100% { opacity: 0; transform: translateX(var(--beam-len)); }
}
@keyframes mo-beam-y {
0% { opacity: 0; transform: translateY(-100%); }
4%, 30% { opacity: 1; }
34%, 100% { opacity: 0; transform: translateY(var(--beam-len)); }
}
/* Float: a slow drift up and back. --float-y sets the distance, --float-dur the time. */
html.motion .float { animation: mo-float var(--float-dur, 24s) ease-in-out infinite; }
html.motion .float--late { animation-delay: calc(var(--float-dur, 24s) / -2); }
@keyframes mo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--float-y, -10px); } }
/* Glow border: an arc of light circling a featured card's border. --glow-w is the border's width.
Static where @property is missing; a lit border where masks cannot cut the ring. */
@property --mo-angle { syntax: ""; inherits: false; initial-value: 0deg; }
.glow-border { position: relative; isolation: isolate; }
@supports (mask-composite: exclude) {
.glow-border::before {
content: ""; position: absolute; inset: calc(var(--glow-w, 1px) * -1); z-index: 1; padding: var(--glow-w, 1px); border-radius: inherit; pointer-events: none;
background: conic-gradient(from var(--mo-angle, 0deg), transparent 0turn, transparent 0.6turn, var(--mo-glow-a) 0.8turn, var(--mo-glow-b) 0.9turn, var(--mo-glow-a) 0.95turn, transparent 1turn);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
mask-composite: exclude;
}
}
@supports not (mask-composite: exclude) {
.glow-border { border-color: var(--mo-glow-a); }
}
html.motion .glow-border::before { animation: mo-orbit var(--glow-dur, 16s) steps(480) infinite; } /* 30 updates a second: half the paint, the same look */
@keyframes mo-orbit { to { --mo-angle: 360deg; } }
/* Marquee: .
Without JavaScript, or with reduced motion, a wrapped list. With both, one row from the first paint
(html.js comes from theme.js, before it), so nothing shifts when motion.js starts it. Hover and
focus pause it; keyboard focus parks it. */
.marquee { --marquee-gap: var(--s-7); position: relative; display: flex; overflow: hidden; }
.marquee__track { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--marquee-gap); min-width: 0; margin: 0; padding: 0; list-style: none; }
.marquee__item { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); font: 600 1.0625rem / 1.3 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.marquee__item::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--primary); opacity: 0.7; transform: rotate(45deg); }
.on-navy .marquee__item::before, .section--navy .marquee__item::before { background: #F08A6C; }
@media (prefers-reduced-motion: no-preference) {
html.js .marquee { overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
html.js .marquee::-webkit-scrollbar { display: none; }
html.js .marquee__track { flex: none; flex-wrap: nowrap; padding-right: var(--marquee-gap); }
}
html.motion .marquee.is-ready { overflow: hidden; }
html.motion .marquee.is-ready .marquee__track { animation: mo-marquee var(--marquee-dur, 40s) linear infinite; }
html.motion .marquee--reverse .marquee__track { animation-direction: reverse; }
html.motion .marquee:hover .marquee__track, html.motion .marquee:focus-within .marquee__track { animation-play-state: paused; }
html.motion .marquee:has(:focus-visible) .marquee__track { animation: none; }
@keyframes mo-marquee { to { transform: translateX(-100%); } }
/* == 7. Frame details ==
Corner brackets: four L-shaped corners just outside the box (.brackets--inset: inside it). Wrap a
box that clips its content (.frame) rather than putting the class on it. */
.brackets { position: relative; }
.brackets::before {
--c: var(--mo-bracket); --a: var(--bracket-arm, 12px);
content: ""; position: absolute; inset: var(--bracket-at, -8px); z-index: 1; pointer-events: none;
background:
linear-gradient(var(--c), var(--c)) 0 0 / var(--a) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--a) no-repeat,
linear-gradient(var(--c), var(--c)) 100% 0 / var(--a) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--a) no-repeat,
linear-gradient(var(--c), var(--c)) 0 100% / var(--a) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--a) no-repeat,
linear-gradient(var(--c), var(--c)) 100% 100% / var(--a) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--a) no-repeat;
}
.brackets--inset { --bracket-at: 10px; }
html.motion .brackets.is-armed:not(.is-in)::before { opacity: 0; inset: calc(var(--bracket-at, -8px) - 12px); }
html.motion .brackets.is-in::before { transition: opacity 500ms var(--mo-ease), inset 900ms var(--mo-ease); transition-delay: calc(var(--reveal-i, 0) * var(--mo-stagger)); }
/* HUD labels: tiny mono annotations in the corners of a positioned box (.hud-box). Decorative ones
take aria-hidden="true". .hud--inline sits in the flow; lifts a value. */
.hud-box { position: relative; }
.hud {
position: absolute; z-index: 2; max-width: calc(100% - 2 * var(--hud-inset, 16px)); margin: 0; overflow: hidden;
color: var(--muted); font: 400 11px / 1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
.hud b { color: var(--ink-2); font-weight: 500; }
.hud .pulse { width: 6px; height: 6px; margin-right: 0.6em; vertical-align: 1px; }
.hud--tl { top: var(--hud-inset, 16px); left: var(--hud-inset, 16px); }
.hud--tr { top: var(--hud-inset, 16px); right: var(--hud-inset, 16px); text-align: right; }
.hud--bl { bottom: var(--hud-inset, 16px); left: var(--hud-inset, 16px); }
.hud--br { bottom: var(--hud-inset, 16px); right: var(--hud-inset, 16px); text-align: right; }
.hud--inline { position: static; display: inline-block; max-width: 100%; }
/* Ticks: a measuring rule, minor every 8 px and major every 64 px */
.ticks {
display: block; height: 9px;
background:
linear-gradient(var(--mo-tick), var(--mo-tick)) 0 100% / 100% 1px no-repeat,
repeating-linear-gradient(90deg, var(--mo-tick) 0 1px, transparent 1px 8px) 0 100% / 100% 4px no-repeat,
repeating-linear-gradient(90deg, var(--mo-tick) 0 1px, transparent 1px 64px) 0 100% / 100% 9px no-repeat;
}
/* Noise: a fine grain for navy sections (a background layer, under the grid and the content) */
.noise {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .2 -.082'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* == 8. Still, printed and forced colours == */
@media (prefers-reduced-motion: reduce) {
html.motion .reveal, html.motion [data-count] { opacity: 1 !important; translate: none !important; scale: none !important; animation: none !important; }
}
@media print {
html.motion .reveal, html.motion [data-count] { opacity: 1 !important; translate: none !important; scale: none !important; animation: none !important; }
html.motion [data-meter] .meter__fill { clip-path: inset(0 calc(100% - var(--value) * 100%) 0 0 round 999px) !important; }
html.motion [data-meter] .ring__value { stroke-dashoffset: calc(100 - var(--value) * 100) !important; opacity: 1 !important; }
.beams, .spot::after, .glow-border::before, [data-marquee-copy] { display: none !important; }
.marquee { mask-image: none !important; }
.marquee__track { flex: 1 1 auto !important; flex-wrap: wrap !important; padding-right: 0 !important; animation: none !important; }
.noise { background-image: none; }
}
@media (forced-colors: active) {
.beams, .spot::after, .glow-border::before { display: none; }
.meter__fill { background: CanvasText; }
.ring__value { stroke: CanvasText; }
.brackets::before { --c: CanvasText; }
}
/* ==== sculpture ==== */
/* The sculpture: the hero's signature graphic, drawn on its canvas by site/assets/js/orbit.js.
A box that sizes itself to its column, with corner brackets, a HUD label in each corner, a faint
guide cross and a light behind the globe. orbit.js reads the --orbit-* colours from the box: ink
on paper by default, lines of light inside .on-navy and .section--navy (the same in both themes).
On navy, a drawing of the first frame (seed 04211) stands in until the canvas has drawn, and for
good without JavaScript. Markup and hooks: the comment at the top of orbit.js. */
.sculpture {
--orbit-ink: var(--ink);
--orbit-accent: var(--primary);
--orbit-glow: transparent;
--orbit-paper: var(--bg);
--orbit-mark: #C4442A;
--sculpture-hud: var(--muted);
--sculpture-bracket: var(--line-strong);
--sculpture-bracket-on: var(--primary);
--sculpture-edge: var(--line);
--sculpture-guide: rgb(25 22 20 / .1);
--sculpture-light: rgb(198 69 40 / .06);
--sculpture-light-2: rgb(198 69 40 / .02);
--sculpture-panel: transparent;
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border: 1px solid var(--sculpture-edge);
background:
repeating-linear-gradient(90deg, var(--sculpture-guide) 0 2px, transparent 2px 8px) 0 50% / 100% 1px no-repeat,
repeating-linear-gradient(180deg, var(--sculpture-guide) 0 2px, transparent 2px 8px) 50% 0 / 1px 100% no-repeat,
radial-gradient(circle closest-side, var(--sculpture-light), var(--sculpture-light-2) 42%, transparent 94%) no-repeat,
radial-gradient(120% 90% at 50% 45%, transparent, var(--sculpture-panel)) no-repeat;
cursor: grab;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
:where(:root:not([data-theme="light"])) .sculpture { --orbit-glow: var(--primary); --sculpture-guide: rgb(247 241 239 / .1); --sculpture-light: rgb(236 115 86 / .1); --sculpture-light-2: rgb(236 115 86 / .03); }
}
:where(:root[data-theme="dark"]) .sculpture { --orbit-glow: var(--primary); --sculpture-guide: rgb(247 241 239 / .1); --sculpture-light: rgb(236 115 86 / .1); --sculpture-light-2: rgb(236 115 86 / .03); }
.on-navy .sculpture, .section--navy .sculpture {
--orbit-ink: #F9F5F3;
--orbit-accent: #C4442A;
--orbit-glow: #EC7356;
--orbit-paper: var(--navy);
--sculpture-hud: rgb(205 199 196 / .7);
--sculpture-bracket: rgb(243 177 162 / .5);
--sculpture-bracket-on: #F08A6C;
--sculpture-edge: rgb(255 255 255 / .08);
--sculpture-guide: rgb(249 245 243 / .12);
--sculpture-light: rgb(198 69 40 / .22);
--sculpture-light-2: rgb(198 69 40 / .07);
--sculpture-panel: rgb(19 16 15 / .42);
}
@media (min-width: 600px) and (max-width: 1023.98px) { .sculpture { aspect-ratio: 16 / 11; } }
@media (min-width: 1024px) { .sculpture { aspect-ratio: 1 / .92; max-height: 640px; } }
.sculpture:active { cursor: grabbing; }
.sculpture:focus-visible { outline: 2px solid var(--focus); outline-offset: 11px; }
/* The canvas lights up over the drawing once orbit.js has drawn its first frame */
.sculpture__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.js .sculpture__canvas { opacity: 0; }
.sculpture[data-orbit-ready] .sculpture__canvas { opacity: 1; transition: opacity 700ms cubic-bezier(.2, 0, 0, 1); }
.on-navy .sculpture::before, .section--navy .sculpture::before {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cstyle%3E*%7Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cdefs%3E%3CradialGradient id='s' cx='.34' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%238CB1FF' stop-opacity='.5'/%3E%3Cstop offset='.6' stop-color='%232F6BEA' stop-opacity='.1'/%3E%3Cstop offset='1' stop-color='%238CB1FF' stop-opacity='.3'/%3E%3C/radialGradient%3E%3Cpath id='b' d='M286 319q30-10 47-14 18-3 35-4 18 0 34 4 17 4 31 12 14 8 25 19 12 12 21 25 9 14 17 28 8 15 15 28 8 13 16 23 8 11 17 19 10 8 20 13 11 5 22 7 12 3 22 5 11 2 20 4 10 3 16 6 6 4 8 10 3 7 2 16-1 9-5 20-4 11-10 23-5 12-10 24-5 12-9 22-3 11-4 19-1 9 1 15 2 7 10 15M185 427q21-25 33-39 13-13 26-28 14-15 29-32 15-16 31-32 17-15 35-29 18-13 36-23 19-9 37-13 19-3 37 0 19 3 36 11 17 9 33 21 16 13 31 27 15 15 29 29 14 14 28 26 14 13 28 24 14 11 28 19 15 9 29 17 15 8 29 16 15 8 28 17 13 10 24 22 11 12 19 27 8 15 12 33 5 18 7 37 2 19 1 38 0 20-5 56M188 466q20-48 31-65 12-17 24-28 12-11 23-16 11-5 20-7 10-2 19-3 9 0 17-2 9-1 19-5 11-4 23-11 13-7 29-18 16-10 35-21 19-11 40-21 21-10 42-16 22-6 42-7 21-1 39 2 19 4 36 12 18 8 34 18 16 11 31 22 15 12 29 24 15 12 29 22 14 11 41 29M281 335q26-27 42-37 17-10 35-16 18-5 37-7 20-1 39 1 20 2 39 8 19 6 36 14 18 8 33 17 16 10 29 20 13 11 23 21 11 10 19 19 9 9 15 17 7 8 12 14 5 6 9 11 4 5 7 9 4 4 8 9 4 5 8 11 4 6 8 14 5 9 9 20 5 11 8 25 4 15 6 32 2 17 2 36 0 20-3 41-2 21-8 42-6 22-16 42-9 20-36 55M302 829q-8-17-6-30 3-13 9-30 7-17 16-39 9-21 17-44 9-23 15-47 6-24 8-46 2-22-1-42-2-19-8-35-6-16-13-30-7-13-13-25-6-11-8-23-2-11 1-24 3-12 13-27 10-14 27-31 17-17 40-36 23-19 50-38 27-19 54-36 28-16 52-29 24-13 41-20 18-6 28-6 10 0 12 4 3 5 1 11-2 7-5 13-2 7-2 11 1 4 13 6'/%3E%3Cpath id='f' d='M627 658q10 7 14 10 4 4 4 8 0 5-5 11-4 6-15 13-10 7-25 13-14 7-32 11-18 5-37 5-18 1-36-5-17-5-32-17-15-11-28-30-12-18-23-42-10-23-20-50-9-27-19-54-10-27-21-52-11-24-23-44-12-20-25-35-12-14-23-24-11-9-19-15-8-5-12-10-3-4-2-8 1-4 8-9 7-5 30-15M806 651q-7 31-12 44-4 13-11 23-6 10-15 18-9 8-22 14-13 7-32 13-18 6-43 12-24 6-54 12-29 6-62 12-32 6-65 10-32 4-63 4-30 1-57-2-27-3-51-12-24-8-45-21-20-13-38-31-17-18-32-39-14-21-25-45-11-23-19-47-7-24-11-46-4-22-4-41 1-19 5-35 4-16 10-30 7-13 25-37M791 375q22 16 30 23 9 8 13 17 4 10 4 23 1 13-3 31-3 18-10 41-6 24-15 52-9 29-20 61-11 33-24 68-13 36-30 71-16 36-36 68-19 33-42 57-22 24-48 35-25 12-51 10-26-2-50-15-24-13-46-32-21-19-40-39-18-19-35-36-16-16-32-29-16-12-32-22-15-9-32-18-16-8-32-19-16-11-31-27-15-15-27-37-12-21-19-48-6-27-6-57 0-30 11-87M642 753q-33 27-53 34-19 8-40 9-20 1-41-4-20-5-39-16-18-11-35-27-16-15-29-33-12-17-21-35-9-18-15-34-6-16-11-30-4-14-7-25-3-10-6-18-3-7-8-13-4-6-10-11-6-5-14-11-7-5-16-13-8-8-16-19-8-10-15-24-6-13-10-29-4-16-4-34 1-17 5-35 5-18 24-50M643 236q27-4 48-7 21-2 48-3 28 0 57 7 29 7 53 26 25 19 37 52 13 34 10 79-3 45-21 94-17 50-43 96-25 47-53 86-27 39-52 67-25 29-46 47-21 19-38 29-16 11-30 15-14 5-28 5-14 1-30 0-16 0-37-1-20 0-44 1-23 1-47 3-24 2-47 3-22 2-40 1-17 0-38-7'/%3E%3C/defs%3E%3Cpath stroke='%236F9CFF' stroke-opacity='.12' d='M142 470q62-26 96-36 34-9 70-16 36-6 73-10 37-4 74-5 38-1 75 0 38 1 75 4 38 3 74 9 36 7 70 16 35 9 66 21 32 12 58 28 26 16 60 55'/%3E%3Cuse href='%23b' stroke='%232F6BEA' stroke-opacity='.08' stroke-width='8'/%3E%3Cuse href='%23b' stroke='%234F82EE' stroke-opacity='.45' stroke-width='1.2'/%3E%3Ccircle cx='500' cy='500' r='82' fill='url(%23s)' stroke='%23C9D8FF' stroke-opacity='.6'/%3E%3Cpath stroke='%238CB1FF' stroke-opacity='.3' stroke-width='.8' d='M480 579q-15-17-19-35-3-18 0-40 3-22 10-42 8-19 18-30 11-10 30-9M501 581q1-16 1-34 0-17 0-40 0-22-1-42 0-20-1-32 0-11-1-11M521 578q17-17 20-35 4-18 1-40-3-22-12-41-8-19-19-30-11-10-32-9M563 550q11-36 6-57-5-21-19-38-13-17-32-25-18-8-36-6-18 3-42 28M571 461q-30-29-51-34-20-5-41 0-20 6-35 20-15 15-20 34-5 20 7 57M535 427q-35-5-53 3-18 9-32 26-13 17-18 38-4 21 1 39 6 18 33 40M480 579q21 2 31 0 10-1 24-7M439 551q26 11 44 12 19 2 37 0 18-2 30-8 13-5 19-18M419 501q9 14 24 19 15 6 37 8 22 2 43-1 22-2 36-8 15-5 22-20M429 462q8 11 21 15 14 5 33 6 19 2 37 0 19-2 31-7 13-4 16-10 4-5-9-15M464 427q-5 6-3 9 3 3 10 5 8 2 19 3 11 1 21 0 11-1 18-4 8-2 10-5 2-3-1-6-3-2-19-6'/%3E%3Cuse href='%23f' stroke='%236F9CFF' stroke-opacity='.14' stroke-width='9'/%3E%3Cuse href='%23f' stroke='%23C4D5FF' stroke-opacity='.8' stroke-width='1.3'/%3E%3Cpath stroke='%236F9CFF' stroke-opacity='.28' d='M933 536q6 46-11 71-17 25-59 49-42 24-110 42-67 19-152 26-85 8-172 2-86-5-158-22-71-16-118-40-47-23-68-48-21-25-22-49 0-23 15-44 15-20 64-53'/%3E%3Cpath stroke='%23C9D8FF' stroke-opacity='.55' stroke-width='2' d='M908 431h0M894 532h0M534 748h0M666 783h0M841 550h0M793 690h0M789 624h0M820 346h0M768 349h0M858 357h0M851 616h0M530 801h0M540 799h0M905 333h0M317 745h0M805 389h0M597 749h0M563 831h0M791 665h0M525 808h0M444 850h0M675 705h0M664 889h0M617 822h0M291 789h0M599 865h0M660 888h0M462 715h0M347 799h0M426 582h0'/%3E%3Ccircle cx='566' cy='500' r='4.5' fill='%23C4442A'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
transition: opacity 700ms cubic-bezier(.2, 0, 0, 1);
}
.sculpture[data-orbit-ready]::before { opacity: 0; }
/* Corner brackets, a little outside the box; they step out and brighten on hover and focus */
.sculpture::after {
--c: var(--sculpture-bracket);
content: "";
position: absolute;
inset: -5px;
z-index: 2;
background:
linear-gradient(var(--c), var(--c)) top left / 14px 1px,
linear-gradient(var(--c), var(--c)) top left / 1px 14px,
linear-gradient(var(--c), var(--c)) top right / 14px 1px,
linear-gradient(var(--c), var(--c)) top right / 1px 14px,
linear-gradient(var(--c), var(--c)) bottom left / 14px 1px,
linear-gradient(var(--c), var(--c)) bottom left / 1px 14px,
linear-gradient(var(--c), var(--c)) bottom right / 14px 1px,
linear-gradient(var(--c), var(--c)) bottom right / 1px 14px;
background-repeat: no-repeat;
pointer-events: none;
transition: inset 240ms cubic-bezier(.2, 0, 0, 1);
}
@media (hover: hover) { .sculpture:hover::after { --c: var(--sculpture-bracket-on); inset: -8px; } }
.sculpture:focus-visible::after { --c: var(--sculpture-bracket-on); inset: -8px; }
/* HUD labels in the corners; the hint says what fits the pointer, the finger or the keys */
.sculpture .hud {
position: absolute;
z-index: 1;
margin: 0;
color: var(--sculpture-hud);
font: 400 11px / 1.4 var(--mono);
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}
.sculpture .hud--tl, .sculpture .hud--bl { max-width: calc(100% - 150px); white-space: normal; } /* wrap at the dot before meeting the right-hand label */
.sculpture .hud--tl { top: 14px; left: 16px; }
.sculpture .hud--tr { top: 14px; right: 16px; }
.sculpture .hud--bl { bottom: 14px; left: 16px; }
.sculpture .hud--br { bottom: 14px; right: 16px; }
.sculpture__hint--touch, .sculpture__hint--keys { display: none; }
@media (hover: none) {
.sculpture__hint--pointer { display: none; }
.sculpture__hint--touch { display: inline; }
}
.sculpture:focus-visible .sculpture__hint--pointer, .sculpture:focus-visible .sculpture__hint--touch { display: none; }
.sculpture:focus-visible .sculpture__hint--keys { display: inline; }
html:not(.js) .sculpture .hud--bl { visibility: hidden; }
@media print {
.sculpture { display: none; }
}
/* ==== globe ==== */
/* v2-globe.css: the "where we work" globe (globe.js) and its navy section. Merge into site.css
(components). Plain rules scoped to .globe*, .globe-frame, .globe-hud*, .globe-layout* and
.region-card*. Without JS the box shows a still drawing and the labels sit on it. */
/* The box: square, at most 560 px, centred. The canvas draws the sphere at 40% of its width.
Without JS, ::before shows the still frame (made by the same projection as globe.js's
reduced-motion frame) and the labels sit at their markers in it. */
.globe {
--globe-line: #EC7356;
--globe-dot: #F08A6C;
--globe-marker: #F9F5F3;
--globe-base: #E8694B;
--globe-arc: #F08A6C;
--globe-glow: #C4442A;
position: relative;
width: 100%;
max-width: 560px;
aspect-ratio: 1;
margin-inline: auto;
border-radius: 50%;
background: radial-gradient(circle closest-side, rgb(198 69 40 / 0) 74%, rgb(198 69 40 / .2) 80%, rgb(198 69 40 / .07) 88%, rgb(198 69 40 / 0) 100%);
color: #F9F5F3;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.globe::before {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3Epath%7Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cdefs%3E%3CradialGradient id='b' gradientUnits='userSpaceOnUse' cx='50' cy='50' r='40' fx='34.8' fy='33.2'%3E%3Cstop offset='0' stop-color='%232F6BEA' stop-opacity='.24'/%3E%3Cstop offset='.55' stop-color='%232F6BEA' stop-opacity='.08'/%3E%3Cstop offset='1' stop-color='%23030914' stop-opacity='.42'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='40' fill='url(%23b)'/%3E%3Cg fill='none' stroke='%236F9CFF' stroke-opacity='.26'%3E%3Cpath transform='matrix(-2.78 6.77 19.8 .95 50 82.6)' d='M.73 -.68A1 1 0 0 1 .52 .85'/%3E%3Cpath transform='matrix(-4.82 11.7 34.3 1.65 50 68.8)' d='M.35 -.94A1 1 0 0 1 .07 1'/%3E%3Cpath transform='matrix(-4.82 11.7 34.3 1.65 50 31.2)' d='M-.07 -1A1 1 0 1 1 -.34 .94'/%3E%3Cpath transform='matrix(-2.78 6.77 19.8 .95 50 17.4)' d='M-.52 -.86A1 1 0 1 1 -.73 .68'/%3E%3Cpath transform='matrix(-5.57 13.5 0 -37.6 50 50)' d='M.5 -.87A1 1 0 0 1 .5 .87'/%3E%3Cpath transform='matrix(15 12.7 0 -37.6 50 50)' d='M.5 -.87A1 1 0 0 1 .5 .87'/%3E%3Cpath transform='matrix(31.5 8.42 0 -37.6 50 50)' d='M.51 -.86A1 1 0 0 1 .5 .87'/%3E%3Cpath transform='matrix(39.6 1.9 0 -37.6 50 50)' d='M.93 -.36A1 1 0 0 1 .5 .87'/%3E%3Cpath transform='matrix(-39.6 -1.9 0 -37.6 50 50)' d='M.93 .36A1 1 0 0 1 .5 .87'/%3E%3Cpath transform='matrix(-37.1 5.12 0 -37.6 50 50)' d='M.7 -.72A1 1 0 0 1 .5 .87'/%3E%3Cpath transform='matrix(-24.6 10.8 0 -37.6 50 50)' d='M.5 -.87A1 1 0 0 1 .5 .87'/%3E%3C/g%3E%3Cg fill='none' stroke='%236F9CFF' stroke-opacity='.42'%3E%3Cpath transform='matrix(-5.57 13.5 39.6 1.9 50 50)' d='M.14 -.99A1 1 0 0 1 -.13 .99'/%3E%3C/g%3E%3Cpath fill='none' stroke='%238CB1FF' stroke-opacity='.6' stroke-width='1.2' d='M87.1 45.6L87.1 45L86.7 44.6L86 44.1L84.8 43.7L83.1 43.4L81.1 43.2L78.8 43.1L76.4 43M87.1 45.6L86.7 47.1L85.9 48.7L84.8 50.4L83.3 52.2L81.4 54L79.1 55.8L76.5 57.6L73.6 59.4L70.3 61.1L66.8 62.8L63.1 64.3L59.3 65.7L55.3 66.9L51.2 68L47.2 68.9L43.2 69.5L39.4 70L35.7 70.3L32.2 70.4L29 70.2L26.1 69.9L23.5 69.4L21.2 68.7L19.3 67.9L17.7 66.9L16.5 65.9'/%3E%3Ccircle cx='50' cy='50' r='39.9' fill='none' stroke='%238CB1FF' stroke-opacity='.45' style='vector-effect:non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
transition: opacity 600ms cubic-bezier(0.2, 0, 0, 1);
pointer-events: none;
}
.globe[data-globe-state="ready"]::before { opacity: 0; }
.globe[data-globe-state="ready"] { cursor: grab; touch-action: pan-y; }
.globe[data-globe-drag] { cursor: grabbing; }
.globe__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Focus: a ring just outside the sphere, and the key hint under it. */
.globe::after {
content: "";
position: absolute;
inset: 7%;
border: 2px solid var(--focus, #FFFFFF);
border-radius: 50%;
opacity: 0;
pointer-events: none;
}
.globe:focus-visible { outline: none; }
.globe:focus-visible::after { opacity: 1; }
.globe__hint {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 4px);
opacity: 0;
color: #CDC7C4;
font: 500 11px / 1.4 var(--mono, ui-monospace, monospace);
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), transform 200ms cubic-bezier(0.2, 0, 0, 1);
pointer-events: none;
}
.globe:focus-visible .globe__hint { opacity: 1; transform: translate(-50%, 0); }
/* Labels: a zero-size anchor on the marker, a thin leader, the text above (or below). */
.globe__labels { position: absolute; inset: 0; pointer-events: none; }
.globe__label { --lead: 24px; position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.globe__label[data-globe-label="india"] { left: 87.1%; top: 45.6%; }
.globe__label[data-globe-label="uae"] { left: 76.4%; top: 43%; }
.globe__label[data-globe-label="latam"] { left: 16.5%; top: 65.9%; }
.globe:not([data-globe-state]) [data-globe-label="india"] .globe__label-text { left: auto; right: -1px; }
.globe[data-globe-state="ready"] .globe__label { left: 0; top: 0; }
.globe__label::before {
content: "";
position: absolute;
left: -3px;
top: -3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--globe-marker);
box-shadow: 0 0 0 3px rgb(243 177 162 / .16), 0 0 14px 3px rgb(236 115 86 / .55);
}
.globe__label--base::before { left: -3.5px; top: -3.5px; width: 7px; height: 7px; background: var(--globe-base); box-shadow: 0 0 0 4px rgb(232 105 75 / .18), 0 0 16px 4px rgb(232 105 75 / .5); }
.globe[data-globe-state="ready"] .globe__label::before { display: none; }
.globe__label::after {
content: "";
position: absolute;
left: -.5px;
bottom: 9px;
width: 1px;
height: var(--lead);
background: linear-gradient(to top, rgb(249 245 243 / 0), rgb(249 245 243 / .6));
}
.globe__label-text {
position: absolute;
left: -1px;
bottom: calc(var(--lead) + 13px);
display: block;
color: #F9F5F3;
font: 500 11px / 1 var(--mono, ui-monospace, monospace);
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
text-shadow: 0 0 3px rgb(19 16 15 / .95), 0 0 10px rgb(19 16 15 / .85);
transition: color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.globe__label-meta { margin-left: .35em; color: #F08A6C; }
.globe__label--below::after { top: 9px; bottom: auto; background: linear-gradient(to bottom, rgb(249 245 243 / 0), rgb(249 245 243 / .6)); }
.globe__label--below .globe__label-text { top: calc(var(--lead) + 13px); bottom: auto; }
.globe__label.is-active .globe__label-text { color: #FFFFFF; }
.globe__label.is-active::after { background: linear-gradient(to top, rgb(249 245 243 / .1), rgb(249 245 243 / .95)); }
.globe__label--below.is-active::after { background: linear-gradient(to bottom, rgb(249 245 243 / .1), rgb(249 245 243 / .95)); }
/* The HUD frame: corner brackets, a hairline cross outside the sphere, four mono captions. */
.globe-frame { --tick: rgb(243 177 162 / .55); position: relative; padding-block: 44px; }
.globe-frame::before,
.globe-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.globe-frame::before {
background:
linear-gradient(var(--tick), var(--tick)) 0 0 / 14px 1px,
linear-gradient(var(--tick), var(--tick)) 0 0 / 1px 14px,
linear-gradient(var(--tick), var(--tick)) 100% 0 / 14px 1px,
linear-gradient(var(--tick), var(--tick)) 100% 0 / 1px 14px,
linear-gradient(var(--tick), var(--tick)) 0 100% / 14px 1px,
linear-gradient(var(--tick), var(--tick)) 0 100% / 1px 14px,
linear-gradient(var(--tick), var(--tick)) 100% 100% / 14px 1px,
linear-gradient(var(--tick), var(--tick)) 100% 100% / 1px 14px;
background-repeat: no-repeat;
}
.globe-frame::after {
background:
linear-gradient(rgb(255 255 255 / .09), rgb(255 255 255 / .09)) 50% 50% / 100% 1px no-repeat,
linear-gradient(rgb(255 255 255 / .09), rgb(255 255 255 / .09)) 50% 50% / 1px 100% no-repeat;
-webkit-mask-image: radial-gradient(circle closest-side, transparent 83%, #000 86%, #000 94%, transparent 100%);
mask-image: radial-gradient(circle closest-side, transparent 83%, #000 86%, #000 94%, transparent 100%);
}
.globe-hud {
position: absolute;
inset: 0;
margin: 0;
color: #A29894;
font: 500 11px / 1.4 var(--mono, ui-monospace, monospace);
letter-spacing: .1em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
pointer-events: none;
}
.globe-hud__item { position: absolute; white-space: nowrap; }
.globe-hud__item--tl { top: 12px; left: 22px; }
.globe-hud__item--tr { top: 12px; right: 22px; }
.globe-hud__item--bl { bottom: 12px; left: 22px; }
.globe-hud__item--br { bottom: 12px; right: 22px; }
/* Section layout: the globe on one side, the heading and region cards on the other. On narrow
screens the heading comes first, then the globe, then the cards. */
.globe-layout { display: grid; gap: var(--s-6, 32px); }
.globe-layout__copy { display: contents; }
.globe-layout__copy > .section-head { order: -1; margin-bottom: 0; }
@media (min-width: 1024px) {
.globe-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8, 64px); align-items: center; }
.globe-layout__copy { display: grid; gap: var(--s-6, 32px); align-content: center; }
.globe-layout__copy > .section-head { order: 0; }
.globe-layout--flip .globe-layout__visual { order: 2; }
}
/* Region cards: a marker dot, the region, one line, a tiny HUD coordinate. */
.region-cards { display: grid; gap: var(--s-3, 12px); margin: 0; padding: 0; list-style: none; }
.region-card {
position: relative;
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
gap: 6px 18px;
align-items: baseline;
padding: 18px 22px;
border: 1px solid rgb(255 255 255 / .12);
border-radius: var(--r-lg, 8px);
background: rgb(255 255 255 / .025);
transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.region-card::before {
content: "";
grid-row: 1;
align-self: center;
width: 8px;
height: 8px;
border-radius: 50%;
background: #F9F5F3;
box-shadow: 0 0 0 4px rgb(243 177 162 / .14), 0 0 12px 2px rgb(236 115 86 / .55);
}
.region-card--base::before { background: #E8694B; box-shadow: 0 0 0 4px rgb(232 105 75 / .16), 0 0 12px 2px rgb(232 105 75 / .5); }
.region-card:hover,
.region-card:focus-within { border-color: rgb(243 177 162 / .45); background-color: rgb(243 177 162 / .06); }
.region-card > * { grid-column: 2; margin: 0; }
.region-card__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: #F9F5F3; font-size: var(--fs-h3, 1.25rem); }
.region-card__tag { padding: 3px 7px; border: 1px solid rgb(243 177 162 / .4); border-radius: 2px; color: #F08A6C; font: 500 10.5px / 1.2 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }
.region-card__text { color: #CDC7C4; font-size: var(--fs-small, .9375rem); line-height: 1.55; }
.region-card__coord { margin-top: 4px; color: #A29894; font: 500 11px / 1.4 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
@media print { .globe-layout__visual { display: none; } }
/* ==== ui ==== */
/* v2-ui.css: the product UI vocabulary for the H-Compliance and manufacturing screens.
Plain rules, scoped to new ui-* class names, written to sit in the ui layer of site.css next to
section 5. They read only the shared tokens, so they follow light, dark and the navy frame. */
/* Country tag (IN, AE, MX): words first, never a flag */
.ui-cc { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); font: 500 11px/1.55 var(--mono); letter-spacing: 0.06em; }
/* Compliance calendar: obligations, with the month and the entities beside them in a wide frame */
.ui-cal-view { display: grid; gap: 14px; align-items: start; }
.ui-cal-side { display: none; }
@container ui (min-width: 900px) {
.ui-cal-view { grid-template-columns: minmax(0, 1fr) 250px; }
.ui-cal-side { display: grid; gap: 12px; min-width: 0; }
}
.ui-obls { container: obls / inline-size; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.ui-obl { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); }
.ui-obl:first-child { border-top: 0; }
.ui-obl--bad { box-shadow: inset 3px 0 0 var(--bad); }
.ui-obl--warn { box-shadow: inset 3px 0 0 var(--warn); }
.ui-obl__date { display: grid; justify-items: center; align-content: center; gap: 1px; width: 46px; height: 46px; border-radius: 4px; background: var(--surface-2); }
.ui-obl__day { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ui-obl__mon { color: var(--muted); font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ui-obl__main { display: grid; gap: 3px; min-width: 0; }
.ui-obl__name { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.ui-obl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.ui-obl__state { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12.5px; }
.ui-obl__state .ui-k { font-size: 12.5px; }
@container obls (min-width: 520px) {
.ui-obl { grid-template-columns: 46px minmax(0, 1fr) minmax(150px, auto); }
.ui-obl__state { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
}
/* A month at a glance: due days outlined, filed days ticked, the day that needs a person barred */
.ui-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; max-width: 280px; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.ui-month__wd { color: var(--muted); font: 500 10.5px/2 var(--mono); }
.ui-month__d { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; color: var(--ink-2); line-height: 1; }
.ui-month__d:empty { visibility: hidden; }
.ui-month__d.is-due { box-shadow: inset 0 0 0 1px var(--primary-line); background: var(--primary-soft); color: var(--ink); font-weight: 600; }
.ui-month__d.is-done { background: var(--ok-soft); color: var(--ink); }
.ui-month__d.is-done::after { content: ""; position: absolute; right: 3px; top: 3px; width: 3px; height: 6px; border: solid var(--ok); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
.ui-month__d.is-risk { background: var(--bad-soft); color: var(--ink); font-weight: 600; }
.ui-month__d.is-risk::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 3px; height: 2px; border-radius: 1px; background: var(--bad); }
.ui-month__d.is-today { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 600; }
.ui-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 12px; }
.ui-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ui-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--surface-2); }
.ui-legend .is-due { box-shadow: inset 0 0 0 1px var(--primary-line); background: var(--primary-soft); }
.ui-legend .is-done { background: var(--ok); }
.ui-legend .is-risk { background: var(--bad); }
.ui-ents { display: flex; flex-direction: column; }
.ui-ent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; }
.ui-ent > .ui-cc { grid-row: span 2; }
.ui-ent:first-child { border-top: 0; }
.ui-ent__n { color: var(--muted); font-size: 12.5px; }
/* Plant board: lines with OEE, maintenance and quality, then today's dispatches */
.ui-board { display: grid; gap: 14px; align-items: start; }
@container ui (min-width: 820px) {
.ui-board { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ui-board__wide { grid-column: 1 / -1; }
}
.ui-board__side { display: grid; gap: 14px; min-width: 0; }
.ui-line { display: grid; gap: 7px; padding: 10px 0 4px; border-top: 1px solid var(--line); }
.ui-panel__title + .ui-line { border-top: 0; padding-top: 2px; }
.ui-line__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ui-line__name { color: var(--ink); font-weight: 600; }
.ui-line__head .ui-pill { margin-left: auto; }
.ui-oee { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.ui-oee__v { color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ui-oee__v small { margin-left: 2px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.ui-oee__bar { position: relative; height: 8px; border-radius: 4px; background: var(--line); }
.ui-oee__bar > i { display: block; width: var(--v, 0%); height: 100%; border-radius: 4px; background: var(--ink); }
.ui-oee__bar--low > i { background: var(--warn); }
.ui-oee__target { position: absolute; top: -4px; bottom: -4px; left: var(--t, 75%); width: 2px; border-radius: 1px; background: var(--ink-2); }
.ui-oee__k { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@container ui (min-width: 480px) { .ui-oee__k { grid-column: 2; } }
.ui-board .ui-table .ui-num, .ui-board .ui-table .ui-mono, .ui-board .ui-table .ui-pill { white-space: nowrap; }
/* The second line of a panel item sits under the first (the home page does the same for its hero) */
.ui-board .ui-item__t { display: block; }
/* The offering illustrations (the SVG files in assets/img/illo) inside : fill the card or panel */
.illo { display: block; }
.illo img { display: block; width: 100%; height: auto; }
/* ==== serif accent ==== */
/* One word or phrase in a display headline may be set in the serif (Source Serif 4 italic by default). */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.serif--italic { font-style: italic; }
/* ==== 10. Home hero after the owner's 21st.dev reference (responsive-hero-banner), in plain CSS ====
Full-screen photo, the site header as a frosted pill over it, a badge, a large serif headline,
frosted buttons and a "works with" row. hero21.js runs one GSAP entrance sequence. */
.hero21 { position: relative; isolation: isolate; overflow: hidden; display: grid; min-height: 100svh; background: #0b0a09; color: #FFFFFF; }
.hero21__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero21__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 42%, rgb(11 10 9 / .35), rgb(11 10 9 / .78)), linear-gradient(180deg, rgb(11 10 9 / .55), transparent 30%, rgb(11 10 9 / .85)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3); }
.hero21__inner { display: grid; align-content: center; gap: clamp(56px, 8vw, 96px); padding-block: calc(var(--header-h) + clamp(64px, 10vw, 120px)) clamp(48px, 7vw, 80px); }
.hero21__copy { display: grid; justify-items: center; max-width: 820px; margin-inline: auto; text-align: center; }
.hero21__badge { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 28px; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); backdrop-filter: blur(10px); color: rgb(255 255 255 / .9); font: 500 0.875rem / 1.3 var(--sans); }
.hero21__badge-label { padding: 3px 9px; border-radius: 999px; background: rgb(255 255 255 / .92); color: #191614; font-size: 0.75rem; font-weight: 600; }
.hero21__title { margin: 0; color: #FFFFFF; font: 400 clamp(2.6rem, 1.2rem + 5vw, 5.4rem) / 1.04 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.hero21__br { display: none; }
@media (min-width: 640px) { .hero21__br { display: inline; } }
.hero21__lede { max-width: 640px; margin: 26px auto 0; color: rgb(255 255 255 / .8); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.6; }
.hero21__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 40px; }
.hero21__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; color: #FFFFFF; font: 500 0.9375rem / 1 var(--sans); text-decoration: none; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.hero21__btn .icon { width: 16px; height: 16px; }
.hero21__btn--glass { background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); backdrop-filter: blur(10px); }
.hero21__btn--glass:hover { background: rgb(255 255 255 / .18); color: #FFFFFF; }
.hero21__btn--quiet { color: rgb(255 255 255 / .88); }
.hero21__btn--quiet:hover { color: #FFFFFF; }
.hero21__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.hero21__works { max-width: 980px; width: 100%; margin-inline: auto; text-align: center; }
.hero21__works-title { margin: 0; color: rgb(255 255 255 / .62); font-size: 0.875rem; }
.hero21__works-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.hero21__works-list li { padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); color: rgb(255 255 255 / .74); font: 500 0.875rem / 1.3 var(--sans); }
/* The site header becomes the reference's frosted pill while it sits over the home hero */
body[data-page="home"] .site-header { position: fixed; left: 0; right: 0; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
body[data-page="home"] .site-header[data-at-top] { background: transparent; border-bottom-color: transparent; }
@media (min-width: 1120px) {
body[data-page="home"] .site-header[data-at-top] .nav__list { align-items: center; height: auto; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); backdrop-filter: blur(12px); }
body[data-page="home"] .site-header[data-at-top] :is(.nav__link, .nav__trigger) { min-height: 40px; padding-inline: 14px; border-radius: 999px; color: rgb(255 255 255 / .82); }
body[data-page="home"] .site-header[data-at-top] :is(.nav__link, .nav__trigger):hover, body[data-page="home"] .site-header[data-at-top] .nav__trigger[aria-expanded="true"] { color: #FFFFFF; background: rgb(255 255 255 / .08); }
body[data-page="home"] .site-header[data-at-top] :is(.nav__link, .nav__trigger)::after { display: none; }
}
body[data-page="home"] .site-header[data-at-top] :is(.icon-btn, .menu-button) { color: #FFFFFF; }
body[data-page="home"] .site-header[data-at-top] .site-header__cta { background: #FFFFFF; border-color: #FFFFFF; color: #191614; border-radius: 999px; }
body[data-page="home"] .site-header[data-at-top] .site-header__cta:hover { background: rgb(255 255 255 / .88); }
@media (min-width: 1120px) {
body[data-page="home"] .site-header[data-at-top] .nav { align-self: center; height: auto; }
body[data-page="home"] .site-header[data-at-top] .nav__list { height: 48px; }
body[data-page="home"] .site-header[data-at-top] .nav__item { height: auto; }
}
.hero21__copy { max-width: 1040px; }
.hero21__title { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5rem); }
/* Home: the menu pill sits in the centre of the header (three columns keep the mega menus full width) */
@media (min-width: 1120px) {
body[data-page="home"] .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
body[data-page="home"] .site-header .brand { justify-self: start; }
body[data-page="home"] .site-header .nav { justify-self: center; }
body[data-page="home"] .site-header__end { justify-self: end; margin-left: 0; }
}
/* No backdrop-filter on the pill: it would become the containing block and squeeze the mega menus */
@media (min-width: 1120px) {
body[data-page="home"] .site-header[data-at-top] .nav__list { backdrop-filter: none; background: rgb(20 18 16 / .42); }
}