/* Inter-Cox · intercox.com */
@import url("colors_and_type.css");
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
color: var(--fg);
background: var(--bg);
font-size: var(--fs-16);
line-height: var(--lh-normal);
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
::selection { background: var(--icx-red); color: #fff; }
:root {
--site-pad-x: clamp(20px, 4vw, 56px);
--site-max: 1320px;
}
/* ------------------------------------------------------------- */
/* Layout primitives */
/* ------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--site-max);
margin: 0 auto;
padding: 0 var(--site-pad-x);
}
.section {
padding: clamp(64px, 9vw, 128px) 0;
position: relative;
}
.section--ink {
background: var(--icx-black);
color: var(--icx-white);
}
.section--ink .muted { color: rgba(255,255,255,0.65); }
.section--red {
background: var(--icx-red);
color: #fff;
}
.section--tinted {
background: var(--icx-ink-50);
}
.rule {
height: 1px;
width: 40px;
background: currentColor;
display: block;
}
.rule--full { width: 100%; }
/* ------------------------------------------------------------- */
/* Type utilities */
/* ------------------------------------------------------------- */
.eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--icx-red);
}
.eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: currentColor;
display: inline-block;
}
.eyebrow--mono::before { display: none; }
.display {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(48px, 8.4vw, 132px);
line-height: 0.92;
letter-spacing: -0.035em;
margin: 0;
}
.display--kalexa {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.h1 {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(40px, 5.6vw, 84px);
line-height: 0.96;
letter-spacing: -0.025em;
margin: 0;
}
.h2 {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(32px, 4vw, 56px);
line-height: 1.02;
letter-spacing: -0.018em;
margin: 0;
}
.h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.25;
letter-spacing: -0.005em;
margin: 0;
}
.lead {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.45;
color: var(--fg-muted);
max-width: 64ch;
margin: 0;
font-weight: 400;
}
.section--ink .lead, .section--red .lead { color: rgba(255,255,255,0.85); }
.meta {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.section--ink .meta, .section--red .meta { color: rgba(255,255,255,0.7); }
.mono {
font-family: var(--font-mono);
font-feature-settings: "tnum";
}
/* ------------------------------------------------------------- */
/* Buttons */
/* ------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 600;
padding: 16px 24px;
border-radius: var(--r-2);
border: 1px solid transparent;
transition: background var(--d-base) var(--ease-out),
color var(--d-base) var(--ease-out),
border-color var(--d-base) var(--ease-out);
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
cursor: pointer;
}
.btn .arrow {
display: inline-block;
transition: transform var(--d-base) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }
.btn--red { background: var(--icx-red); color: #fff; }
.btn--red:hover { background: var(--icx-red-hover); }
.btn--ink { background: var(--icx-black); color: #fff; }
.btn--ink:hover { background: var(--icx-ink-800); }
.btn--white { background: #fff; color: var(--icx-black); }
.btn--white:hover { background: var(--icx-ink-100); }
.btn--ghost-ink { background: transparent; color: var(--icx-black); border-color: var(--icx-ink-300); }
.btn--ghost-ink:hover { border-color: var(--icx-black); background: var(--icx-ink-50); }
.btn--ghost-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.btn--ghost-white:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
.linkarrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
color: inherit;
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
}
.linkarrow .arrow { transition: transform var(--d-base) var(--ease-out); }
.linkarrow:hover .arrow { transform: translateX(4px); }
/* ------------------------------------------------------------- */
/* Header */
/* ------------------------------------------------------------- */
.header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: 24px var(--site-pad-x);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
transition: background var(--d-base) var(--ease-out),
color var(--d-base) var(--ease-out),
border-color var(--d-base) var(--ease-out),
padding var(--d-base) var(--ease-out);
border-bottom: 1px solid transparent;
pointer-events: none;
}
.header > * { pointer-events: auto; }
.header--ontop {
/* Default state when over hero (red) */
color: #fff;
}
.header--scrolled {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--icx-black);
border-bottom-color: var(--border);
padding: 16px var(--site-pad-x);
}
.header--ink {
color: #fff;
}
.header__wm {
height: 68px;
width: auto;
display: block;
transition: height var(--d-base) var(--ease-out);
}
.header--scrolled .header__wm { height: 48px; }
.header__brand {
display: flex;
align-items: center;
gap: 14px;
}
.header__brand-sym {
height: 24px;
width: 24px;
}
.nav {
display: flex;
align-items: center;
gap: 36px;
}
.nav__link {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
position: relative;
padding: 6px 0;
opacity: 0.85;
display: inline-flex;
align-items: center;
gap: 0;
transition:
opacity var(--d-base) var(--ease-out),
letter-spacing var(--d-base) var(--ease-out),
color var(--d-base) var(--ease-out),
gap var(--d-base) var(--ease-out);
white-space: nowrap;
}
/* Hex bullet that slides in from the left on hover */
.nav__link::before {
content: "";
width: 0;
height: 6px;
background-color: var(--icx-red);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: 0;
transform: translateX(-6px);
transition:
width var(--d-base) var(--ease-out),
opacity var(--d-base) var(--ease-out),
transform var(--d-base) var(--ease-out);
}
/* Underline rule that scales in from left */
.nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: var(--icx-red);
transform-origin: left center;
transform: scaleX(0);
transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__link:hover {
opacity: 1;
letter-spacing: 0.02em;
gap: 8px;
}
.nav__link:hover::before {
width: 8px;
opacity: 1;
transform: translateX(0);
}
.nav__link:hover::after {
transform: scaleX(1);
}
/* Adjust hover color contextually — red over dark, red over light, both ok */
.header--scrolled .nav__link:hover {
color: var(--icx-red);
}
@media (prefers-reduced-motion: reduce) {
.nav__link,
.nav__link::before,
.nav__link::after { transition: none !important; }
}
.header__right {
display: flex;
align-items: center;
gap: 24px;
}
.lang {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid currentColor;
border-radius: var(--r-pill);
padding: 3px;
gap: 2px;
opacity: 0.9;
}
.lang button {
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
padding: 3px 9px;
border-radius: var(--r-pill);
transition: background var(--d-base) var(--ease-out),
color var(--d-base) var(--ease-out);
color: inherit;
}
.lang button.is-active {
background: currentColor;
}
.lang button.is-active span { color: var(--icx-black); }
.header--ink .lang button.is-active span { color: var(--icx-black); }
.header__cta {
font-size: 12.5px;
font-weight: 600;
padding: 10px 18px;
border: 1px solid currentColor;
border-radius: var(--r-2);
background: transparent;
color: inherit;
transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
white-space: nowrap;
}
.header--scrolled .header__cta { background: var(--icx-black); color: #fff; border-color: var(--icx-black); }
.header--scrolled .header__cta:hover { background: var(--icx-red); border-color: var(--icx-red); }
.header__cta:hover { background: rgba(255,255,255,0.1); }
/* ------------------------------------------------------------- */
/* Hero — RED variant */
/* ------------------------------------------------------------- */
.hero {
background: var(--icx-red);
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
padding-top: 88px;
}
/* Hero pattern variants — controlled by data-pattern attribute */
.hero__symbol-decor {
position: absolute;
inset: 0;
pointer-events: none;
user-select: none;
opacity: 0;
z-index: 0;
}
.hero__body, .hero .wrap {
position: relative;
z-index: 2;
}
.hero__grid { z-index: 1; }
/* Pattern: cities — stacked destination codes on right edge */
.hero[data-pattern="cities"] .hero__symbol-decor {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
padding: 0 max(4vw, var(--site-pad-x)) 0 0;
opacity: 1;
}
.hero__cities {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: clamp(2px, 0.5vh, 8px);
text-align: right;
}
.hero__city {
font-family: var(--font-display);
font-size: clamp(56px, 8vw, 124px);
font-weight: 700;
line-height: 0.82;
letter-spacing: -0.025em;
color: rgba(255,255,255,0.07);
text-transform: uppercase;
white-space: nowrap;
font-variant-numeric: tabular-nums;
transition: color var(--d-base) var(--ease-out);
}
.hero__city.is-active {
color: rgba(255,255,255,0.22);
}
.hero__city .meta-tag {
font-family: var(--font-mono);
font-size: 0.16em;
letter-spacing: 0.18em;
vertical-align: 0.55em;
margin-left: 0.4em;
color: rgba(255,255,255,0.5);
}
/* Pattern: wordmark — massive INTERCOX vertical on right */
.hero[data-pattern="wordmark"] .hero__symbol-decor {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 max(2vw, 24px) 0 0;
opacity: 1;
}
.hero__big-wm {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(140px, 18vw, 280px);
line-height: 0.78;
letter-spacing: -0.06em;
color: rgba(255,255,255,0.06);
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
/* Pattern: tiled symbol (original) */
.hero[data-pattern="tile"] .hero__symbol-decor {
background-image: url("assets/sym-white.png");
background-repeat: repeat;
background-size: 96px auto;
background-position: center;
opacity: 0.06;
mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, rgba(0,0,0,0.6) 55%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0%, rgba(0,0,0,0.6) 55%, transparent 85%);
}
/* Pattern: chevron conveyor — diagonal arrow stripes */
.hero[data-pattern="conveyor"] .hero__symbol-decor {
background-image:
repeating-linear-gradient(
135deg,
rgba(255,255,255,0.08) 0 2px,
transparent 2px 40px
);
opacity: 1;
mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
/* Pattern: none */
.hero[data-pattern="none"] .hero__symbol-decor { display: none; }
/* Ink hero — soften patterns */
.hero--ink[data-pattern="cities"] .hero__city { color: rgba(255,255,255,0.06); }
.hero--ink[data-pattern="cities"] .hero__city.is-active { color: rgba(255,255,255,0.16); }
/* Split hero — patterns sit on the red half */
.hero--split[data-pattern="cities"] .hero__symbol-decor {
width: 50%;
left: auto;
right: 0;
}
.hero__body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: clamp(48px, 8vh, 96px);
padding-bottom: clamp(40px, 6vh, 80px);
position: relative;
}
.hero__eyebrow-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: clamp(20px, 4vh, 40px);
flex-wrap: wrap;
}
.hero__eyebrow-row .eyebrow { color: rgba(255,255,255,0.9); }
.hero__eyebrow-row .eyebrow::before { background: rgba(255,255,255,0.6); }
.hero__loc {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
color: rgba(255,255,255,0.7);
display: inline-flex;
align-items: center;
gap: 8px;
}
.hero__loc::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
display: inline-block;
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.25); }
}
.hero__headline {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(48px, 9vw, 148px);
line-height: 0.9;
letter-spacing: -0.04em;
margin: 0;
max-width: 14ch;
}
.hero__headline em {
font-style: normal;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.hero__sub {
margin-top: clamp(20px, 3vh, 32px);
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.5;
max-width: 60ch;
color: rgba(255,255,255,0.88);
font-weight: 400;
}
.hero__cta-row {
margin-top: clamp(28px, 4vh, 44px);
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero__foot {
border-top: 1px solid rgba(255,255,255,0.22);
padding: clamp(20px, 3vh, 32px) 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.hero__foot-cell {
display: flex;
flex-direction: column;
gap: 8px;
}
.hero__foot-k {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
font-weight: 600;
}
.hero__foot-v {
font-size: clamp(22px, 2.2vw, 32px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
.hero__foot-u {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255,255,255,0.7);
}
@media (max-width: 720px) {
.hero__foot { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
/* ------------------------------------------------------------- */
/* Hero — INK variant */
/* ------------------------------------------------------------- */
.hero--ink {
background: var(--icx-black);
color: #fff;
}
.hero--ink .hero__symbol-decor { opacity: 0.05; }
/* ------------------------------------------------------------- */
/* Hero — SPLIT variant */
/* ------------------------------------------------------------- */
.hero--split { background: #fff; color: var(--icx-black); }
.hero--split .hero__split {
position: absolute;
inset: 88px 0 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
pointer-events: none;
}
.hero--split .hero__split-left { background: #fff; }
.hero--split .hero__split-right { background: var(--icx-red); }
.hero--split .hero__body { color: var(--icx-black); }
.hero--split .hero__headline { color: var(--icx-black); }
.hero--split .hero__headline .red-half {
color: #fff;
background: var(--icx-red);
padding: 0 0.08em;
margin-left: -0.04em;
}
/* ------------------------------------------------------------- */
/* Marquee (slogan ticker) */
/* ------------------------------------------------------------- */
.marquee {
background: var(--icx-black);
color: #fff;
border-top: 1px solid var(--icx-ink-900);
border-bottom: 1px solid var(--icx-ink-900);
overflow: hidden;
padding: 22px 0;
}
.marquee--red {
background: var(--icx-red);
color: #fff;
border-top-color: var(--icx-red-shade-700);
border-bottom-color: var(--icx-red-shade-700);
}
.marquee--red .marquee__dot {
background: #fff;
}
.marquee__track {
display: flex;
width: max-content;
gap: 64px;
align-items: center;
animation: marquee 38s linear infinite;
}
.marquee__item {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 56px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 64px;
}
.marquee__dot {
width: 10px;
height: 10px;
background: var(--icx-red);
display: inline-block;
flex: 0 0 10px;
transform: rotate(45deg);
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ------------------------------------------------------------- */
/* Stats / KPIs band */
/* ------------------------------------------------------------- */
.stats {
padding: clamp(48px, 7vw, 96px) 0;
background: #fff;
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.stats__cell {
padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 36px);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 8px;
}
.stats__cell:first-child { border-left: 0; padding-left: 0; }
.stats__k {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.stats__v {
font-family: var(--font-display);
font-size: clamp(48px, 6vw, 96px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 0.9;
color: var(--icx-black);
text-transform: uppercase;
}
.stats__v sup {
font-family: var(--font-sans);
font-size: 0.34em;
font-weight: 600;
color: var(--icx-red);
letter-spacing: 0;
position: relative;
top: -0.7em;
margin-left: 4px;
text-transform: none;
}
.stats__u {
font-size: 13px;
color: var(--fg-muted);
max-width: 24ch;
}
@media (max-width: 860px) {
.stats__grid { grid-template-columns: repeat(2, 1fr); }
.stats__cell:nth-child(3) { border-left: 0; padding-left: 0; }
}
/* ------------------------------------------------------------- */
/* Section heading block */
/* ------------------------------------------------------------- */
.shead {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(24px, 4vw, 80px);
margin-bottom: clamp(40px, 5vw, 72px);
align-items: end;
}
.shead__left { display: flex; flex-direction: column; gap: 16px; }
.shead__index {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
color: var(--fg-subtle);
}
.shead__right { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 760px) {
.shead { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------- */
/* Services */
/* ------------------------------------------------------------- */
.services {
background: #fff;
}
.services__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--border-ink);
border-left: 1px solid var(--border-ink);
}
.svc {
border-right: 1px solid var(--border-ink);
border-bottom: 1px solid var(--border-ink);
padding: clamp(28px, 3.4vw, 48px);
background: #fff;
cursor: pointer;
position: relative;
transition: background var(--d-base) var(--ease-out),
color var(--d-base) var(--ease-out);
display: flex;
flex-direction: column;
gap: 16px;
min-height: 380px;
}
.svc:hover {
background: var(--icx-black);
color: #fff;
}
.svc__head {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 16px;
}
.svc__num {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
color: var(--fg-subtle);
}
.svc:hover .svc__num { color: rgba(255,255,255,0.6); }
.svc__tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 4px 8px;
border: 1px solid currentColor;
border-radius: var(--r-1);
color: var(--icx-red);
}
.svc:hover .svc__tag { color: #fff; border-color: rgba(255,255,255,0.4); }
.svc__h {
font-family: var(--font-sans);
font-size: clamp(28px, 3vw, 44px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1;
margin: 24px 0 0;
}
.svc__p {
font-size: 15px;
line-height: 1.5;
color: var(--fg-muted);
max-width: 44ch;
margin: 0;
}
.svc:hover .svc__p { color: rgba(255,255,255,0.78); }
.svc__bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.svc__bullets li {
font-family: var(--font-mono);
font-size: 12px;
color: var(--fg-subtle);
display: flex;
gap: 10px;
}
.svc__bullets li::before {
content: "—";
color: var(--icx-red);
flex: 0 0 auto;
}
.svc:hover .svc__bullets li { color: rgba(255,255,255,0.7); }
.svc:hover .svc__bullets li::before { color: #fff; }
.svc__foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 16px;
}
.svc__more {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
gap: 8px;
}
.svc__more .arrow { transition: transform var(--d-base) var(--ease-out); }
.svc:hover .svc__more .arrow { transform: translateX(4px); }
@media (max-width: 760px) {
.services__grid { grid-template-columns: 1fr; }
.svc { min-height: auto; }
}
/* ------------------------------------------------------------- */
/* About / image split */
/* ------------------------------------------------------------- */
.about {
background: var(--icx-ink-50);
}
.about__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 5vw, 64px);
}
.about__image-wrap {
position: relative;
width: 100%;
aspect-ratio: 24 / 9;
background: var(--icx-ink-200);
overflow: hidden;
border-top: 1px solid var(--border-ink);
border-bottom: 1px solid var(--border-ink);
}
.about__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
}
.about__image-stencil {
position: absolute;
top: 16px;
left: 16px;
display: flex;
flex-direction: column;
gap: 4px;
background: rgba(11,11,12,0.85);
color: #fff;
padding: 12px 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
border-left: 2px solid var(--icx-red);
}
.about__image-stencil .k {
color: rgba(255,255,255,0.65);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.about__image-foot {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: stretch;
background: rgba(11,11,12,0.92);
color: #fff;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
}
.about__image-foot-cell {
padding: 14px 20px;
border-right: 1px solid rgba(255,255,255,0.18);
display: flex;
flex-direction: column;
gap: 4px;
}
.about__image-foot-cell:last-child { border-right: 0; margin-left: auto; }
.about__image-foot-cell .k {
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.about__image-foot-cell .v { color: #fff; }
.about__body {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
.about__text { display: flex; flex-direction: column; gap: 24px; }
.about__facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 32px;
border-top: 1px solid var(--border);
padding-top: 28px;
}
.about__fact-k {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-subtle);
margin-bottom: 6px;
}
.about__fact-v {
font-size: 18px;
font-weight: 600;
color: var(--icx-black);
letter-spacing: -0.01em;
}
@media (max-width: 860px) {
.about__body { grid-template-columns: 1fr; }
.about__image-wrap { aspect-ratio: 4 / 3; }
.about__image-foot { font-size: 9px; }
.about__image-foot-cell { padding: 10px 12px; }
}
/* ------------------------------------------------------------- */
/* Lanes / routes */
/* ------------------------------------------------------------- */
.lanes {
background: #fff;
}
.lanes__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 64px);
align-items: start;
}
.lanes__filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.lanes__filter {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 8px 14px;
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
background: #fff;
color: var(--fg-muted);
cursor: pointer;
transition: background var(--d-base) var(--ease-out),
color var(--d-base) var(--ease-out),
border-color var(--d-base) var(--ease-out);
}
.lanes__filter:hover {
border-color: var(--icx-black);
color: var(--icx-black);
}
.lanes__filter.is-active {
background: var(--icx-black);
color: #fff;
border-color: var(--icx-black);
}
.lanes__table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.lanes__table th {
text-align: left;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-subtle);
font-weight: 600;
padding: 12px 16px 12px 0;
border-bottom: 1px solid var(--border-ink);
}
.lanes__table td {
padding: 16px 16px 16px 0;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.lanes__table tr:last-child td { border-bottom: 0; }
.lanes__table tr {
transition: background var(--d-fast) var(--ease-out);
}
.lanes__table tbody tr:hover { background: var(--icx-ink-50); }
.lane__from-to {
font-weight: 600;
font-size: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.lane__from-to .arrow {
color: var(--icx-red);
font-weight: 400;
}
.lane__cargo {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--r-1);
display: inline-flex;
white-space: nowrap;
}
.cargo--cold { background: rgba(14,107,168,0.1); color: var(--cold); }
.cargo--gen { background: var(--icx-ink-100); color: var(--icx-ink-700); }
.cargo--adr { background: rgba(178,34,34,0.1); color: var(--danger); }
.cargo--val { background: rgba(232,69,41,0.1); color: var(--icx-red); }
.lanes__transit {
font-family: var(--font-mono);
font-size: 14px;
color: var(--icx-black);
}
.lanes__cutoff {
font-family: var(--font-mono);
font-size: 13px;
color: var(--fg-muted);
}
.lanes__freq {
font-size: 12px;
color: var(--fg-muted);
}
/* Map — no frame, sits on section background */
.lanes__map {
position: relative;
background: transparent;
padding: 0;
border: 0;
aspect-ratio: 5/6;
overflow: visible;
}
.lanes__map svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lanes__map-foot {
display: flex;
justify-content: space-between;
align-items: end;
gap: 12px;
padding-top: 16px;
margin-top: 8px;
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--fg-subtle);
}
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr; }
.lanes__map { aspect-ratio: 4/3; }
}
/* ------------------------------------------------------------- */
/* Certifications */
/* ------------------------------------------------------------- */
.certs {
background: var(--icx-black);
color: #fff;
}
.certs__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 64px);
}
.cert {
border-top: 1px solid rgba(255,255,255,0.4);
padding-top: 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cert__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.cert__name {
font-family: var(--font-display);
font-size: clamp(40px, 5vw, 80px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 0.9;
text-transform: uppercase;
}
.cert__lvl {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
}
.cert__desc {
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,0.78);
max-width: 44ch;
}
.cert__data {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.15);
}
.cert__data-k {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 6px;
}
.cert__data-v {
font-family: var(--font-mono);
font-size: 14px;
color: #fff;
font-weight: 500;
}
@media (max-width: 760px) {
.certs__grid { grid-template-columns: 1fr; }
}
.cert--logo {
display: flex;
flex-direction: column;
gap: 24px;
}
.cert__logo-frame {
width: 100%;
height: 120px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
margin-bottom: 4px;
position: relative;
overflow: hidden;
}
.cert__logo-frame image-slot {
--slot-bg: transparent;
--slot-border: transparent;
--slot-label-color: var(--icx-ink-500);
}
/* ------------------------------------------------------------- */
/* Quote / testimonial */
/* ------------------------------------------------------------- */
.tq {
background: #fff;
}
.tq__wrap {
display: flex;
flex-direction: column;
gap: clamp(28px, 4vw, 56px);
max-width: min(1180px, 90vw);
margin: 0 auto;
}
.tq__eyebrow {
display: inline-block;
}
.tq__body {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: clamp(20px, 3vw, 48px);
}
.tq__mark {
font-family: var(--font-display);
font-size: clamp(140px, 16vw, 240px);
font-weight: 700;
line-height: 0.65;
color: var(--icx-red);
margin: 0;
user-select: none;
align-self: start;
margin-top: -0.08em;
}
.tq__quote {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(32px, 4.4vw, 64px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--icx-black);
margin: 0;
max-width: 28ch;
text-wrap: balance;
}
.tq__foot {
display: flex;
align-items: center;
gap: 24px;
padding-top: clamp(16px, 2.5vw, 32px);
}
.tq__rule {
flex-shrink: 0;
width: 48px;
height: 1px;
background: var(--icx-red);
display: inline-block;
}
.tq__cite {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1.4;
}
.tq__by {
color: var(--icx-black);
font-weight: 700;
letter-spacing: 0.18em;
}
.tq__org {
color: var(--fg-muted);
font-weight: 500;
}
@media (max-width: 760px) {
.tq__body { grid-template-columns: 1fr; }
.tq__mark { font-size: 96px; }
.tq__quote { font-size: clamp(26px, 7vw, 40px); max-width: none; }
}
/* ------------------------------------------------------------- */
/* Contact */
/* ------------------------------------------------------------- */
.contact {
background: var(--icx-ink-50);
}
.contact__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
.contact__details {
display: flex;
flex-direction: column;
gap: 28px;
}
.contact__detail-k {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-subtle);
margin-bottom: 6px;
}
.contact__detail-v {
font-size: 16px;
color: var(--icx-black);
font-weight: 500;
line-height: 1.4;
}
.contact__detail-v a:hover { color: var(--icx-red); }
.form {
background: #fff;
border: 1px solid var(--border);
padding: clamp(24px, 3vw, 40px);
display: flex;
flex-direction: column;
gap: 18px;
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-subtle);
font-weight: 600;
}
.field input, .field select, .field textarea {
background: transparent;
border: 0;
border-bottom: 1px solid var(--border-strong);
padding: 10px 0;
font-size: 15px;
color: var(--icx-black);
outline: none;
transition: border-color var(--d-base) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
border-bottom-color: var(--icx-red);
}
.field textarea {
min-height: 100px;
resize: vertical;
font-family: inherit;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea {
border-bottom-color: var(--danger);
}
.field__err {
font-family: var(--font-mono);
font-size: 11px;
color: var(--danger);
}
.form__cargo-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cargo-pill {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--r-pill);
cursor: pointer;
transition: all var(--d-base) var(--ease-out);
}
.cargo-pill.is-active {
background: var(--icx-black);
color: #fff;
border-color: var(--icx-black);
}
.form__submit-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
}
.form__consent {
font-size: 11px;
color: var(--fg-subtle);
max-width: 38ch;
line-height: 1.4;
}
.form--sent {
align-items: center;
justify-content: center;
text-align: center;
min-height: 360px;
display: flex;
}
.form__sent-mark {
font-family: var(--font-display);
font-size: 64px;
font-weight: 700;
color: var(--icx-red);
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.form__sent-h {
font-size: 24px;
font-weight: 700;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.form__sent-p {
font-size: 14px;
color: var(--fg-muted);
max-width: 36ch;
margin: 0 auto;
}
@media (max-width: 860px) {
.contact__grid { grid-template-columns: 1fr; }
.form__row { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------- */
/* Footer */
/* ------------------------------------------------------------- */
.footer {
background: var(--icx-black);
color: rgba(255,255,255,0.78);
padding: clamp(48px, 7vw, 96px) 0 0;
}
.footer__top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: clamp(32px, 4vw, 56px);
padding-bottom: 56px;
border-bottom: 1px solid rgba(255,255,255,0.12);
align-items: start;
}
.footer__brand-stack {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 40ch;
}
.footer__wm {
height: 64px;
width: auto;
align-self: flex-start;
max-width: none;
flex-shrink: 0;
}
.footer__brand-rule {
width: 56px;
height: 1px;
background: var(--icx-red);
}
.footer__addr {
font-size: 13px;
line-height: 1.55;
color: rgba(255,255,255,0.7);
white-space: pre-line;
}
.footer__brand-meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.footer__col-h {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 14px;
}
.footer__list a {
transition: color var(--d-base) var(--ease-out);
color: rgba(255,255,255,0.85);
}
.footer__list a:hover { color: var(--icx-red); }
.footer__bottom {
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.45);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__bottom-links {
display: flex;
gap: 24px;
}
.footer__bottom-links a:hover { color: rgba(255,255,255,0.85); }
@media (max-width: 1024px) {
.footer__top { grid-template-columns: 1fr 1fr 1fr; }
.footer__brand-stack { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 640px) {
.footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer__brand-stack { grid-column: 1 / -1; }
.footer__wm { height: 48px; }
}
/* ------------------------------------------------------------- */
/* Cookie strip */
/* ------------------------------------------------------------- */
.cookie {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
z-index: 60;
background: var(--icx-black);
color: #fff;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
box-shadow: var(--shadow-3);
border-left: 3px solid var(--icx-red);
max-width: 720px;
margin: 0 auto;
}
.cookie__actions { display: flex; gap: 8px; }
.cookie__btn {
font-size: 12px;
font-weight: 600;
padding: 8px 14px;
border-radius: var(--r-2);
border: 1px solid rgba(255,255,255,0.3);
transition: all var(--d-base) var(--ease-out);
}
.cookie__btn:hover { border-color: #fff; }
.cookie__btn--solid { background: #fff; color: var(--icx-black); border-color: #fff; }
.cookie__btn--solid:hover { background: var(--icx-ink-200); }
/* Print: hide chrome */
@media print {
.header, .cookie, .railv { display: none !important; }
}
/* ============================================================= */
/* SIGNATURE FLOURISHES — v2 visual improvements */
/* ============================================================= */
/* ---- Vertical brand rail (left edge, fixed) ---------------- */
.railv {
position: fixed;
top: 0; bottom: 0;
left: 0;
width: 36px;
z-index: 40;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 24px 0;
border-right: 1px solid var(--border);
background: transparent;
pointer-events: none;
}
.railv__tag {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--icx-ink-700);
white-space: nowrap;
}
.railv__mark {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--fg-subtle);
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.railv__dot {
width: 8px;
height: 8px;
background: var(--icx-red);
display: block;
}
body.rail-dark .railv {
border-right-color: rgba(255,255,255,0.12);
}
body.rail-dark .railv__tag,
body.rail-dark .railv__mark {
color: rgba(255,255,255,0.7);
}
/* Push everything 36px right so rail doesn't overlap content */
@media (min-width: 1024px) {
body { padding-left: 36px; }
.header { left: 36px; }
.cookie { left: 52px; }
}
@media (max-width: 1023px) {
.railv { display: none; }
}
/* ---- Hero load animation (signature sweep + stagger) -------- */
/* Animations defined per-pattern below — base element starts visible. */
.hero__body > * {
animation: hero-stagger 0.6s var(--ease-out) both;
}
.hero__body > *:nth-child(1) { animation-delay: 0.10s; }
.hero__body > *:nth-child(2) { animation-delay: 0.20s; }
.hero__body > *:nth-child(3) { animation-delay: 0.30s; }
.hero__body > *:nth-child(4) { animation-delay: 0.40s; }
.hero__body > *:nth-child(5) { animation-delay: 0.50s; }
@keyframes hero-stagger {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero__body > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* ---- Hero slogan — locked tagline, Kalexa display ---------- */
.hero__slogan {
display: flex;
align-items: center;
gap: 18px;
margin: clamp(14px, 2vh, 22px) 0 clamp(20px, 3vh, 32px);
}
.hero__slogan-rule {
width: clamp(40px, 5vw, 88px);
height: 2px;
background: #fff;
display: block;
flex-shrink: 0;
}
.hero__slogan-text {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(20px, 2.2vw, 32px);
letter-spacing: -0.005em;
text-transform: uppercase;
line-height: 1;
color: #fff;
}
.hero--split .hero__slogan-rule { background: var(--icx-red); }
.hero--split .hero__slogan-text { color: var(--icx-red); }
/* ---- Hero lockup, bottom-right (REMOVED — replaced by hero__slogan inline) */
.hero__lockup { display: none; }
/* Hero: line-system route as backdrop — VERTICAL routes, very subtle. */
.hero__grid {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.16;
pointer-events: none;
background-image: none;
}
.hero__grid svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* Hero status tape — running data above headline */
.hero__tape {
display: flex;
align-items: center;
gap: 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.78);
margin-bottom: clamp(16px, 3vh, 28px);
padding: 10px 0;
border-top: 1px solid rgba(255,255,255,0.22);
border-bottom: 1px solid rgba(255,255,255,0.22);
flex-wrap: wrap;
}
.hero__tape-cell {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.hero__tape-cell strong { color: #fff; font-weight: 600; }
.hero__tape-sep {
width: 1px;
height: 12px;
background: rgba(255,255,255,0.3);
}
.hero--ink .hero__tape, .hero--split .hero__tape { display: none; }
/* ---- Section brand watermark (replaces numbered stencil) ---- */
.section { position: relative; overflow: hidden; }
.section__brand-mark {
position: absolute;
width: clamp(280px, 36vw, 540px);
aspect-ratio: 1182 / 359;
pointer-events: none;
user-select: none;
z-index: 0;
opacity: 0.04;
background-image: url("assets/sym-black.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.section--ink .section__brand-mark {
background-image: url("assets/sym-white.png");
opacity: 0.06;
}
.section--tinted .section__brand-mark { opacity: 0.05; }
.section__brand-mark--br { bottom: -40px; right: -60px; }
.section__brand-mark--bl { bottom: -40px; left: -80px; }
.section__brand-mark--tr { top: 8%; right: -100px; transform: rotate(-90deg); transform-origin: top right; }
.section__brand-mark--cl { top: 50%; left: -60px; transform: translateY(-50%); }
.section .wrap { position: relative; z-index: 1; }
/* Hide the legacy giant numerals */
.section__bigidx { display: none; }
/* ---- Cert "seal" (replaces simple block) ------------------- */
.cert--seal {
border-top: 1px solid rgba(255,255,255,0.4);
padding-top: 32px;
padding-bottom: 8px;
display: grid;
grid-template-columns: 160px 1fr;
gap: 32px;
align-items: start;
}
.seal {
width: 160px;
height: 160px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 1px solid rgba(255,255,255,0.4);
background: rgba(255,255,255,0.03);
}
.seal__hex {
position: absolute;
inset: 10px;
border: 1px solid rgba(255,255,255,0.25);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.seal__body {
position: relative;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px;
}
.seal__brand {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.22em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
.seal__name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.005em;
color: #fff;
line-height: 1;
margin-top: 4px;
}
.seal__lvl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--icx-red);
text-transform: uppercase;
margin-top: 2px;
}
.seal__rule {
width: 24px;
height: 1px;
background: var(--icx-red);
margin-top: 6px;
}
.seal__ref {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.65);
margin-top: 6px;
}
@media (max-width: 760px) {
.cert--seal { grid-template-columns: 1fr; gap: 24px; }
}
/* ---- Full-bleed photo band -------------------------------- */
.photoband {
position: relative;
height: clamp(360px, 50vw, 560px);
overflow: hidden;
background: var(--icx-black);
}
.photoband img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.15) contrast(1.05);
}
.photoband::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(11,11,12,0.65) 0%, rgba(11,11,12,0.2) 50%, rgba(11,11,12,0.55) 100%);
pointer-events: none;
}
.photoband__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(24px, 4vw, 56px) var(--site-pad-x);
z-index: 2;
color: #fff;
}
.photoband__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.photoband__plate {
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(11,11,12,0.85);
border-left: 2px solid var(--icx-red);
padding: 10px 14px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.85);
}
.photoband__plate .k {
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.photoband__mark {
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 96px);
font-weight: 700;
letter-spacing: -0.015em;
text-transform: uppercase;
line-height: 0.95;
max-width: 16ch;
margin: 0;
}
.photoband__foot {
display: flex;
justify-content: space-between;
align-items: flex-end;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.7);
gap: 24px;
flex-wrap: wrap;
}
/* ---- Massive footer lockup -------------------------------- */
.footer__lockup-band {
border-top: 1px solid rgba(255,255,255,0.12);
padding: clamp(40px, 6vw, 80px) 0;
overflow: hidden;
}
.footer__lockup-wm {
width: 100%;
max-width: 100%;
height: auto;
display: block;
filter: brightness(1.05);
}
/* Header brand: bigger wordmark, no box, no constraints. */
.header__wm {
height: 40px;
width: auto;
flex-shrink: 0;
display: block;
border: 0;
outline: 0;
box-shadow: none;
background: transparent;
transition: height var(--d-base) var(--ease-out);
}
.header--scrolled .header__wm { height: 32px; }
/* Hero headline bottom rule — connects to lockup zone */
.hero__rule-cluster {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: clamp(16px, 3vh, 28px);
}
.hero__rule-cluster .rule {
background: rgba(255,255,255,0.85);
width: 40px;
}
.hero__rule-cluster .since {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.78);
}
/* Marquee — slightly more brand presence */
.marquee__dot {
background: var(--icx-red);
}
.marquee {
background: var(--icx-black);
}
.marquee.marquee--red {
background: var(--icx-red);
}
/* ============================================================
CERTS V2 — MONOCHROME (clean)
============================================================ */
.certs--v2 {
position: relative;
background: var(--icx-black);
color: #fff;
padding-top: clamp(80px, 10vw, 140px);
padding-bottom: clamp(80px, 10vw, 140px);
overflow: hidden;
}
.certs--v2 .wrap {
position: relative;
z-index: 1;
}
.certs--v2 .h2 {
color: #fff;
max-width: 22ch;
}
/* Grid of two slabs */
.certs2__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-top: clamp(48px, 6vw, 96px);
border-top: 1px solid rgba(255,255,255,0.18);
}
.certs2__grid .cert2 + .cert2 {
border-left: 1px solid rgba(255,255,255,0.18);
}
/* One slab */
.cert2 {
display: grid;
grid-template-rows: auto 1fr auto;
padding: clamp(36px, 4vw, 64px) clamp(28px, 3.5vw, 56px);
gap: clamp(28px, 3vw, 48px);
position: relative;
}
/* Mark block: glyph on left, wordmark on right */
.cert2__mark {
display: flex;
align-items: flex-end;
gap: clamp(20px, 2.5vw, 36px);
}
.cert2__glyph {
width: clamp(52px, 5.5vw, 84px);
height: auto;
flex-shrink: 0;
color: #fff;
}
.cert2__mark-wm {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(40px, 5vw, 72px);
letter-spacing: -0.02em;
line-height: 0.88;
color: #fff;
text-transform: none;
}
/* Body */
.cert2__body {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 44ch;
}
.cert2__lvl {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--icx-red);
}
.cert2__desc {
font-size: 15px;
line-height: 1.6;
color: rgba(255,255,255,0.78);
margin: 0;
}
/* Microficha tipográfica — placa */
.cert2__plate {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
padding: 14px 16px;
border: 1px solid rgba(255,255,255,0.32);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
.cert2__plate-mark {
color: var(--icx-red);
font-size: 14px;
line-height: 1;
}
.cert2__plate-status {
color: var(--icx-red);
font-weight: 700;
}
.cert2__plate-sep {
color: rgba(255,255,255,0.30);
font-weight: 400;
}
.cert2__plate-cell {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.cert2__plate-k {
color: rgba(255,255,255,0.50);
}
.cert2__plate-v {
color: #fff;
font-weight: 700;
letter-spacing: 0.10em;
}
/* Footer rule */
.certs2__foot {
margin-top: clamp(56px, 7vw, 96px);
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.18);
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.certs2__foot-rule {
flex-shrink: 0;
width: 64px;
height: 1px;
background: var(--icx-red);
}
.certs2__foot-text {
font-size: 14px;
color: rgba(255,255,255,0.65);
font-family: var(--font-sans);
letter-spacing: 0;
text-transform: none;
}
/* Responsive */
@media (max-width: 880px) {
.certs2__grid {
grid-template-columns: 1fr;
}
.certs2__grid .cert2 + .cert2 {
border-left: 0;
border-top: 1px solid rgba(255,255,255,0.18);
}
}
/* ============================================================
SERVICES V2 — numbered list + vertical route connector
============================================================ */
.services--v2 .svc-v2__h {
font-family: var(--font-sans); /* Eina, not Kalexa */
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
max-width: 22ch;
}
.svc-v2__layout {
display: grid;
grid-template-columns: 56px 1fr;
gap: clamp(20px, 2.6vw, 40px);
margin-top: clamp(48px, 5vw, 80px);
position: relative;
}
.svc-v2__route {
position: relative;
height: 100%;
--rider: 0;
}
/* The big stretched SVG is gone — neutralise any svg child rule.
Inner SVGs now live inside .svc-v2__cap / __node / __rider spans. */
.svc-v2__route > svg { display: none; }
.svc-v2__rail {
position: absolute;
top: 14px;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
width: 1.5px;
background: var(--icx-red);
z-index: 0;
}
.svc-v2__cap {
position: absolute;
left: 50%;
display: inline-flex;
z-index: 2;
line-height: 0;
}
.svc-v2__cap--top { top: 0; transform: translate(-50%, 0); }
.svc-v2__cap--bottom { bottom: 0; transform: translate(-50%, 0); }
.svc-v2__rider {
position: absolute;
left: 50%;
top: calc(var(--rider) * 100%);
transform: translate(-50%, -50%);
display: inline-flex;
z-index: 3;
line-height: 0;
filter: drop-shadow(0 1px 1.5px rgba(232,69,41,0.35));
transition: top 80ms linear;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.svc-v2__rider { display: none; }
}
.svc-v2__node {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
z-index: 1;
line-height: 0;
}
.svc-v2__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.svc-v2__item {
display: grid;
grid-template-columns: clamp(160px, 14vw, 220px) 1fr auto;
align-items: start;
gap: clamp(24px, 3vw, 48px);
padding: clamp(36px, 4vw, 56px) 0;
border-top: 1px solid var(--icx-ink-200);
}
.svc-v2__item:last-child {
border-bottom: 0;
}
.svc-v2__num {
font-family: var(--font-display); /* Kalexa OK on the numbers */
font-weight: 700;
font-size: clamp(96px, 11vw, 168px);
line-height: 0.82;
letter-spacing: -0.04em;
color: var(--icx-black);
}
.svc-v2__copy {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 60ch;
padding-top: clamp(12px, 1.6vw, 22px);
}
.svc-v2__tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--icx-red);
}
.svc-v2__title {
font-family: var(--font-sans); /* Eina, not Kalexa */
font-weight: 700;
font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: -0.015em;
line-height: 1.05;
margin: 4px 0 8px;
color: var(--icx-black);
}
.svc-v2__p {
font-size: 16px;
line-height: 1.55;
margin: 0 0 8px;
color: var(--icx-ink-700);
}
.svc-v2__bullets {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.svc-v2__bullets li {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--icx-ink-600);
padding: 5px 12px;
border: 1px solid var(--icx-ink-300);
border-radius: 999px;
white-space: nowrap;
}
.svc-v2__cta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--icx-red);
white-space: nowrap;
font-weight: 700;
padding-top: clamp(16px, 2vw, 28px);
}
.svc-v2__cta .arrow { font-size: 16px; line-height: 1; }
.svc-v2__foot {
margin-top: clamp(40px, 5vw, 64px);
padding-top: 20px;
border-top: 1px solid var(--icx-ink-200);
display: flex;
align-items: center;
gap: 14px;
}
.svc-v2__foot-text {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--icx-ink-600);
}
/* Responsive: collapse route + item layout on small screens */
@media (max-width: 880px) {
.svc-v2__layout { grid-template-columns: 32px 1fr; }
.svc-v2__item {
grid-template-columns: 1fr;
gap: 12px;
}
.svc-v2__cta { padding-top: 8px; }
.svc-v2__num { font-size: 84px; }
}
/* ============================================================
LINE BAND — full-bleed red separator with route system
============================================================ */
.line-band {
position: relative;
background: var(--icx-red);
color: #fff;
padding: clamp(72px, 9vw, 128px) 0;
overflow: hidden;
}
.line-band__route {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.line-band__route svg {
width: 100%;
height: 100%;
display: block;
opacity: 0.55;
}
.line-band__content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: clamp(36px, 5vw, 80px);
}
.line-band__left {
display: flex;
flex-direction: column;
gap: 18px;
}
.line-band__lk {
height: clamp(56px, 6.5vw, 92px);
width: auto;
display: block;
}
.line-band__right {
display: flex;
flex-direction: column;
gap: 16px;
}
.line-band__h {
font-family: var(--font-sans); /* Eina — not Kalexa */
font-weight: 700;
font-size: clamp(36px, 4.4vw, 64px);
letter-spacing: -0.02em;
line-height: 1.02;
margin: 0;
text-wrap: balance;
}
.line-band__meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
@media (max-width: 880px) {
.line-band__content { grid-template-columns: 1fr; align-items: start; }
}
/* ============================================================
ADD-ON CSS — CTA text link · LineBand v2 · Services align ·
Stats→Services transition · Footer wm · Lanes map polish
============================================================ */
/* ---------------------------------------------------------------
Text-link CTA (secondary action — no border, no box, just text+arrow)
--------------------------------------------------------------- */
.btn-text {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 4px;
border: 0;
background: transparent;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
position: relative;
transition: gap var(--d-base) var(--ease-out);
}
.btn-text::after {
content: "";
position: absolute;
left: 4px;
right: 28px;
bottom: 12px;
height: 1px;
background: currentColor;
opacity: 0.55;
transition: opacity var(--d-base) var(--ease-out);
}
.btn-text:hover { gap: 14px; }
.btn-text:hover::after { opacity: 1; }
.btn-text .arrow { font-size: 17px; line-height: 1; }
.btn-text--light { color: #fff; }
.btn-text--ink { color: var(--icx-black); }
/* ---------------------------------------------------------------
Hero CTA row — looser gap so the text-link breathes
--------------------------------------------------------------- */
.hero__cta-row {
gap: 24px !important;
align-items: center;
}
/* ---------------------------------------------------------------
Intermission — soft transition between Stats and Services
--------------------------------------------------------------- */
.intermission {
position: relative;
background: #fff;
padding: clamp(40px, 6vw, 80px) 0;
}
.intermission__svg {
display: block;
width: 100%;
height: clamp(40px, 7vw, 96px);
}
.intermission__svg path { stroke: var(--icx-ink-300); fill: none; }
.intermission__svg .accent { stroke: var(--icx-red); }
.intermission__svg polygon { fill: #fff; stroke: var(--icx-red); }
/* ---------------------------------------------------------------
Services V2 — fix number alignment
- Wider number column, tag floats above the number, baseline aligned with title
--------------------------------------------------------------- */
.svc-v2__layout {
grid-template-columns: 56px 1fr;
gap: clamp(28px, 3vw, 48px);
}
.svc-v2__item {
grid-template-columns: clamp(200px, 16vw, 280px) 1fr auto;
align-items: start;
gap: clamp(32px, 3.5vw, 56px);
}
.svc-v2__num {
font-size: clamp(88px, 9.5vw, 144px);
line-height: 0.85;
align-self: start;
margin-top: -6px;
}
.svc-v2__copy {
padding-top: clamp(8px, 1.2vw, 16px);
}
.svc-v2__tag {
display: inline-block;
margin-bottom: 8px;
}
.svc-v2__title {
font-size: clamp(28px, 3.0vw, 40px);
line-height: 1.05;
margin: 0 0 12px;
}
.svc-v2__cta {
align-self: start;
padding-top: clamp(20px, 2vw, 32px);
}
/* ---------------------------------------------------------------
LineBand V2 — convergence graphic + lanes meta row
--------------------------------------------------------------- */
.line-band {
padding: clamp(80px, 10vw, 140px) 0;
}
.line-band__route { display: none; } /* hide previous route */
.line-band__graphic {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.line-band__graphic svg {
width: 100%;
height: 100%;
display: block;
}
.line-band__content {
grid-template-columns: 1fr;
align-items: center;
gap: 32px;
max-width: 800px;
position: relative;
z-index: 1;
}
.line-band__left {
display: flex;
flex-direction: column;
gap: 32px;
}
.line-band__h {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(40px, 5vw, 72px);
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
color: #fff;
text-wrap: balance;
}
.line-band__h-em {
font-style: normal;
-webkit-text-stroke: 2px #fff;
color: transparent;
text-stroke: 2px #fff;
}
.line-band__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.35);
}
.line-band__meta-cell {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: var(--font-mono);
letter-spacing: 0.10em;
text-transform: uppercase;
}
.line-band__meta-code {
font-weight: 700;
font-size: 18px;
color: #fff;
letter-spacing: 0.04em;
}
.line-band__meta-h {
font-size: 12px;
color: rgba(255,255,255,0.75);
}
@media (max-width: 760px) {
.line-band__h { font-size: 36px; }
}
/* ---------------------------------------------------------------
Footer wordmark — bigger and clean
--------------------------------------------------------------- */
.footer__wm {
height: 56px;
width: auto;
flex-shrink: 0;
display: block;
border: 0;
background: transparent;
}
@media (max-width: 640px) {
.footer__wm { height: 44px; }
}
/* Intermission caption */
.intermission .wrap { display: flex; flex-direction: column; gap: 18px; }
.intermission__caption {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--icx-ink-600);
}
.intermission__text { color: var(--icx-ink-600); }
/* Lanes map redesign tokens */
.lanes__hex-node {
font-family: var(--font-mono);
font-size: 2.6px;
letter-spacing: 0.06em;
font-weight: 700;
fill: var(--icx-black);
}
.lanes__hex-cox {
font-family: var(--font-sans);
font-size: 3.2px;
font-weight: 700;
fill: #fff;
text-anchor: middle;
}
.lanes__map-foot {
display: flex;
justify-content: space-between;
padding: 14px 4px 0;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--icx-ink-600);
border-top: 1px solid var(--icx-ink-200);
margin-top: 16px;
}
/* Intermission → Section tightening */
.intermission + .section { padding-top: clamp(36px, 5vw, 72px) !important; }
.stats + .intermission { padding-top: clamp(20px, 3vw, 32px); }
/* LineBand v3 — graphic left, text right (clean) */
.line-band__content {
display: grid !important;
grid-template-columns: 55% 45% !important;
max-width: none !important;
gap: 0 !important;
align-items: center !important;
}
.line-band__left { /* empty spacer for graphic side */ min-height: 1px; }
.line-band__right {
display: flex;
flex-direction: column;
gap: 32px;
padding-left: clamp(24px, 3vw, 56px);
}
.line-band__right .line-band__h { color: #fff; }
@media (max-width: 880px) {
.line-band__content { grid-template-columns: 1fr !important; }
.line-band__right { padding-left: 0; }
}
/* Header CTA — clear hover state when over red/ink (ontop) */
.header--ontop .header__cta:hover {
background: var(--icx-red) !important;
color: #fff !important;
border-color: #fff !important;
}
/* When scrolled (light bg), hover stays dark→red — already defined; just be explicit */
.header--scrolled .header__cta:hover {
background: var(--icx-red);
color: #fff;
border-color: var(--icx-red);
}
/* LineBand text column shifted right for breathing room */
.line-band__right { padding-left: clamp(40px, 5vw, 80px) !important; }
/* ============================================================
Services V2 — tighter section + scroll reveal
============================================================ */
/* Tighten vertical padding ~25% */
.services--v2 {
padding-top: clamp(56px, 7vw, 96px);
padding-bottom: clamp(56px, 7vw, 96px);
}
.services--v2 .svc-v2__layout {
margin-top: clamp(32px, 4vw, 56px);
}
.services--v2 .svc-v2__item {
padding: clamp(28px, 3vw, 44px) 0;
}
.services--v2 .svc-v2__num {
font-size: clamp(72px, 8vw, 124px);
}
/* Scroll-reveal animation */
.svc-v2__item {
opacity: 0;
transform: translateY(28px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.svc-v2__item.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.svc-v2__item {
opacity: 1;
transform: none;
transition: none;
}
}
/* LineBand v5 — tighten gap between hex and text column */
.line-band__content {
grid-template-columns: 48% 52% !important;
}
.line-band__right {
padding-left: clamp(12px, 1.6vw, 28px) !important;
}
/* ============================================================
Footer brand — elegant inline lockup
============================================================ */
/* Override prior sizes — footer wm is now small and inline */
.footer__brand-stack {
gap: 22px !important;
}
.footer__brand-row {
display: inline-flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.footer__wm {
height: 28px !important;
width: auto !important;
display: block;
flex-shrink: 0;
background: transparent;
border: 0;
outline: 0;
max-width: none;
}
.footer__brand-divider {
width: 1px;
height: 20px;
background: rgba(255,255,255,0.28);
display: inline-block;
}
.footer__motto {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
white-space: nowrap;
}
.footer__brand-rule {
width: 40px !important;
height: 1px !important;
background: var(--icx-red);
display: block;
}
.footer__addr {
font-size: 13px;
line-height: 1.55;
color: rgba(255,255,255,0.7);
white-space: pre-line;
}
.footer__brand-meta {
margin-top: 2px;
gap: 4px;
}
@media (max-width: 640px) {
.footer__wm { height: 24px !important; }
.footer__motto { font-size: 10px; }
}
/* ============================================================
LineBand v6 — clean 2-column layout, graphic CONTAINED in its column
============================================================ */
/* Reset previous overrides */
.line-band__graphic {
position: relative !important;
inset: auto !important;
z-index: 0;
width: 100%;
aspect-ratio: 5 / 3;
pointer-events: none;
}
.line-band__graphic svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.line-band__content {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
align-items: center;
gap: clamp(32px, 4.5vw, 80px) !important;
max-width: 1200px !important;
margin: 0 auto;
}
.line-band__right {
display: flex;
flex-direction: column;
gap: 28px;
padding-left: 0 !important;
}
@media (max-width: 880px) {
.line-band__content {
grid-template-columns: 1fr !important;
}
.line-band__graphic { aspect-ratio: 5 / 2; max-width: 480px; }
}
/* ============================================================
Lanes map — scroll-driven marker animations
============================================================ */
/* Outer halo: gentle pulse */
.lanes__marker-halo {
transform-origin: center;
/* animation removed per feedback — bouncing was distracting */
animation: none;
}
@keyframes lanesMarkerHalo {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.45); }
}
/* Ring: expands outward */
.lanes__marker-ring {
transform-origin: center;
animation: none;
opacity: 0;
}
@keyframes lanesMarkerRing {
0% { opacity: 0.9; transform: scale(0.4); }
100% { opacity: 0; transform: scale(2.6); }
}
/* Inner dot: tiny vibrate */
.lanes__marker-dot {
transform-origin: center;
animation: none;
}
@keyframes lanesMarkerDot {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.lanes__marker-halo,
.lanes__marker-ring,
.lanes__marker-dot { animation: none; }
}
/* ============================================================
LineBand v7 — graphic bleeds off the left, text on the right
============================================================ */
.line-band {
position: relative;
overflow: hidden;
background: var(--icx-red);
color: #fff;
padding: clamp(80px, 11vw, 160px) 0 !important;
}
/* Reset any earlier overrides for the content grid */
.line-band__bleed {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 38% !important;
z-index: 0;
pointer-events: none;
}
.line-band__bleed svg {
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.line-band .wrap.line-band__content {
position: relative;
z-index: 1;
display: flex !important;
justify-content: flex-end !important;
margin: 0 auto;
max-width: var(--wrap-max, 1280px);
}
.line-band__copy {
width: min(48%, 520px);
display: flex;
flex-direction: column;
gap: 28px;
}
.line-band__h {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(40px, 5.6vw, 88px) !important;
letter-spacing: -0.025em;
line-height: 0.98;
margin: 0;
color: #fff;
text-wrap: balance;
}
.line-band__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.4);
}
@media (max-width: 960px) {
.line-band__copy { width: 60% !important; }
.line-band__h { font-size: clamp(34px, 7vw, 56px) !important; }
}
@media (max-width: 720px) {
.line-band__copy { width: 100% !important; }
.line-band .wrap.line-band__content { justify-content: flex-start !important; }
}
/* Lanes map — hub + dest arrival rings */
.lanes__hub-ring {
transform-origin: center;
animation: lanesHubRing 1.6s ease-out infinite;
opacity: 0;
}
@keyframes lanesHubRing {
0% { opacity: 0.7; transform: scale(0.5); }
100% { opacity: 0; transform: scale(2.4); }
}
.lanes__dest-ring {
transform-origin: center;
animation: lanesDestRing 1.8s ease-out infinite;
}
@keyframes lanesDestRing {
0% { opacity: 0.7; transform: scale(0.6); }
100% { opacity: 0; transform: scale(1.6); }
}
.lanes__minidot {
transform-box: fill-box;
transform-origin: center;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.lanes__hub-ring, .lanes__dest-ring { animation: none; }
}
/* ============================================================
LineBand v10 — pure 2-column grid, no overlap possible
============================================================ */
.line-band {
position: relative;
background: var(--icx-red);
color: #fff;
overflow: hidden;
padding: clamp(80px, 11vw, 160px) 0 !important;
display: grid !important;
grid-template-columns: 1fr minmax(320px, 460px) clamp(24px, 4vw, 64px) !important;
/* 1fr = graphic column, 460px = text, ~3rd column = right gutter */
align-items: center !important;
column-gap: clamp(20px, 3vw, 48px) !important;
}
/* Wipe any previous .wrap-based layout */
.line-band .wrap.line-band__content { display: contents !important; }
.line-band__content { display: contents !important; }
.line-band__left, .line-band__right { display: none !important; }
.line-band__bleed {
position: relative !important;
inset: auto !important;
width: 100%;
align-self: stretch;
min-height: clamp(280px, 32vw, 460px);
overflow: visible;
}
.line-band__bleed svg {
position: absolute !important;
inset: 0;
width: 100%;
height: 100%;
display: block;
/* Allow content to render beyond left edge (SVG itself crops, but visually overflows when container does too) */
}
.line-band__copy {
display: flex !important;
flex-direction: column;
gap: 28px;
padding-left: 0 !important;
width: auto !important;
}
.line-band__h {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(36px, 4.4vw, 64px) !important;
letter-spacing: -0.025em;
line-height: 1;
margin: 0;
color: #fff;
text-wrap: balance;
}
@media (max-width: 760px) {
.line-band {
grid-template-columns: 1fr !important;
padding: clamp(56px, 10vw, 100px) var(--site-pad-x) !important;
row-gap: 28px;
}
.line-band__bleed { min-height: 220px; }
.line-band__h { font-size: clamp(32px, 7vw, 52px) !important; }
}
/* ============================================================
CONTACT V2 — editorial head + promise badge + hex accent
============================================================ */
.contact--v2 {
position: relative;
background: var(--icx-ink-50);
padding: clamp(72px, 9vw, 120px) 0 clamp(72px, 9vw, 120px);
overflow: hidden;
}
/* Decorative hex+route accent in the top-right corner */
.contact__accent {
position: absolute;
top: 0;
right: 0;
width: clamp(260px, 32vw, 460px);
height: auto;
pointer-events: none;
z-index: 0;
}
.contact__accent svg {
width: 100%;
height: auto;
display: block;
}
.contact--v2 .wrap {
position: relative;
z-index: 1;
}
/* Editorial head: title + sub on the left, promise on the right */
.contact__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: clamp(24px, 4vw, 56px);
padding-bottom: clamp(32px, 4vw, 56px);
border-bottom: 1px solid var(--border);
margin-bottom: clamp(36px, 4vw, 64px);
}
.contact__head-main {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 60ch;
}
.contact__h {
margin: 4px 0 0;
max-width: 22ch;
text-wrap: balance;
}
.contact__lead {
font-size: 17px;
line-height: 1.5;
color: var(--fg-muted);
margin: 0;
max-width: 56ch;
}
/* Promise badge */
.contact__promise {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--border);
border-radius: 4px;
position: relative;
flex-shrink: 0;
}
.contact__promise::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--icx-red);
}
.contact__promise-hex {
width: 34px;
height: 34px;
flex-shrink: 0;
}
.contact__promise-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.contact__promise-k {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.contact__promise-v {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--icx-black);
}
/* Grid: details left, form right — give details more presence */
.contact--v2 .contact__grid {
grid-template-columns: minmax(220px, 1fr) 1.8fr;
gap: clamp(36px, 4.5vw, 72px);
align-items: start;
}
.contact--v2 .contact__details {
display: flex;
flex-direction: column;
gap: 22px;
}
.contact--v2 .contact__detail {
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.contact--v2 .contact__detail:last-child {
border-bottom: 0;
}
.contact--v2 .contact__detail-k {
font-size: 10px;
letter-spacing: 0.22em;
margin-bottom: 8px;
color: var(--icx-red);
}
.contact--v2 .contact__detail-v {
font-size: 15px;
line-height: 1.5;
font-weight: 500;
}
/* Form polish — accent stripe on top, more breathing room */
.contact--v2 .form {
position: relative;
background: #fff;
border: 1px solid var(--border);
border-radius: 4px;
padding: clamp(28px, 3.5vw, 48px);
gap: 22px;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.contact--v2 .form::before {
content: "";
position: absolute;
top: -1px; left: -1px; right: -1px;
height: 3px;
background: var(--icx-red);
border-radius: 4px 4px 0 0;
}
@media (max-width: 860px) {
.contact--v2 .contact__grid {
grid-template-columns: 1fr;
}
.contact__head {
grid-template-columns: 1fr;
align-items: start;
}
.contact__accent {
width: 220px;
opacity: 0.6;
}
}
/* Footer signature: subtle hex chamfer strip at the bottom */
.footer__signature {
margin-top: 0;
padding: 0;
color: rgba(255,255,255,0.18);
height: 40px;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__signature svg {
width: 100%;
height: 60px;
display: block;
opacity: 0.7;
}
/* ============================================================
SECTION HEAD (unified) — replaces .shead pattern across the site
============================================================ */
.section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: clamp(24px, 4vw, 56px);
padding-bottom: clamp(28px, 4vw, 48px);
margin-bottom: clamp(36px, 4vw, 56px);
border-bottom: 1px solid var(--border);
}
.section-head__main {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 60ch;
}
.section-head__eyebrow {
display: inline-block;
}
.section-head__h {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(32px, 4vw, 56px);
line-height: var(--lh-tight, 1.05);
letter-spacing: -0.02em;
margin: 4px 0 0;
max-width: 22ch;
text-wrap: balance;
color: var(--fg);
}
.section-head__sub {
font-size: 17px;
line-height: var(--lh-normal, 1.45);
color: var(--fg-muted);
margin: 0;
max-width: 56ch;
}
.section-head__aside {
flex-shrink: 0;
}
/* Dark variant — flips text + rule colors for sections on ink/red backgrounds */
.section-head--ink {
border-bottom-color: rgba(255,255,255,0.18);
}
.section-head--ink .section-head__h { color: #fff; }
.section-head--ink .section-head__sub { color: rgba(255,255,255,0.78); }
.section-head--ink .eyebrow { color: var(--icx-red); }
@media (max-width: 760px) {
.section-head {
grid-template-columns: 1fr;
align-items: start;
}
}
/* Deprecate the old .shead (kept as fallback only) */
.shead { /* still works in old layouts that haven't migrated */ }
/* ============================================================
Form — post-submit transition
============================================================ */
.form--sent {
animation: formSentIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes formSentIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form--sent .form__sent-mark {
animation: sentMarkIn 600ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sentMarkIn {
from { opacity: 0; transform: scale(0.6); }
to { opacity: 1; transform: scale(1); }
}
.form--sent .form__sent-h,
.form--sent .form__sent-p {
animation: sentTextIn 500ms 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.form--sent .form__sent-p { animation-delay: 320ms; }
@keyframes sentTextIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.form--sent,
.form--sent .form__sent-mark,
.form--sent .form__sent-h,
.form--sent .form__sent-p {
animation: none;
}
}
/* ============================================================
Lanes — city filter chip + clickable hex hover
============================================================ */
.lanes__city-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px 7px 10px;
background: var(--icx-red-tint-08, #FDE9E4);
color: var(--icx-red);
border: 1px solid var(--icx-red);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--d-base) var(--ease-out);
margin-left: 8px;
}
.lanes__city-chip:hover {
background: var(--icx-red);
color: #fff;
}
.lanes__city-chip-dot {
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
display: inline-block;
}
.lanes__city-chip-x {
font-size: 16px;
line-height: 0.8;
margin-left: 2px;
opacity: 0.85;
}
.lanes__map svg [role="button"]:hover path:nth-of-type(1) {
filter: drop-shadow(0 0 1.5px var(--icx-red));
}
/* ============================================================
FOCUS RINGS — accessible, per DS spec (2px red, 2px offset)
Uses :focus-visible so the ring only shows on keyboard, not mouse.
============================================================ */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--icx-red);
outline-offset: 2px;
border-radius: 2px;
}
/* Inputs: outline appears around the field box */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
outline: 2px solid var(--icx-red);
outline-offset: 4px;
border-bottom-color: var(--icx-red);
}
/* Buttons, links, pills, filter chips: red ring */
button:focus-visible,
a:focus-visible,
.cargo-pill:focus-visible,
.lanes__filter:focus-visible,
.lanes__city-chip:focus-visible,
.header__cta:focus-visible {
outline: 2px solid var(--icx-red);
outline-offset: 2px;
}
/* Buttons that already sit on red surface — invert the ring */
.line-band button:focus-visible,
.line-band a:focus-visible,
.hero--red button:focus-visible,
.hero--red a:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* SVG clickable groups (lanes hex destinations) */
g[role="button"]:focus-visible {
outline: 2px solid var(--icx-red);
outline-offset: 2px;
}
/* ============================================================
DS token alignment — light pass (B5)
============================================================ */
/* SectionHead: align to --s-*/--fs-* tokens */
.section-head {
padding-bottom: var(--s-7); /* 48px */
margin-bottom: var(--s-8); /* 64px */
gap: var(--s-7); /* 48px */
}
.section-head__main {
gap: var(--s-3); /* 12px */
}
.section-head__h {
font-size: clamp(var(--fs-32), 4vw, var(--fs-44)); /* 32 → 44 */
letter-spacing: var(--tracking-tight);
}
.section-head__sub {
font-size: var(--fs-18); /* 18 */
line-height: var(--lh-normal);
margin-top: var(--s-1);
}
/* Section default spacing — DS says --s-9 (96px) between sections in desktop */
.section {
padding-top: clamp(var(--s-7), 7vw, var(--s-9));
padding-bottom: clamp(var(--s-7), 7vw, var(--s-9));
}
/* Eyebrow tokens */
.eyebrow {
font-size: var(--fs-12);
letter-spacing: var(--tracking-extreme);
}
/* Unify breakpoints to 760 + 960 */
@media (max-width: 760px) {
.section-head { padding-bottom: var(--s-6); margin-bottom: var(--s-7); }
}
/* ============================================================
FOOTER — symbol strip closer (replaces hex chamfer signature)
============================================================ */
/* Hide old signature if it ever renders */
.footer__signature { display: none !important; }
/* Tira de símbolos INTERCOX como cierre de página.
Uses sym-white.png as a repeating background; tiled horizontally. */
.footer__symbol-strip {
margin-top: 0;
width: 100%;
height: 80px;
background-color: transparent;
background-image: url("assets/sym-white.png");
background-repeat: repeat-x;
background-position: center;
background-size: auto 60px;
opacity: 0.10;
border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 760px) {
.footer__symbol-strip {
height: 60px;
background-size: auto 44px;
}
}
/* ============================================================
SCROLL ANIMATIONS — Phase 1
S1 magnetic typography · S2 counters · S3 eyebrow rule · S6 LineBand
Drives all states via [data-reveal] attribute + .is-revealed class.
============================================================ */
/* Base: any data-reveal target is hidden by default */
[data-reveal] {
--d: 700ms;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* S1 · Magnetic typography — slide up + fade in */
[data-reveal="fade-up"] {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--d) var(--ease),
transform var(--d) var(--ease);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade-up"].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* S1 · Magnetic typography — clip reveal (more dramatic on huge headlines).
NOTE: clip-path: inset(0 0 100% 0) creates a 0-area visible region which makes
IntersectionObserver skip the element on many engines. We use overflow + nested
transform instead, which keeps the bounding rect intersectable. */
[data-reveal="clip-up"] {
opacity: 0;
transform: translateY(40px);
transition:
opacity 900ms var(--ease),
transform 900ms var(--ease);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="clip-up"].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* S3 · Eyebrow rule draws horizontally */
.eyebrow[data-reveal="rule-draw"]::before {
content: "";
display: inline-block;
width: 0;
height: 1px;
background: currentColor;
vertical-align: middle;
margin-right: 12px;
transition: width 600ms var(--ease);
transition-delay: 80ms;
}
.eyebrow[data-reveal="rule-draw"].is-revealed::before {
width: 28px;
}
/* S6 · LineBand convergence draw — only animate SOLID paths (not .lb-dashed). */
.line-band__bleed[data-reveal] svg path:not(.lb-dashed) {
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset 1100ms var(--ease);
}
.line-band__bleed[data-reveal] svg path:nth-of-type(1) { transition-delay: 150ms; }
.line-band__bleed[data-reveal] svg path:nth-of-type(5) { transition-delay: 250ms; }
.line-band__bleed[data-reveal] svg path:nth-of-type(3) { transition-delay: 450ms; transition-duration: 1300ms; }
.line-band__bleed[data-reveal].is-revealed svg path:not(.lb-dashed) {
stroke-dashoffset: 0;
}
/* Dashed paths fade in */
.line-band__bleed[data-reveal] svg path.lb-dashed {
opacity: 0;
transition: opacity 700ms var(--ease);
}
.line-band__bleed[data-reveal] svg path.lb-dashed:nth-of-type(2) { transition-delay: 800ms; }
.line-band__bleed[data-reveal] svg path.lb-dashed:nth-of-type(4) { transition-delay: 900ms; }
.line-band__bleed[data-reveal].is-revealed svg path.lb-dashed {
opacity: 0.7;
}
/* Mid-route hex waypoints and the big destination hex — OPACITY ONLY
(avoid transform: scale because it would override the SVG translate). */
.line-band__bleed[data-reveal] svg > g:not(:first-of-type) {
opacity: 0;
transition: opacity 600ms var(--ease);
transition-delay: 1100ms;
}
.line-band__bleed[data-reveal].is-revealed svg > g:not(:first-of-type) {
opacity: 1;
}
/* The big destination hex (last ) appears last with its own punch via stroke-width pulse. */
.line-band__bleed[data-reveal] svg > g:last-of-type {
transition-delay: 1500ms;
transition-duration: 700ms;
}
.line-band__bleed[data-reveal].is-revealed svg > g:last-of-type polygon:nth-of-type(3) {
animation: lineBandHexPulse 700ms 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lineBandHexPulse {
0% { stroke-width: 0; opacity: 0; }
60% { stroke-width: 6; opacity: 1; }
100% { stroke-width: 2.6; opacity: 1; }
}
/* Mid-route hex waypoints and the big destination hex fade in too */
.line-band__bleed[data-reveal] svg g.lb-not-touched {
/* No-op — dummy class to avoid stale rules */
}
/* S2 · Counter values — appear via fade-up before counting starts.
Numbers are rendered with [data-countup] which sets text to 0 then animates. */
.stats__v[data-countup] {
font-variant-numeric: tabular-nums;
}
/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
.line-band__bleed[data-reveal] svg path {
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
}
.line-band__bleed[data-reveal] svg g {
opacity: 1 !important;
transform: none !important;
}
}
/* ============================================================
S8 · OPS DISPATCH panel — scroll-driven, lives inside the map
============================================================ */
.lanes__map {
position: relative;
}
.lanes__dispatch {
position: absolute;
top: clamp(12px, 1.6vw, 24px);
right: clamp(12px, 1.6vw, 24px);
width: clamp(220px, 22vw, 280px);
background: #fff;
border: 1px solid var(--icx-ink-300);
border-left: 3px solid var(--icx-red);
padding: 14px 16px 12px;
box-shadow: 0 2px 14px rgba(0,0,0,0.04);
font-family: var(--font-sans);
font-size: 12px;
color: var(--icx-black);
z-index: 2;
pointer-events: none; /* don't interfere with hex clicks */
border-radius: 2px;
}
.lanes__dispatch-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid var(--icx-ink-200);
margin-bottom: 12px;
}
.lanes__dispatch-dot {
width: 8px;
height: 8px;
background: var(--icx-red);
border-radius: 50%;
display: inline-block;
animation: dispatchPulse 1.4s ease-in-out infinite;
}
@keyframes dispatchPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.7; }
}
.lanes__dispatch-status {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--icx-red);
font-weight: 700;
}
.lanes__dispatch-ref {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--fg-subtle);
}
.lanes__dispatch-flow {
font-size: 9.5px !important;
letter-spacing: 0.22em !important;
color: var(--fg-subtle);
margin-bottom: 8px;
text-transform: uppercase !important;
}
.lanes__dispatch-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 14px;
margin: 0 0 14px;
}
.lanes__dispatch-grid > div { margin: 0; }
.lanes__dispatch-grid dt {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-subtle);
margin: 0 0 3px;
}
.lanes__dispatch-grid dd {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--icx-black);
font-variant-numeric: tabular-nums;
}
.lanes__dispatch-dest {
font-family: var(--font-sans);
font-weight: 700;
font-size: 15px !important;
letter-spacing: -0.005em;
}
.lanes__dispatch-code {
display: inline-block;
margin-left: 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.10em;
padding: 1px 5px;
background: var(--icx-black);
color: #fff;
vertical-align: middle;
border-radius: 1px;
}
.lanes__dispatch-bar {
width: 100%;
height: 2px;
background: var(--icx-ink-200);
position: relative;
overflow: hidden;
border-radius: 1px;
}
.lanes__dispatch-bar span {
position: absolute;
inset: 0 auto 0 0;
background: var(--icx-red);
transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lanes__dispatch-foot {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 10px;
letter-spacing: 0.10em;
color: var(--fg-subtle);
font-variant-numeric: tabular-nums;
}
/* Subtle stage transition flash on the head when stage changes */
.lanes__dispatch-head { transition: border-color 300ms; }
@media (max-width: 760px) {
.lanes__dispatch {
position: relative;
top: auto;
right: auto;
width: 100%;
margin-top: 16px;
}
}
/* ============================================================
S7 · PINNED HERO HANDOFF — disabled (under repair)
============================================================ */
.hero-pin { position: static; height: auto; }
.hero-pin__sticky { position: static; height: auto; }
.hero__handoff-hex, .hero__handoff-slogan { display: none !important; }
/* ============================================================
S5 · Drifting brand symbols (background watermark, off-hero)
============================================================ */
.brand-rain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
opacity: 0;
transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-rain.is-active { opacity: 1; }
.brand-rain__sym {
position: absolute;
display: block;
opacity: 0.035;
will-change: transform;
transition: transform 220ms linear;
}
/* The script sets --drift on .brand-rain. Symbols drift slightly horizontally
based on scroll progress, ~5px per 1000px (very subtle). */
.brand-rain__sym {
transform: translate3d(var(--drift, 0px), 0, 0);
}
/* Hide brand rain entirely inside the hero zone */
.hero-pin ~ .brand-rain,
.hero ~ .brand-rain { /* no-op fallback */ }
@media (prefers-reduced-motion: reduce) {
.brand-rain__sym { transition: none; }
}
/* ============================================================
S4 · Hero parallax stratificado (drives off --p, set by the Header scroll listener)
Layers translate at different rates as user scrolls through the hero.
============================================================ */
/* Lines/route system — line stays put, only the traveling hexes move */
.hero { --p: 0; }
.hero .hero__grid {
/* Previously translated up; now stays fixed so lines remain as a "road" */
transform: none;
transition: none;
}
/* Cities ticker — medium drift */
.hero .hero__cities {
transform: translateY(calc(var(--p, 0) * -180px));
transition: none;
}
/* Headline holds (anchor for the eye), sub fades subtly on exit */
.hero .hero__body {
transform: translateY(calc(var(--p, 0) * -60px));
transition: none;
}
/* Footer tape drifts up too */
.hero .hero__tape,
.hero .hero__foot {
transform: translateY(calc(var(--p, 0) * -120px));
transition: none;
}
/* Brand wordmark / status fade subtly as we leave */
.hero[style*="--p"] .hero__rule-cluster,
.hero[style*="--p"] .hero__slogan {
opacity: calc(1 - max(0, (var(--p, 0) - 0.45) / 0.4));
}
@media (prefers-reduced-motion: reduce) {
.hero .hero__grid,
.hero .hero__cities,
.hero .hero__body,
.hero .hero__tape,
.hero .hero__foot { transform: none !important; }
}
/* ============================================================
S6 · LineBand small pin — scroll pauses while lines draw, then continues
============================================================ */
.line-band-pin {
position: relative;
/* extra scroll on top of the section's natural height gives the pin its duration */
}
.line-band-pin > .line-band {
position: sticky;
top: 0;
}
@media (min-width: 760px) {
.line-band-pin {
/* Total = section height + 80vh of pin */
/* The section itself has its natural padded height; we add a 80vh "tail" via padding-bottom */
padding-bottom: 80vh;
}
}
@media (prefers-reduced-motion: reduce) {
.line-band-pin { padding-bottom: 0 !important; }
.line-band-pin > .line-band { position: relative; }
}
/* ============================================================
S8 · Lanes map small pin — map sticks while user scrolls the table.
The scroll-driven trunk marker and dispatch panel update through stages
while the map remains in view.
============================================================ */
@media (min-width: 880px) {
.lanes__layout {
align-items: start;
}
.lanes__map {
position: sticky;
top: 88px; /* below the fixed header */
align-self: start;
}
}
@media (prefers-reduced-motion: reduce) {
.lanes__map { position: relative !important; }
}
/* S6 refinement — fill viewport during pin so there's no white gap below */
@media (min-width: 760px) {
.line-band-pin > .line-band {
min-height: 100vh;
display: grid !important;
align-content: center;
}
.line-band-pin {
/* The 100vh sticky child + 60vh of pin = 160vh parent */
padding-bottom: 60vh;
}
}
/* S6 pin disabled (dead-space issue). Animations remain via scroll-reveal. */
.line-band-pin { padding-bottom: 0 !important; }
.line-band-pin > .line-band { position: relative; min-height: 0 !important; display: grid !important; align-content: stretch; }
/* Slow down the line-draw animation so user has more time to appreciate it */
.line-band__bleed[data-reveal] svg path:not(.lb-dashed) {
transition-duration: 1600ms !important;
}
.line-band__bleed[data-reveal] svg path:nth-of-type(3) {
transition-duration: 1800ms !important;
transition-delay: 800ms !important;
}
.line-band__bleed[data-reveal] svg path.lb-dashed {
transition-duration: 1000ms !important;
}
/* ============================================================
S6 v2 · LineBand scroll-driven line draw — disabled.
Restore the original scroll-reveal trigger.
============================================================ */
.line-band { --draw: 1; } /* allow CSS calc-based fallbacks */
/* ============================================================
Contact section — increase legibility (per user feedback)
============================================================ */
.contact--v2 .contact__detail-k {
font-size: 11.5px !important;
}
.contact--v2 .contact__detail-v {
font-size: 17px !important;
line-height: 1.5;
}
.contact--v2 .form .field label {
font-size: 11.5px;
letter-spacing: 0.18em;
}
.contact--v2 .form .field input,
.contact--v2 .form .field select,
.contact--v2 .form .field textarea {
font-size: 16.5px;
padding: 12px 0;
}
.contact--v2 .cargo-pill {
font-size: 12.5px;
padding: 8px 14px;
}
.contact--v2 .form__consent {
font-size: 12px;
line-height: 1.5;
}
/* S8 fix — sticky requires non-clipping ancestors */
.lanes.section { overflow: visible !important; }
.lanes__layout { overflow: visible !important; }
/* ============================================================
S6 v3 · LineBand scroll-driven via --draw using DOM-attached stroke values.
Replace stroke-dashoffset (which has unit ambiguity) with opacity-based reveal.
============================================================ */
.line-band__bleed[data-reveal] svg path:not(.lb-dashed) {
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
/* Each path's reveal is gated by --draw via opacity */
opacity: 0;
transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.line-band__bleed[data-reveal] svg path.lb-dashed {
opacity: 0;
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.line-band__bleed[data-reveal] svg > g:not(:first-of-type) {
opacity: 0;
transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Scroll-driven gating via --draw thresholds */
.line-band[style*="--draw"] .line-band__bleed[data-reveal] svg path:nth-of-type(1),
.line-band[style*="--draw"] .line-band__bleed[data-reveal] svg path:nth-of-type(5) {
opacity: calc(min(1, var(--draw, 0) * 3));
}
.line-band[style*="--draw"] .line-band__bleed[data-reveal] svg path:nth-of-type(3) {
opacity: calc(min(1, max(0, var(--draw, 0) - 0.2) * 3));
}
.line-band[style*="--draw"] .line-band__bleed[data-reveal] svg path.lb-dashed {
opacity: calc(min(0.7, max(0, var(--draw, 0) - 0.35) * 2));
}
.line-band[style*="--draw"] .line-band__bleed[data-reveal] svg > g:not(:first-of-type) {
opacity: calc(min(1, max(0, var(--draw, 0) - 0.55) * 2.5));
}
/* S6 final — restore one-shot reveal, slow transitions for visibility */
.line-band__bleed[data-reveal] svg path:not(.lb-dashed) {
stroke-dasharray: 1 !important;
stroke-dashoffset: 1 !important;
opacity: 1 !important;
transition: stroke-dashoffset 1600ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.line-band__bleed[data-reveal] svg path:nth-of-type(1) { transition-delay: 150ms !important; }
.line-band__bleed[data-reveal] svg path:nth-of-type(5) { transition-delay: 250ms !important; }
.line-band__bleed[data-reveal] svg path:nth-of-type(3) {
transition-delay: 450ms !important;
transition-duration: 1800ms !important;
}
.line-band__bleed[data-reveal].is-revealed svg path:not(.lb-dashed) {
stroke-dashoffset: 0 !important;
}
.line-band__bleed[data-reveal] svg path.lb-dashed {
opacity: 0 !important;
transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.line-band__bleed[data-reveal] svg path.lb-dashed:nth-of-type(2) { transition-delay: 800ms !important; }
.line-band__bleed[data-reveal] svg path.lb-dashed:nth-of-type(4) { transition-delay: 900ms !important; }
.line-band__bleed[data-reveal].is-revealed svg path.lb-dashed {
opacity: 0.7 !important;
}
.line-band__bleed[data-reveal] svg > g:not(:first-of-type) {
opacity: 0 !important;
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) !important;
transition-delay: 1100ms !important;
}
.line-band__bleed[data-reveal].is-revealed svg > g:not(:first-of-type) {
opacity: 1 !important;
}
/* ============================================================
Hex "knockout" — line-crossing hexes hide the line passing through them.
Each section gives its background color to the hex polygon fill.
============================================================ */
/* Default: hex outlines on dark sections (hero, line-band) — fill is the section bg */
.hero .hero__grid svg polygon { fill: var(--icx-black) !important; }
.line-band__bleed svg polygon { fill: var(--icx-red) !important; }
/* Last in line-band is the destination hex stack — keep its INNER red polygon */
.line-band__bleed svg > g:last-of-type polygon:nth-of-type(3) { fill: #E84529 !important; }
.line-band__bleed svg > g:last-of-type circle { fill: #fff !important; }
/* Intermission (white) */
.intermission__svg polygon { fill: #fff !important; }
/* Lanes map — hex backdrop is white-ish bg */
.lanes__map svg polygon { /* leave default; map polygons already have explicit fills */ }
/* ============================================================
Lanes map v3 — bigger, no frame, dispatch panel adjusted
============================================================ */
.lanes__layout {
grid-template-columns: 0.85fr 1.15fr !important;
gap: clamp(28px, 4vw, 64px) !important;
}
.lanes__map {
aspect-ratio: 4/5 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.lanes__map svg { overflow: visible !important; }
/* Dispatch panel: detach from frame corner; sit cleanly */
.lanes__dispatch {
top: 0 !important;
right: 0 !important;
box-shadow: 0 1px 0 var(--border), 0 8px 22px rgba(0,0,0,0.04);
}
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 3/4 !important; }
}
/* Lanes hex text labels: keep readable even when group is rotated */
.lanes__hex-node {
font-size: 3.2px !important; /* a hair bigger to compensate optically */
}
.lanes__hex-cox {
font-size: 4.4px !important;
}
/* Force all polygons in LineBand to be solid red (no see-through) */
.line-band__bleed svg polygon { fill: #E84529 !important; opacity: 1 !important; }
/* Outer halo rings still need transparency to look like halos */
.line-band__bleed svg > g:last-of-type polygon:nth-of-type(1) { fill: #E84529 !important; stroke-opacity: 0.32 !important; }
.line-band__bleed svg > g:last-of-type polygon:nth-of-type(2) { fill: #E84529 !important; stroke-opacity: 0.55 !important; }
/* ============================================================
Intermission v2 — split graphic so the hex stays in proportion
============================================================ */
.intermission__graphic {
position: relative;
width: 100%;
height: clamp(60px, 7vw, 96px);
}
.intermission__line {
width: 100%;
height: 100%;
display: block;
stroke: var(--icx-ink-300);
fill: none;
}
.intermission__line path { stroke: var(--icx-ink-300); fill: none; }
.intermission__hex {
position: absolute;
/* Center horizontally over the hex waypoint in the line (which is at x=620/1200 = 51.7%) */
left: 51.66%;
/* Vertically aligned with the line's hex apex (at y=22/80 = 27.5%) */
top: 27.5%;
transform: translate(-50%, -50%);
width: clamp(22px, 2.4vw, 32px);
height: clamp(22px, 2.4vw, 32px);
display: block;
}
.intermission__hex polygon {
fill: var(--icx-red) !important;
stroke: var(--icx-red);
}
/* ============================================================
Contact accent — bigger, more legible top-right decoration
============================================================ */
.contact__accent {
width: clamp(340px, 42vw, 620px) !important;
}
.contact__accent svg path { stroke-width: 1.6 !important; }
@media (max-width: 860px) {
.contact__accent { width: 280px !important; }
}
/* ============================================================
Nav — cursor-tracking hex indicator
Replaces the per-link hex+rule hover with one smooth highlight
that slides between links as the cursor moves.
============================================================ */
.nav {
position: relative;
}
/* Disable the previous per-link hex/rule hover styles */
.nav__link::before,
.nav__link::after { display: none !important; }
.nav__link {
position: relative;
z-index: 1;
padding: 8px 14px;
letter-spacing: 0.01em;
transition: color var(--d-base) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible {
color: var(--icx-red);
opacity: 1;
outline: none;
}
/* Over dark backgrounds, hover keeps white but indicator does the work */
.header--ontop .nav__link:hover {
color: #fff;
}
/* The hex indicator */
.nav__indicator {
position: absolute;
left: 0;
top: 0;
width: var(--w, 80px);
height: var(--h, 36px);
transform: translate(calc(var(--x, 0px) - var(--w, 80px) / 2),
calc(var(--y, 0px) - var(--h, 36px) / 2));
color: var(--icx-red);
opacity: 0;
pointer-events: none;
z-index: 0;
transition:
transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
width 360ms cubic-bezier(0.22, 1, 0.36, 1),
height 360ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 220ms ease-out;
}
.nav__indicator.is-visible { opacity: 0.18; }
.nav__indicator svg {
width: 100%;
height: 100%;
display: block;
}
/* On scrolled/light header, indicator is solid red w/ low opacity → reads pink-ish */
.header--scrolled .nav__indicator.is-visible { opacity: 0.14; }
/* On dark hero, push it brighter */
.header--ontop .nav__indicator.is-visible { opacity: 0.32; }
@media (prefers-reduced-motion: reduce) {
.nav__indicator { transition: opacity 120ms linear; }
}
/* ============================================================
Contact — bigger, more legible form (per feedback)
============================================================ */
.contact--v2 .contact__h {
font-size: clamp(36px, 4.4vw, 60px);
}
.contact--v2 .contact__lead {
font-size: 19px;
line-height: 1.5;
}
.contact--v2 .form {
padding: clamp(36px, 4vw, 56px);
gap: 26px;
}
.contact--v2 .form__row { gap: 24px 28px; }
.contact--v2 .form .field { gap: 8px; }
.contact--v2 .form .field label {
font-size: 13px !important;
letter-spacing: 0.16em;
font-weight: 600;
}
.contact--v2 .form .field input,
.contact--v2 .form .field select,
.contact--v2 .form .field textarea {
font-size: 18px !important;
padding: 14px 0 !important;
font-weight: 500;
}
.contact--v2 .form .field textarea {
min-height: 130px;
}
.contact--v2 .cargo-pill {
font-size: 13.5px !important;
padding: 10px 18px !important;
letter-spacing: 0.05em;
}
.contact--v2 .form__consent {
font-size: 13px !important;
line-height: 1.55;
}
.contact--v2 .form .btn,
.contact--v2 .form button[type="submit"] {
font-size: 15px;
padding: 16px 26px;
}
/* Detail column too */
.contact--v2 .contact__detail-k {
font-size: 12px !important;
letter-spacing: 0.22em;
}
.contact--v2 .contact__detail-v {
font-size: 18px !important;
line-height: 1.5;
}
/* ============================================================
Hero grid — hex knockout (full coverage, no line behind hexes)
We move opacity from the wrapper onto the LINES only, so the hex
polygons can render fully opaque and hide the line passing under them.
============================================================ */
.hero__grid { opacity: 1 !important; }
.hero__grid svg path { opacity: var(--line-op, 0.16); }
.hero__grid svg polygon {
opacity: 1 !important;
fill: var(--icx-black) !important;
stroke: rgba(255,255,255,0.30) !important;
}
.hero[data-bg="red"] .hero__grid svg polygon {
fill: var(--icx-red) !important;
stroke: rgba(255,255,255,0.40) !important;
}
.hero[data-bg="ink"] .hero__grid svg polygon {
fill: var(--icx-black) !important;
stroke: rgba(255,255,255,0.30) !important;
}
/* Lanes map — bigger column + taller aspect (per feedback) */
.lanes__layout {
grid-template-columns: 1.15fr 0.85fr !important;
gap: clamp(24px, 3.2vw, 48px) !important;
}
.lanes__map {
aspect-ratio: 5/6 !important;
}
.lanes__hex-node {
font-size: 3.6px !important;
}
.lanes__hex-cox {
font-size: 5.2px !important;
}
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 3/4 !important; }
}
/* ============================================================
Lanes — map bigger / table smaller, dispatch panel bottom-right
============================================================ */
.lanes__layout {
grid-template-columns: 1.6fr 1fr !important;
gap: clamp(20px, 2.8vw, 40px) !important;
}
.lanes__map {
aspect-ratio: 1/1 !important;
}
/* Dispatch panel — move from top-right to bottom-right, smaller */
.lanes__dispatch {
top: auto !important;
bottom: 4px !important;
right: 4px !important;
width: clamp(180px, 18vw, 220px) !important;
padding: 11px 13px 9px !important;
font-size: 11px !important;
box-shadow: 0 1px 0 var(--border), 0 8px 22px rgba(0,0,0,0.06);
}
.lanes__dispatch-head {
padding-bottom: 8px;
margin-bottom: 10px;
gap: 6px;
}
.lanes__dispatch-status { font-size: 9px !important; letter-spacing: 0.16em !important; }
.lanes__dispatch-ref { font-size: 9px !important; }
.lanes__dispatch-flow { font-size: 8.5px !important; margin-bottom: 6px; }
.lanes__dispatch-grid {
gap: 8px 10px !important;
margin: 0 0 10px !important;
}
.lanes__dispatch-grid dt { font-size: 8px !important; margin-bottom: 2px; }
.lanes__dispatch-grid dd { font-size: 11.5px !important; }
.lanes__dispatch-dest { font-size: 13px !important; }
.lanes__dispatch-code { font-size: 9px !important; padding: 1px 4px; }
.lanes__dispatch-foot { font-size: 9px !important; }
.lanes__dispatch-dot { width: 6px; height: 6px; }
/* Lanes table — slightly more compact since column is narrower */
.lanes__table {
font-size: 13px;
}
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 4/3 !important; }
.lanes__dispatch {
position: relative !important;
bottom: auto !important;
right: auto !important;
width: 100% !important;
margin-top: 12px;
}
}
/* ============================================================
Lanes — map bigger again, dispatch panel further smaller + nudged
============================================================ */
.lanes__layout {
grid-template-columns: 2fr 1fr !important;
gap: clamp(20px, 2.8vw, 36px) !important;
}
.lanes__map {
aspect-ratio: 6/5 !important;
}
/* Dispatch panel: smaller, sits outside the SVG bbox a bit */
.lanes__dispatch {
bottom: -8px !important;
right: -12px !important;
width: clamp(160px, 15vw, 190px) !important;
padding: 9px 11px 8px !important;
font-size: 10px !important;
background: #fff;
}
.lanes__dispatch-head { padding-bottom: 6px; margin-bottom: 8px; gap: 5px; }
.lanes__dispatch-status { font-size: 8.5px !important; letter-spacing: 0.14em !important; }
.lanes__dispatch-ref { font-size: 8.5px !important; }
.lanes__dispatch-flow { font-size: 8px !important; margin-bottom: 5px; }
.lanes__dispatch-grid { gap: 6px 9px !important; margin: 0 0 8px !important; }
.lanes__dispatch-grid dt { font-size: 7.5px !important; }
.lanes__dispatch-grid dd { font-size: 10.5px !important; }
.lanes__dispatch-dest { font-size: 12px !important; }
.lanes__dispatch-code { font-size: 8.5px !important; padding: 1px 4px; margin-left: 4px; }
.lanes__dispatch-foot { font-size: 8.5px !important; }
.lanes__dispatch-dot { width: 5px; height: 5px; }
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 4/3 !important; }
}
/* ============================================================
Lanes — map even bigger, dispatch panel pushed further outside
============================================================ */
.lanes__layout {
grid-template-columns: 2.4fr 1fr !important;
gap: clamp(16px, 2.4vw, 32px) !important;
}
.lanes__map {
aspect-ratio: 7/6 !important;
margin-right: -8px; /* lean a touch off the right gutter */
}
/* Dispatch panel: smaller still and nudged outside the map bounding box */
.lanes__dispatch {
bottom: -28px !important;
right: -36px !important;
width: clamp(150px, 13.5vw, 180px) !important;
padding: 8px 10px 7px !important;
font-size: 9.5px !important;
}
.lanes__dispatch-head { padding-bottom: 5px; margin-bottom: 7px; gap: 5px; }
.lanes__dispatch-status { font-size: 8px !important; }
.lanes__dispatch-ref { font-size: 8px !important; }
.lanes__dispatch-flow { font-size: 7.5px !important; margin-bottom: 4px; }
.lanes__dispatch-grid { gap: 5px 8px !important; margin: 0 0 7px !important; }
.lanes__dispatch-grid dt { font-size: 7px !important; }
.lanes__dispatch-grid dd { font-size: 10px !important; }
.lanes__dispatch-dest { font-size: 11.5px !important; }
.lanes__dispatch-code { font-size: 8px !important; padding: 1px 3px; margin-left: 3px; }
.lanes__dispatch-foot { font-size: 8px !important; }
/* Table — tighter so it fits the narrower column */
.lanes__table {
font-size: 12.5px !important;
}
.lanes__table td, .lanes__table th {
padding-left: 6px !important;
padding-right: 6px !important;
}
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 4/3 !important; margin-right: 0; }
.lanes__dispatch {
position: relative !important;
bottom: auto !important;
right: auto !important;
width: 100% !important;
margin-top: 12px;
}
}
/* ============================================================
Lanes — make the map clearly larger
============================================================ */
.lanes__layout {
grid-template-columns: 3fr 1fr !important;
gap: clamp(20px, 2.6vw, 36px) !important;
}
.lanes__map {
aspect-ratio: 4/3 !important;
margin-right: 0;
}
/* SVG inside should be 100% (it is by default, but be defensive) */
.lanes__map svg {
width: 100% !important;
height: 100% !important;
}
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 4/3 !important; }
}
/* ============================================================
Lanes — bigger viewBox crop = bigger lines visually
============================================================ */
.lanes__map {
aspect-ratio: 4/5 !important;
}
/* Certs: remove redundant horizontal rule (section-head border collides with grid top border) */
.certs--v2 .section-head { border-bottom: 0 !important; padding-bottom: clamp(8px, 1vw, 16px) !important; }
.certs--v2 .certs2__grid { margin-top: clamp(36px, 4vw, 64px) !important; }
/* ============================================================
Lanes — map bigger again, table tighter, panel further off
============================================================ */
.lanes__layout {
grid-template-columns: 0.85fr 2.6fr !important;
gap: clamp(20px, 2.6vw, 36px) !important;
}
/* Map: wider + slightly taller via aspect, with overflow so panel can sit outside */
.lanes__map {
aspect-ratio: 5/4 !important;
overflow: visible !important;
position: relative;
}
/* Push the dispatch panel well below the map's bottom edge so it never overlaps routes */
.lanes__dispatch {
bottom: -56px !important;
right: 8px !important;
width: clamp(160px, 14vw, 200px) !important;
padding: 9px 11px 8px !important;
font-size: 10px !important;
}
/* Make the table denser to compensate for narrower column */
.lanes__table {
font-size: 12px !important;
}
.lanes__table th,
.lanes__table td {
padding: 10px 6px !important;
}
.lanes__filters { gap: 6px !important; flex-wrap: wrap; }
.lanes__filter { padding: 6px 10px !important; font-size: 11.5px !important; }
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 4/3 !important; }
.lanes__dispatch {
position: relative !important;
bottom: auto !important;
right: auto !important;
width: 100% !important;
margin-top: 12px;
}
}
/* ============================================================
Lanes — constrain to section, ~20% smaller, no overflow
============================================================ */
/* Constrain the section so nothing bleeds into the next */
.lanes.section { overflow: hidden !important; }
.lanes__layout {
grid-template-columns: 1fr 2.2fr !important;
gap: clamp(20px, 2.6vw, 36px) !important;
align-items: start !important;
}
/* Map: ~20% smaller via aspect closer to square; clip overflowing SVG */
.lanes__map {
aspect-ratio: 5/4 !important;
overflow: hidden !important;
position: relative;
max-height: 70vh;
}
/* Dispatch panel inside the map, anchored bottom-right with a comfortable inset */
.lanes__dispatch {
bottom: 8px !important;
right: 8px !important;
width: clamp(140px, 12vw, 170px) !important;
padding: 8px 10px 7px !important;
font-size: 9.5px !important;
}
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 4/3 !important; max-height: none; }
.lanes__dispatch {
position: relative !important;
bottom: auto !important;
right: auto !important;
width: 100% !important;
margin-top: 12px;
}
}
/* Lanes map — aspect now matches the viewBox (80:100 = 4:5) for clean fit */
.lanes__map {
aspect-ratio: 4/5 !important;
overflow: hidden !important;
max-height: 70vh;
}
/* Lanes map — aspect now matches viewBox 70:100 = 7/10 */
.lanes__map {
aspect-ratio: 7/10 !important;
overflow: hidden !important;
max-height: 70vh;
}
/* ============================================================
Lanes — fix sizing & placement (final)
- Map fills its column (no max-height constraint)
- aspect-ratio exactly matches viewBox 70/100
- Grid: 1fr / 1.5fr (table ~40%, map ~60%)
- Panel anchored bottom-right INSIDE the map, with safe inset
============================================================ */
.lanes.section { overflow: hidden !important; }
.lanes__layout {
display: grid !important;
grid-template-columns: 1fr 1.5fr !important;
gap: clamp(20px, 2.6vw, 36px) !important;
align-items: start !important;
}
.lanes__map {
position: relative !important;
width: 100% !important;
aspect-ratio: 7 / 10 !important;
max-height: none !important;
overflow: hidden !important;
background: transparent;
}
.lanes__map svg {
width: 100% !important;
height: 100% !important;
display: block;
}
/* Dispatch panel — bottom-right, safely inside the map */
.lanes__dispatch {
top: auto !important;
bottom: 12px !important;
right: 12px !important;
width: clamp(150px, 13vw, 180px) !important;
padding: 9px 11px 8px !important;
font-size: 10px !important;
}
/* Table */
.lanes__filters { gap: 6px !important; flex-wrap: wrap; }
.lanes__filter { padding: 6px 10px !important; font-size: 11.5px !important; }
.lanes__table { font-size: 12.5px !important; }
.lanes__table th, .lanes__table td { padding: 10px 6px !important; }
@media (max-width: 1024px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 4/3 !important; }
.lanes__dispatch {
position: relative !important;
bottom: auto !important;
right: auto !important;
width: 100% !important;
margin-top: 12px;
}
}
/* Lanes map — horizontal layout (12/7 ratio matches viewBox) */
.lanes__map {
aspect-ratio: 12/7 !important;
width: 100% !important;
max-height: 70vh !important;
overflow: hidden !important;
}
.lanes__layout {
grid-template-columns: 0.85fr 1.15fr !important;
align-items: start !important;
}
/* Lanes — map +10%, no container clipping (COX glow flows freely) */
.lanes__layout {
grid-template-columns: 0.7fr 1.3fr !important;
}
.lanes__map {
overflow: visible !important;
max-height: none !important;
}
.lanes__map svg {
overflow: visible !important;
}
/* Keep the section as the clip boundary so nothing bleeds into adjacent sections */
.lanes.section { overflow: hidden !important; }
/* Lanes — remove the divider line between section head and content, tighten spacing */
.lanes .section-head {
border-bottom: 0 !important;
padding-bottom: clamp(4px, 0.6vw, 12px) !important;
margin-bottom: clamp(20px, 2.4vw, 36px) !important;
}
/* ============================================================
Lanes — final layout pass (tight, low whitespace).
- Section head sits inside the left column above filters+table
- Map uses its native 12:7 viewBox aspect (no awkward letterboxing)
- Map is sticky so it follows scroll while the table reads
- align-items: start on the grid so the right column isn't forced
to match the left's height (kills the trailing whitespace below
the SVG that arose from height: 100% on a wide-format SVG).
============================================================ */
.lanes__layout {
align-items: start !important;
gap: clamp(36px, 4.4vw, 72px) !important;
grid-template-columns: 1fr 1fr !important;
}
.lanes__col-left {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 32px);
min-width: 0;
}
.lanes__col-bottom {
display: flex;
flex-direction: column;
gap: clamp(12px, 1.4vw, 18px);
min-width: 0;
}
.lanes__col-left > .section-head { margin-bottom: 0 !important; }
.lanes .section-head { margin-bottom: 0 !important; }
.lanes__map {
aspect-ratio: 12 / 7 !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100vh - 140px) !important;
width: 100% !important;
overflow: visible !important;
align-self: start !important;
}
.lanes__map svg {
width: 100% !important;
height: 100% !important;
display: block;
overflow: visible !important;
}
@media (min-width: 880px) {
.lanes__map {
position: sticky;
top: 96px;
}
}
@media (max-width: 880px) {
.lanes__layout { grid-template-columns: 1fr !important; }
.lanes__map { aspect-ratio: 4/3 !important; }
}
/* Tighten filters + table chrome */
.lanes__filters { margin-bottom: 0 !important; gap: 8px !important; }
.lanes__filter { padding: 6px 12px !important; font-size: 12px !important; }
.lanes__table th { padding-top: 8px !important; padding-bottom: 12px !important; }
.lanes__table td { padding-top: 12px !important; padding-bottom: 12px !important; }
/* ============================================================
Lanes — equalize column heights (final iteration)
- Left col: head + filters + table (compact rows)
- Right col: map fills full grid row via stretch + height 100%
- SVG viewBox updated to 124x96 in JSX so it sits taller
- Dispatch panel anchored bottom-right inside the (now taller) map
============================================================ */
@media (min-width: 880px) {
.lanes__layout {
align-items: stretch !important;
grid-template-columns: 0.95fr 1.05fr !important;
gap: clamp(28px, 3.4vw, 56px) !important;
}
.lanes__col-left {
height: 100%;
display: flex;
flex-direction: column;
}
.lanes__col-left > .lanes__col-bottom {
flex: 1 1 auto;
min-height: 0;
}
/* Map stretches to match the left column exactly */
.lanes__map {
position: relative !important;
aspect-ratio: auto !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
width: 100% !important;
align-self: stretch !important;
overflow: visible !important;
}
.lanes__map svg {
width: 100% !important;
height: 100% !important;
display: block;
overflow: visible !important;
}
}
/* Compact the table so left column doesn't sprawl */
.lanes__table { font-size: 13px !important; }
.lanes__table th {
padding: 6px 10px 10px 0 !important;
font-size: 10.5px !important;
}
.lanes__table td {
padding: 11px 10px 11px 0 !important;
}
.lanes__table td:last-child,
.lanes__table th:last-child { padding-right: 0 !important; }
.lane__from-to { gap: 6px; }
/* Dispatch panel — anchored bottom-right inside the tall map */
@media (min-width: 880px) {
.lanes__dispatch {
top: auto !important;
bottom: 8px !important;
right: 8px !important;
width: clamp(170px, 14vw, 200px) !important;
}
}
/* ============================================================
Lanes map — NEW animation pass: autonomous European Network Pulse
- Sonar rings expand from COX continuously
- Arrival ping ring at each destination, synced to route duration
- COX outer hex breathes
- Dispatch panel + map-foot HIDDEN (removed per feedback)
============================================================ */
.lanes__svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Hide the old legend/foot completely */
.lanes__dispatch,
.lanes__map-foot { display: none !important; }
/* Sonar — concentric rings that expand from COX continuously */
.lanes__sonar {
transform-origin: center;
transform-box: fill-box;
animation: lanes-sonar 4.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
opacity: 0;
}
@keyframes lanes-sonar {
0% { transform: scale(0.18); opacity: 0; stroke-width: 0.55; }
8% { opacity: 0.7; }
100% { transform: scale(5.2); opacity: 0; stroke-width: 0.18; }
}
/* Arrival ping at each destination — synced per-route via inline duration */
.lanes__arrival {
transform-origin: center;
transform-box: fill-box;
animation-name: lanes-arrival;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0;
}
@keyframes lanes-arrival {
0% { transform: scale(0.55); opacity: 0; stroke-width: 0.7; }
/* Particle reaches dest near the end of its motion cycle */
82% { transform: scale(0.55); opacity: 0; stroke-width: 0.7; }
88% { opacity: 0.95; }
100% { transform: scale(2.6); opacity: 0; stroke-width: 0.18; }
}
/* COX outer hex — gentle breathing */
.lanes__cox-outer {
transform-origin: center;
transform-box: fill-box;
animation: lanes-cox-breath 3.4s ease-in-out infinite;
}
@keyframes lanes-cox-breath {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.06); opacity: 0.85; }
}
/* Dest selection ring (legacy class, kept) */
.lanes__dest-ring {
transform-origin: center;
transform-box: fill-box;
animation: lanes-dest-pulse 2.2s ease-out infinite;
}
@keyframes lanes-dest-pulse {
0% { opacity: 0.85; transform: scale(0.85); }
100% { opacity: 0; transform: scale(1.55); }
}
@media (prefers-reduced-motion: reduce) {
.lanes__sonar,
.lanes__arrival,
.lanes__cox-outer,
.lanes__dest-ring { animation: none !important; }
}