/*
* PURPOSE: Every style rule for modulusbiotech.ai — brand tokens, layout,
* components, and the press release page.
* EXPORTS: (none — a stylesheet)
* PATTERNS: Custom properties are declared once on :root and referenced
* everywhere; the cursor fallback and keyboard-focus blocks must
* stay last, since they win on source order.
* CLAUDE NOTES: This was inline in index.html until a second page needed the
* same tokens. It lives in a file so index.html and the press
* release cannot drift apart. Linked by both.
*/
:root {
--bg: #020814;
--grid-line: rgba(92, 184, 255, 0.07);
--line: rgba(255, 255, 255, 0.08);
--line-blue: rgba(92, 184, 255, 0.22);
--text: #f5f9ff;
--text-dim: rgba(245, 249, 255, 0.62);
--text-faint: rgba(245, 249, 255, 0.38);
--blue: #5cb8ff;
--orange: #ff8a3c;
--orange-bright: #FFB463;
--font: 'Inter', system-ui, -apple-system, sans-serif;
/* The page has two measures and no others. --measure-grid is the structural
width every section block spans, from the nav bar's contents to the
footer's, so card and section edges form one straight line down the page.
--measure-prose is the reading column, set to about 100 characters at
the body size. It is much narrower than the grid on purpose: a card's border
belongs on the page's edge, its text does not, and prose set to the grid
ran to 119 characters a line.
Anything that needs a width uses one of these two; adding a third value
is what produced the twelve ad hoc widths this replaced. */
--measure-grid: 880px;
--measure-prose: 740px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
line-height: 1.5;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
-webkit-text-size-adjust: 100%;
cursor: none;
}
/* Crisp SVG edges across the whole site */
svg { shape-rendering: geometricPrecision; }
/* Sharper image rendering */
img { image-rendering: -webkit-optimize-contrast; }
::selection { background: var(--orange); color: var(--bg); }
a, button, [data-cursor] { cursor: none; }
section[id], div[id] { scroll-margin-top: 100px; }
/* CUSTOM CURSOR */
.cursor-dot, .cursor-ring {
position: fixed; top: 0; left: 0;
pointer-events: none; z-index: 9999;
transform: translate(-50%, -50%);
will-change: transform;
transition: opacity 0.2s ease;
}
/* Hide cursor visuals until JS sets position (prevents flash at top-left) */
body:not(.cursor-active) .cursor-dot,
body:not(.cursor-active) .cursor-ring {
opacity: 0;
}
.cursor-dot {
width: 9px; height: 9px;
background: #FF8A3C;
border-radius: 50%;
box-shadow:
0 0 6px #FFD194,
0 0 14px #FFB463,
0 0 28px rgba(255, 138, 60, 0.95),
0 0 48px rgba(255, 138, 60, 0.7),
0 0 80px rgba(255, 138, 60, 0.5),
0 0 120px rgba(255, 138, 60, 0.3);
}
.cursor-ring {
width: 36px; height: 36px;
border: 1px solid rgba(255, 180, 99, 0.85);
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 138, 60, 0.14) 0%,
rgba(255, 138, 60, 0.06) 50%,
transparent 100%);
box-shadow:
0 0 22px rgba(255, 138, 60, 0.55),
0 0 44px rgba(255, 138, 60, 0.32),
0 0 72px rgba(255, 138, 60, 0.18),
inset 0 0 12px rgba(255, 138, 60, 0.25);
transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.2s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
body.cursor-hover .cursor-ring {
width: 64px; height: 64px;
border-color: var(--orange-bright);
box-shadow:
0 0 32px rgba(255, 138, 60, 0.75),
0 0 64px rgba(255, 138, 60, 0.45),
0 0 100px rgba(255, 138, 60, 0.3),
inset 0 0 22px rgba(255, 138, 60, 0.32);
}
body.cursor-hover .cursor-dot {
opacity: 0;
transition: opacity 0.2s ease;
}
body.cursor-hide .cursor-dot,
body.cursor-hide .cursor-ring { opacity: 0; }
/* SCROLL PROGRESS */
.scroll-progress {
position: fixed; top: 0; left: 0;
height: 3px; width: 0%;
background: linear-gradient(90deg,
#7DD3FF 0%,
#5CB8FF 25%,
#FFB463 60%,
#FF8A3C 90%,
#FFD194 100%);
background-size: 100% 100%;
z-index: 200;
box-shadow:
0 0 8px rgba(255, 138, 60, 0.55),
0 0 18px rgba(255, 138, 60, 0.35),
0 0 32px rgba(125, 211, 255, 0.25),
0 1px 4px rgba(255, 138, 60, 0.4);
transition: width 0.15s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease;
border-radius: 0 2px 2px 0;
}
/* Glowing leading edge - brighter tip at the right side of the bar */
.scroll-progress::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 12px; height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 209, 148, 0.9) 50%,
#FFFFFF 100%);
box-shadow:
0 0 8px #FFB463,
0 0 16px rgba(255, 138, 60, 0.7),
0 0 28px rgba(255, 138, 60, 0.4);
border-radius: 50%;
filter: blur(0.5px);
}
/* Subtle pulse when far down the page (over ~70%) */
.scroll-progress.deep {
box-shadow:
0 0 12px rgba(255, 138, 60, 0.75),
0 0 26px rgba(255, 138, 60, 0.5),
0 0 48px rgba(255, 138, 60, 0.3),
0 0 70px rgba(125, 211, 255, 0.2),
0 1px 4px rgba(255, 138, 60, 0.5);
}
/* BACKGROUND */
.bg-grid {
position: fixed; inset: 0; z-index: -3;
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, black 30%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, black 30%, transparent 95%);
}
.bg-spotlight {
position: fixed; inset: 0; z-index: -2; pointer-events: none;
display: none;
}
.bg-ambient {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(circle at 15% 5%, rgba(30, 136, 229, 0.18), transparent 45%),
radial-gradient(circle at 85% 90%, rgba(255, 107, 26, 0.26), transparent 50%),
radial-gradient(circle at 5% 65%, rgba(255, 138, 60, 0.16), transparent 45%),
radial-gradient(circle at 92% 35%, rgba(255, 138, 60, 0.18), transparent 45%),
radial-gradient(circle at 50% 100%, rgba(255, 138, 60, 0.14), transparent 50%),
radial-gradient(circle at 25% 95%, rgba(255, 138, 60, 0.12), transparent 40%),
radial-gradient(circle at 75% 12%, rgba(255, 138, 60, 0.12), transparent 40%);
}
/* Soft orange perimeter glow that breathes — wraps the whole site */
.bg-glow-ring {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(ellipse 110% 80% at 50% 50%, transparent 50%, rgba(255, 138, 60, 0.13) 78%, rgba(255, 138, 60, 0.22) 100%);
animation: ringBreathe 11s ease-in-out infinite;
}
@keyframes ringBreathe {
0%, 100% { opacity: 0.9; }
50% { opacity: 1.0; }
}
/* ORANGE GLOWING DOTS — floating background particles */
.bg-dots {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.bg-dots .dot {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255, 180, 99, 0.95) 0%,
rgba(255, 138, 60, 0.6) 35%,
rgba(255, 138, 60, 0.2) 65%,
transparent 100%);
box-shadow:
0 0 12px rgba(255, 138, 60, 0.55),
0 0 28px rgba(255, 138, 60, 0.25);
will-change: transform, opacity;
opacity: 0;
}
/* 14 dots, varied sizes (3–10px), varied starting positions,
each with its own drift path, duration, and delay */
.bg-dots .dot:nth-child(1) { width: 6px; height: 6px; left: 8%; top: 15%; animation: drift1 28s ease-in-out infinite, twinkle 5.5s ease-in-out infinite; }
.bg-dots .dot:nth-child(2) { width: 4px; height: 4px; left: 22%; top: 78%; animation: drift2 34s ease-in-out infinite -3s, twinkle 7s ease-in-out infinite -1s; }
.bg-dots .dot:nth-child(3) { width: 8px; height: 8px; left: 88%; top: 22%; animation: drift3 40s ease-in-out infinite -8s, twinkle 6.2s ease-in-out infinite -2s; }
.bg-dots .dot:nth-child(4) { width: 3px; height: 3px; left: 65%; top: 88%; animation: drift4 26s ease-in-out infinite -12s, twinkle 4.8s ease-in-out infinite -3s; }
.bg-dots .dot:nth-child(5) { width: 7px; height: 7px; left: 45%; top: 35%; animation: drift5 36s ease-in-out infinite -5s, twinkle 8s ease-in-out infinite -4s; }
.bg-dots .dot:nth-child(6) { width: 5px; height: 5px; left: 12%; top: 55%; animation: drift6 30s ease-in-out infinite -15s, twinkle 5.3s ease-in-out infinite -2.5s; }
.bg-dots .dot:nth-child(7) { width: 4px; height: 4px; left: 78%; top: 62%; animation: drift7 32s ease-in-out infinite -7s, twinkle 6.7s ease-in-out infinite -1.5s; }
.bg-dots .dot:nth-child(8) { width: 10px; height: 10px; left: 38%; top: 8%; animation: drift8 44s ease-in-out infinite -18s, twinkle 9s ease-in-out infinite -5s; }
.bg-dots .dot:nth-child(9) { width: 3px; height: 3px; left: 92%; top: 48%; animation: drift9 27s ease-in-out infinite -2s, twinkle 5.7s ease-in-out infinite -3.5s; }
.bg-dots .dot:nth-child(10) { width: 6px; height: 6px; left: 55%; top: 72%; animation: drift10 38s ease-in-out infinite -10s, twinkle 7.4s ease-in-out infinite -2s; }
.bg-dots .dot:nth-child(11) { width: 4px; height: 4px; left: 28%; top: 28%; animation: drift11 31s ease-in-out infinite -6s, twinkle 6s ease-in-out infinite -4s; }
.bg-dots .dot:nth-child(12) { width: 5px; height: 5px; left: 72%; top: 42%; animation: drift12 35s ease-in-out infinite -14s, twinkle 5.9s ease-in-out infinite -0.5s; }
.bg-dots .dot:nth-child(13) { width: 7px; height: 7px; left: 18%; top: 92%; animation: drift13 42s ease-in-out infinite -9s, twinkle 8.5s ease-in-out infinite -3s; }
.bg-dots .dot:nth-child(14) { width: 3px; height: 3px; left: 60%; top: 18%; animation: drift14 29s ease-in-out infinite -11s, twinkle 5.1s ease-in-out infinite -1s; }
@keyframes drift1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate( 60px, -40px); } }
@keyframes drift2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-50px, 30px); } }
@keyframes drift3 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-70px, -20px); } }
@keyframes drift4 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate( 30px, 50px); } }
@keyframes drift5 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate( 80px, 60px); } }
@keyframes drift6 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate( 45px, -55px); } }
@keyframes drift7 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-40px, 40px); } }
@keyframes drift8 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-90px, 70px); } }
@keyframes drift9 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-35px, -45px); } }
@keyframes drift10 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate( 55px, -50px); } }
@keyframes drift11 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate( 70px, 35px); } }
@keyframes drift12 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-60px, 45px); } }
@keyframes drift13 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate( 40px, -65px); } }
@keyframes drift14 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-55px, 50px); } }
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
/* NAV */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 20px 0;
background: #020814;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border-bottom: 1px solid transparent;
transition: border-color 0.4s ease, padding 0.3s ease;
}
nav.scrolled {
border-bottom-color: var(--line);
padding: 14px 0;
background: rgba(2, 8, 20, 0.92);
}
/* The bar itself is full-bleed; its contents sit on the grid, so the brand
mark starts on the same line every section below it holds. */
.nav-inner {
display: flex; align-items: center;
justify-content: space-between; gap: 24px;
max-width: var(--measure-grid);
margin: 0 auto;
}
.brand {
display: flex; align-items: center; gap: 12px;
text-decoration: none; color: var(--text);
}
.brand svg {
width: 32px; height: 32px;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
filter: drop-shadow(0 0 8px rgba(255, 138, 60, 0.35));
}
.brand:hover svg { transform: rotate(-8deg); }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name .main {
font-size: 16px; font-weight: 600;
letter-spacing: 0.14em;
color: #7DD3FF;
}
.brand-name .sub {
font-size: 9px; font-weight: 500;
letter-spacing: 0.32em;
color: #95D2EE;
margin-top: 4px;
}
/* ============================================ */
/* NAVIGATION TICKER */
/* ============================================ */
.nav-ticker {
flex: 1;
margin: 0 24px;
overflow: hidden;
position: relative;
/* Soft fade at edges to suggest motion */
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
min-width: 0;
height: 28px;
display: flex;
align-items: center;
}
.ticker-track {
display: inline-flex;
align-items: center;
gap: 28px;
white-space: nowrap;
animation: tickerScroll 26s linear infinite;
will-change: transform;
}
.nav-ticker:hover .ticker-track,
.nav-ticker:focus-within .ticker-track {
animation-play-state: paused;
}
@keyframes tickerScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.ticker-item {
position: relative;
font-size: 13.5px;
font-weight: 500;
color: var(--text-dim);
text-decoration: none;
letter-spacing: 0.02em;
padding: 4px 2px;
transition: color 0.25s ease, text-shadow 0.25s ease;
flex-shrink: 0;
}
.ticker-item::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
width: 0; height: 1px;
background: var(--orange);
box-shadow: 0 0 6px rgba(255, 138, 60, 0.6);
transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ticker-item:hover {
color: var(--orange-bright);
text-shadow: 0 0 12px rgba(255, 138, 60, 0.4);
}
.ticker-item:hover::after {
width: 100%; left: 0;
}
.ticker-sep {
color: rgba(255, 138, 60, 0.45);
font-size: 16px;
line-height: 1;
user-select: none;
text-shadow: 0 0 8px rgba(255, 138, 60, 0.5);
flex-shrink: 0;
}
@media (max-width: 700px) {
.nav-ticker { margin: 0 10px; height: 24px; }
.ticker-track { gap: 20px; }
.ticker-item { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.ticker-track { animation: none; }
}
.nav-cta {
padding: 10px 22px;
background: var(--text); color: var(--bg);
text-decoration: none;
font-size: 14px; font-weight: 600;
border-radius: 100px;
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
will-change: transform;
}
.nav-cta::after {
content: '';
position: absolute;
top: 0; left: -120%;
width: 90%; height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 255, 255, 0.10) 30%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.10) 70%,
transparent 100%);
transform: skewX(-22deg);
transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.nav-cta:hover::after { left: 130%; }
.nav-cta:hover {
transform: translateY(-2px);
background: #fff;
box-shadow: 0 10px 28px -8px rgba(245, 249, 255, 0.35),
0 0 22px -4px rgba(245, 249, 255, 0.2);
}
.nav-cta:active { transform: translateY(0) scale(0.96); transition-duration: 0.08s; }
/* ============================================ */
/* BURGER MENU */
/* ============================================ */
/* Hidden above the nav breakpoint; the media query at the bottom of the
stylesheet is what swaps it in for the ticker. Everything here is the
appearance, so the two places do not both hold layout decisions. */
.nav-burger {
display: none;
width: 44px; height: 44px;
align-items: center; justify-content: center;
background: none; border: 0; padding: 0;
color: var(--text);
cursor: pointer;
flex-shrink: 0;
}
.nav-burger-box {
display: flex; flex-direction: column;
justify-content: space-between;
width: 22px; height: 16px;
}
.nav-burger-bar {
display: block;
height: 2px; width: 100%;
border-radius: 2px;
background: currentColor;
transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.2s ease;
}
/* Open state folds the three bars into a cross. The middle bar fades rather
than moving, so the two that remain read as one continuous X. */
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* The flyout is a child of the fixed nav, which owns the stacking context, so
these two z-indexes are relative to each other and not to the page. The bar
itself has to outrank the panel or the panel covers the mark and the close
control that dismisses it. */
.nav-inner { position: relative; z-index: 2; }
.nav-flyout {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
background: rgba(2, 8, 20, 0.92);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
opacity: 0;
transition: opacity 0.25s ease;
}
.nav-flyout.open { opacity: 1; }
/* No max-width: the panel only ever exists below the nav breakpoint, which is
narrower than any content measure on the page, so one would never bind. */
.nav-flyout-panel {
display: flex;
flex-direction: column;
gap: 4px;
padding: 96px 24px 40px;
}
.nav-flyout-panel a {
display: block;
padding: 16px 0;
font-size: 20px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--line);
transition: color 0.2s ease;
}
.nav-flyout-panel a:hover,
.nav-flyout-panel a:focus-visible { color: #7DD3FF; }
.nav-flyout-cta {
margin-top: 20px;
align-self: flex-start;
padding: 14px 28px !important;
border: 0 !important;
border-radius: 100px;
background: var(--text);
color: var(--bg) !important;
font-weight: 600 !important;
font-size: 15px !important;
}
/* The page behind must not scroll while the panel is up. */
body.nav-open { overflow: hidden; }
/* HERO */
.hero {
min-height: 100vh;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
padding: 120px 0 80px;
position: relative; text-align: center;
}
/* align-items: center makes the container a shrink-to-fit flex item, so it
sizes to whichever child happens to be widest and the measures inside it
resolve against a moving target. Stretched, it measures the same as the
container on every other section, which is what lets the hero blocks sit
on the same line as the rest of the page. */
.hero > .container { width: 100%; }
/* ============================================ */
/* HERO STAGE */
/* Square stage that frames the atom and */
/* carries its parallax tilt. */
/* ============================================ */
.globe-stage {
position: relative;
width: min(560px, 84vw);
height: min(560px, 84vw);
margin: 0 auto 12px;
opacity: 0;
animation: globeIn 1.6s 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
perspective: 1000px;
}
/* Without this the stage would sit at opacity 0 for anyone whose browser
suppresses the entrance animation — the hero is the page's centrepiece and
must never depend on an animation running. */
@media (prefers-reduced-motion: reduce) {
.globe-stage { opacity: 1; animation: none; }
}
/* ============================================ */
/* ============================================ */
/* ATOM */
/* ============================================ */
.atom-svg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
/* Visible by default. The entrance fade belongs to .globe-stage, which
animates in from pure CSS — the atom used to start at opacity 0 and wait
for a JS class, so any failure of the inline script left the hero blank. */
opacity: 1;
shape-rendering: geometricPrecision;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Luminous trails sweeping along the orbits */
.trail {
fill: none;
stroke-width: 9;
stroke-linecap: round;
stroke-dasharray: 280 3340;
transform-origin: 600px 600px;
opacity: 0.88;
vector-effect: non-scaling-stroke;
}
.trail-cyan {
stroke: url(#trailBlue);
animation: trailSweep1 5.2s linear infinite;
}
.trail-magenta {
stroke: url(#trailOrange);
animation: trailSweep2 5.8s linear infinite;
}
.trail-mix {
stroke: url(#trailBlue);
animation: trailSweep3 4.6s linear infinite;
}
.trail-purple {
stroke: url(#trailPurple);
animation: trailSweep4 5.4s linear infinite;
}
.trail-teal {
stroke: url(#trailTeal);
animation: trailSweep5 4.9s linear infinite;
}
.trail-gold {
stroke: url(#trailGold);
animation: trailSweep6 6s linear infinite;
}
@keyframes trailSweep1 {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -3620; }
}
@keyframes trailSweep2 {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -3620; }
}
@keyframes trailSweep3 {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -3620; }
}
@keyframes trailSweep4 {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -3620; }
}
@keyframes trailSweep5 {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -3620; }
}
@keyframes trailSweep6 {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -3620; }
}
@media (prefers-reduced-motion: reduce) {
.trail-cyan, .trail-magenta, .trail-mix,
.trail-purple, .trail-teal, .trail-gold {
animation: none;
}
}
/* HERO COPY */
/* Side-by-side: wordmark + atom on the hero (stacks on mobile) */
/* Shrink-wrapped to the lockup and the globe, this measured narrower than
every block below it. Spanning the grid puts it on the same line; the
contents stay centred within it. */
.hero-split {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 18px;
flex-wrap: wrap;
width: 100%;
max-width: var(--measure-grid);
margin-inline: auto;
}
.hero-split .hero-header {
text-align: left;
margin-bottom: 0;
flex: 0 1 auto;
}
.hero-split .globe-stage {
margin: 0;
width: min(420px, 42vw);
height: min(420px, 42vw);
flex: 0 1 auto;
}
@media (max-width: 900px) {
.hero-split { flex-direction: column; gap: 8px; }
.hero-split .hero-header { text-align: center; }
.hero-split .globe-stage {
width: min(440px, 80vw);
height: min(440px, 80vw);
}
}
.hero-header {
text-align: center;
position: relative;
z-index: 4;
margin-bottom: 48px;
}
.hero-copy { max-width: var(--measure-prose); margin: 0 auto; position: relative; z-index: 4; }
.badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px;
background: rgba(92, 184, 255, 0.05);
border: 1px solid var(--line-blue);
border-radius: 100px;
font-size: 11px;
color: var(--text-dim);
margin-bottom: 32px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0;
animation: fadeUp 0.8s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.badge .dot {
width: 6px; height: 6px;
background: var(--orange);
border-radius: 50%;
box-shadow: 0 0 12px var(--orange), 0 0 24px rgba(255, 138, 60, 0.5);
animation: pulse 2.4s ease-in-out infinite;
}
.brand-display {
margin-bottom: 0;
opacity: 0;
animation: fadeUp 1s 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* The brand lockup is the page's h1. The heading element carries no styling
of its own — .name and .sub keep it looking exactly as it did as a div. */
.brand-lockup {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.brand-display .name,
.brand-display .sub { display: block; }
.brand-display .name {
font-weight: 300;
font-size: clamp(34px, 4.8vw, 64px);
line-height: 1;
letter-spacing: 0.06em;
margin-bottom: 12px;
text-transform: uppercase;
color: #7DD3FF;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
font-feature-settings: 'kern' 1, 'ss01' 1;
/* No glow — pure crisp letterforms */
}
.brand-display .sub {
font-weight: 400;
font-size: clamp(12px, 1.3vw, 17px);
letter-spacing: 0.5em;
color: var(--orange);
text-transform: uppercase;
padding-left: 0.5em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
font-feature-settings: 'kern' 1;
}
.brand-display .divider {
display: flex; align-items: center; justify-content: center;
gap: 12px; margin-top: 24px;
}
.brand-display .divider .line-blue {
width: 100px; height: 1px;
background: linear-gradient(90deg, transparent, var(--blue), transparent);
box-shadow: 0 0 6px rgba(92, 184, 255, 0.4);
}
.brand-display .divider .accent {
width: 5px; height: 5px;
background: var(--orange);
border-radius: 50%;
box-shadow: 0 0 10px var(--orange), 0 0 22px rgba(255, 138, 60, 0.55);
}
.tagline-primary {
font-size: clamp(13px, 1.4vw, 17px);
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
margin-bottom: 8px;
opacity: 0;
animation: fadeUp 1s 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
font-feature-settings: 'kern' 1;
}
.tagline-primary .sep {
color: var(--orange);
margin: 0 8px;
text-shadow: 0 0 4px rgba(255, 138, 60, 0.45);
}
.hero-desc {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.7;
color: var(--text-dim);
margin: 18px auto 40px;
max-width: var(--measure-prose);
opacity: 0;
animation: fadeUp 1s 1.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-actions {
display: flex; gap: 12px;
justify-content: center; flex-wrap: wrap;
opacity: 0;
animation: fadeUp 1s 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 28px;
font-size: 14px; font-weight: 600;
text-decoration: none;
border-radius: 100px;
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
border: 1px solid transparent;
position: relative;
overflow: hidden;
will-change: transform;
}
.btn::after {
content: '';
position: absolute;
top: 0; left: -120%;
width: 90%; height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 255, 255, 0.10) 30%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.10) 70%,
transparent 100%);
transform: skewX(-22deg);
transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.btn > * { position: relative; z-index: 1; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover {
transform: translateY(-3px);
background: #fff;
box-shadow: 0 14px 36px -10px rgba(245, 249, 255, 0.45),
0 0 28px -6px rgba(245, 249, 255, 0.25);
}
.btn-ghost {
background: rgba(92, 184, 255, 0.04);
color: var(--text);
border-color: var(--line-blue);
}
.btn-ghost:hover {
background: rgba(92, 184, 255, 0.08);
border-color: var(--blue);
transform: translateY(-3px);
box-shadow: 0 0 28px -4px rgba(92, 184, 255, 0.5),
0 14px 32px -10px rgba(92, 184, 255, 0.25);
}
.btn .arrow { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover .arrow { transform: translateX(6px); }
/* ============================================ */
/* SHARED BUTTON EFFECTS — pulse + reactive */
/* ============================================ */
@keyframes btnPulse {
0%, 100% {
box-shadow:
0 6px 18px -6px rgba(255, 138, 60, 0.45),
0 0 18px -4px rgba(255, 138, 60, 0.30);
}
50% {
box-shadow:
0 8px 26px -6px rgba(255, 138, 60, 0.70),
0 0 32px -4px rgba(255, 138, 60, 0.55),
0 0 48px -8px rgba(125, 211, 255, 0.30);
}
}
@keyframes btnPulseBlue {
0%, 100% {
box-shadow:
0 6px 18px -6px rgba(92, 184, 255, 0.40),
0 0 18px -4px rgba(92, 184, 255, 0.30);
}
50% {
box-shadow:
0 8px 26px -6px rgba(92, 184, 255, 0.65),
0 0 32px -4px rgba(92, 184, 255, 0.50),
0 0 48px -8px rgba(255, 138, 60, 0.25);
}
}
@keyframes btnBorderShimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* Hero CTAs get the pulse glow */
.btn-primary {
animation: btnPulse 3.2s ease-in-out infinite;
}
.btn-primary:hover {
animation-play-state: paused;
transform: translateY(-3px) scale(1.02);
}
.btn-ghost {
animation: btnPulseBlue 3.5s ease-in-out infinite;
}
.btn-ghost:hover {
animation-play-state: paused;
transform: translateY(-3px) scale(1.02);
}
/* Send buttons (chat + tony) — pulsing orange glow always on */
.chat-send-btn:not(:disabled),
.tony-send-btn:not(:disabled) {
animation: btnPulse 3s ease-in-out infinite;
}
.chat-send-btn:not(:disabled):hover,
.tony-send-btn:not(:disabled):hover {
animation-play-state: paused;
transform: scale(1.08);
box-shadow:
0 10px 28px -6px rgba(255, 138, 60, 0.7),
0 0 36px -4px rgba(255, 138, 60, 0.6),
0 0 56px -8px rgba(125, 211, 255, 0.35);
}
/* Form submit buttons — rainbow gradient border animation */
.form-submit {
position: relative;
overflow: hidden;
}
.form-submit::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(90deg, #7DD3FF, #FFB463, #FF8A3C, #B0E5FF, #7DD3FF);
background-size: 200% 100%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: btnBorderShimmer 5s linear infinite;
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.form-submit:hover::before { opacity: 1; }
/* Pharma intake form: blue submit button to differentiate from scientist orange */
.form-submit-pharma {
background: linear-gradient(135deg, #7DD3FF, #3FA9F5) !important;
color: #02101e !important;
box-shadow: 0 8px 22px -6px rgba(92, 184, 255, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.form-submit-pharma:hover {
transform: translateY(-2px) scale(1.02);
filter: brightness(1.08);
box-shadow: 0 12px 28px -4px rgba(92, 184, 255, 0.7),
0 0 24px -4px rgba(125, 211, 255, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
/* Select dropdown styling for pharma form (matches text inputs) */
.scientists-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
padding: 12px 40px 12px 16px;
background: rgba(2, 8, 20, 0.6);
border: 1px solid rgba(125, 211, 255, 0.18);
border-radius: 10px;
color: var(--text);
font-family: var(--font);
font-size: 16px;
cursor: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
}
.scientists-form select:focus {
outline: none;
border-color: rgba(125, 211, 255, 0.6);
box-shadow: 0 0 0 3px rgba(125, 211, 255, 0.08);
}
.scientists-form select option {
background: #02101e;
color: var(--text);
padding: 12px;
}
/* Pharma toggle button - subtle blue tint to differentiate from scientist toggle */
.pharma-toggle {
border-color: rgba(125, 211, 255, 0.30) !important;
}
.pharma-toggle:hover {
border-color: rgba(125, 211, 255, 0.55) !important;
box-shadow: 0 10px 24px -8px rgba(92, 184, 255, 0.4) !important;
}
/* Nav CTA "Get in touch" — subtle reactive glow */
.nav-cta {
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease,
color 0.3s ease,
box-shadow 0.3s ease;
}
.nav-cta:hover {
box-shadow:
0 8px 22px -6px rgba(255, 138, 60, 0.5),
0 0 24px -4px rgba(125, 211, 255, 0.35);
transform: translateY(-2px) scale(1.04);
}
.nav-cta:active { transform: translateY(0) scale(0.97); }
/* Leader CTA — same orange pulse */
.leader-cta {
animation: btnPulse 3.4s ease-in-out infinite;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.leader-cta:hover {
animation-play-state: paused;
transform: translateY(-3px) scale(1.03);
box-shadow:
0 12px 30px -6px rgba(255, 138, 60, 0.7),
0 0 32px -4px rgba(255, 138, 60, 0.55),
0 0 50px -8px rgba(125, 211, 255, 0.3);
}
/* Respect prefers-reduced-motion - disable pulse animations */
@media (prefers-reduced-motion: reduce) {
.btn-primary, .btn-ghost,
.chat-send-btn:not(:disabled), .tony-send-btn:not(:disabled),
.leader-cta {
animation: none;
}
.form-submit::before { animation: none; }
}
/* INQUIRY */
.contact-section { padding: 100px 0 140px; position: relative; }
/* SCIENTISTS SECTION */
.scientists-section { padding: 60px 0 80px; position: relative; }
/* ============================================ */
/* SCIENTISTS INTAKE - COLLAPSIBLE TOGGLE */
/* ============================================ */
.pharma-subtext {
margin-top: 14px !important;
}
/* Inline divider between Pharma and Scientists sub-sections — chained selector wins specificity over base .section-divider */
.section-divider.section-divider-inline {
max-width: var(--measure-grid);
margin: 180px auto 140px !important;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(125, 211, 255, 0.25), rgba(255, 138, 60, 0.25), transparent);
}
.scientists-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 0 auto;
padding: 16px 32px;
background: linear-gradient(180deg, rgba(14, 30, 56, 0.7), rgba(10, 22, 40, 0.55));
border: 1px solid rgba(255, 138, 60, 0.4);
border-radius: 14px;
color: var(--text);
font-family: var(--font);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.04em;
cursor: none;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 6px 20px -8px rgba(255, 138, 60, 0.35);
}
.scientists-toggle::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--orange), transparent);
opacity: 0.55;
}
.scientists-toggle:hover {
transform: translateY(-2px);
border-color: var(--orange);
box-shadow: 0 10px 30px -8px rgba(255, 138, 60, 0.5),
0 0 24px -6px rgba(125, 211, 255, 0.3);
background: linear-gradient(180deg, rgba(20, 40, 70, 0.78), rgba(14, 30, 56, 0.62));
}
.scientists-toggle:active { transform: translateY(0) scale(0.985); }
.toggle-label {
position: relative;
line-height: 1;
}
/* Swap text based on aria-expanded state */
.scientists-toggle[aria-expanded="false"] .toggle-text-close { display: none; }
.scientists-toggle[aria-expanded="true"] .toggle-text-open { display: none; }
.toggle-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
color: var(--orange);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
filter: drop-shadow(0 0 6px rgba(255, 138, 60, 0.6));
}
.toggle-arrow svg { width: 16px; height: 16px; }
.scientists-toggle[aria-expanded="true"] .toggle-arrow {
transform: rotate(180deg);
}
/* Collapse container - animates height */
.scientists-collapse {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.4s ease;
margin-top: 0;
}
.scientists-collapse.open {
max-height: 4000px;
opacity: 1;
margin-top: 36px;
}
.scientists-grid {
max-width: var(--measure-grid);
margin: 0 auto;
}
.scientists-form-wrap {
position: relative;
padding: 40px;
background: linear-gradient(180deg, rgba(14, 30, 56, 0.65), rgba(10, 22, 40, 0.45));
border: 1px solid var(--line-blue);
border-radius: 24px;
overflow: hidden;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
}
.scientists-form-wrap::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--orange), transparent);
box-shadow: 0 0 10px rgba(255, 138, 60, 0.5);
}
.scientists-form-wrap::after {
content: '';
position: absolute;
top: -40%; right: -20%;
width: 60%; height: 60%;
background: radial-gradient(circle, rgba(255, 138, 60, 0.10), transparent 70%);
pointer-events: none; z-index: 0;
}
.scientists-form {
display: flex; flex-direction: column;
gap: 18px;
position: relative; z-index: 1;
}
.form-intro {
font-size: 13px;
color: var(--text-dim);
line-height: 1.55;
margin-bottom: 18px;
position: relative; z-index: 1;
max-width: var(--measure-prose);
}
.form-field .req {
color: var(--orange);
margin-left: 2px;
text-shadow: 0 0 6px rgba(255, 138, 60, 0.5);
}
.form-field select {
font-family: var(--font);
font-size: 16px;
color: var(--text);
background: rgba(2, 8, 20, 0.55);
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px 14px;
padding-right: 38px;
outline: none;
transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
cursor: none;
width: 100%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
}
.form-field select:hover { border-color: var(--line-blue); }
.form-field select:focus {
border-color: var(--orange);
background-color: rgba(2, 8, 20, 0.85);
box-shadow: 0 0 0 4px rgba(255, 138, 60, 0.10);
}
.form-field select option {
background: #0a1830;
color: var(--text);
}
.form-field.invalid select {
border-color: var(--orange);
box-shadow: 0 0 0 4px rgba(255, 138, 60, 0.10);
}
@media (max-width: 900px) {
.scientists-form-wrap { padding: 28px; }
.scientists-section { padding: 50px 0 70px; }
}
.contact-header {
text-align: center;
margin: 0 auto 56px;
max-width: var(--measure-grid);
}
.section-label {
display: inline-flex; align-items: center; gap: 14px;
font-size: 17px; font-weight: 600;
background: linear-gradient(90deg, #7DD3FF, #FFB463, #FF8A3C, #B0E5FF, #7DD3FF);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: aiEyebrowShimmer 6s linear infinite;
filter: drop-shadow(0 0 6px rgba(255, 138, 60, 0.4));
margin-bottom: 28px;
letter-spacing: 0.30em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
font-feature-settings: 'kern' 1;
}
.section-label::before,
.section-label::after {
content: '';
width: 42px; height: 1px;
background: var(--orange);
box-shadow: 0 0 6px rgba(255, 138, 60, 0.45);
}
.contact-header h2 {
font-weight: 300;
font-size: clamp(40px, 5.5vw, 68px);
line-height: 1.04;
letter-spacing: -0.025em;
margin-bottom: 20px;
}
.contact-header p {
font-size: 17px;
color: var(--text-dim);
max-width: var(--measure-prose);
margin: 0 auto;
line-height: 1.6;
}
.form-eyebrow {
font-size: 11px;
color: var(--orange);
letter-spacing: 0.24em;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 500;
position: relative; z-index: 1;
text-shadow: 0 0 10px rgba(255, 138, 60, 0.4);
}
.form-title {
font-weight: 400;
font-size: 22px;
letter-spacing: -0.015em;
margin-bottom: 28px;
position: relative; z-index: 1;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-field {
display: flex; flex-direction: column; gap: 8px;
position: relative;
}
.form-field label {
font-size: 11px;
font-weight: 500;
color: var(--text-faint);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.form-field input,
.form-field textarea {
font-family: var(--font);
font-size: 16px;
color: var(--text);
background: rgba(2, 8, 20, 0.55);
border: 1px solid var(--line);
border-radius: 10px;
padding: 13px 14px;
outline: none;
transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
cursor: text;
width: 100%;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-faint); }
.form-field input:hover,
.form-field textarea:hover { border-color: var(--line-blue); }
.form-field input:focus,
.form-field textarea:focus {
border-color: var(--orange);
background: rgba(2, 8, 20, 0.85);
box-shadow: 0 0 0 4px rgba(255, 138, 60, 0.10);
}
.form-field textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.form-field.invalid input,
.form-field.invalid textarea {
border-color: var(--orange);
box-shadow: 0 0 0 4px rgba(255, 138, 60, 0.10);
}
.form-submit {
display: inline-flex;
align-items: center; justify-content: center;
gap: 10px;
padding: 15px 28px;
background: var(--text); color: var(--bg);
border: none;
border-radius: 100px;
font-family: var(--font);
font-size: 14px; font-weight: 600;
cursor: none;
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
align-self: flex-start;
margin-top: 6px;
position: relative;
overflow: hidden;
will-change: transform;
}
.form-submit::after {
content: '';
position: absolute;
top: 0; left: -120%;
width: 90%; height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 255, 255, 0.10) 30%,
rgba(255, 255, 255, 0.60) 50%,
rgba(255, 255, 255, 0.10) 70%,
transparent 100%);
transform: skewX(-22deg);
transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.form-submit:hover::after { left: 130%; }
.form-submit > * { position: relative; z-index: 1; }
.form-submit:hover {
background: var(--orange);
color: var(--text);
transform: translateY(-3px);
box-shadow: 0 16px 36px -10px rgba(255, 138, 60, 0.7),
0 0 40px -6px rgba(255, 138, 60, 0.5);
}
.form-submit:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.form-submit:hover .arrow { transform: translateX(6px); }
.form-submit .arrow { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.form-fineprint {
font-size: 11px;
color: var(--text-faint);
margin-top: 4px;
}
/* Collection notice. The intake forms ask for unpublished patents, molecules
and disease targets, so what happens to that material is stated where it is
being asked for rather than only in a policy page. */
.form-notice {
font-size: 12px;
line-height: 1.6;
color: var(--text-faint);
margin-top: 14px;
padding-left: 12px;
border-left: 2px solid rgba(125, 211, 255, 0.25);
max-width: 62ch;
}
.form-notice a {
color: rgba(125, 211, 255, 0.85);
text-decoration: underline;
text-underline-offset: 2px;
}
.form-notice a:hover { color: #B0E5FF; }
/* Submission feedback. This element already existed on the pharma form and
had no styling at all, so the "message sent" confirmation was written into
an invisible div. It is a live region, so it stays in the DOM and is
revealed rather than inserted. */
.form-success {
margin-top: 14px;
padding: 0 16px;
max-height: 0;
overflow: hidden;
opacity: 0;
border-radius: 10px;
border: 1px solid transparent;
font-size: 14px;
line-height: 1.5;
transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}
.form-success.shown {
max-height: 200px;
padding: 14px 16px;
opacity: 1;
background: rgba(125, 211, 255, 0.08);
border-color: rgba(125, 211, 255, 0.35);
color: #B0E5FF;
}
.form-success.shown.is-error {
background: rgba(255, 138, 60, 0.10);
border-color: rgba(255, 138, 60, 0.45);
color: #FFC08A;
}
/* Honeypot: reachable by a bot filling every field, invisible and
unreachable for a person. Kept off-screen rather than display:none, since
some bots skip hidden inputs. */
.form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Email line above the contact messenger, so a reply has somewhere to go. */
.tony-email-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.tony-email-row label {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint);
}
.tony-email-row input {
flex: 1;
min-width: 220px;
font-family: var(--font);
font-size: 16px;
color: var(--text);
background: rgba(2, 8, 20, 0.55);
border: 1px solid var(--line);
border-radius: 10px;
padding: 11px 14px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tony-email-row input:focus {
border-color: rgba(125, 211, 255, 0.5);
box-shadow: 0 0 0 3px rgba(125, 211, 255, 0.12);
}
/* FOOTER */
footer {
padding: 50px 0 36px;
border-top: 1px solid var(--line);
background: rgba(2, 8, 20, 0.5);
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; gap: 20px;
max-width: var(--measure-grid);
margin: 0 auto;
}
.footer-meta {
font-size: 12px;
color: var(--text-faint);
letter-spacing: 0.04em;
}
/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes globeIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
/* RESPONSIVE */
@media (max-width: 900px) {
.container { padding: 0 24px; }
.nav-inner { gap: 12px; }
/* The ticker is a marquee, and touch has no :hover or :focus-within to
pause it with: the destinations slide out from under the finger reaching
for them. Below 900px it is replaced outright by the burger flyout, where
every section is a still target at a full tap size. */
.nav-ticker { display: none; }
.nav-burger { display: flex; }
/* The CTA already has a full-size counterpart at the foot of the flyout, so
here it gives its room to the mark rather than competing with it. */
.nav-cta { display: none; }
.form-row { grid-template-columns: 1fr; }
section[id] { scroll-margin-top: 80px; }
}
@media (max-width: 560px) {
.hero-actions { flex-direction: column; align-items: stretch; }
.btn { justify-content: center; }
.footer-inner { justify-content: center; text-align: center; }
.section-label::after { display: none; }
.form-submit { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
/* The background dots normally drift across the viewport. Under reduced
motion they hold still at their resting opacity — this rule used to
force a twinkle animation on instead, with !important so nothing could
override it, which is the opposite of what the preference asks for. */
.bg-dots .dot { animation: none !important; opacity: 0.35; }
}
/* Make the AI section eyebrow more prominent */
#assistant .section-label {
font-size: 18px;
letter-spacing: 0.34em;
background: linear-gradient(90deg, #7DD3FF, #FFB463, #FF8A3C, #B0E5FF, #7DD3FF);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
animation: aiEyebrowShimmer 6s linear infinite;
filter: drop-shadow(0 0 16px rgba(255, 138, 60, 0.5));
}
#assistant .section-label::before,
#assistant .section-label::after {
background: linear-gradient(90deg, var(--blue), var(--orange));
box-shadow: 0 0 10px rgba(255, 138, 60, 0.5);
}
@keyframes aiEyebrowShimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
/* ============================================ */
/* CUSTOM SPECIAL EFFECTS (added across site) */
/* ============================================ */
/* Constellation layer — subtle interconnected dots */
.bg-constellation {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.5;
}
.bg-constellation svg { width: 100%; height: 100%; }
.bg-constellation .star {
fill: rgba(255, 180, 99, 0.7);
animation: starTwinkle 4s ease-in-out infinite;
}
.bg-constellation .line {
stroke: rgba(255, 138, 60, 0.12);
stroke-width: 0.8;
fill: none;
}
@keyframes starTwinkle {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Section dividers — subtle glowing horizontal lines between sections */
.section-divider {
position: relative;
height: 1px;
max-width: var(--measure-grid);
margin: 0 auto;
background: linear-gradient(90deg, transparent, rgba(255, 138, 60, 0.4), transparent);
}
/* Scroll-triggered fade-in for sections */
.reveal-on-scroll {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-on-scroll.in-view {
opacity: 1;
transform: translateY(0);
}
/* ============================================ */
/* TONY MESSENGER (Contact Tony directly) */
/* ============================================ */
.tony-messenger {
max-width: var(--measure-grid);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.tony-card {
background: linear-gradient(180deg, rgba(14, 30, 56, 0.7), rgba(10, 22, 40, 0.55));
border: 1px solid var(--line-blue);
border-radius: 20px;
padding: 28px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
position: relative;
overflow: hidden;
}
.tony-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--orange), transparent);
box-shadow: 0 0 10px rgba(255, 138, 60, 0.5);
}
.tony-card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--line);
}
.tony-avatar {
width: 50px; height: 58px;
position: relative;
flex-shrink: 0;
}
.tony-avatar svg.hex-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: visible;
}
.tony-avatar svg.hex-bg polygon {
fill: rgba(255, 138, 60, 0.08);
stroke: rgba(255, 138, 60, 0.4);
stroke-width: 1.4;
filter: drop-shadow(0 0 8px rgba(255, 138, 60, 0.3));
}
.tony-initials {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.04em;
background: linear-gradient(180deg, var(--text), var(--orange-bright));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tony-meta { display: flex; flex-direction: column; gap: 4px; }
.tony-name {
font-size: 17px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.01em;
}
.tony-role {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.04em;
}
.tony-live {
width: 7px; height: 7px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 10px #4ade80;
animation: livePulse 2.4s ease-in-out infinite;
}
.tony-input-wrap {
position: relative;
background: rgba(2, 8, 20, 0.55);
border: 1px solid var(--line);
border-radius: 14px;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.tony-input-wrap:focus-within {
border-color: var(--orange);
box-shadow: 0 0 0 4px rgba(255, 138, 60, 0.08),
0 0 28px -4px rgba(255, 138, 60, 0.3);
}
.tony-input-inner {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px 10px 18px;
}
#tonyMsgInput {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text);
font-size: 16px;
line-height: 1.45;
resize: none;
padding: 4px 4px;
max-height: 200px;
min-height: 36px;
font-family: var(--font);
cursor: text;
}
#tonyMsgInput::placeholder { color: var(--text-faint); }
.tony-send-btn {
width: 42px; height: 42px;
flex-shrink: 0;
border-radius: 50%;
background: var(--text);
border: none;
color: var(--bg);
display: flex; align-items: center; justify-content: center;
transition: all 0.25s ease;
cursor: none;
position: relative;
overflow: hidden;
}
.tony-send-btn::after {
content: '';
position: absolute;
top: 0; left: -120%;
width: 90%; height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 255, 255, 0.10) 30%,
rgba(255, 255, 255, 0.60) 50%,
rgba(255, 255, 255, 0.10) 70%,
transparent 100%);
transform: skewX(-22deg);
transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.tony-send-btn:hover:not(:disabled)::after { left: 130%; }
.tony-send-btn:hover:not(:disabled) {
background: var(--orange);
color: var(--text);
transform: translateY(-2px);
box-shadow: 0 8px 22px -4px rgba(255, 138, 60, 0.7),
0 0 28px -4px rgba(255, 138, 60, 0.55);
}
.tony-send-btn:active:not(:disabled) { transform: translateY(0) scale(0.94); transition-duration: 0.08s; }
.tony-send-btn:disabled {
background: rgba(245, 249, 255, 0.15);
color: rgba(2, 8, 20, 0.5);
cursor: not-allowed;
}
.tony-send-btn svg {
width: 18px; height: 18px;
stroke: currentColor;
stroke-width: 2.2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transform: translateX(1px);
position: relative;
z-index: 1;
}
.tony-meta-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 14px;
padding: 0 4px;
font-size: 11px;
color: var(--text-faint);
gap: 12px;
flex-wrap: wrap;
}
.tony-meta-bar kbd {
display: inline-block;
padding: 1px 6px;
background: rgba(92, 184, 255, 0.08);
border: 1px solid var(--line);
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
color: var(--text-dim);
margin: 0 1px;
}
/* Direct email line under the messenger card */
.tony-direct-email {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 22px;
padding: 14px 22px;
background: linear-gradient(180deg, rgba(14, 30, 56, 0.55), rgba(10, 22, 40, 0.4));
border: 1px solid var(--line);
border-radius: 14px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
flex-wrap: wrap;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tony-direct-email:hover {
border-color: rgba(255, 138, 60, 0.4);
box-shadow: 0 0 24px -8px rgba(255, 138, 60, 0.3);
}
.tony-direct-label {
font-size: 12px;
color: var(--text-faint);
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 500;
}
.tony-direct-link {
font-size: clamp(15px, 1.6vw, 18px);
font-weight: 500;
background: linear-gradient(90deg, #7DD3FF, #FFB463, #FF8A3C, #B0E5FF, #7DD3FF);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: aiEyebrowShimmer 6s linear infinite;
text-decoration: none;
filter: drop-shadow(0 0 8px rgba(255, 138, 60, 0.4));
transition: filter 0.25s ease, transform 0.25s ease;
word-break: break-all;
}
.tony-direct-link:hover {
filter: drop-shadow(0 0 12px rgba(255, 138, 60, 0.6))
drop-shadow(0 0 24px rgba(125, 211, 255, 0.4));
transform: scale(1.03);
}
@media (max-width: 520px) {
.tony-card { padding: 22px; }
.tony-card-header { gap: 12px; }
.tony-name { font-size: 16px; }
.tony-role { font-size: 11px; }
}
/* Shared with .tony-live in the contact messenger, and with the leader-hex
rules still pending removal in issue #1. */
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
@keyframes hexSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ABOUT PAGE LAYOUT */
body { overflow-x: hidden; }
.about-page {
padding: 110px 0 80px;
}
.about-hero {
text-align: center;
max-width: var(--measure-grid);
margin: 0 auto 80px;
animation: fadeUp 0.8s 0.1s cubic-bezier(0.22,1,0.36,1) backwards;
}
.about-hero .section-label {
margin-bottom: 22px;
}
.about-hero .section-label::before,
.about-hero .section-label::after {
content: ''; width: 36px; height: 1px;
background: var(--orange);
box-shadow: 0 0 10px rgba(255,138,60,0.6);
}
.about-hero h1 {
font-weight: 300;
font-size: clamp(40px, 5.5vw, 68px);
line-height: 1.04;
letter-spacing: -0.025em;
margin-bottom: 22px;
}
.about-extended {
max-width: var(--measure-prose);
margin: 48px auto 0;
}
.about-extended p {
font-size: 16px;
color: var(--text);
line-height: 1.75;
margin-bottom: 18px;
}
.about-extended p:last-child { margin-bottom: 0; }
.about-extended strong {
color: var(--orange-bright);
font-weight: 600;
text-shadow: 0 0 8px rgba(255, 138, 60, 0.4);
}
.motive-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.30em;
text-transform: uppercase;
margin-bottom: 28px;
}
.motive-eyebrow::before,
.motive-eyebrow::after {
content: '';
width: 42px;
height: 1px;
background: var(--orange);
box-shadow: 0 0 10px rgba(255, 138, 60, 0.6);
}
.motive-eyebrow span {
background: linear-gradient(90deg, #7DD3FF, #FFB463, #FF8A3C, #B0E5FF, #7DD3FF);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: aiEyebrowShimmer 6s linear infinite;
filter: drop-shadow(0 0 14px rgba(255, 138, 60, 0.55));
}
/* ============================================ */
/* NEWSLETTER SECTION */
/* ============================================ */
.newsletter-section {
padding: 70px 0 80px;
position: relative;
}
.newsletter-header {
text-align: center;
max-width: var(--measure-grid);
margin: 0 auto 40px;
}
.newsletter-intro {
font-size: 15px;
line-height: 1.7;
color: var(--text-dim);
margin: 18px auto 0;
max-width: var(--measure-prose);
}
.newsletter-card {
position: relative;
max-width: var(--measure-grid);
margin: 0 auto;
padding: 56px 48px;
background: linear-gradient(180deg, rgba(14, 30, 56, 0.65), rgba(10, 22, 40, 0.5));
border: 1px solid rgba(125, 211, 255, 0.18);
border-radius: 22px;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
overflow: hidden;
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.newsletter-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(125, 211, 255, 0.6), rgba(255, 138, 60, 0.6), transparent);
}
.newsletter-orb {
position: absolute;
border-radius: 50%;
filter: blur(45px);
opacity: 0.55;
pointer-events: none;
}
.newsletter-orb-1 {
width: 220px; height: 220px;
background: rgba(92, 184, 255, 0.30);
top: -90px; left: -70px;
animation: orbFloat1 11s ease-in-out infinite;
}
.newsletter-orb-2 {
width: 260px; height: 260px;
background: rgba(255, 138, 60, 0.25);
bottom: -110px; right: -90px;
animation: orbFloat2 13s ease-in-out infinite;
}
@keyframes orbFloat1 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(20px, 30px); }
}
@keyframes orbFloat2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-25px, -20px); }
}
/* The card spans the grid so its border lands on the page's edge; the reading
column inside it does not, or the posts would run past 130 characters a
line. Centred in the card, the way .about-extended sits in its section. */
.newsletter-content {
position: relative;
z-index: 2;
max-width: var(--measure-prose);
margin: 0 auto;
}
/* Post entries — when you're ready to publish */
.newsletter-post {
padding: 28px 0;
border-bottom: 1px solid rgba(125, 211, 255, 0.10);
}
.newsletter-post:first-child { padding-top: 0; }
.newsletter-post:last-child {
border-bottom: none;
padding-bottom: 0;
}
.newsletter-post-meta {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 12px;
}
.newsletter-post-date { color: var(--text-faint); }
.newsletter-post-sep { color: rgba(255, 138, 60, 0.6); }
.newsletter-post-tag {
color: var(--orange-bright);
text-shadow: 0 0 8px rgba(255, 138, 60, 0.4);
}
.newsletter-post-title {
font-size: clamp(20px, 2.3vw, 26px);
font-weight: 500;
color: #7DD3FF;
letter-spacing: -0.01em;
margin-bottom: 12px;
line-height: 1.3;
}
/* A linked title points at the same place as the arrow link below it, so it
stays a heading rather than dressing itself up as a second link: colour is
inherited and the underline waits for hover. */
.newsletter-post-title a,
.press-announce-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.newsletter-post-title a:hover,
.press-announce-title a:hover {
color: #B0E5FF;
text-decoration: underline;
text-underline-offset: 3px;
}
.newsletter-post-excerpt {
font-size: 15px;
line-height: 1.75;
color: var(--text-dim);
margin-bottom: 14px;
}
.newsletter-post-excerpt:last-of-type {
margin-bottom: 18px;
}
.newsletter-post-excerpt strong {
color: var(--text);
font-weight: 600;
}
/* One arrow link, three surfaces: the newsletter posts, the announcement card
in the hero, and the press page's way back. The gap widening on hover is the
affordance, so it is defined once rather than per surface. */
.newsletter-post-link,
.press-announce-link,
.press-back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--orange-bright);
text-decoration: none;
letter-spacing: 0.04em;
transition: gap 0.3s ease, color 0.3s ease;
}
.newsletter-post-link:hover,
.press-announce-link:hover,
.press-back:hover {
gap: 14px;
color: #FFB463;
}
.newsletter-post-link span,
.press-announce-link span,
.press-back span {
transition: transform 0.3s ease;
}
.newsletter-post-link:hover span,
.press-announce-link:hover span { transform: translateX(2px); }
/* The back link's arrow points the other way, so it travels the other way. */
.press-back:hover span { transform: translateX(-2px); }
@media (max-width: 640px) {
.newsletter-card { padding: 40px 24px; }
}
.services-block {
max-width: var(--measure-grid);
margin: 0 auto 60px;
text-align: center;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
text-align: left;
}
.service-item {
position: relative;
padding: 26px 24px;
background: linear-gradient(180deg, rgba(14, 30, 56, 0.55), rgba(10, 22, 40, 0.4));
border: 1px solid var(--line);
border-radius: 16px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s ease,
box-shadow 0.4s ease;
overflow: hidden;
}
.service-item::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--orange), transparent);
opacity: 0.4;
}
.service-item:hover {
transform: translateY(-3px);
border-color: rgba(255, 138, 60, 0.4);
box-shadow: 0 14px 32px -10px rgba(0,0,0,0.5),
0 0 24px -8px rgba(255,138,60,0.3);
}
.service-item:hover::before { opacity: 0.9; }
.service-icon {
width: 42px; height: 42px;
display: inline-flex;
align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(255, 138, 60, 0.08);
border: 1px solid rgba(255, 138, 60, 0.32);
color: var(--orange);
margin-bottom: 16px;
box-shadow: 0 0 16px -4px rgba(255, 138, 60, 0.35);
}
.service-icon svg {
width: 20px; height: 20px;
stroke: currentColor;
}
.service-item h4 {
font-weight: 500;
font-size: 16px;
margin-bottom: 8px;
color: var(--text);
letter-spacing: -0.005em;
}
.service-item p {
font-size: 13.5px;
color: var(--text-dim);
line-height: 1.6;
}
@media (max-width: 900px) {
.services-grid { grid-template-columns: 1fr; }
.services-block { margin-bottom: 40px; }
}
/* LEADERSHIP SECTION (Tony's bio) */
.leadership {
max-width: var(--measure-grid);
margin: 0 auto 40px;
}
.leadership-header {
text-align: center;
margin-bottom: 28px;
}
.leadership-header .section-label {
margin-bottom: 18px;
}
.leadership-header .section-label::before,
.leadership-header .section-label::after {
content: ''; width: 36px; height: 1px;
background: var(--orange);
box-shadow: 0 0 10px rgba(255,138,60,0.6);
}
.leadership-header h2 {
font-weight: 300;
font-size: clamp(28px, 4vw, 40px);
letter-spacing: -0.02em;
}
.leader-card {
display: block;
padding: 38px 44px;
background: linear-gradient(180deg, rgba(14, 30, 56, 0.7), rgba(10, 22, 40, 0.55));
border: 1px solid var(--line-blue);
border-radius: 24px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
position: relative;
overflow: hidden;
}
.leader-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--orange), transparent);
box-shadow: 0 0 10px rgba(255, 138, 60, 0.5);
}
.leader-card::after {
content: '';
position: absolute;
top: -30%; right: -10%;
width: 50%; height: 70%;
background: radial-gradient(circle, rgba(255, 138, 60, 0.08), transparent 65%);
pointer-events: none;
z-index: 0;
}
.leader-body {
position: relative;
z-index: 1;
}
.leader-name {
font-weight: 500;
font-size: 32px;
letter-spacing: -0.018em;
color: #7DD3FF;
margin-bottom: 4px;
text-shadow: 0 0 8px rgba(125, 211, 255, 0.22);
}
.leader-role {
font-size: 14px;
font-weight: 500;
color: var(--orange);
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(255, 138, 60, 0.4);
margin-bottom: 4px;
}
.leader-bio p {
font-size: 15px;
color: var(--text);
line-height: 1.7;
margin-bottom: 14px;
}
.leader-bio p:last-child { margin-bottom: 0; }
.leader-bio a {
color: var(--orange-bright);
text-decoration: none;
border-bottom: 1px dotted rgba(255, 138, 60, 0.4);
transition: color 0.25s ease, border-color 0.25s ease, text-shadow 0.25s ease;
}
.leader-bio a:hover {
color: var(--orange);
border-bottom-color: var(--orange);
text-shadow: 0 0 8px rgba(255, 138, 60, 0.5);
}
.leader-creds {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 24px 0 22px;
padding: 18px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.cred-item {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 180px;
}
.cred-icon {
width: 32px; height: 32px;
display: inline-flex;
align-items: center; justify-content: center;
border-radius: 8px;
background: rgba(255, 138, 60, 0.06);
border: 1px solid rgba(255, 138, 60, 0.25);
color: var(--orange);
flex-shrink: 0;
}
.cred-icon svg { width: 16px; height: 16px; }
.cred-label {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 2px;
}
.cred-value {
font-size: 13px;
font-weight: 500;
color: var(--text);
}
.leader-cta-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.leader-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
background: rgba(255, 138, 60, 0.08);
border: 1px solid rgba(255, 138, 60, 0.4);
border-radius: 100px;
font-size: 13px;
font-weight: 600;
color: var(--orange-bright);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
overflow: hidden;
}
.leader-linkedin {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: rgba(92, 184, 255, 0.08);
border: 1px solid rgba(92, 184, 255, 0.4);
border-radius: 100px;
font-size: 13px;
font-weight: 600;
color: #7DD3FF;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
letter-spacing: 0.02em;
}
.leader-linkedin svg {
width: 16px; height: 16px;
transition: transform 0.3s ease;
}
.leader-linkedin:hover {
background: rgba(92, 184, 255, 0.16);
border-color: rgba(92, 184, 255, 0.7);
color: #B0E5FF;
transform: translateY(-2px);
box-shadow: 0 8px 22px -6px rgba(92, 184, 255, 0.45);
}
.leader-linkedin:hover svg {
transform: scale(1.1);
}
.leader-cta::after {
content: '';
position: absolute;
top: 0; left: -120%;
width: 90%; height: 100%;
background: linear-gradient(115deg,
transparent 0%,
rgba(255, 180, 99, 0.10) 30%,
rgba(255, 180, 99, 0.45) 50%,
rgba(255, 180, 99, 0.10) 70%,
transparent 100%);
transform: skewX(-22deg);
transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.leader-cta:hover {
background: var(--orange);
border-color: var(--orange);
color: var(--text);
box-shadow: 0 0 24px -2px rgba(255, 138, 60, 0.7),
0 0 50px -8px rgba(255, 138, 60, 0.45);
}
.leader-cta:hover::after { left: 130%; }
.leader-cta .arrow {
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
z-index: 1;
}
.leader-cta:hover .arrow { transform: translateX(6px); }
@media (max-width: 880px) {
.leader-card { padding: 28px 24px; }
.leader-name { font-size: 26px; }
.leader-creds { justify-content: flex-start; }
.cred-item { min-width: 100%; }
}
/* Single-page smooth scroll */
html { scroll-behavior: smooth; }
/* Account for fixed nav when jumping to anchor */
section[id], div[id] { scroll-margin-top: 80px; }
/* The hero on the homepage doesn't get section-padding intro */
section.about-page { padding: 60px 0 30px; }
/* CEO section sits inside about-page wrapper - keep it compact, no oversized empty room */
#ceo.about-page { padding: 60px 0 50px; }
#ceo .container { padding-top: 0; padding-bottom: 0; }
/* ============================================ */
/* PRESS ANNOUNCEMENT CARD */
/* ============================================ */
/* Sits in the hero between the lockup and the tagline. Same 720px measure as
.hero-copy so the hero stays one column, and the leader card's recipe
(38px 44px, 24px radius, 12px blur, --line-blue) rather than a sixth
card variant. */
.press-announce {
position: relative;
z-index: 4;
/* The card is a section block, so it takes the grid measure and its border
lands on the same line as every other section's edge. */
max-width: var(--measure-grid);
width: 100%;
/* The gap below separates the announcement from the tagline that opens the
page's own copy, so it is wider than the padding inside the card. */
margin: 0 auto 100px;
/* The hero centres its text, which is right for a tagline and wrong for two
paragraphs of prose. Ranged left, matching the newsletter posts. */
text-align: left;
padding: 38px 44px;
background: linear-gradient(180deg, rgba(14, 30, 56, 0.7), rgba(10, 22, 40, 0.55));
border: 1px solid var(--line-blue);
border-radius: 24px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.press-announce::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--orange), transparent);
box-shadow: 0 0 10px rgba(255, 138, 60, 0.5);
}
.press-announce-meta {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 14px;
}
.press-announce-sep { color: rgba(255, 138, 60, 0.6); }
.press-announce-tag {
color: var(--orange-bright);
text-shadow: 0 0 8px rgba(255, 138, 60, 0.4);
}
.press-announce-title {
font-size: clamp(20px, 2.2vw, 25px);
font-weight: 500;
color: #7DD3FF;
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: 16px;
}
/* The card spans the services grid, which is far wider than a paragraph
should be set: unchecked, the announcement ran to about 128 characters a
line. The card keeps its edge alignment and the text column does not. */
.press-announce p,
.press-announce-title {
max-width: var(--measure-prose);
}
.press-announce p {
font-size: 15px;
line-height: 1.75;
color: var(--text-dim);
margin-bottom: 14px;
}
.press-announce p strong {
color: var(--text);
font-weight: 600;
}
.press-announce-link { margin-top: 4px; }
@media (max-width: 640px) {
.press-announce {
padding: 28px 24px;
margin-bottom: 68px;
}
}
/* ============================================ */
/* PRESS RELEASE PAGE */
/* ============================================ */
/* Used by press/*.html. The measure is 720px, the brand guide's default, so
the release reads as a document rather than as a landing section. */
.press-page {
padding: 130px 0 90px;
}
/* Geometry and colour come from the shared arrow-link rule above; only the
spacing below the release header is this surface's own. */
.press-back { margin-bottom: 34px; }
.press-article {
max-width: var(--measure-prose);
margin: 0 auto;
}
.press-meta {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 16px;
}
.press-meta-sep { color: rgba(255, 138, 60, 0.6); }
.press-meta-tag {
color: var(--orange-bright);
text-shadow: 0 0 8px rgba(255, 138, 60, 0.4);
}
.press-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 500;
color: #7DD3FF;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 18px;
}
.press-standfirst {
font-size: clamp(16px, 1.8vw, 19px);
line-height: 1.65;
color: var(--text-dim);
margin-bottom: 30px;
}
.press-rule {
height: 1px;
border: none;
background: linear-gradient(90deg, rgba(125, 211, 255, 0.6), rgba(255, 138, 60, 0.6), transparent);
margin-bottom: 34px;
}
.press-body p {
font-size: 16px;
line-height: 1.8;
color: var(--text-dim);
margin-bottom: 20px;
}
.press-body h2 {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text);
margin: 40px 0 16px;
}
.press-body ul {
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.press-body li {
position: relative;
font-size: 16px;
line-height: 1.8;
color: var(--text-dim);
padding-left: 22px;
margin-bottom: 12px;
}
.press-body li::before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 138, 60, 0.7);
}
.press-body strong {
color: var(--text);
font-weight: 600;
}
.press-body a { color: var(--orange-bright); }
.press-legal {
margin-top: 40px;
padding: 26px 28px;
background: linear-gradient(180deg, rgba(14, 30, 56, 0.5), rgba(10, 22, 40, 0.35));
border: 1px solid var(--line);
border-radius: 16px;
}
.press-legal h2 { margin-top: 0; }
/* Subordinate to the release, but still the paragraph counsel requires a
reader to be able to read: at 13px on --text-faint it sat at 3.4:1, under
the 4.5:1 floor and the least legible text on the site. The card and the
measure do the subordinating instead of the contrast. */
.press-legal p {
font-size: 15px;
line-height: 1.75;
color: var(--text-dim);
margin-bottom: 0;
}
@media (max-width: 640px) {
.press-page { padding: 100px 0 60px; }
.press-legal { padding: 20px 18px; }
}
/* ============================================ */
/* CURSOR FALLBACK */
/* Must stay last: it wins on source order over */
/* the `cursor: none` declarations above. */
/* ============================================ */
/* The site hides the OS pointer and draws its own. That replacement only
exists once the inline script binds it, and the script only binds on a
device with a fine hovering pointer. Until carries .custom-cursor —
and permanently, if the script never runs or the pointer is coarse — the
real pointer stays visible. Keying on the class rather than a width
breakpoint closes the gap where a wide touchscreen reported no hover and
was left with no visible pointer at all. */
html:not(.custom-cursor),
html:not(.custom-cursor) * { cursor: auto; }
html:not(.custom-cursor) a,
html:not(.custom-cursor) button,
html:not(.custom-cursor) [data-cursor],
html:not(.custom-cursor) .form-submit { cursor: pointer; }
html:not(.custom-cursor) input,
html:not(.custom-cursor) textarea { cursor: text; }
html:not(.custom-cursor) .cursor-dot,
html:not(.custom-cursor) .cursor-ring { display: none; }
/* ============================================ */
/* KEYBOARD FOCUS */
/* ============================================ */
/* `outline: none` appears on several controls above with nothing put back in
its place, so a keyboard user had no way to tell where they were. This is
:focus-visible, so it shows for keyboard and assistive navigation without
drawing a ring on every mouse click. */
:focus-visible {
outline: 2px solid #7DD3FF;
outline-offset: 3px;
border-radius: 4px;
}
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible,
.scientists-form select:focus-visible {
outline: 2px solid #7DD3FF;
outline-offset: 1px;
}
/* Skip link: off-screen until focused, then pinned top-left. */
.skip-link {
position: absolute;
top: 0; left: 0;
z-index: 200;
padding: 12px 20px;
background: #7DD3FF;
color: var(--bg);
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 8px 0;
transform: translateY(-120%);
transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }