/* ══════════════════════════════════════════════════════════════════
STOBOX — v3 Shared Design System
Extracted from index-v3.css. Contains tokens, layout, nav,
sections, atmosphere, footer, disclaimer, mob-cta, lightbox,
card-hover system, has-anim, reduced-motion.
Page-specific styles (homepage, tokenization, engagement) live
alongside in their own files and load AFTER this file.
══════════════════════════════════════════════════════════════════ */
:root{
/* Surfaces — white stack + new ice tint for accent backgrounds */
--bg: #ffffff;
--bg-2: #fafafa;
--bg-3: #f4f4f5;
--bg-4: #ebebed;
/* Ink — near-black + grays */
--ink: #0a0a0a;
--ink-2: #2b2b2d;
--ink-3: #6b6b70;
--ink-4: #9a9aa0;
--ink-5: #c4c4c8;
/* Blurple system — Stripe-inspired primary + supporting blues */
--accent: #635bff; /* Stripe blurple */
--accent-hi: #a5b4fc; /* light, for use on dark backgrounds */
--accent-lo: #4f46e5; /* deeper, for hover on light */
--accent-bg: rgba(99, 91, 255, 0.07);
--accent-bd: rgba(99, 91, 255, 0.22);
--blue-deep: #1e1b4b; /* deep midnight indigo */
--blue-ice: #eef0ff; /* almost-white tinted blue (subtle bg) */
--blue-sky: #c7d2fe; /* soft secondary on light */
--blue-twilight: #3730a3; /* rich indigo for deep accents */
/* Dark surface for .sec.dark — deep navy not pure black */
--bg-dark: #0a0e2c;
--bg-dark-2: #13133d; /* slightly lifted, for cards on dark */
/* Rules — hairlines for the grid (softer than before) */
--rule: #eeeef0;
--rule-soft: #f5f5f7;
--rule-hard: #d4d4d8;
/* Type stacks */
--display: 'Big Shoulders Display', 'Oswald', 'Helvetica Neue', sans-serif;
--body: 'IBM Plex Sans', system-ui, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, 'Menlo', monospace;
/* Layout */
--maxw: 1440px;
--gutter: clamp(20px, 3.2vw, 48px);
/* Motion — Stripe-restrained */
--ease: cubic-bezier(.22, 1, .36, 1);
--t-fast: .18s;
--t-base: .35s;
--t-slow: .6s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* ──────────────────────────────────────────────────────────────────
A11y: skip-to-content link + global focus-visible.
Skip link is the first body child on every page; it lives off-screen
until focused, where it slides into the top-left as an inverted pill.
────────────────────────────────────────────────────────────────── */
.skip-link{
position: absolute;
left: 12px;
top: -100px;
background: var(--ink);
color: var(--bg);
padding: 10px 18px;
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
text-decoration: none;
z-index: 10000;
border: 0;
border-radius: 0;
transition: top var(--t-fast);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px;
outline: 2px solid var(--accent-hi, var(--blue));
outline-offset: 2px;
}
:focus-visible{
outline: 2px solid var(--accent-hi, var(--blue, #2563eb));
outline-offset: 3px;
border-radius: 2px;
}
/* Don't double up the focus ring when the element already styles it. */
.skip-link:focus-visible,
.compass-bar-cta:focus-visible{
outline-offset: 2px;
}
body{
background: var(--bg);
color: var(--ink);
font-family: var(--body);
font-weight: 400;
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
/* overflow-x: clip preserves sticky nav behaviour; hidden would
create a new scroll container and break position: sticky */
overflow-x: clip;
}
html{ overflow-x: clip }
a{ color: inherit; text-decoration: none }
img{ display: block; max-width: 100%; height: auto }
::selection{ background: var(--accent); color: #fff }
/* Reusable container — no horizontal padding so it inherits the
single gutter from its parent (.sec, .cta-sec, etc.). */
.inner{
max-width: var(--maxw);
margin: 0 auto;
position: relative;
}
/* ── On-scroll reveal system — more dynamic ──────────────────────
Default .reveal is a longer fade-up. Directional + scale variants
give different sections different feel. Start opacity 0.06 so
content isn't visible-but-still until it animates. */
.reveal{
opacity: 0.06;
transform: translateY(28px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.visible{ opacity: 1; transform: none }
.reveal-left{
opacity: 0.06;
transform: translateX(-32px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-left.visible{ opacity: 1; transform: none }
.reveal-right{
opacity: 0.06;
transform: translateX(32px);
transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-right.visible{ opacity: 1; transform: none }
.reveal-scale{
opacity: 0.06;
transform: scale(0.94);
transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-scale.visible{ opacity: 1; transform: none }
/* Stagger children inside any container with .stagger-children */
.stagger-children > *{
opacity: 0.06;
transform: translateY(20px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.stagger-children.visible > *{ opacity: 1; transform: none }
.stagger-children.visible > *:nth-child(1){ transition-delay: .05s }
.stagger-children.visible > *:nth-child(2){ transition-delay: .12s }
.stagger-children.visible > *:nth-child(3){ transition-delay: .19s }
.stagger-children.visible > *:nth-child(4){ transition-delay: .26s }
.stagger-children.visible > *:nth-child(5){ transition-delay: .33s }
.stagger-children.visible > *:nth-child(6){ transition-delay: .40s }
.stagger-children.visible > *:nth-child(7){ transition-delay: .47s }
.stagger-children.visible > *:nth-child(n+8){ transition-delay: .54s }
/* ── NAV ──────────────────────────────────────────────────────── */
.nav{
position: sticky;
top: 0;
z-index: 100;
/* Solid bg, no backdrop-filter. backdrop-filter on a sticky element
forces a separate compositing layer that re-paints on every scroll
frame; on Safari/Chrome that subpixel re-paint shimmers adjacent
text. Solid white nav reads cleaner and scrolls perfectly stable. */
background: var(--bg);
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px var(--gutter);
transition: padding var(--t-base) var(--ease), border-color var(--t-base);
}
.nav.scrolled{ padding: 7px var(--gutter); border-bottom-color: var(--ink) }
.nav-logo{ display: inline-flex; align-items: center; gap: 10px }
.nav-logo .logo-img{ height: 24px; width: auto }
.nav-logo::after{ display: none }
.nav-links{ display: flex; align-items: center; gap: 28px }
.nl{
font-family: var(--body);
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: -0.005em;
cursor: pointer;
position: relative;
transition: color var(--t-fast) var(--ease);
}
.nl:hover, .nl.active{ color: var(--ink) }
.nl.active::after{
content: '';
position: absolute;
bottom: -18px; left: 0; right: 0;
height: 2px;
background: var(--accent);
}
.nl-drop{ position: relative }
.drop-arrow{
font-size: 8px;
margin-left: 4px;
color: var(--ink-4);
}
.drop-menu{
position: absolute;
top: calc(100% + 18px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
background: var(--bg);
border: 1px solid var(--rule);
padding: 14px 12px;
min-width: 280px;
opacity: 0;
visibility: hidden;
transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
box-shadow: 0 12px 40px rgba(10,10,10,0.08), 0 1px 0 var(--ink);
border-radius: 1px;
}
.nl-drop:hover .drop-menu{
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
}
.drop-label{
display: block;
font-family: var(--mono);
font-size: 9px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-4);
padding: 6px 10px 8px;
border-bottom: 1px solid var(--rule-soft);
margin-bottom: 4px;
}
.drop-item{
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
transition: color var(--t-fast), background var(--t-fast);
border-radius: 1px;
}
.drop-item:hover{ color: var(--accent); background: var(--accent-bg) }
/* drop-item-icon — text "·" inside is hidden; an SVG mask
(selected by parent .drop-item href) renders a per-route icon. */
.drop-item-icon{
display: inline-block;
flex-shrink: 0;
width: 16px; height: 16px;
font-size: 0;
line-height: 0;
color: transparent;
background-color: var(--ink-4);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
transition: background-color var(--t-fast);
}
.drop-item:hover .drop-item-icon{ background-color: var(--accent) }
/* Per-route icon masks — Solutions / By sector */
.drop-item[href="/real-estate"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/funds"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/energy"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/businesses"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/institutional"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/rwa-tokenization"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
/* Company / About us */
.drop-item[href="/about"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/mission"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/investors"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/partners"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/case-studies"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/contact"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
/* Resources / Learn */
.drop-item[href="/blog"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/retrospective"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href^="https://docs.stobox.io"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-item[href="/faq"] .drop-item-icon{
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
}
.drop-divider{ height: 1px; background: var(--rule-soft); margin: 6px 0 }
.nav-cta-group{ display: inline-flex; align-items: center; gap: 10px }
.nav-cta-soft{
font-family: var(--body);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
background: transparent;
padding: 9px 14px;
border-radius: 1px;
border: 1px solid var(--rule);
display: inline-flex;
align-items: center;
gap: 6px;
transition: border-color var(--t-base) var(--ease), color var(--t-base);
}
.nav-cta-soft::after{ content: '→'; font-size: 13px; color: var(--ink-3) }
.nav-cta-soft:hover{ border-color: var(--accent); color: var(--accent) }
.nav-cta-soft:hover::after{ color: var(--accent) }
.nav-cta{
font-family: var(--body);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--bg);
background: var(--ink);
padding: 9px 16px;
border-radius: 1px;
border: 1px solid var(--rule);
display: inline-flex;
align-items: center;
gap: 8px;
transition: background var(--t-base) var(--ease), color var(--t-base);
}
.nav-cta::after{ content: '→'; font-size: 14px }
.nav-cta:hover{ background: var(--accent); border-color: var(--accent) }
.nav-toggle{
display: none;
background: transparent;
border: 0;
/* 40×40 hit area (WCAG AAA target). Bars sit inside via inner sizing. */
width: 40px;
height: 40px;
padding: 9px 6px;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
cursor: pointer;
box-sizing: border-box;
}
.nav-toggle span{
display: block;
height: 2px;
background: var(--ink);
transition: transform var(--t-base), opacity var(--t-base);
}
/* Bar offsets adjusted for the new 40px / 9px-padded box: bars now span
40 - 18 = 22px of vertical room, with ~10px between centers. */
.nav-toggle.open span:nth-child(1){ transform: translateY(10px) rotate(45deg) }
.nav-toggle.open span:nth-child(2){ opacity: 0 }
.nav-toggle.open span:nth-child(3){ transform: translateY(-10px) rotate(-45deg) }
@media (max-width: 1100px){
.nav-toggle{ display: flex }
.nav-cta-group, .nav-logo::after{ display: none }
.nav-links{
position: fixed;
inset: 60px 0 0 0;
background: var(--bg);
flex-direction: column;
align-items: stretch;
padding: 24px var(--gutter);
gap: 0;
overflow-y: auto;
transform: translateX(101%);
transition: transform var(--t-slow) var(--ease);
border-top: 1px solid var(--rule);
}
.nav-links.open{ transform: none }
.nl{ padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px }
.nl.active::after{ display: none }
.drop-menu{
position: static;
transform: none;
background: transparent;
border: 0;
box-shadow: none;
padding: 0 0 8px 14px;
opacity: 1;
visibility: visible;
display: none;
min-width: 0;
}
.nl-drop.open .drop-menu{ display: block }
}
/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-p{
font-family: var(--body);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--bg);
background: var(--accent);
padding: 14px 22px;
border-radius: 1px;
border: 1px solid var(--accent);
display: inline-flex;
align-items: center;
gap: 10px;
transition: background var(--t-base) var(--ease), border-color var(--t-base);
position: relative;
}
.btn-p::after{ content: '→'; transition: transform var(--t-base) var(--ease) }
.btn-p:hover{ background: var(--accent-lo); border-color: var(--accent-lo) }
.btn-p:hover::after{ transform: translateX(3px) }
.btn-g{
font-family: var(--body);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
background: transparent;
padding: 14px 22px;
border-radius: 1px;
border: 1px solid var(--ink-2);
display: inline-flex;
align-items: center;
gap: 10px;
transition: background var(--t-base) var(--ease), color var(--t-base);
}
.btn-g::after{ content: '→'; transition: transform var(--t-base) var(--ease) }
.btn-g:hover{ background: var(--ink); color: var(--bg) }
.btn-g:hover::after{ transform: translateX(3px) }
/* ── SECTIONS — generic ───────────────────────────────────────── */
.sec{
padding: 90px var(--gutter);
border-bottom: 1px solid var(--rule);
position: relative;
}
.sec.alt{ background: var(--bg-2) }
.sec.dark{ background: var(--bg-dark); color: var(--bg); position: relative; overflow: hidden }
.sec.dark2{ background: var(--bg-dark); color: var(--bg); position: relative; overflow: hidden }
.sec .inner{ max-width: var(--maxw); margin: 0 auto }
.eye{
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 26px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.eye::before{
content: '';
width: 24px; height: 2px;
background: var(--accent);
}
.eye.lt{ color: var(--accent-hi) }
.eye.lt::before{ background: var(--accent-hi) }
.stitle{
font-family: var(--display);
font-weight: 700;
font-size: clamp(40px, 5.6vw, 88px);
line-height: 0.92;
letter-spacing: -0.022em;
color: var(--ink);
text-transform: uppercase;
margin-bottom: 28px;
max-width: 22ch;
}
.stitle em{ font-style: normal; color: var(--accent) }
.sec.dark .stitle, .sec.dark2 .stitle{ color: var(--bg) }
.sec.dark .stitle em, .sec.dark2 .stitle em{ color: var(--accent-hi) }
.stitle.lt{ color: var(--bg) }
.stitle.lt em{ color: var(--accent-hi) }
.slead{
font-family: var(--body);
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: var(--ink-2);
max-width: 64ch;
}
.slead strong{ color: var(--ink); font-weight: 600 }
.sec.dark .slead, .sec.dark2 .slead{ color: rgba(255,255,255,0.78) }
.sec.dark .slead strong, .sec.dark2 .slead strong{ color: #ffffff }
.slead.lt{ color: rgba(255,255,255,0.78) }
.slead.lt strong{ color: #ffffff }
.sec-link{
font-family: var(--body);
font-size: 13px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
border-bottom: 1px solid var(--rule);
padding-bottom: 4px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color var(--t-fast), border-color var(--t-fast), gap var(--t-base) var(--ease);
}
.sec-link::after{ content: '→' }
.sec-link:hover{ color: var(--accent); border-color: var(--accent); gap: 12px }
.sec-link.lt{ color: var(--bg); border-color: var(--bg) }
.sec-link.lt:hover{ color: var(--accent-hi); border-color: var(--accent-hi) }
/* ── ATMOSPHERE — drift system on dark sections + CTA ──────────── */
@keyframes bg-drift-a{
0% { transform: translate3d(0, 0, 0) scale(1.10) }
50% { transform: translate3d(-4%, -3%, 0) scale(1.20) }
100% { transform: translate3d(0, 0, 0) scale(1.10) }
}
@keyframes bg-drift-b{
0% { transform: translate3d(0, 0, 0) scale(1.12) }
50% { transform: translate3d(3.5%, 2.5%, 0) scale(1.05) }
100% { transform: translate3d(0, 0, 0) scale(1.12) }
}
@keyframes bg-drift-c{
0% { transform: translate3d(0, 0, 0) scale(1.06) }
50% { transform: translate3d(-3%, 4%, 0) scale(1.18) }
100% { transform: translate3d(0, 0, 0) scale(1.06) }
}
.sec.dark .sec-bg-img,
.sec.dark2 .sec-bg-img,
.cta-sec .sec-bg-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.30;
mix-blend-mode: screen;
pointer-events: none;
z-index: 0;
display: block;
}
/* Atmospheric drift animations disabled sitewide.
Earlier these continuously transformed (scale + translate3d) the
background images on every dark section while the user scrolled.
The motion-vs-scroll-speed differential perceived as "shivering"
text and made long-form reading unpleasant. The static image at
0.30 opacity with mix-blend-mode: screen still delivers the
atmospheric look without the motion cost.
.sec.dark .sec-bg-img,
.sec.dark2 .sec-bg-img{ animation: bg-drift-b 26s ease-in-out infinite }
.cta-sec .sec-bg-img{ animation: bg-drift-c 20s ease-in-out infinite }
*/
.sec.dark::before,
.sec.dark2::before,
.cta-sec::after{
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, rgba(10,14,44,0.55) 70%, var(--bg-dark) 100%);
pointer-events: none;
z-index: 1;
}
.sec.dark .inner,
.sec.dark2 .inner{ position: relative; z-index: 2 }
/* ── FINAL CTA shared baseline ────────────────────────────────── */
.cta-sec{
padding: 130px var(--gutter);
background: var(--bg-dark);
color: var(--bg);
position: relative;
overflow: hidden;
}
.cta-sec::before{
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black, transparent 80%);
pointer-events: none;
}
.cta-sec h2{
font-family: var(--display);
font-weight: 800;
font-size: clamp(48px, 7vw, 120px);
line-height: 0.92;
color: var(--bg);
letter-spacing: -0.025em;
margin: 0 0 28px;
max-width: 22ch;
text-align: left;
text-transform: uppercase;
position: relative;
z-index: 2;
}
.cta-sec h2 em{
font-style: normal;
color: var(--accent-hi);
}
.cta-head{
margin-bottom: 50px;
position: relative;
z-index: 2;
}
.cta-head h2{ margin-bottom: 0 }
.cta-sec p{
font-family: var(--body);
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: rgba(255,255,255,0.78);
max-width: 64ch;
margin: 0 0 40px;
text-align: left;
position: relative;
z-index: 2;
}
.cta-sec p strong{ color: var(--bg); font-weight: 600 }
.cta-sec .inner{ position: relative; z-index: 2 }
/* ── DUAL-PATH CTA CARDS ──────────────────────────────────────── */
.cta-paths{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.10);
position: relative;
z-index: 2;
margin-top: 40px;
}
.path{
background: var(--bg-dark-2);
padding: 44px 36px;
display: flex;
flex-direction: column;
position: relative;
}
.path:hover{ background: rgba(99,91,255,0.12) }
.path-eye{
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-hi);
margin-bottom: 18px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.path-eye::before{
content: '';
width: 22px; height: 2px;
background: var(--accent-hi);
}
.path h3{
font-family: var(--display);
font-weight: 800;
font-size: 36px;
color: var(--bg);
text-transform: uppercase;
letter-spacing: -0.022em;
margin-bottom: 18px;
line-height: 0.95;
}
.path p{
font-family: var(--body);
font-size: 14.5px;
color: rgba(255,255,255,0.78) !important;
line-height: 1.6;
margin: 0 0 28px;
text-align: left !important;
max-width: none;
}
.path-btn{
font-family: var(--body);
font-size: 14px;
font-weight: 500;
letter-spacing: -0.005em;
padding: 13px 22px;
border-radius: 1px;
border: 1px solid;
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
margin-top: auto;
transition: background var(--t-base) var(--ease), color var(--t-base), border-color var(--t-base);
}
.path-btn::after{ content: '→' }
.path-btn.primary{ color: var(--bg); background: var(--accent); border-color: var(--accent) }
.path-btn.primary:hover{ background: var(--accent-lo); border-color: var(--accent-lo) }
.path-btn.ghost{ color: var(--bg); background: transparent; border-color: rgba(255,255,255,0.4) }
.path-btn.ghost:hover{ background: var(--bg); color: var(--ink); border-color: var(--bg) }
@media (max-width: 920px){
.cta-paths{ grid-template-columns: 1fr }
.path{ padding: 32px 24px }
.path h3{ font-size: 28px }
}
.cta-btns{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
position: relative;
z-index: 2;
justify-content: flex-start;
}
.cta-sec .btn-g{
border-color: var(--bg);
color: var(--bg);
}
.cta-sec .btn-g:hover{ background: var(--bg); color: var(--ink) }
/* ── FOOTER (dark) ────────────────────────────────────────────── */
.footer{
padding: 80px var(--gutter) 32px;
background: var(--bg-dark);
color: var(--bg);
border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-grid{
max-width: var(--maxw);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr repeat(5, 1fr);
gap: 40px;
padding-bottom: 50px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.f-logo .f-logo-img{
filter: none;
height: 30px;
width: auto;
}
.f-tag{
font-family: var(--body);
font-size: 13px;
font-weight: 400;
line-height: 1.55;
color: rgba(255,255,255,0.55);
margin-top: 22px;
max-width: 32ch;
}
.fcol h4{
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent-hi);
margin-bottom: 18px;
}
.fcol ul{ list-style: none }
.fcol li{ margin-bottom: 10px }
.fcol a{
font-family: var(--body);
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.78);
transition: color var(--t-fast);
}
.fcol a:hover{ color: var(--accent-hi) }
.f-bottom{
max-width: var(--maxw);
margin: 24px auto 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.f-copy{
font-family: var(--mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.f-social{ display: flex; gap: 14px }
.f-social a{ color: rgba(255,255,255,0.55); transition: color var(--t-fast) }
.f-social a:hover{ color: var(--accent-hi) }
.f-links{ display: flex; gap: 20px }
.f-links a{
font-family: var(--mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
transition: color var(--t-fast);
}
.f-links a:hover{ color: var(--accent-hi) }
@media (max-width: 920px){
.footer-grid{ grid-template-columns: repeat(2, 1fr); gap: 28px }
.f-bottom{ flex-direction: column; align-items: flex-start }
}
/* ── DISCLAIMER (dark, matches dark footer) ──────────────────── */
.disclaimer{
background: var(--bg-dark-2);
border-top: 1px solid rgba(255,255,255,0.06);
padding: 40px var(--gutter);
}
.disclaimer-inner{ max-width: var(--maxw); margin: 0 auto }
.disclaimer-label{
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 14px;
}
.disclaimer p{
font-family: var(--body);
font-size: 11.5px;
font-weight: 400;
line-height: 1.65;
color: rgba(255,255,255,0.5);
margin-bottom: 10px;
}
/* ── MOBILE STICKY CTA ────────────────────────────────────────── */
.mob-cta{
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 99;
background: var(--bg);
border-top: 1px solid var(--rule);
padding: 12px 20px;
align-items: center;
justify-content: space-between;
box-shadow: 0 -10px 30px rgba(0,0,0,0.06);
}
.mob-cta a{
font-family: var(--body);
font-size: 14px;
font-weight: 500;
color: var(--bg);
background: var(--accent);
padding: 11px 18px;
flex: 1;
text-align: center;
border-radius: 1px;
}
.mob-cta-x{
background: transparent;
border: 0;
color: var(--ink-3);
font-size: 22px;
width: 36px; height: 36px;
cursor: pointer;
margin-left: 10px;
}
body.mob-cta-visible{ padding-bottom: 64px }
/* ── LIGHTBOX ────────────────────────────────────────────────── */
.image-lightbox{
position: fixed; inset: 0;
background: rgba(255,255,255,0.96);
z-index: 1000;
display: none;
align-items: center; justify-content: center;
padding: 40px;
backdrop-filter: blur(4px);
}
.image-lightbox.is-open{ display: flex }
.lb-img{ max-width: 95%; max-height: 90vh }
.lb-close{
position: absolute;
top: 24px; right: 24px;
background: var(--bg); border: 1px solid var(--rule);
color: var(--ink); font-size: 22px;
width: 44px; height: 44px;
cursor: pointer;
}
.lb-caption{
position: absolute;
bottom: 24px; left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
font-size: 11px;
letter-spacing: .14em;
color: var(--ink-3);
text-transform: uppercase;
display: none;
}
/* ── CARD HOVER DYNAMICS — visible lift + cobalt shadow ────────── */
/* The selectors below are page-specific but share the same hover
physics. Pages add their own .icp/.tc/.dp/.path/.ref-card/.cti
selectors and inherit lift via the rules below. */
.prob, .icp, .tc, .dp, .ref-card, .cti, .path,
.tk-cmp, .tk-step, .tk-asset, .tk-benefit, .tk-reg, .tk-layer, .tk-fail, .tk-product, .tk-faq-item,
.stage-card, .doc-card, .tier{
transform: none !important;
transition: background var(--t-base) var(--ease),
transform .45s cubic-bezier(.22,1,.36,1),
box-shadow .45s cubic-bezier(.22,1,.36,1),
border-color var(--t-base),
padding-left var(--t-fast) var(--ease) !important;
}
/* Light-bg cards: subtle dark shadow */
.ref-card:hover,
.icp:hover,
.dp:hover,
.prob:hover,
.tk-cmp:hover,
.tk-step:hover,
.tk-asset:hover,
.tk-benefit:hover,
.tk-reg:hover,
.tk-layer:hover,
.tk-fail:hover,
.tk-product:hover,
.stage-card:hover,
.doc-card:hover,
.tier:hover{
transform: translateY(-6px) !important;
box-shadow: 0 18px 40px rgba(10, 14, 44, 0.12);
}
/* Dark-bg cards: cobalt accent shadow */
.tc:hover,
.cti:hover,
.path:hover{
transform: translateY(-6px) !important;
box-shadow: 0 18px 40px rgba(99, 91, 255, 0.28);
}
/* ── HAS-ANIM BASE STATE (main.js adds .has-anim then .in-view) ── */
.has-anim{
opacity: 0;
transform: translateY(10px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.has-anim.in-view{ opacity: 1; transform: none }
/* ══════════════════════════════════════════════════════════════════
HERO — shared dark hero with atmospheric bg image + ribbon
Used on every site page. Pages provide a different `![]()
`
inside the hero, plus their own headline content.
══════════════════════════════════════════════════════════════════ */
.hero{
position: relative;
padding: 0;
overflow: hidden;
/* nav (sticky, ~52px) + hero (incl. ribbon) = 100vh exactly */
min-height: calc(100vh - 52px);
width: 100%;
display: flex;
flex-direction: column;
background: var(--bg-dark);
color: var(--bg);
}
/* atmospheric grid behind text — white hairlines at low opacity */
.hero::before{
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 80px 80px;
background-position: 0 0;
mask-image: linear-gradient(to bottom, transparent, black 8%, black 75%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 75%, transparent);
pointer-events: none;
z-index: 1;
}
/* radial vignette over the bg image, fades edges into the navy */
.hero::after{
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, rgba(10,14,44,0.55) 70%, var(--bg-dark) 100%);
pointer-events: none;
z-index: 1;
}
/* atmospheric hero bg image */
.hero .sec-bg-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.34;
mix-blend-mode: screen;
pointer-events: none;
z-index: 0;
display: block;
/* Same atmospheric drift the homepage uses — pulls the hero image
through a slow scale + translate cycle. Page-specific *-v3.css
files often re-declare this block with the same animation; this
system-level rule is the fallback for pages that don't override
(technology, faq, trust, pricing, compass, case-studies, blog-post). */
animation: bg-drift-a 22s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
.hero .sec-bg-img{ animation: bg-drift-a 60s ease-in-out infinite !important }
}
/* Cobalt ambient glow — slow breathe pulse */
@keyframes glow-breathe{
0%, 100%{ opacity: 0.55; filter: blur(70px) }
50% { opacity: 1; filter: blur(90px) }
}
.hero-glow{
position: absolute;
width: 70vw;
height: 70vw;
max-width: 900px;
max-height: 900px;
top: -10%;
left: 35%;
background:
radial-gradient(circle at 50% 50%,
rgba(99,91,255,0.45) 0%,
rgba(99,91,255,0.20) 30%,
rgba(99,91,255,0.05) 60%,
transparent 80%);
pointer-events: none;
z-index: 1;
animation: glow-breathe 7s ease-in-out infinite;
transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
/* legacy elements that v2 hero used; ignored in v3 markup */
.hero-bg-img{ display: none }
.hero-grid{ display: none }
/* Single-column typographic content area, vertically centered */
.hero-content{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-width: var(--maxw);
width: 100%;
margin: 0 auto;
padding: 80px var(--gutter) 60px;
position: relative;
z-index: 2;
}
/* Full-bleed dark band; inner wrapper aligns with site grid */
.hero-ribbon{
border-top: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.06);
background: var(--bg-dark-2);
position: relative;
z-index: 3;
padding: 0 var(--gutter);
}
.ribbon-inner{
max-width: var(--maxw);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.ribbon-item{
padding: 26px 28px;
border-right: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-direction: column;
gap: 8px;
}
.ribbon-item:last-child{ border-right: 0 }
.ribbon-key{
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.ribbon-val{
font-family: var(--display);
font-weight: 800;
font-size: 36px;
color: var(--bg);
line-height: 1;
letter-spacing: -0.022em;
display: block;
white-space: nowrap;
}
.ribbon-unit{
display: block;
margin-top: 6px;
font-family: var(--mono);
font-weight: 400;
font-size: 10px;
letter-spacing: .12em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
white-space: normal;
}
@media (max-width: 1100px){
.ribbon-inner{ grid-template-columns: repeat(3, 1fr) }
.ribbon-item:nth-child(3n){ border-right: 0 }
.ribbon-item:nth-child(-n+3){ border-bottom: 1px solid rgba(255,255,255,0.08) }
}
@media (max-width: 600px){
.ribbon-inner{ grid-template-columns: repeat(2, 1fr) }
.ribbon-item{ padding: 14px 16px }
.ribbon-item:nth-child(2n){ border-right: 0 }
.ribbon-item:nth-child(2n+1){ border-right: 1px solid rgba(255,255,255,0.08) }
.ribbon-val{ font-size: 22px }
}
.hero-eye{
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-hi);
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.hero-eye::before{
content: '';
width: 24px; height: 2px;
background: var(--accent-hi);
}
.hero h1{
font-family: var(--display);
font-weight: 800;
font-size: clamp(44px, 6.4vw, 116px);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--bg);
font-variation-settings: "wdth" 100;
margin-bottom: 24px;
text-transform: uppercase;
}
.hero h1 .line{ display: block; overflow: hidden }
.hero h1 .line span{
display: inline-block;
transform: translateY(102%);
animation: rise .9s var(--ease) forwards;
}
.hero h1 .line:nth-child(1) span{ animation-delay: .1s }
.hero h1 .line:nth-child(2) span{ animation-delay: .22s }
.hero h1 .line:nth-child(3) span{ animation-delay: .34s }
.hero h1 em{
font-style: normal;
color: var(--accent-hi);
font-variation-settings: "wdth" 100;
}
@keyframes rise{ to { transform: none } }
.hero-sub{
font-family: var(--body);
font-weight: 400;
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.55;
color: rgba(255,255,255,0.78);
max-width: 64ch;
margin-bottom: 32px;
opacity: 0;
animation: fade .5s var(--ease) .2s forwards;
}
.hero-sub strong{ color: var(--bg); font-weight: 600 }
@keyframes fade{ to { opacity: 1 } }
/* Override .btn-g inside hero — needs white border + white text on dark */
.hero .btn-g{
border-color: rgba(255,255,255,0.4);
color: var(--bg);
}
.hero .btn-g:hover{ background: var(--bg); color: var(--ink); border-color: var(--bg) }
.hero-btns{
display: flex;
align-items: center;
gap: 16px;
opacity: 0;
animation: fade .5s var(--ease) .35s forwards;
}
@media (max-width: 1024px){
.hero{ min-height: auto }
.hero-content{ padding: 60px var(--gutter) 50px }
}
/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal{
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* Keep ambient atmosphere alive but slowed */
.sec.dark .sec-bg-img,
.sec.dark2 .sec-bg-img{ animation: bg-drift-b 60s ease-in-out infinite !important }
.cta-sec .sec-bg-img{ animation: bg-drift-c 60s ease-in-out infinite !important }
}
/* ══════════════════════════════════════════════════════════════════
COMPASS LAUNCH — sitewide announcement bar
Mounted by main.js on every page that isn't /compass /contact
/design /og/* /404. Cookie-gated dismiss for 30 days.
══════════════════════════════════════════════════════════════════ */
.compass-bar{
background: var(--ink);
color: var(--bg);
position: relative;
z-index: 110; /* above the sticky nav */
border-bottom: 1px solid #000;
}
.compass-bar-inner{
max-width: var(--maxw);
margin: 0 auto;
padding: 10px var(--gutter);
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
}
.compass-bar-tag{
color: var(--accent-hi);
font-weight: 600;
font-family: var(--mono);
letter-spacing: .14em;
}
.compass-bar-text{
color: rgba(255,255,255,0.85);
font-weight: 400;
}
.compass-bar-cta{
color: var(--bg);
border-bottom: 1px solid rgba(255,255,255,0.4);
text-decoration: none;
padding-bottom: 1px;
letter-spacing: .12em;
white-space: nowrap;
font-weight: 500;
transition: border-color var(--t-fast);
}
.compass-bar-cta:hover{ border-bottom-color: var(--bg) }
.compass-bar-close{
background: transparent;
border: 0;
color: rgba(255,255,255,0.5);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 8px;
margin-left: auto;
transition: color var(--t-fast);
}
.compass-bar-close:hover{ color: var(--bg) }
@media (max-width: 760px){
/* On phones the bar is nav-tag + CTA + close (descriptor hidden).
Use space-between so NEW + TRY IT cluster sit on the left and the
close hugs the right corner without a flex-margin/justify clash. */
.compass-bar-inner{
padding: 6px 14px 6px var(--gutter);
font-size: 10px;
gap: 10px;
justify-content: flex-start;
}
.compass-bar-text{ display: none }
/* Mobile-friendly tap target for the dismiss button (≥ 44×44 effective). */
.compass-bar-close{
font-size: 22px;
padding: 6px 10px;
margin-left: auto;
}
}
@media (prefers-reduced-motion: reduce){
.compass-bar-cta, .compass-bar-close{ transition: none }
}
/* ══════════════════════════════════════════════════════════════════
COMPASS LAUNCH — smart-trigger popup
Centered modal on desktop, bottom-drawer on mobile. Brutalist
sharp edges, solid colors only (no backdrop-filter — would re-
introduce the scroll-shimmer issue we just fixed).
══════════════════════════════════════════════════════════════════ */
.cpx-overlay{
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(10, 14, 44, 0.65);
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
opacity: 0;
transition: opacity .3s var(--ease);
pointer-events: none;
}
.cpx-overlay.is-visible{ opacity: 1; pointer-events: auto }
.cpx-card{
background: var(--bg);
max-width: 540px;
width: 100%;
padding: 48px 44px 40px;
position: relative;
border-top: 4px solid var(--accent);
transform: translateY(20px);
transition: transform .35s cubic-bezier(.22,1,.36,1);
max-height: calc(100vh - 64px);
overflow-y: auto;
}
.cpx-overlay.is-visible .cpx-card{ transform: translateY(0) }
.cpx-close{
position: absolute;
top: 12px;
right: 12px;
background: transparent;
border: 0;
color: var(--ink-3);
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 8px 12px;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--t-fast);
}
.cpx-close:hover{ color: var(--ink) }
.cpx-close:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px }
.cpx-eye{
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.cpx-eye::before{
content: '';
width: 22px;
height: 2px;
background: var(--accent);
}
.cpx-title{
font-family: var(--display);
font-weight: 800;
font-size: clamp(24px, 2.6vw, 30px);
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 18px;
max-width: 22ch;
}
.cpx-desc{
font-family: var(--body);
font-size: 15px;
line-height: 1.6;
color: var(--ink-2);
margin: 0 0 22px;
}
.cpx-desc strong{ color: var(--ink); font-weight: 600 }
.cpx-bullets{
margin: 0 0 28px;
padding: 0;
list-style: none;
border-top: 1px solid var(--rule);
}
.cpx-bullets li{
padding: 11px 0 11px 22px;
position: relative;
font-family: var(--body);
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-2);
border-bottom: 1px solid var(--rule-soft);
}
.cpx-bullets li:last-child{ border-bottom: 0 }
.cpx-bullets li::before{
content: '+';
position: absolute;
left: 0;
top: 11px;
color: var(--accent);
font-family: var(--mono);
font-weight: 600;
font-size: 14px;
}
.cpx-actions{
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.cpx-dismiss{
background: transparent;
border: 0;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
padding: 6px 4px;
border-bottom: 1px solid var(--rule-hard);
transition: color var(--t-fast), border-color var(--t-fast);
}
.cpx-dismiss:hover{ color: var(--ink); border-color: var(--ink) }
body.cpx-open{ overflow: hidden }
/* Mobile — bottom drawer instead of centered modal.
Avoids Google's "intrusive interstitial" penalty by entering
from the bottom and never covering above-the-fold content. */
@media (max-width: 600px){
.cpx-overlay{
align-items: flex-end;
padding: 0;
}
.cpx-card{
max-width: none;
width: 100%;
border-top: 4px solid var(--accent);
padding: 32px 22px 28px;
transform: translateY(100%);
max-height: 88vh;
}
.cpx-overlay.is-visible .cpx-card{ transform: translateY(0) }
.cpx-title{ font-size: 22px }
.cpx-desc{ font-size: 14px }
.cpx-bullets li{ font-size: 13px }
}
@media (prefers-reduced-motion: reduce){
.cpx-overlay, .cpx-card{ transition: none }
.cpx-card{ transform: none }
}