/* ==========================================================================
NAAP — National American Asset Protocol — design system
Dark, gold-accented, editorial-technical.
The mark is a black oil drop in a gold bezel, photographed against an Oval
Office. The system follows it: a near-black ground warmed a few degrees so
gold sits in it rather than on it, gold as the single brand accent, and the
flag reserved for background texture and the hero — never for UI chrome,
which would read as costume rather than as an institution.
========================================================================== */
/* --- tokens --------------------------------------------------------------- */
:root {
/* --- surfaces: black, warmed slightly toward the brass in the logo */
--bg: #0A0908;
--bg-elev: #131110;
--bg-elev-2: #1B1917;
--bg-inset: #070605;
--line: rgba(240, 228, 200, 0.11);
--line-strong: rgba(240, 228, 200, 0.22);
/* Smoked glass: panels are translucent over the ground with a warm cast. */
--glass: rgba(24, 21, 19, 0.62);
--glass-tint: rgba(232, 200, 120, 0.030);
--glass-blur: blur(14px) saturate(120%);
/* --- ink */
--fg: #F2EFE9; /* 17.6:1 on the ground */
--fg-muted: #A9A296; /* 8.0:1 */
--fg-dim: #776F63; /* 3.9:1 — large / non-essential only */
/* --- brand: gold */
--accent: #E3B94C; /* 10.2:1 on the ground */
--accent-2: #F2D98A;
--accent-soft: rgba(227, 185, 76, 0.12);
--gold: #E3B94C;
--accent-line: rgba(227, 185, 76, 0.32);
/* --- flag, for texture and the reserve tiers only */
--flag-red: #B22234;
--flag-blue: #3C3B6E;
/* --- data marks: validated trio (OKLab CVD ΔE 10.6 worst pair, all-pairs) */
--d-live: #22AD7E; /* operational */
--d-build: #DE8A3C; /* in construction */
--d-plan: #8B90F0; /* planning */
/* --- status: reserved scale, always shipped with a label + severity bars */
--ok: #189B7B;
--warn: #C9942B;
--danger: #E0655E;
--btn-fg: #140F06;
--btn-bg: #E3B94C;
--btn-alt-fg: #0A0908;
--btn-alt-bg: #F2EFE9;
--glow: radial-gradient(60% 60% at 70% 30%, rgba(227, 185, 76, 0.10), transparent 70%);
--grid-line: rgba(240, 228, 200, 0.045);
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.5);
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
--maxw: 1400px;
--pad: 40px;
--nav-h: 88px;
--bar-h: 36px;
--sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "Geist Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace;
--ease: cubic-bezier(.16,.84,.44,1);
color-scheme: dark;
}
/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
transition: background-color .35s var(--ease), color .35s var(--ease);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
/* Accent is pure black in this palette, so a solid accent fill would paint
black text on a black band. A wash keeps the ink readable everywhere,
including over card photography. */
::selection { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); }
::-moz-selection { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* --- layout primitives ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: 128px; border-top: 1px solid var(--line); }
.section--flush { border-top: 0; }
.section--tight { padding-block: 88px; }
/* reads as a continuation of the block above rather than a new slab */
.section--attached { border-top: 0; padding-block-start: 20px; }
.rule { height: 1px; background: var(--line); border: 0; }
/* --- type ----------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.03; }
.display {
font-size: clamp(2.85rem, 6.4vw, 5rem);
letter-spacing: -0.042em;
line-height: 0.98;
}
.h2 {
font-size: clamp(2.1rem, 4.1vw, 3.4rem);
letter-spacing: -0.038em;
line-height: 1.02;
}
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.028em; }
.accent {
background: linear-gradient(96deg, var(--accent) 8%, var(--accent-2) 92%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.lede {
font-size: clamp(1rem, 1.25vw, 1.15rem);
color: var(--fg-muted);
line-height: 1.62;
max-width: 62ch;
}
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--fg-dim);
margin-bottom: 20px;
}
.eyebrow::before {
content: ""; width: 26px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--accent), transparent);
}
.eyebrow--plain::before { display: none; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.dim { color: var(--fg-dim); }
.muted { color: var(--fg-muted); }
.section-head { max-width: 780px; margin-bottom: 56px; }
.section-head .lede { margin-top: 22px; }
/* eyebrow only — no heading to hang the 56px gap off */
.section-head--bare { margin-bottom: 28px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }
/* --- badges / pills ------------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 9px;
padding: 7px 15px 7px 13px;
border: 1px solid var(--line);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
font-size: 13px; color: var(--fg-muted);
backdrop-filter: blur(8px);
}
.badge .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
animation: pulse 2.4s var(--ease) infinite;
}
.badge--accent { border-color: var(--accent-line); color: var(--accent-2); background: var(--accent-soft); }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .45; transform: scale(.82); }
}
.chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 13px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--bg-elev);
font-size: 13.5px; color: var(--fg-muted);
transition: border-color .2s, color .2s, background-color .2s, transform .2s;
}
.chip:hover { border-color: var(--line-strong); color: var(--fg); transform: translateY(-1px); }
.chip svg { width: 13px; height: 13px; color: var(--accent); flex: none; }
.tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 9px; border-radius: 6px;
font-family: var(--mono); font-size: 10.5px;
letter-spacing: .07em; text-transform: uppercase;
border: 1px solid var(--line-strong);
background: color-mix(in srgb, var(--bg) 62%, transparent);
backdrop-filter: blur(6px);
color: var(--fg);
/* Long category names ("AI Infrastructure") were wrapping to two lines and
dragging the risk label with them, so one card sat taller than its row. */
white-space: nowrap;
}
/* Risk keeps its full width; the category truncates first if space runs out. */
.pcard__tags > .tag { flex: none; }
.pcard__tagset > .tag:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
/* Card pills run a touch tighter than elsewhere: three of them (New + a long
category + risk) have to share one row over the photo without truncating. */
.pcard__tags .tag { font-size: 10px; padding: 4px 8px; letter-spacing: .05em; }
.pcard__tags { gap: 6px; }
.pcard__tagset { gap: 6px; }
/* Risk is an ordinal status scale. Colour alone never carries it: every tag
ships the word AND a three-step severity meter, so it survives CVD and mono. */
.tag--low { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 42%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.tag--medium { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 42%, transparent); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.tag--high { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); }
/* newest listings — the accent pill is the only solid fill on the card */
.pcard__tagset { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tag--new {
background: var(--accent); border-color: transparent; color: var(--btn-fg);
font-weight: 600; letter-spacing: .12em; flex: none;
}
.meter { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; flex: none; }
.meter i { width: 2.5px; border-radius: 1px; background: currentColor; opacity: .28; }
.meter i:nth-child(1) { height: 4px; }
.meter i:nth-child(2) { height: 6.5px; }
.meter i:nth-child(3) { height: 9px; }
.meter[data-level="1"] i:nth-child(-n+1),
.meter[data-level="2"] i:nth-child(-n+2),
.meter[data-level="3"] i:nth-child(-n+3) { opacity: 1; }
/* --- buttons -------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
height: 46px; padding-inline: 22px;
border-radius: 10px;
font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
border: 1px solid transparent;
transition: transform .18s var(--ease), background-color .2s, border-color .2s, opacity .2s;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }
.btn--primary:hover { opacity: .88; }
.btn--ghost { border-color: var(--line-strong); color: var(--fg); background: color-mix(in srgb, var(--bg-elev) 70%, transparent); }
.btn--ghost:hover { border-color: var(--fg-dim); background: var(--bg-elev-2); }
.btn--bare { color: var(--fg-muted); padding-inline: 6px; }
.btn--bare:hover { color: var(--fg); }
/* only shown once this button is promoted to primary on mobile */
.cta-early__arw { display: none; }
.btn--sm { height: 38px; padding-inline: 15px; font-size: 13.5px; border-radius: 9px; }
.btn--primary .arw, .btn--ghost .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
/* --- cards ---------------------------------------------------------------- */
.card {
position: relative;
border: 1px solid var(--line);
border-radius: var(--r-lg);
/* Tinted glass over the ground rather than a flat panel. The tint sits on
top of the translucent fill so the cast survives whatever is behind it. */
background: linear-gradient(var(--glass-tint), var(--glass-tint)), var(--glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
transition: border-color .25s, background-color .25s, transform .25s var(--ease);
}
.card:hover { border-color: var(--line-strong); }
.card--pad { padding: 26px; }
.card--inset { background: var(--bg-inset); }
/* --- backgrounds ---------------------------------------------------------- */
.bg-grid {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size: 68px 68px;
mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.bg-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--glow); }
/* --- stars and stripes field (token hero) --------------------------------
Two stacked layers, because on a real flag the canton covers the stripes
rather than letting them run behind the stars. ::before draws 13 bands
across the whole section; ::after draws the canton over them on an opaque
ground, so the stripes stop where the star field begins. All of it is brand
gold at low alpha, faded out at the bottom. Background and mask only.
The canton's stars are painted gold inside the data-URI, since a CSS custom
property can't reach inside one — keep them in step with --accent by hand. */
.bg-flag {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
/* Far enough forward that the flag is legible, held back far enough that it
never competes with the type. The scrim below keeps it off the words. */
opacity: .62;
mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.42) 84%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0,0,0,.42) 84%, transparent 100%);
}
.bg-flag::before,
.bg-flag::after { content: ""; position: absolute; }
/* 13 bands — sized to 2/13 of the box, so the count holds at any height */
.bg-flag::before {
inset: 0;
background-image: repeating-linear-gradient(
180deg,
color-mix(in srgb, var(--accent) 15%, transparent) 0 7.6923%,
transparent 7.6923% 15.3846%
);
}
/* the canton sits on the page's own ground, which is what hides the stripes */
.bg-flag::after {
left: 0; top: 0; width: 38%; aspect-ratio: 494 / 353;
background-color: var(--bg);
background-image: url("data:image/svg+xml,");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* The flag runs edge to edge, so the type needs its own ground: a soft ellipse
of the page colour painted back over the field, centred on the headline. The
flag survives as a frame; the words never sit on a star. */
.bg-scrim {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(
ellipse 62% 46% at 50% 33%,
var(--bg) 0%,
color-mix(in srgb, var(--bg) 94%, transparent) 42%,
color-mix(in srgb, var(--bg) 58%, transparent) 66%,
transparent 84%
);
}
@media (max-width: 720px) {
/* a phone hero is far taller than a flag, so the canton widens to stay in
proportion with the stacked headline, and the whole field eases back */
.bg-flag { opacity: .44; }
.bg-flag::after { width: 52%; }
}
.section > .wrap { position: relative; z-index: 1; }
/* ==========================================================================
Announcement bar
========================================================================== */
.announce {
position: relative; z-index: 60;
height: var(--bar-h);
display: flex; align-items: center; justify-content: center; gap: 16px;
background: var(--bg-elev-2);
border-bottom: 1px solid var(--line);
font-size: 13px;
overflow: hidden;
}
.announce__inner { display: flex; align-items: center; gap: 14px; max-width: 100%; padding-inline: 16px; }
.announce__txt { color: var(--fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce svg { width: 14px; height: 14px; color: var(--accent); }
.announce__sep { color: var(--line-strong); }
#countdown { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); letter-spacing: .06em; }
#countdown b { color: var(--fg-muted); font-weight: 400; }
/* ==========================================================================
Nav
========================================================================== */
.nav {
position: sticky; top: 0; z-index: 50;
height: var(--nav-h);
border-bottom: 1px solid transparent;
background: color-mix(in srgb, var(--bg) 72%, transparent);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
transition: border-color .3s, background-color .3s;
}
.nav.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 22px; min-width: 0; }
/* The Tangent lockup: the T set solid in the ink colour, no tile behind it, and
the wordmark tracked wide in caps the way the supplied logo sets it. */
/* The brand is the whole lockup — letters, drop and stars, cut out of the
render — so it is one image and no wordmark is set beside it. It is
height-led: the bar was grown from 66px to 88 to carry it, because under
about 60px the stripes stop reading as stripes and the mark turns to noise.
The shadow is the object's own, faked so the cut-out doesn't read as a
photograph pasted onto the bar. */
.brand { display: flex; align-items: center; flex: none; text-decoration: none; color: var(--fg); }
.brand img {
height: 66px; width: auto; display: block;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55))
drop-shadow(0 0 14px rgba(227, 185, 76, .16));
transition: filter .18s var(--ease);
}
.brand:hover img {
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55))
drop-shadow(0 0 20px rgba(227, 185, 76, .34));
}
.nav__links { display: flex; align-items: center; gap: 2px; flex: none; }
.nav__link {
position: relative; white-space: nowrap;
padding: 8px 10px; border-radius: 8px;
font-size: 14.5px; color: var(--fg-muted);
transition: color .2s, background-color .2s;
}
.nav__link:hover { color: var(--fg); background: var(--bg-elev); }
.nav__link.is-active { color: var(--fg); }
.nav__link.is-active::after {
content: ""; position: absolute; left: 10px; right: 10px; bottom: -19px;
height: 2px; background: var(--fg); border-radius: 2px;
}
.nav__spacer { flex: 1; min-width: 8px; }
.nav__ctx { font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; color: var(--fg-dim); text-transform: uppercase; }
.nav__div { width: 1px; height: 20px; background: var(--line); }
.search {
display: flex; align-items: center; gap: 9px; flex: none;
height: 38px; padding: 0 8px 0 13px; width: 196px;
border: 1px solid var(--line); border-radius: 10px;
background: var(--bg-elev);
color: var(--fg-dim); font-size: 13.5px;
transition: border-color .2s, background-color .2s;
}
.search:hover { border-color: var(--line-strong); background: var(--bg-elev-2); }
.search svg { width: 14px; height: 14px; }
.search span { flex: 1; text-align: left; }
.search kbd {
font-family: var(--mono); font-size: 10.5px; padding: 3px 6px;
border: 1px solid var(--line); border-radius: 5px; background: var(--bg-elev-2); color: var(--fg-dim);
}
.icon-btn {
width: 38px; height: 38px; flex: none;
display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 10px;
background: var(--bg-elev); color: var(--fg-muted);
transition: color .2s, border-color .2s, background-color .2s;
}
.icon-btn:hover { color: var(--fg); border-color: var(--line-strong); background: var(--bg-elev-2); }
.icon-btn svg { width: 16px; height: 16px; }
.nav__burger { display: none; }
/* mobile nav sheet */
.sheet {
position: fixed; inset: 0; z-index: 70;
background: color-mix(in srgb, var(--bg) 96%, transparent);
backdrop-filter: blur(14px);
padding: 24px var(--pad);
display: none; flex-direction: column; gap: 6px;
}
.sheet.is-open { display: flex; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.sheet a { padding: 14px 4px; font-size: 22px; letter-spacing: -0.03em; border-bottom: 1px solid var(--line); }
/* the logo at the top of the sheet is a link too, but it is not a menu row */
.sheet__top .brand { padding: 0; border-bottom: 0; }
.sheet__top .brand img { height: 46px; }
/* ==========================================================================
Command palette
========================================================================== */
.palette {
position: fixed; inset: 0; z-index: 90;
display: none; align-items: flex-start; justify-content: center;
padding-top: 14vh;
background: rgba(0,0,0,.62); backdrop-filter: blur(6px);
}
.palette.is-open { display: flex; }
.palette__box {
width: min(600px, 92vw);
border: 1px solid var(--line-strong); border-radius: var(--r-lg);
background: var(--bg-elev); box-shadow: var(--shadow);
overflow: hidden;
animation: rise .22s var(--ease);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.palette__field { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.palette__field svg { width: 16px; height: 16px; color: var(--fg-dim); }
.palette__field input { flex: 1; font-size: 15.5px; outline: none; }
.palette__field input::placeholder { color: var(--fg-dim); }
.palette__list { max-height: 350px; overflow-y: auto; padding: 8px; }
.palette__item {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 11px 12px; border-radius: 9px; text-align: left;
font-size: 14.5px; color: var(--fg-muted);
}
.palette__item:hover, .palette__item.is-sel { background: var(--bg-elev-2); color: var(--fg); }
.palette__item .k { font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); margin-left: auto; letter-spacing: .1em; text-transform: uppercase; }
.palette__empty { padding: 26px; text-align: center; color: var(--fg-dim); font-size: 14px; }
/* ==========================================================================
Hero
========================================================================== */
/* The hero centres in the space below the nav rather than inheriting
.section's padding — otherwise the two stack and the headline sits low. */
.hero {
position: relative; overflow: hidden; border-top: 0;
padding-block: 0;
display: flex; align-items: center;
min-height: clamp(540px, calc(100svh - var(--nav-h) - var(--bar-h)), 800px);
}
.hero > .wrap { width: 100%; }
/* asymmetric padding biases the block above true centre — optical, not maths */
.hero__inner {
position: relative; z-index: 4; max-width: 720px;
padding-block: clamp(20px, 2.4vw, 34px) clamp(52px, 6.5vw, 104px);
}
.hero .display { margin-top: 26px; }
.hero .lede { margin-top: 28px; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; }
.hero__orb {
position: absolute; z-index: 3;
right: -4%; top: 50%; transform: translateY(-50%);
width: min(660px, 52vw, 86vh); aspect-ratio: 1;
}
.hero__orb canvas { width: 100%; height: 100%; outline: none; display: block; }
.hero__orb canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
/* The circuit field is a rectangle, not an orb, and it fades at the edges so
it reads as a fragment of a much larger board rather than a placed graphic. */
.hero__orb.circuit {
aspect-ratio: 1 / .82;
width: min(760px, 56vw, 88vh);
right: -6%;
/* dissolve toward the headline so the board has no visible left edge */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%),
radial-gradient(120% 115% at 66% 50%, #000 46%, transparent 92%);
mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%),
radial-gradient(120% 115% at 66% 50%, #000 46%, transparent 92%);
-webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero__orb.circuit canvas { cursor: crosshair; }
.globe__tip {
position: absolute; z-index: 4; pointer-events: none; opacity: 0;
transform: translate(-50%, calc(-100% - 16px));
min-width: 196px; padding: 12px 14px;
border: 1px solid var(--line-strong); border-radius: var(--r-md);
/* solid, not glass: it sits directly over dense traces and any bleed-through
makes the numbers hard to read */
background: var(--bg-elev);
box-shadow: var(--shadow);
transition: opacity .14s;
}
.globe__tip.is-on { opacity: 1; }
/* flipped under the pad when there is no room above it */
.globe__tip.is-below { transform: translate(-50%, 18px); }
.globe__tipPhase { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; }
.globe__tip h4 { font-size: 14px; letter-spacing: -0.022em; margin-top: 5px; }
.globe__tip .loc { font-size: 12px; color: var(--fg-dim); margin-top: 2px; }
.globe__tip dl {
display: grid; grid-template-columns: auto auto; gap: 4px 14px;
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
font-family: var(--mono); font-size: 11.5px;
}
.globe__tip dt { color: var(--fg-dim); }
.globe__tip dd { text-align: right; }
.globe__strip {
position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 12px;
pointer-events: none; width: max-content; max-width: 96%;
}
.globe__hint {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 13px; border-radius: 999px;
border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
backdrop-filter: blur(8px);
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--fg-dim);
pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease);
animation: hintIn .6s var(--ease) 1.4s both;
}
.globe__hint.is-gone { opacity: 0; transform: translateY(8px); }
.globe__hintIcon {
width: 12px; height: 12px; border-radius: 50%;
border: 1px solid var(--accent-line); position: relative;
}
.globe__hintIcon::after {
content: ""; position: absolute; inset: 3px; border-radius: 50%;
background: var(--accent); animation: pulse 2.4s var(--ease) infinite;
}
@keyframes hintIn { from { opacity: 0; transform: translateY(8px); } }
.globe__key {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
font-size: 11.5px; color: var(--fg-dim);
}
.globe__key span { display: inline-flex; align-items: center; gap: 7px; }
.globe__key i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
/* ==========================================================================
Stat band
========================================================================== */
.statband { padding-block: 0 96px; border-top: 0; }
.statband__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.statband__note { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); }
.statband__note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); animation: pulse 2.4s var(--ease) infinite; }
.statband__upd { font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim); padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }
.stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; background: var(--bg-elev);
}
.stat { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.stat:nth-child(4n) { border-right: 0; }
.stat:nth-last-child(-n+4) { border-bottom: 0; }
.stat__v { font-family: var(--mono); font-size: clamp(1.5rem, 2.3vw, 1.9rem); font-weight: 500; letter-spacing: -0.03em; }
.stat__l { font-size: 13px; color: var(--fg-dim); margin-top: 5px; }
.stat__d { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 11px; color: var(--ok); }
/* ==========================================================================
Split / compare
========================================================================== */
.split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 34px; align-items: center; }
.split__arrow {
width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-2);
}
.split__arrow svg { width: 18px; height: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; background: var(--bg-elev); }
.panel--unified { background: linear-gradient(155deg, var(--accent-soft), transparent 62%), var(--bg-elev); border-color: var(--accent-line); }
.panel__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 20px; }
.panel--unified .panel__label { color: var(--accent-2); }
.frag { display: flex; flex-direction: column; gap: 8px; }
.frag__row {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 15px; border-radius: 9px;
border: 1px dashed var(--line-strong);
color: var(--fg-muted); font-size: 14px;
}
.frag__row::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-dim); }
.unified { border: 1px solid var(--line); border-radius: var(--r-md); padding: 46px 30px; text-align: center; background: color-mix(in srgb, var(--bg) 40%, transparent); }
.unified__icon {
width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 14px;
display: grid; place-items: center;
background: var(--bg-elev-2); border: 1px solid var(--line-strong); color: var(--accent-2);
}
.unified__icon svg { width: 24px; height: 24px; }
.unified p { color: var(--fg-muted); font-size: 14.5px; margin-top: 12px; max-width: 46ch; margin-inline: auto; }
/* ==========================================================================
Project cards
========================================================================== */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pcard { overflow: hidden; display: flex; flex-direction: column; }
.pcard:hover { transform: translateY(-3px); }
.pcard__media { position: relative; aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--line); }
.pcard__art { position: absolute; inset: 0; }
.pcard__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.pcard:hover .pcard__img { transform: scale(1.035); }
/* real photography gets graded toward the brand before the tint lands on it */
/* The photo grade used to be warm, to sit with an ember palette. The brand is
monochrome now, so the grade is neutral: desaturated toward grey, no sepia. */
.pcard__media.has-photo .pcard__img { filter: saturate(.42) contrast(1.04) brightness(.94); }
.pcard__scrim { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--bg-elev) 92%, transparent), transparent 62%); }
.pcard__tags { position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; gap: 8px; }
/* watermark on cards still waiting on real photography */
.pcard__soon {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
padding: 5px 12px; border-radius: 999px;
border: 1px solid rgba(255, 244, 232, 0.16);
background: rgba(10, 7, 5, 0.34);
backdrop-filter: blur(2px);
font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(237, 234, 230, 0.62);
white-space: nowrap; pointer-events: none;
}
.pcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pcard__title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.pcard__title h3 { font-size: 16.5px; letter-spacing: -0.025em; }
.pcard__title .arw { color: var(--fg-dim); transition: color .2s, transform .2s; width: 15px; height: 15px; flex: none; margin-top: 2px; }
.pcard:hover .arw { color: var(--fg); transform: translate(2px, -2px); }
.pcard__loc { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-dim); margin-top: 4px; }
.pcard__loc svg { width: 12px; height: 12px; }
.fund__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 8px; }
.fund__top b { color: var(--fg); font-weight: 500; }
.fund__track { height: 4px; border-radius: 3px; background: var(--bg-elev-2); border: 1px solid var(--line); overflow: hidden; }
.fund__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width 1.1s var(--ease); }
.pmeta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); margin-top: auto; }
.pmeta__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.pmeta__v { font-family: var(--mono); font-size: 12px; line-height: 1.3; margin-top: 5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pmeta__v svg { width: 12px; height: 12px; color: var(--accent); }
/* ==========================================================================
Category grid
========================================================================== */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-md); }
.cat:hover { transform: translateY(-2px); }
.cat__icon {
width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--fg-muted);
transition: color .2s, border-color .2s;
}
.cat:hover .cat__icon { color: var(--accent-2); border-color: var(--accent-line); }
.cat__icon svg { width: 17px; height: 17px; }
.cat__n { font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; }
.cat__c { font-size: 12.5px; color: var(--fg-dim); margin-top: 2px; font-family: var(--mono); }
/* ==========================================================================
Feature / two-col
========================================================================== */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.two--top { align-items: start; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile { padding: 20px; border-radius: var(--r-md); }
.tile__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-2); margin-bottom: 14px; }
.tile__icon svg { width: 16px; height: 16px; }
.tile h4 { font-size: 14.5px; font-weight: 500; }
.tile p { font-size: 13px; color: var(--fg-dim); margin-top: 5px; }
.listrows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.listrow { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-elev); font-size: 13.5px; color: var(--fg-muted); }
.listrow svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.note {
display: flex; gap: 12px; padding: 17px 19px; margin-top: 22px;
border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--bg-elev); font-size: 13.5px; color: var(--fg-dim); line-height: 1.6;
}
.note b { color: var(--fg); font-weight: 600; }
.note svg { width: 15px; height: 15px; color: var(--fg-muted); flex: none; margin-top: 2px; }
/* --- signal cloud --------------------------------------------------------- */
.cloud { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 900px; margin-inline: auto; }
.cloud--left { justify-content: flex-start; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 620px; margin: 52px auto 0; text-align: center; }
.trio__v { font-family: var(--mono); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em; }
.trio__l { font-size: 12.5px; color: var(--fg-dim); margin-top: 4px; }
/* --- flywheel ------------------------------------------------------------- */
.flywheel { display: flex; flex-direction: column; gap: 0; }
.fw {
display: flex; align-items: center; gap: 16px;
padding: 17px 20px; border: 1px solid var(--line); border-radius: var(--r-md);
background: var(--bg-elev);
transition: border-color .3s, background-color .3s, transform .3s var(--ease);
}
.fw.is-hot { border-color: var(--accent-line); background: linear-gradient(90deg, var(--accent-soft), transparent 70%), var(--bg-elev); transform: translateX(6px); }
.fw__n {
width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
font-family: var(--mono); font-size: 11.5px;
border: 1px solid var(--line-strong); color: var(--fg-dim);
transition: color .3s, border-color .3s, background-color .3s;
}
.fw.is-hot .fw__n { color: #fff; background: var(--accent); border-color: var(--accent); }
.fw__t { font-size: 15px; font-weight: 500; flex: 1; }
.fw__v { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.fw.is-hot .fw__v { color: var(--accent-2); border-color: var(--accent-line); }
.fw__link { height: 18px; width: 1px; background: var(--line); margin-left: 33px; }
/* --- question cards ------------------------------------------------------- */
.qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.q { padding: 26px; border-radius: var(--r-lg); }
.q__n { font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: .1em; }
.q h3 { font-size: 17.5px; margin-top: 14px; line-height: 1.3; letter-spacing: -0.025em; }
.q__proc { display: flex; align-items: center; gap: 11px; margin-top: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--fg-dim); }
.q__proc::before, .q__proc::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); }
/* --- trajectory ----------------------------------------------------------- */
.traj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.traj__c { padding: 26px; border-radius: var(--r-lg); min-height: 250px; display: flex; flex-direction: column; }
.traj__c--now { background: linear-gradient(160deg, var(--accent-soft), transparent 55%), var(--bg-elev); border-color: var(--accent-line); }
.traj__hd { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 22px; }
.traj__c--now .traj__hd { color: var(--accent-2); }
.traj__c h3 { font-size: 22px; }
.traj__bar { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); margin: 16px 0 10px; width: 72%; }
.traj__list { display: flex; flex-direction: column; gap: 9px; }
.traj__list li { list-style: none; display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--fg-muted); }
.traj__list li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; }
.traj__inf { font-size: 44px; line-height: 1; color: var(--accent-2); }
/* --- numbered model grid -------------------------------------------------- */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev); }
.model { padding: 30px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .25s; }
.model:hover { background: var(--bg-elev-2); }
.model:nth-child(3n) { border-right: 0; }
.model:nth-last-child(-n+3) { border-bottom: 0; }
.model__n { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); letter-spacing: .12em; }
.model h3 { font-size: 18px; margin-top: 16px; }
.model p { font-size: 13.5px; color: var(--fg-dim); margin-top: 9px; line-height: 1.55; }
.model__kind { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); padding: 3px 8px; border: 1px solid var(--accent-line); border-radius: 5px; background: var(--accent-soft); }
/* --- fit bars ------------------------------------------------------------- */
.fits { display: flex; flex-direction: column; gap: 14px; }
.fit { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 18px; }
.fit__n { font-size: 14.5px; color: var(--fg-muted); }
.fit__track { height: 6px; border-radius: 4px; background: var(--bg-elev-2); border: 1px solid var(--line); overflow: hidden; }
.fit__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width 1.2s var(--ease); }
.fit__v { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); min-width: 44px; text-align: right; }
.fit__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); margin-top: 8px; }
/* --- final CTA ------------------------------------------------------------ */
.finale { text-align: center; position: relative; overflow: hidden; }
.finale .lede { margin: 26px auto 0; }
.finale__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }
.finale__foot { margin-top: 26px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
/* ==========================================================================
Footer
========================================================================== */
.footer { border-top: 1px solid var(--line); padding-block: 68px 40px; background: var(--bg-elev); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; }
.footer__about p { font-size: 13.5px; color: var(--fg-dim); margin-top: 16px; max-width: 34ch; line-height: 1.6; }
.footer__mail { display: inline-block; margin-top: 16px; font-size: 13.5px; color: var(--fg-muted); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.footer__mail:hover { color: var(--fg); }
.footer__soc { display: flex; gap: 9px; margin-top: 22px; }
.footer__soc a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--fg-dim); transition: color .2s, border-color .2s; }
.footer__soc a:hover { color: var(--fg); border-color: var(--line-strong); }
.footer__soc svg { width: 15px; height: 15px; }
.footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); font-weight: 400; margin-bottom: 18px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { font-size: 13.5px; color: var(--fg-muted); transition: color .2s; }
.footer ul a:hover { color: var(--fg); }
.footer__base { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-dim); }
.footer__disc { max-width: 620px; line-height: 1.6; }
/* ==========================================================================
Sub-page: page header
========================================================================== */
.phead { padding-block: 60px 46px; position: relative; overflow: hidden; }
.phead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.phead h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); letter-spacing: -0.04em; margin-top: 10px; }
.phead .lede { margin-top: 16px; }
.phead__stats { display: flex; gap: 34px; }
.phead__stat .v { font-family: var(--mono); font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -0.03em; }
.phead__stat .l { font-size: 12px; color: var(--fg-dim); margin-top: 3px; }
/* ==========================================================================
Marketplace
========================================================================== */
.mk { display: grid; grid-template-columns: 268px 1fr; gap: 32px; align-items: start; padding-block: 40px 110px; }
.mk__side {
position: sticky; top: calc(var(--nav-h) + 20px);
display: flex; flex-direction: column; gap: 16px;
max-height: calc(100vh - var(--nav-h) - 40px);
overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
padding-right: 4px;
}
.mk__side::-webkit-scrollbar { width: 6px; }
.mk__side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.mk__side::-webkit-scrollbar-track { background: transparent; }
.field {
display: flex; align-items: center; gap: 10px;
height: 44px; padding: 0 14px;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev);
transition: border-color .2s;
}
.field:focus-within { border-color: var(--line-strong); }
.field svg { width: 15px; height: 15px; color: var(--fg-dim); flex: none; }
.field input { flex: 1; font-size: 14px; outline: none; min-width: 0; }
.field input::placeholder { color: var(--fg-dim); }
.filters { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); padding: 18px; }
.filters__hd { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.filters__hd svg { width: 15px; height: 15px; color: var(--fg-muted); }
.filters__hd #reset { margin-left: auto; font-size: 12px; color: var(--fg-dim); }
.filters__hd #reset:hover { color: var(--fg); }
/* the header doubles as a disclosure control once the sidebar stacks */
.filters__tog {
display: flex; align-items: center; gap: 9px;
font: inherit; color: inherit; text-align: left; padding: 0;
cursor: default;
}
.filters__n {
display: inline-grid; place-items: center; min-width: 18px; height: 18px;
padding: 0 5px; border-radius: 999px;
background: var(--accent); color: var(--btn-fg);
font-family: var(--mono); font-size: 10.5px; font-weight: 600;
}
.filters__n[hidden] { display: none; } /* class display would otherwise beat [hidden] */
.filters__chev { display: none; transition: transform .25s var(--ease); }
.fgroup + .fgroup { margin-top: 22px; }
/* --- collapsible filters (stacked layout only) --------------------------- */
@media (max-width: 980px) {
.filters__tog { flex: 1; cursor: pointer; }
.filters__chev { display: block; margin-left: auto; color: var(--fg-dim); }
.filters.is-open .filters__chev { transform: rotate(180deg); }
/* 0fr -> 1fr animates a collapse without hard-coding a height */
.filters__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.filters__inner { overflow: hidden; min-height: 0; }
.filters.is-open .filters__body { grid-template-rows: 1fr; }
/* closed, the panel is just its own header — no rule hanging under it */
.filters__hd { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; transition: padding-bottom .25s var(--ease), margin-bottom .25s var(--ease); }
.filters.is-open .filters__hd { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.filters__body, .filters__hd, .filters__chev { transition: none; }
}
.fgroup__t { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 10px; }
.fopt {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--fg-muted); text-align: left;
transition: background-color .18s, color .18s;
}
.fopt:hover { background: var(--bg-elev-2); color: var(--fg); }
.fopt.is-on { background: var(--bg-elev-2); color: var(--fg); }
.fopt svg { width: 14px; height: 14px; flex: none; opacity: .75; }
.fopt .n { flex: 1; }
.fopt .c { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); }
.fopt .swatch { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mk__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.mk__count { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--fg-dim); }
.mk__count b { font-family: var(--mono); color: var(--fg); font-weight: 500; }
.mk__count svg { width: 15px; height: 15px; }
.select {
height: 40px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 10px;
background: var(--bg-elev); font-size: 13.5px; cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 11px center; background-size: 14px;
}
.select:hover { border-color: var(--line-strong); }
.mk .projects { grid-template-columns: repeat(3, 1fr); }
.empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 70px 24px; text-align: center; color: var(--fg-dim); }
.empty h3 { font-size: 17px; color: var(--fg); margin-bottom: 8px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chips-row .chip { cursor: pointer; }
.chips-row .chip.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-2); }
/* ==========================================================================
Map page
========================================================================== */
.mapwrap { display: grid; grid-template-columns: 268px 1fr; gap: 32px; align-items: start; padding-block: 40px 110px; }
.mapstage {
position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--bg-elev); overflow: hidden;
}
.mapstage svg { width: 100%; height: auto; display: block; }
.map-dot-bg { fill: var(--line-strong); }
.map-outline { fill: none; stroke: var(--line-strong); stroke-width: 1.1; }
.map-mesh { fill: none; stroke: var(--line); stroke-width: .7; }
.marker { cursor: pointer; transition: r .18s var(--ease); }
.marker__halo { opacity: .18; }
.marker.is-dim { opacity: .16; }
.maptip {
position: absolute; z-index: 5; pointer-events: none; opacity: 0;
transform: translate(-50%, calc(-100% - 14px));
border: 1px solid var(--line-strong); border-radius: var(--r-md);
background: color-mix(in srgb, var(--bg) 94%, transparent);
backdrop-filter: blur(10px); box-shadow: var(--shadow);
padding: 13px 15px; min-width: 214px;
transition: opacity .15s;
}
.maptip.is-on { opacity: 1; }
.maptip h4 { font-size: 14px; letter-spacing: -0.02em; }
.maptip .loc { font-size: 12px; color: var(--fg-dim); margin-top: 2px; }
.maptip dl { display: grid; grid-template-columns: auto auto; gap: 5px 14px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; }
.maptip dt { color: var(--fg-dim); }
.maptip dd { text-align: right; }
.maplegend { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--fg-muted); }
.maplegend span { display: inline-flex; align-items: center; gap: 8px; }
.maplegend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.statelist { display: flex; flex-direction: column; gap: 2px; }
.staterow { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--fg-muted); }
.staterow:hover { background: var(--bg-elev-2); color: var(--fg); }
.staterow .n { flex: 1; }
.staterow .bar { width: 54px; height: 4px; border-radius: 3px; background: var(--bg-elev-2); overflow: hidden; }
.staterow .bar i { display: block; height: 100%; background: var(--accent); }
.staterow .c { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); min-width: 20px; text-align: right; }
/* ==========================================================================
Token page
========================================================================== */
.tokenhero {
position: relative; overflow: hidden; text-align: center;
padding-block: 84px 96px;
/* the scene needs room to read as a landscape rather than a band */
min-height: clamp(620px, calc(100svh - var(--nav-h) - var(--bar-h)), 940px);
display: grid; align-items: center;
}
.tokenhero .display { margin-top: 14px; }
/* ==========================================================================
Hero scene — a golden-hour landscape, drawn rather than photographed
--------------------------------------------------------------------------
Seven layers, back to front: sky, sun, clouds, skyline, foreground flag,
vignette, scrim. It is all gradients and two SVG masks, so there is no
photograph to licence, nothing extra to download, and the whole thing
re-colours from the palette tokens at the top of this file.
The two tricks that sell it as a photograph: the foreground flag is blurred,
because a real lens focused on the horizon would not hold it sharp; and the
skyline is a mask rather than a fill, so the silhouette takes its colour
from the page and never looks pasted on.
========================================================================== */
.hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Note the selectors below: the base rule is `.hero-scene > span`, which is one
class plus one type. A bare `.hs__flag` is one class and LOSES to it, so its
inset:0 silently won and every positioned layer snapped back to full-bleed.
The two layers that are placed rather than full-bleed are written as
`.hero-scene > .hs__x` so they outrank it. */
.hero-scene > span { position: absolute; inset: 0; display: block; }
/* --- the photo layer ------------------------------------------------------
Live, and already in token.html. It paints over the drawn scene, so:
* no photo at all -> this layer is transparent, drawn scene shows
* hero.jpg present -> the photo takes over, nothing else to change
* hero-mobile.jpg present -> phones use that instead (see the media
query below); desktop keeps hero.jpg
That fallback is deliberate. A missing file never leaves a blank hero, and
swapping the art is a file drop rather than a code edit.
`background-position` is the knob you will actually use. `cover` fills the
frame and crops the rest, and the desktop frame is wide and short while the
phone frame is tall and narrow — so the same file usually wants a different
focal point in each. The two numbers are across and down: 62% 38% means
"keep the point 62% from the left and 38% from the top in view".
Keep .hs__vignette and .hs__scrim below — they are what hold the headline
readable, and a bright photo needs them more than the drawn scene does. */
.hs__photo {
/* Relative to THIS stylesheet, which lives in assets/ — so the path is
img/hero.jpg, not ../img/hero.jpg. The ../ form resolves to /img/ at the
site root and silently 404s, leaving the drawn scene up and no obvious
clue why the photo "didn't work". */
background-image: url("img/hero.jpg");
background-size: cover;
background-position: 50% 42%;
background-repeat: no-repeat;
}
/* Phones get their own crop if one exists. Two layers are listed: the browser
paints the first on top of the second, and a file that 404s simply paints
nothing — so this is a fallback chain, not a swap.
hero-mobile.jpg present -> phones use it, desktop still uses hero.jpg
hero-mobile.jpg missing -> phones fall through to hero.jpg
both missing -> the drawn scene below shows through
Nothing to edit either way: drop a file in, or don't. */
@media (max-width: 720px) {
.hs__photo {
background-image: url("img/hero-mobile.jpg"), url("img/hero.jpg");
background-size: cover, cover;
background-position: 50% 42%, 62% 38%;
background-repeat: no-repeat, no-repeat;
}
}
/* --- sky: night overhead easing into a lit horizon ----------------------- */
.hs__sky {
background:
linear-gradient(
180deg,
#05080F 0%,
#0C1119 22%,
#241E20 42%,
#4A3222 58%,
#8A5526 72%,
#C2812F 84%,
#E0A647 92%,
#70421C 100%
);
}
/* --- sun: low and right of centre, the one bright thing in the frame ----- */
.hs__sun {
background:
radial-gradient(26% 20% at 67% 68%, rgba(255, 247, 226, 1), rgba(255, 226, 164, .72) 28%, transparent 68%),
radial-gradient(60% 44% at 67% 70%, rgba(255, 196, 104, .52), transparent 70%),
radial-gradient(120% 72% at 67% 76%, rgba(226, 142, 48, .38), transparent 72%);
}
/* --- clouds: lit from below, so the undersides carry the colour ---------- */
.hs__clouds {
opacity: .8;
background:
radial-gradient(38% 9% at 24% 30%, rgba(255, 206, 150, .36), transparent 70%),
radial-gradient(30% 7% at 62% 22%, rgba(255, 224, 182, .30), transparent 70%),
radial-gradient(46% 11% at 82% 42%, rgba(255, 190, 120, .32), transparent 72%),
radial-gradient(34% 8% at 40% 50%, rgba(255, 176, 104, .26), transparent 72%),
radial-gradient(28% 6% at 12% 56%, rgba(255, 198, 140, .22), transparent 72%);
filter: blur(18px);
animation: hsDrift 90s linear infinite alternate;
}
@keyframes hsDrift { from { transform: translate3d(-1.5%, 0, 0); } to { transform: translate3d(1.5%, 0, 0); } }
/* --- skyline: a dome on the horizon, right of the sun -------------------- */
/* A mask, not a fill, so the colour comes from the page underneath. */
.hero-scene > .hs__skyline {
left: auto; right: 4%; width: min(34%, 520px); top: auto; bottom: 13%; height: 30%;
background:
linear-gradient(180deg,
rgba(16, 11, 7, .94) 0%,
rgba(11, 8, 6, .94) 56%,
rgba(11, 8, 6, .62) 84%,
rgba(11, 8, 6, 0) 100%);
filter: blur(.6px);
mask-image: url("data:image/svg+xml,");
-webkit-mask-image: url("data:image/svg+xml,");
mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
/* --- foreground flag: draped bottom-left, and out of focus ---------------
A lens focused on the horizon would not hold something this close sharp.
The blur is what makes it read as depth rather than as a flat graphic —
and it is why the stripes can be plain gradients and still convince. */
.hero-scene > .hs__flag {
left: -12%; right: auto; width: 58%; top: auto; bottom: -14%; height: 62%;
transform: rotate(-8deg);
background:
/* canton */
linear-gradient(180deg, rgba(36, 40, 86, .92), rgba(22, 26, 62, .92)) left 6% top 4% / 42% 46% no-repeat,
/* stripes */
repeating-linear-gradient(
174deg,
rgba(150, 30, 44, .88) 0 5.9%,
rgba(226, 214, 198, .80) 5.9% 11.8%
);
mask-image:
radial-gradient(62% 74% at 36% 64%, #000 30%, rgba(0,0,0,.62) 56%, rgba(0,0,0,.22) 76%, transparent 90%);
-webkit-mask-image:
radial-gradient(62% 74% at 36% 64%, #000 30%, rgba(0,0,0,.62) 56%, rgba(0,0,0,.22) 76%, transparent 90%);
filter: blur(13px) saturate(128%) brightness(.82);
opacity: .92;
}
/* --- vignette: pulls the eye off the corners and into the type ----------- */
.hs__vignette {
background:
radial-gradient(128% 104% at 56% 48%, transparent 44%, rgba(5, 4, 3, .42) 78%, rgba(5, 4, 3, .82) 100%),
linear-gradient(180deg, rgba(10, 9, 8, .62) 0%, transparent 24%);
}
/* --- scrim: the layer that keeps the words readable ---------------------- */
/* Sized to the text column, not the section, so the landscape survives at
the edges while the headline still sits on something near-solid. */
.hs__scrim {
background:
radial-gradient(
ellipse 56% 52% at 50% 46%,
rgba(8, 7, 6, .86) 0%,
rgba(8, 7, 6, .70) 40%,
rgba(8, 7, 6, .34) 68%,
transparent 90%
),
linear-gradient(180deg, transparent 78%, rgba(10, 9, 8, .55) 92%, var(--bg) 100%);
}
@media (prefers-reduced-motion: reduce) { .hs__clouds { animation: none; } }
/* --- legibility over the scene -------------------------------------------
Measured, not guessed: against a flat dark ground --fg-dim cleared 7:1, but
it sits directly on the brightest part of the sun glow here and fell to
1.4:1 on desktop and 1.6:1 on tablet. The caption and the unit labels are
lifted, and the countdown tiles are given a more opaque ground so the glow
stops shining through them. */
.tokenhero .cd__cap {
color: #E2DBCE;
text-shadow: 0 1px 10px rgba(5, 4, 3, .85), 0 1px 2px rgba(5, 4, 3, .7);
}
.tokenhero .cd__u {
background:
linear-gradient(rgba(12, 10, 9, .74), rgba(12, 10, 9, .74)),
linear-gradient(var(--glass-tint), var(--glass-tint)),
var(--glass);
}
.tokenhero .cd__l { color: #A69E90; }
.tokenhero .sovereign { text-shadow: 0 1px 10px rgba(5, 4, 3, .7); }
/* --- the scene on a tall, narrow frame ------------------------------------
A landscape composed for 16:9 all but disappears at 9:19 — the sun ends up
below the fold and the dome runs off the right edge. So the whole scene is
re-staged rather than just scaled: the light comes up the frame, the dome
moves in from the edge and sits higher, and the flag widens to carry the
bottom of the screen the way it carries the left-hand corner on desktop. */
@media (max-width: 720px) {
.hs__sun {
background:
radial-gradient(28% 7% at 62% 47%, rgba(255, 247, 226, 1), rgba(255, 226, 164, .76) 32%, transparent 70%),
radial-gradient(80% 16% at 62% 49%, rgba(255, 196, 104, .58), transparent 72%),
radial-gradient(160% 32% at 62% 56%, rgba(226, 142, 48, .44), transparent 74%);
}
.hs__sky {
background:
linear-gradient(180deg,
#05080F 0%, #0A0E16 14%, #161620 26%,
#2E2119 36%, #5E3C20 44%, #9A632B 50%,
#D0903A 56%, #8A5220 66%, #3E2814 78%,
#1C1209 90%, #120C06 100%);
}
/* The dome is dropped here rather than squeezed. At this width its own
ground line spans the whole screen, so instead of reading as a building
on a horizon it reads as a grey slab across the page — worse than not
having it. Sky, sun and the flag carry the scene on a phone. */
.hero-scene > .hs__skyline { display: none; }
.hero-scene > .hs__flag {
left: -24%; width: 122%; bottom: 2%; height: 34%;
transform: rotate(-5deg);
filter: blur(11px) saturate(130%) brightness(.9);
}
/* Gentler than desktop on purpose: on a phone the type covers most of the
frame, so a scrim strong enough to clear it everywhere would erase the
scene entirely. Contrast is carried by the text's own shadow instead. */
.hs__scrim {
background:
linear-gradient(180deg,
rgba(8, 7, 6, .74) 0%,
rgba(8, 7, 6, .64) 24%,
rgba(8, 7, 6, .40) 42%,
rgba(8, 7, 6, .30) 50%,
rgba(8, 7, 6, .48) 60%,
rgba(8, 7, 6, .50) 72%,
rgba(8, 7, 6, .54) 82%,
rgba(10, 9, 8, .86) 95%,
var(--bg) 100%);
}
.hs__vignette {
background:
radial-gradient(136% 94% at 52% 48%, transparent 62%, rgba(5, 4, 3, .20) 86%, rgba(5, 4, 3, .46) 100%);
}
/* the scene is brighter here, so the words carry their own separation */
.tokenhero .display,
.tokenhero .sovereign,
.tokenhero .lede,
.tokenhero .cd__cap { text-shadow: 0 2px 16px rgba(5, 4, 3, .85), 0 1px 3px rgba(5, 4, 3, .7); }
/* muted grey was chosen against a flat dark ground; over the lit part of
the scene it drops under the contrast floor, so it goes near-white here */
.tokenhero .lede { color: #EFE9DE; }
.tokenhero .sovereign { color: #D8D0C2; }
/* sits on the lit band; measured at 2.8:1 before this */
.tokenhero .cd__cap { color: #F1ECE3; }
/* one step down so "Under One Asset." holds on a single line, as the
mockup sets it, instead of orphaning "Asset." */
.tokenhero .display { font-size: clamp(2.35rem, 8.6vw, 3.1rem); }
}
/* quiet italic line where the badge used to sit */
.sovereign {
font-style: italic;
font-size: 15.5px;
letter-spacing: 0.005em;
color: var(--fg-muted);
}
.tokenhero .lede { margin: 24px auto 0; }
/* --- hero countdown ------------------------------------------------------ */
.cd { display: flex; justify-content: center; gap: 11px; margin-top: 36px; }
/* Tinted glass, same treatment as the cards — the old version leaned on an
ember wash that this palette doesn't have, so the tiles carry an ink ring
and a faint cast instead. */
.cd__u {
display: grid; gap: 6px; justify-items: center;
min-width: 96px; padding: 17px 12px 14px;
border: 1px solid var(--line-strong); border-radius: 14px;
background: linear-gradient(var(--glass-tint), var(--glass-tint)), var(--glass);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 4%, transparent),
0 2px 10px rgba(0, 0, 0, .05);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
.cd__n {
font-family: var(--mono); font-feature-settings: "tnum" 1;
font-size: 35px; line-height: 1; letter-spacing: -0.02em; color: var(--fg);
}
.cd__l {
font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
text-transform: uppercase; color: var(--fg-dim);
}
.cd__live { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.cd__cap { margin-top: 14px; font-size: 12.5px; color: var(--fg-dim); }
@media (max-width: 460px) {
.cd { gap: 8px; }
.cd__u { min-width: 0; flex: 1; padding: 15px 4px 12px; border-radius: 13px; }
.cd__n { font-size: 29px; }
.cd__l { font-size: 9px; letter-spacing: .14em; }
}
.tokenhero .buys { margin-top: 28px; }
/* --- contract-address pill -----------------------------------------------
A quiet monospace row under the buy button. It is deliberately not styled
as a second call to action: the address is reference material for people
who already know what to do with it, and it must not compete with the
Coinbase button sitting above it. `position: relative` anchors .ca__done,
which covers the pill rather than appending a tick beside it. */
.ca {
position: relative;
display: inline-flex; align-items: center; gap: 12px;
max-width: min(560px, 100%);
margin: 18px auto 0;
padding: 11px 18px;
border: 1px solid var(--line-strong); border-radius: 999px;
background: linear-gradient(var(--glass-tint), var(--glass-tint)), var(--glass);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
font-family: var(--mono); font-size: 12.5px; color: var(--fg-muted);
cursor: pointer;
transition: border-color .18s var(--ease), background .18s var(--ease);
}
.ca__a { color: var(--fg-dim); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; flex: none; }
@media (max-width: 620px) {
/* the full address is 44 characters — on a phone it needs the whole row */
.ca { flex-wrap: wrap; justify-content: center; border-radius: var(--r-lg); gap: 6px 10px; }
.ca__v { font-size: 11px; text-align: center; }
}
.ca:hover { border-color: var(--accent); background: var(--accent-soft); }
.ca__k { color: var(--accent); flex: none; }
.ca__v { overflow-wrap: anywhere; text-align: left; }
/* the confirmation replaces the pill's contents instead of adding chrome */
.ca__done {
position: absolute; inset: 0;
display: none; align-items: center; justify-content: center;
border-radius: inherit;
background: var(--bg);
color: var(--d-live);
}
.ca.is-done { border-color: color-mix(in srgb, var(--d-live) 50%, transparent); }
.ca.is-done .ca__done { display: flex; }
/* --- buy-on-wallet buttons ------------------------------------------------ */
.buys { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tokenhero .buys { justify-content: center; }
.buy {
display: inline-flex; align-items: center; gap: 15px;
height: 68px; padding: 0 42px;
border: 1px solid transparent; border-radius: 14px;
font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
white-space: nowrap; text-decoration: none;
transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.buy:hover { transform: translateY(-1px); }
.buy:active { transform: translateY(0); }
.buy svg { width: 31px; height: 31px; flex: none; }
/* brand marks knock out to the button fill, so the mark colour is the button colour */
.buy--coinbase { background: #204EEE; color: #FFFFFF; }
.buy--coinbase svg { color: #FFFFFF; }
/* A green halo lifts the button off the page. On the light ground it needs far
less of it — the same glow that reads as a lift on black reads as a smudge on
white — so the default is restrained and the dark theme keeps the full bloom. */
.buy--coinbase {
box-shadow: 0 0 0 1.5px rgba(28, 176, 122, .48),
0 0 10px rgba(32, 186, 130, .22),
0 8px 26px rgba(32, 78, 238, .18);
}
/* The hero button only — a fuller bloom, layered out to a wide soft halo and
breathing slowly so it reads as light rather than as a drop shadow. Scoped
to .buys so the popup's copy and the sticky bar keep their flat treatment. */
.buys .buy--coinbase {
box-shadow:
0 0 0 1.5px rgba(26, 178, 122, .78),
0 0 12px rgba(34, 198, 138, .50),
0 0 30px rgba(34, 198, 138, .36),
0 0 64px rgba(34, 198, 138, .24),
0 0 110px rgba(34, 198, 138, .14),
0 10px 34px rgba(32, 78, 238, .20);
animation: cbGlow 3.6s ease-in-out infinite;
}
@keyframes cbGlow {
0%, 100% {
box-shadow:
0 0 0 1.5px rgba(26, 178, 122, .70),
0 0 12px rgba(34, 198, 138, .42),
0 0 30px rgba(34, 198, 138, .30),
0 0 64px rgba(34, 198, 138, .18),
0 0 110px rgba(34, 198, 138, .10),
0 10px 34px rgba(32, 78, 238, .20);
}
50% {
box-shadow:
0 0 0 1.5px rgba(26, 178, 122, .88),
0 0 16px rgba(34, 198, 138, .60),
0 0 40px rgba(34, 198, 138, .44),
0 0 84px rgba(34, 198, 138, .30),
0 0 140px rgba(34, 198, 138, .18),
0 10px 34px rgba(32, 78, 238, .22);
}
}
.buys .buy--coinbase:hover {
animation: none;
box-shadow:
0 0 0 1.5px rgba(26, 178, 122, .95),
0 0 18px rgba(34, 198, 138, .68),
0 0 46px rgba(34, 198, 138, .50),
0 0 96px rgba(34, 198, 138, .34),
0 0 150px rgba(34, 198, 138, .20),
0 12px 40px rgba(32, 78, 238, .24);
}
@media (prefers-reduced-motion: reduce) {
.buys .buy--coinbase { animation: none; }
}
.buy--coinbase:hover {
background: #365FF1;
box-shadow: 0 0 0 1.5px rgba(28, 176, 122, .70),
0 0 14px rgba(32, 186, 130, .34),
0 10px 32px rgba(32, 78, 238, .24);
}
/* --- persistent buy bar --------------------------------------------------
Appears only once the page's own buy button has scrolled away, so the two
are never on screen together. Glass over the page, hairline edge, no
drop shadow theatrics — it should read as chrome, not as an ad. */
.sbuy {
position: fixed; z-index: 60;
display: flex; align-items: center; justify-content: flex-end;
opacity: 0; pointer-events: none;
transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.sbuy.is-on { opacity: 1; pointer-events: auto; transform: none; }
.sbuy__btn { height: 44px; padding: 0 20px; font-size: 15px; gap: 10px; border-radius: 12px; }
.sbuy__btn svg { width: 20px; height: 20px; }
/* desktop: a quiet pill clear of the reading column */
@media (min-width: 721px) {
.sbuy { right: 24px; bottom: 24px; transform: translateY(10px); }
}
/* mobile: a full bar, since these pages have no other buy path here */
@media (max-width: 720px) {
.sbuy {
left: 0; right: 0; bottom: 0;
transform: translateY(100%);
padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line);
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: blur(18px) saturate(140%);
}
.sbuy__btn { flex: 1 1 auto; justify-content: center; }
/* reserve the bar's height so it never covers the last line of the footer */
body { padding-bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) {
.sbuy { transition: opacity .01s; transform: none; }
}
@media (max-width: 460px) {
.buys { flex-direction: column; align-items: stretch; }
.buy { justify-content: center; }
}
/* ==========================================================================
Endorsements page
========================================================================== */
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.logos--duo { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.logos--duo .logo { padding: 34px; gap: 18px; }
.logos--duo .logo p { font-size: 14.5px; }
/* real brand marks: shown as supplied, never restyled beyond scale */
.logo__mark {
width: 56px; height: 56px; flex: none;
display: grid; place-items: center;
}
.logo__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo__mark--invert img { filter: invert(1); }
/* --- visionary leaders ---------------------------------------------------- */
.vls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.vl { padding: 34px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 20px; }
.vl:hover { transform: translateY(-3px); }
.vl__top { display: flex; align-items: center; gap: 18px; }
.vl__ph { width: 62px; height: 62px; border-radius: 15px; overflow: hidden; flex: none; background: var(--bg-elev-2); }
.vl__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl__n { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.vl__r { display: block; margin-top: 5px; font-size: 14px; color: var(--accent); letter-spacing: -0.01em; }
.vl p { font-size: 14.5px; color: var(--fg-muted); line-height: 1.65; }
@media (max-width: 860px) {
.vls, .logos--duo { grid-template-columns: 1fr; }
}
.logo { padding: 28px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 16px; }
.logo:hover { transform: translateY(-3px); }
.logo__top { display: flex; align-items: center; gap: 13px; }
.logo__mk { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 16px; letter-spacing: -0.04em; color: #fff; flex: none; }
.logo__n { font-size: 16.5px; font-weight: 600; letter-spacing: -0.025em; }
.logo__c { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin-top: 2px; }
.logo p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.6; }
.logo__take { font-size: 13px; color: var(--fg-dim); padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.55; }
.logo__take b { color: var(--accent-2); font-weight: 500; }
.quote { padding: 46px; border-radius: var(--r-xl); background: linear-gradient(150deg, var(--accent-soft), transparent 60%), var(--bg-elev); border: 1px solid var(--accent-line); }
.quote p { font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.32; }
.quote footer { margin-top: 24px; font-size: 13.5px; color: var(--fg-dim); font-family: var(--mono); letter-spacing: .06em; }
/* ==========================================================================
Reveal animation
========================================================================== */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
html { scroll-behavior: auto; }
.rv { opacity: 1; transform: none; }
}
/* ==========================================================================
Responsive
========================================================================== */
/* The tracked TANGENT wordmark is ~50px wider than a short one, so the
section label has to leave the bar earlier than it used to. */
@media (max-width: 1520px) {
.nav__ctx, .nav__div { display: none; }
}
/* The brand can't be hidden the way a decorative copy could, so it steps down
with the bar instead. 48px on a phone still holds the letters together. */
@media (max-width: 1360px) { :root { --nav-h: 82px; } .brand img { height: 60px; } }
@media (max-width: 1240px) {
:root { --nav-h: 78px; }
.brand img { height: 56px; }
.nav__inner { gap: 16px; }
}
@media (max-width: 900px) { :root { --nav-h: 72px; } .brand img { height: 50px; } }
@media (max-width: 560px) { :root { --nav-h: 66px; } .brand img { height: 44px; } }
/* Below this the "Search…" label is dropped for room. Keeping the 150px box
and the ⌘K chip after that left an empty rectangle with a stray key badge
floating in it — so the control collapses to a plain icon button instead,
which is what it has actually become. */
@media (max-width: 1280px) {
.search {
width: 38px; padding: 0; justify-content: center; gap: 0;
border-radius: 10px;
}
.search span, .search kbd { display: none; }
.search svg { width: 16px; height: 16px; }
}
/* ---------------------------------------------------------------------------
Acquisition notice — the one thing on the site allowed to arrive on its own.
Gold, not ember, so it never competes with the buy button; bottom-LEFT so it
never overlaps the sticky buy pill on the right. Shown once per visitor.
--------------------------------------------------------------------------- */
.ntf {
position: fixed; z-index: 70;
left: 24px; bottom: 24px; width: min(370px, calc(100vw - 48px));
display: flex; align-items: flex-start; gap: 4px;
padding: 14px 12px 14px 16px;
border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
border-radius: var(--r-lg);
/* Solid, not translucent: it lands over dense body copy on phones and any
bleed-through reads as a rendering fault rather than as depth. */
background: var(--bg-elev);
box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 18px 48px rgba(0,0,0,.5),
0 0 26px color-mix(in srgb, var(--gold) 13%, transparent);
opacity: 0; transform: translateY(12px) scale(.985);
pointer-events: none;
transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.ntf.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ntf__link { display: flex; align-items: flex-start; gap: 11px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.ntf__dot {
flex: none; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent);
}
.ntf__tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ntf__t { font-size: 13.5px; font-weight: 600; color: var(--gold); line-height: 1.3; }
.ntf__s {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em;
color: var(--fg-dim); line-height: 1.45;
}
.ntf__go {
display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
text-transform: uppercase; color: var(--fg);
}
.ntf__go svg { width: 13px; height: 13px; }
.ntf__link:hover .ntf__go { color: var(--gold); }
.ntf__x {
flex: none; width: 26px; height: 26px; margin: -3px -2px 0 0;
display: grid; place-items: center;
border: 0; border-radius: 7px; background: transparent; cursor: pointer;
color: var(--fg-dim); font-size: 17px; line-height: 1;
}
.ntf__x:hover { background: var(--bg); color: var(--fg); }
/* On phones the bottom belongs to the buy bar, so the notice drops in from the
top instead — under the nav, clear of the hero's call to action. */
@media (max-width: 720px) {
.ntf {
left: var(--pad); right: var(--pad); width: auto;
/* The announcement bar scrolls, the nav sticks. The notice appears on
arrival, so it clears both at their unscrolled heights. */
bottom: auto; top: calc(var(--bar-h) + var(--nav-h) + 10px);
transform: translateY(-12px) scale(.985);
}
}
@media (prefers-reduced-motion: reduce) {
.ntf { transition: opacity .2s linear; transform: none; }
}
/* ---------------------------------------------------------------------------
Recently acquired — a single quiet row under the hero. Deliberately has no
fill, no accent bar and no motion: it should read as a footnote to the page,
not as a banner competing with the buy button above it.
--------------------------------------------------------------------------- */
.lt {
display: flex; align-items: center; gap: 28px;
padding: 16px 20px;
border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--bg-elev);
}
.lt__lab {
flex: none;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--fg-dim);
}
.lt__items { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.lt__i {
display: flex; align-items: center; gap: 11px;
text-decoration: none; color: inherit; min-width: 0;
}
.lt__th {
flex: none; width: 52px; height: 34px; border-radius: 6px; overflow: hidden;
border: 1px solid var(--line); background: var(--bg);
}
.lt__th img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.92); }
.lt__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt__n {
font-size: 13.5px; font-weight: 600; color: var(--fg); line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lt__m {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lt__i:hover .lt__n { color: var(--accent); }
.lt__i:hover .lt__th { border-color: var(--line-strong); }
.lt__all {
flex: none; display: inline-flex; align-items: center; gap: 7px;
font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
color: var(--fg-dim); text-decoration: none;
}
.lt__all:hover { color: var(--fg); }
.lt__all .arw { width: 14px; height: 14px; }
@media (max-width: 860px) {
.lt { flex-direction: column; align-items: flex-start; gap: 14px; padding: 15px 16px; }
.lt__items { gap: 14px; flex-direction: column; align-items: flex-start; width: 100%; }
.lt__i { width: 100%; }
.lt__all { align-self: flex-start; }
}
/* The marketplace loses ~365px to the filter rail, so three columns here get
narrower than three columns anywhere else. Below this the card is too tight
for New + a long category + risk on one row, so drop to two early. */
@media (max-width: 1360px) {
.mk .projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1180px) {
:root { --pad: 28px; }
.projects, .mk .projects, .qs, .traj, .models, .logos { grid-template-columns: repeat(2, 1fr); }
.model:nth-child(3n) { border-right: 1px solid var(--line); }
.model:nth-child(2n) { border-right: 0; }
.model:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
.model:nth-last-child(-n+2) { border-bottom: 0; }
.cats { grid-template-columns: repeat(3, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.step:nth-child(2n) { border-right: 0; }
.step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.hero__orb { opacity: .55; right: -20%; }
.globe__key { display: none; }
}
@media (max-width: 980px) {
.nav__links { display: none; }
.nav__burger { display: grid; }
.two { grid-template-columns: 1fr; gap: 40px; }
.split { grid-template-columns: 1fr; gap: 20px; }
.split__arrow { transform: rotate(90deg); margin-inline: auto; }
.mk, .mapwrap { grid-template-columns: 1fr; }
.mk__side { position: static; }
.footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.spec { grid-template-columns: 1fr; gap: 6px; }
.fit { grid-template-columns: 130px 1fr auto; gap: 12px; }
}
@media (max-width: 720px) {
:root { --pad: 20px; }
.section { padding-block: 82px; }
.stats { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(4n) { border-right: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: 0; }
.stat:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.projects, .mk .projects, .qs, .traj, .logos, .cats, .tiles, .steps { grid-template-columns: 1fr; }
.models { grid-template-columns: 1fr; }
.model { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
.model:last-child { border-bottom: 0 !important; }
.step { border-right: 0 !important; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.hero__orb { display: none; }
.announce__txt { font-size: 12px; }
#countdown { display: none; }
.search span, .search kbd { display: none; }
.search { min-width: 0; width: 38px; padding: 0; justify-content: center; }
.nav .btn--primary { display: none; }
.nav__inner { gap: 10px; }
/* The nav's Join Early Access is hidden at this width, so the hero carries it:
it becomes the primary action and Explore marketplace drops to the bottom. */
.hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
.hero__cta .btn { width: 100%; height: 52px; justify-content: center; }
.hero__cta .cta-early {
order: 1;
background: var(--btn-bg); color: var(--btn-fg);
font-weight: 600; padding-inline: 22px;
}
.hero__cta .cta-early:hover { opacity: .88; }
.cta-early__arw { display: block; }
.hero__cta .cta-map { order: 2; }
.hero__cta .cta-market {
order: 3;
background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
border-color: var(--line-strong); color: var(--fg); font-weight: 500;
}
.hero__cta .cta-market:hover { border-color: var(--fg-dim); background: var(--bg-elev-2); opacity: 1; }
.announce svg { display: none; }
.footer__grid { grid-template-columns: 1fr; }
.phead__stats { gap: 22px; }
.quote { padding: 28px; }
.trio { gap: 10px; }
}
/* ==========================================================================
Restored: FAQ accordion, lifecycle steps, spec table and the filter
header button. These rules had gone missing from the stylesheet, which
left the FAQ toggles rendering as full-size plus glyphs and the steps
and spec list unstyled. Colours come from the tokens, so they pick up
the monochrome palette without change.
========================================================================== */
.filters__hd button { margin-left: auto; font-size: 12px; color: var(--fg-dim); }
.filters__hd button:hover { color: var(--fg); }
.step__n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; background: var(--bg-elev-2); border: 1px solid var(--line-strong); color: var(--accent-2); margin-bottom: 18px; }
.step h3 { font-size: 16.5px; }
.step p { font-size: 13.5px; color: var(--fg-dim); margin-top: 8px; line-height: 1.55; }
.specs { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev); }
.spec { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec:last-child { border-bottom: 0; }
.spec dt { color: var(--fg-dim); font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }
.spec dd { color: var(--fg); }
/* the label column is a fixed 240px, which alone is wider than a phone once
the padding is counted — so below the breakpoint the pair simply stacks */
@media (max-width: 720px) {
.spec { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
.spec dt { padding-top: 0; }
}
.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; gap: 18px; width: 100%; padding: 24px 4px; text-align: left; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.faq__q svg { width: 17px; height: 17px; color: var(--fg-dim); margin-left: auto; flex: none; transition: transform .25s var(--ease); }
.faq__i.is-open .faq__q svg { transform: rotate(45deg); color: var(--accent-2); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.faq__a p { padding: 0 4px 24px; color: var(--fg-muted); font-size: 14.5px; line-height: 1.65; max-width: 78ch; }
/* ==========================================================================
Launch dialog
Centred, everything on the centre line. Monochrome: the mark, the rule and
the button are ink, so the only thing that carries weight is scale — the
reference used gold, which this palette does not have.
========================================================================== */
.modal {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center;
padding: 24px;
opacity: 0; pointer-events: none;
transition: opacity .3s var(--ease);
}
.modal.is-on { opacity: 1; pointer-events: auto; }
.modal__scrim {
position: absolute; inset: 0;
background: rgba(8, 9, 10, .52);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.modal__panel {
position: relative;
width: min(470px, 100%);
max-height: calc(100vh - 48px); overflow-y: auto;
padding: 40px 38px 34px;
text-align: center;
border: 1px solid var(--line-strong);
border-radius: var(--r-xl);
background: linear-gradient(var(--glass-tint), var(--glass-tint)), var(--bg-elev);
box-shadow: 0 24px 80px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .10);
transform: translateY(14px) scale(.97);
transition: transform .34s var(--ease);
}
.modal.is-on .modal__panel { transform: none; }
.modal__x {
position: absolute; top: 14px; right: 14px;
width: 34px; height: 34px; display: grid; place-items: center;
border: 0; border-radius: 9px; background: transparent; cursor: pointer;
color: var(--fg-dim);
}
.modal__x svg { width: 18px; height: 18px; }
.modal__x:hover { background: var(--bg-elev-2); color: var(--fg); }
/* The dialog carries the full lockup, so it is width-led here — the panel is
the constraint, not the line height. Alt is empty: the heading underneath
already says what this is. */
.modal__mark { display: block; margin: 0 auto 20px; }
.modal__mark img {
width: min(290px, 100%); height: auto; display: block; margin: 0 auto;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55))
drop-shadow(0 0 30px rgba(227, 185, 76, .16));
}
.modal__eyebrow {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em;
text-transform: uppercase; color: var(--fg-muted);
margin-bottom: 14px;
}
.modal__t {
font-size: clamp(28px, 4.4vw, 34px); font-weight: 600; line-height: 1.12;
letter-spacing: -0.03em; color: var(--fg);
}
.modal__t .accent { color: var(--accent); }
.modal__p {
margin: 14px auto 26px; max-width: 34ch;
font-size: 14.5px; line-height: 1.6; color: var(--fg-muted);
}
/* The same Coinbase button as the page hero, sized to the panel and with the
green halo removed — inside a dialog it has nothing to lift off. */
.modal__cta {
display: flex; width: 100%; height: 60px; padding: 0 24px;
justify-content: center; font-size: 18px;
}
/* The panel scrolls, so an over-wide halo would be clipped at its edges. This
is the hero's glow scaled to the 38px of padding either side of the button —
same colour and falloff, tighter reach, gentler breath. */
.modal__cta.buy--coinbase {
box-shadow:
0 0 0 1.5px rgba(26, 178, 122, .78),
0 0 10px rgba(34, 198, 138, .48),
0 0 24px rgba(34, 198, 138, .34),
0 0 44px rgba(34, 198, 138, .20),
0 8px 26px rgba(32, 78, 238, .18);
animation: cbGlowSm 3.6s ease-in-out infinite;
}
@keyframes cbGlowSm {
0%, 100% {
box-shadow:
0 0 0 1.5px rgba(26, 178, 122, .70),
0 0 10px rgba(34, 198, 138, .40),
0 0 24px rgba(34, 198, 138, .27),
0 0 44px rgba(34, 198, 138, .15),
0 8px 26px rgba(32, 78, 238, .18);
}
50% {
box-shadow:
0 0 0 1.5px rgba(26, 178, 122, .88),
0 0 14px rgba(34, 198, 138, .56),
0 0 32px rgba(34, 198, 138, .40),
0 0 58px rgba(34, 198, 138, .24),
0 8px 26px rgba(32, 78, 238, .20);
}
}
.modal__cta.buy--coinbase:hover {
animation: none;
box-shadow:
0 0 0 1.5px rgba(26, 178, 122, .95),
0 0 16px rgba(34, 198, 138, .64),
0 0 38px rgba(34, 198, 138, .46),
0 0 66px rgba(34, 198, 138, .26),
0 10px 30px rgba(32, 78, 238, .22);
}
@media (prefers-reduced-motion: reduce) {
.modal__cta.buy--coinbase { animation: none; }
}
.modal__cta svg { width: 27px; height: 27px; }
.modal__ca {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; margin-top: 12px; padding: 13px 14px;
border: 1px solid var(--line-strong); border-radius: var(--r-md);
background: transparent; cursor: pointer;
font-family: var(--mono); font-size: 12px;
transition: border-color .2s, background-color .2s;
}
.modal__ca:hover { border-color: var(--fg-dim); background: var(--bg-elev-2); }
.modal__ca-k { color: var(--fg-dim); letter-spacing: .16em; }
.modal__ca-v { color: var(--fg); }
.modal__ca-a { color: var(--fg-dim); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
@media (max-width: 480px) {
.modal { padding: 16px; }
.modal__panel { padding: 34px 22px 26px; border-radius: var(--r-lg); }
.modal__mark img { width: min(240px, 100%); }
.modal__ca { flex-wrap: wrap; gap: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
.modal, .modal__panel { transition: opacity .2s linear; }
.modal__panel { transform: none; }
}
/* The panel is only focusable so the dialog announces itself; it is not a
control, so it should not paint a focus ring. Focus for keyboard users is
still visible on the buttons inside it. */
.modal__panel:focus { outline: none; }
.modal__panel:focus-visible { outline: none; }
/* ==========================================================================
Recently acquired
--------------------------------------------------------------------------
Four photo cards. The photos are 16:9 at 1024px, so the frame is held to
that ratio with aspect-ratio rather than a fixed height — a fixed height
would letterbox on one breakpoint and crop heads off on another.
The grade (saturate/brightness) and the scrim under the tag exist because
these are daylight stock shots dropped onto a near-black page: ungraded
they read as four bright rectangles punched out of the design, and the
white tag text disappears on the lighter ones.
========================================================================== */
.acq {
display: grid; gap: 22px;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) { .acq { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .acq { grid-template-columns: 1fr; gap: 18px; } }
.acq__c {
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: var(--r-lg);
background: linear-gradient(var(--glass-tint), var(--glass-tint)), var(--bg-elev);
overflow: hidden;
transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.acq__c:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.acq__ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.acq__ph img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: saturate(.82) brightness(.78) contrast(1.04);
}
/* a scrim only where the tag sits, so the rest of the photo stays clean */
.acq__ph::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
background: linear-gradient(180deg, transparent, rgba(8, 7, 6, .78));
pointer-events: none;
}
.acq__tag {
position: absolute; left: 12px; bottom: 11px; z-index: 1;
padding: 4px 9px; border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
background: rgba(10, 9, 8, .72);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--accent-2);
}
.acq__b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.acq__b h3 {
font-size: 16.5px; font-weight: 600; line-height: 1.25;
letter-spacing: -0.02em; color: var(--fg);
}
.acq__loc { font-size: 13px; color: var(--fg-muted); margin: -4px 0 0; }
.acq__m {
display: flex; gap: 20px; margin-top: auto; padding-top: 12px;
border-top: 1px solid var(--line);
}
.acq__m dt {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--fg-dim); margin-bottom: 3px;
}
.acq__m dd { margin: 0; font-size: 13px; color: var(--fg); }
/* ==========================================================================
Phone landscape — short viewports
--------------------------------------------------------------------------
A rotated phone is wide but very short: 844x390 is typical. It therefore
misses the (max-width: 720px) phone rules entirely and gets desktop sizing
on a 390px-tall screen. Measured before this block, the token hero came out
828px tall against a 390px viewport — 2.1x the screen — which put the buy
button 340px below the fold on arrival.
So this is keyed on HEIGHT, not width. Everything vertical gets compressed:
the bar, the hero's floor, the headline, the countdown and the gaps. The
scene is re-staged too, because the phone scene above is composed for a
tall frame and this frame is the opposite shape.
========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
:root { --nav-h: 54px; --bar-h: 30px; }
.brand img { height: 38px; }
/* the hero's min-height floor is what was forcing 828px; let the content
size it instead, and tighten the padding around it */
.tokenhero { min-height: 0; padding-block: 16px 28px; }
.tokenhero .display { font-size: clamp(1.75rem, 4.1vw, 2.3rem); margin-top: 6px; }
.sovereign { font-size: 12.5px; }
/* wider measure so the lede holds two lines instead of three — on a 390px
screen the third line is what pushed the buy button off the fold */
.tokenhero .lede {
margin-top: 10px; font-size: 13.5px; line-height: 1.45;
max-width: 78ch;
}
.cd { margin-top: 14px; gap: 8px; }
.cd__u { min-width: 72px; padding: 9px 10px 8px; border-radius: 11px; }
.cd__n { font-size: 24px; }
.cd__l { font-size: 8.5px; letter-spacing: .14em; }
.cd__cap { margin-top: 8px; font-size: 11px; }
.tokenhero .buys { margin-top: 14px; }
.buy { height: 52px; padding: 0 30px; font-size: 16px; gap: 11px; }
.ca { margin-top: 12px; padding: 8px 14px; font-size: 11.5px; }
.finale__cta { margin-top: 12px; }
/* The scene is composed for a tall frame in the phone block above; this
frame is wide and short, so the light comes back down to the horizon and
the dome returns — it reads properly at this aspect. */
.hs__sun {
background:
radial-gradient(26% 20% at 67% 68%, rgba(255, 247, 226, 1), rgba(255, 226, 164, .72) 28%, transparent 68%),
radial-gradient(60% 44% at 67% 70%, rgba(255, 196, 104, .52), transparent 70%),
radial-gradient(120% 72% at 67% 76%, rgba(226, 142, 48, .38), transparent 72%);
}
.hero-scene > .hs__skyline { display: block; right: 4%; width: min(34%, 520px); bottom: 13%; height: 30%; }
.hero-scene > .hs__flag { left: -12%; width: 58%; bottom: -14%; height: 62%; transform: rotate(-8deg); }
.hs__scrim {
background:
radial-gradient(ellipse 58% 56% at 50% 46%,
rgba(8, 7, 6, .86) 0%, rgba(8, 7, 6, .70) 40%, rgba(8, 7, 6, .34) 68%, transparent 90%),
linear-gradient(180deg, transparent 78%, rgba(10, 9, 8, .55) 92%, var(--bg) 100%);
}
/* the acquisitions grid gets its width back — four across fits here */
.acq { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acq__b { padding: 12px 14px 14px; gap: 8px; }
.acq__b h3 { font-size: 14px; }
}