/* ============================================================
V3 — Techleap community v2 content × Direction 3 component style
Sticky sidebar · live feed · timeline spine · glass platform · dark sections
Brand: #f6f6f3 / #0d0c10 / #fd5924 / #9441e9 / Fira Sans
============================================================ */
.v3, .v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }
.v3 {
background: #f6f6f3;
color: #242424;
font-family: 'Fira Sans', system-ui, sans-serif;
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
.v3 a { color: inherit; text-decoration: none; }
.v3 button { font-family: inherit; cursor: pointer; }
/* === Shared archive grid (past events / sessions / trips) === */
.v3-archive-wrap { position: relative; }
.v3-archive {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 4px;
scrollbar-width: none;
padding: 4px 4px 12px;
margin: -4px -4px 12px;
}
.v3-archive::-webkit-scrollbar { display: none; }
.v3-archive-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 14px;
background: #fff;
color: #0d0c10;
text-decoration: none;
border: 1px solid rgba(13,12,16,0.08);
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s;
flex: 0 0 380px;
height: 520px;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.v3-archive-card.has-post:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(13,12,16,0.08);
border-color: rgba(13,12,16,0.16);
}
.v3-archive-card.feature { flex: 0 0 380px; }
/* MEDIA — fixed-height photo region (consistent across all cards) */
.v3-archive-card .media {
position: relative;
height: 220px;
flex: 0 0 220px;
background: #0d0c10;
overflow: hidden;
}
.v3-archive-card.feature .media { height: 220px; flex: 0 0 220px; }
.v3-archive-card .media img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.06) contrast(1.04);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-archive-card.has-post:hover .media img { transform: scale(1.05); }
.v3-archive-card .media::after {
/* subtle bottom darken so the stamp always reads */
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(13,12,16,0) 50%, rgba(13,12,16,0.35) 100%);
pointer-events: none;
}
.v3-archive-card .media .stamp {
position: absolute;
top: 14px;
left: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(13,12,16,0.78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 100px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #f6f6f3;
font-weight: 600;
z-index: 2;
}
.v3-archive-card .media .stamp .dot {
width: 6px; height: 6px; border-radius: 50%; background: #fd5924;
flex: 0 0 auto;
}
.v3-archive-card .media .stamp.violet .dot { background: #b87cf2; }
.v3-archive-card .media .stamp.azure .dot { background: #5a9cff; }
.v3-archive-card .media .stamp.has-place {
align-items: center;
padding: 5px 12px 5px 10px;
max-width: calc(100% - 110px); /* leave room for the Recap badge on the right */
}
.v3-archive-card .media .stamp.has-place .dot { align-self: center; }
.v3-archive-card .media .stamp .stamp-text {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-width: 0;
line-height: 1.15;
}
.v3-archive-card .media .stamp .stamp-date { white-space: nowrap; }
.v3-archive-card .media .stamp .stamp-place {
color: rgba(246, 246, 243, 0.6);
font-weight: 500;
font-size: 9px;
letter-spacing: 0.1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 28ch;
}
.v3-archive-card .media .post-badge {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
background: #fd5924;
color: #fff;
border-radius: 100px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
z-index: 2;
}
.v3-archive-card .media .post-badge svg { display: block; }
/* Upcoming-mode badge: live pulse instead of recap icon */
.v3-archive-card.upcoming .media .post-badge {
background: rgba(13,12,16,0.85);
color: #fff;
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
}
.v3-archive-card.upcoming .media .post-badge .pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: #fd5924;
box-shadow: 0 0 0 3px rgba(253,89,36,0.25);
animation: v3-pulse 2s infinite;
}
/* === Timeline toggle (Cities trips) === */
.v3-tt {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.v3-tt-pill {
position: relative;
display: inline-flex;
padding: 5px;
border-radius: 100px;
background: rgba(13,12,16,0.06);
border: 1px solid rgba(13,12,16,0.08);
box-shadow: inset 0 1px 2px rgba(13,12,16,0.04);
}
.v3-tt-slider {
position: absolute;
top: 5px; bottom: 5px;
left: 5px;
width: calc(50% - 5px);
border-radius: 100px;
background: #0d0c10;
box-shadow:
0 8px 20px rgba(13,12,16,0.18),
0 0 0 1px rgba(13,12,16,0.06);
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease;
z-index: 0;
}
/* Past is now left button (position 0), Upcoming is right button (position 1) */
.v3-tt-slider {
transform: translateX(0); /* default: past active = left */
}
.v3-tt-past .v3-tt-slider {
transform: translateX(0);
background: #0d0c10;
}
.v3-tt-upcoming .v3-tt-slider {
transform: translateX(100%);
background: linear-gradient(135deg, #fd5924 0%, #9441e9 100%);
}
.v3-tt-btn {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(13,12,16,0.55);
border-radius: 100px;
transition: color 0.25s ease;
white-space: nowrap;
}
.v3-tt-btn:hover { color: #0d0c10; }
.v3-tt-btn.active { color: #f6f6f3; }
.v3-tt-past .v3-tt-btn.active { color: #f6f6f3; background: transparent; }
.v3-tt-btn.active:hover { color: #f6f6f3; }
.v3-tt-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
opacity: 0.75;
transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-tt-btn.active .v3-tt-ic { opacity: 1; transform: rotate(-4deg) scale(1.05); }
.v3-tt-btn:not(.active):hover .v3-tt-ic { opacity: 1; }
.v3-tt-l { font-variant: all-small-caps; letter-spacing: 0.04em; font-weight: 700; font-size: 13px; }
.v3-tt-c {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 100px;
background: rgba(13,12,16,0.06);
color: rgba(13,12,16,0.55);
transition: background 0.25s ease, color 0.25s ease;
}
.v3-tt-btn.active .v3-tt-c {
background: rgba(246,246,243,0.18);
color: #f6f6f3;
}
.v3-tt-meta {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(13,12,16,0.55);
}
.v3-tt-meta-line {
flex: 0 0 24px;
height: 1px;
background: rgba(13,12,16,0.2);
}
.v3-tt-meta-text strong {
color: #0d0c10;
font-weight: 700;
}
@media (max-width: 720px) {
.v3-tt { gap: 12px; }
.v3-tt-pill { width: 100%; }
.v3-tt-btn { flex: 1; justify-content: center; padding: 11px 14px; }
.v3-tt-meta-line { display: none; }
}
/* Body — fills remaining height, content flows top-down */
.v3-archive-card .body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 22px 18px;
flex: 1 1 auto;
min-height: 0;
}
.v3-archive-card.feature .body { padding: 20px 22px 18px; gap: 10px; }
.v3-archive-card h4 {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
color: #0d0c10;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.v3-archive-card.feature h4 {
font-size: 18px;
letter-spacing: -0.015em;
-webkit-line-clamp: 2;
}
.v3-archive-card .where {
font-size: 13px;
line-height: 1.5;
color: rgba(13,12,16,0.6);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.v3-archive-card.feature .where {
font-size: 13px;
-webkit-line-clamp: 3;
}
.v3-archive-card .outcomes {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: auto;
}
.v3-archive-card .outcomes span {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(13,12,16,0.6);
padding: 4px 9px;
background: rgba(13,12,16,0.04);
border-radius: 100px;
font-weight: 600;
}
.v3-archive-card .outcomes span.hi {
background: rgba(253,89,36,0.1);
color: #fd5924;
}
.v3-archive-card .foot {
margin-top: 4px;
padding-top: 12px;
border-top: 1px solid rgba(13,12,16,0.08);
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
}
.v3-archive-card.has-post .foot .read {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fd5924;
}
.v3-archive-card.has-post .foot .arr { transition: transform 0.2s; }
.v3-archive-card.has-post:hover .foot .arr { transform: translateX(4px); }
.v3-archive-card.no-post { cursor: default; }
.v3-archive-card.no-post .foot .event { color: rgba(13,12,16,0.35); }
/* Carousel controls */
.v3-archive-controls {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
margin-top: 8px;
border-top: 1px solid rgba(13,12,16,0.08);
}
.v3-archive-controls .left {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(13,12,16,0.55);
}
.v3-archive-controls .left strong { color: #0d0c10; font-weight: 700; }
.v3-archive-controls .right { display: flex; gap: 8px; align-items: center; }
.v3-archive-controls .right .see-all {
font-size: 13.5px; font-weight: 600; color: #fd5924;
text-decoration: none; padding-right: 8px;
margin-right: 6px;
border-right: 1px solid rgba(13,12,16,0.15);
}
.v3-archive-controls .right .see-all:hover { color: #0d0c10; }
.v3-archive-controls .arrows { display: flex; gap: 6px; }
.v3-archive-controls .arrows button {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(13,12,16,0.15);
background: #fff;
color: #0d0c10;
cursor: pointer;
font-size: 16px;
font-family: inherit;
display: inline-flex; align-items: center; justify-content: center;
transition: 0.15s;
}
.v3-archive-controls .arrows button:hover:not(:disabled) {
background: #0d0c10; color: #f6f6f3; border-color: #0d0c10;
}
.v3-archive-controls .arrows button:disabled {
opacity: 0.3; cursor: not-allowed;
}
@media (max-width: 880px) {
.v3-archive-card,
.v3-archive-card.feature { flex: 0 0 86%; height: 460px; }
.v3-archive-card .media,
.v3-archive-card.feature .media { height: 180px; flex: 0 0 180px; }
}
/* === Techleap design system graphs (decorative) === */
.tl-graph { display: block; width: 100%; height: auto; }
.tl-graph-connect, .tl-graph-circles {
max-width: 480px;
filter: drop-shadow(0 24px 48px rgba(13,12,16,0.06));
animation: tl-graph-float 14s ease-in-out infinite;
}
.tl-graph-cities {
max-width: 600px;
filter: drop-shadow(0 16px 32px rgba(13,12,16,0.06));
}
@keyframes tl-graph-float {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-10px) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
.tl-graph-connect, .tl-graph-circles { animation: none; }
}
/* Hero placement — sits behind/beside the existing hero aside */
.v3-cn-hero-graph,
.v3-cx-hero-graph {
position: absolute;
pointer-events: none;
z-index: 0;
}
.v3-cn-hero-graph {
top: -40px; right: -80px;
width: 540px; opacity: 0.55;
}
.v3-cx-hero-graph {
top: -20px; right: -60px;
width: 460px; opacity: 0.5;
}
/* Inline section graph — Cities page (uses v3-pp template) */
.v3-pp-graph {
margin-top: 16px;
padding: 32px;
background: #fff;
border: 1px solid rgba(13,12,16,0.08);
border-radius: 14px;
}
.v3-pp-graph .tl-graph { margin: 0 auto; }
.v3-pp-graph-label {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(13,12,16,0.5);
margin-bottom: 18px;
display: flex; justify-content: space-between;
}
.v3-pp-graph-label strong { color: #fd5924; font-weight: 600; }
.v3-rot {
position: relative;
display: inline-block;
vertical-align: baseline;
color: #9441e9;
font-style: italic;
font-weight: 600;
font-size: 1em;
perspective: 800px;
/* Mask the over-/under-shoot during transit, but leave room for descenders */
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.v3-rot-ghost {
visibility: hidden;
display: inline-block;
white-space: nowrap;
}
.v3-rot-word {
position: absolute;
top: 0;
left: 0;
right: 0;
display: block;
white-space: nowrap;
opacity: 0;
transform: translateY(60%) rotateX(-45deg);
transform-origin: 50% 100% 0;
filter: blur(4px);
transition:
opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
background: linear-gradient(135deg, #9441e9 0%, #fd5924 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.v3-rot-word.in {
opacity: 1;
transform: translateY(0) rotateX(0);
filter: blur(0);
}
.v3-rot-word.out {
opacity: 0;
transform: translateY(-60%) rotateX(45deg);
transform-origin: 50% 0 0;
filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) {
.v3-rot { perspective: none; -webkit-mask-image: none; mask-image: none; }
.v3-rot-word { transition: opacity 0.2s linear; transform: none !important; filter: none !important; }
}
/* Logo images replace the orange-square + text combo */
.v3-topnav-logo img {
display: block;
height: 52px;
width: auto;
}
.v3-footer-brand img {
display: block;
height: 60px;
width: auto;
margin-bottom: 14px;
}
/* === Iridescent cursor sheen — page-wide, very subtle === */
.v3-irid {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.8s ease-out;
background:
radial-gradient(
circle 480px at var(--ix, 50%) var(--iy, 30%),
rgba(253, 89, 36, 0.045) 0%,
rgba(148, 65, 233, 0.035) 35%,
rgba(8, 29, 171, 0.02) 60%,
transparent 78%
);
mix-blend-mode: plus-lighter;
}
.v3-irid.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.v3-irid { display: none; }
}
/* ============================================================
Shared centered page hero (v3-ph-*)
Used on Circles, Cities, Rise (Connect has its own variant).
Variants: violet · azure · orange.
============================================================ */
.v3-ph {
position: relative;
padding: 28px 56px 96px;
overflow: hidden;
background: linear-gradient(180deg, #f6f6f3 0%, #efeee9 100%);
}
.v3-ph.v3-ph-violet { --ph: #9441e9; --ph-glow: rgba(148,65,233,0.04); }
.v3-ph.v3-ph-azure { --ph: #2a6fdb; --ph-glow: rgba(42,111,219,0.04); }
.v3-ph.v3-ph-orange { --ph: #fd5924; --ph-glow: rgba(253,89,36,0.04); }
.v3-ph-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.v3-ph-glow {
position: absolute;
top: -240px; right: -180px;
width: 780px; height: 780px;
border-radius: 50%;
background: radial-gradient(circle, var(--ph-glow), transparent 65%);
filter: blur(40px);
}
.v3-ph-dots {
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(36,36,36,0.08) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 70%);
mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 70%);
}
.v3-ph-bar {
position: relative; z-index: 1;
display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 6px 12px 6px 4px;
margin-bottom: 56px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: 0.08em;
}
.v3-ph-bar .back {
color: #0d0c10; font-weight: 600;
border-bottom: 1px solid rgba(36,36,36,0.2);
padding-bottom: 1px;
text-decoration: none;
transition: 0.15s;
}
.v3-ph-bar .back:hover { border-bottom-color: var(--ph); }
.v3-ph-bar .sep { color: rgba(36,36,36,0.25); }
.v3-ph-bar .kind { color: var(--ph); font-weight: 600; }
.v3-ph-bar .status {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 10px;
background: color-mix(in srgb, var(--ph) 10%, transparent);
color: var(--ph);
font-weight: 600;
border-radius: 100px;
}
.v3-ph-bar .status .pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ph);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ph) 20%, transparent);
}
.v3-ph-grid {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1fr;
justify-items: center; text-align: center;
}
.v3-ph-main {
display: flex;
flex-direction: column;
align-items: center;
max-width: 720px;
padding: 0 24px;
position: relative;
z-index: 1;
}
.v3-ph-h1 {
font-size: clamp(48px, 7.5vw, 104px);
line-height: 0.94;
letter-spacing: -0.04em;
font-weight: 700;
margin: 0 0 28px;
color: #0d0c10;
}
.v3-ph-h1 > span {
display: inline-block;
background: linear-gradient(135deg, var(--ph) 0%, #fd5924 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.v3-ph-h1 em {
display: block;
font-style: italic;
font-weight: 400;
font-size: 0.46em;
line-height: 1.1;
color: rgba(13,12,16,0.55);
margin-top: 18px;
letter-spacing: -0.02em;
-webkit-text-fill-color: rgba(13,12,16,0.55);
}
.v3-ph-h1 em strong { color: #0d0c10; font-weight: 500; }
/* New "tag-line" treatment for the italic kicker — three crisp phrases
separated by dots, wrapping naturally on smaller widths. */
.v3-ph-h1-tag {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 10px 14px;
font-size: 0.42em;
line-height: 1.15;
margin-top: 26px;
letter-spacing: -0.015em;
}
.v3-ph-h1-tag .dot {
color: rgba(13,12,16,0.25);
font-style: normal;
font-weight: 600;
-webkit-text-fill-color: rgba(13,12,16,0.25);
}
.v3-ph-h1-tag > span:not(.dot) {
font-style: italic;
color: rgba(13,12,16,0.7);
}
.v3-ph-h1-tag > span strong {
color: #0d0c10;
font-weight: 600;
font-style: italic;
}
.v3-ph-lede {
font-size: 18px;
line-height: 1.55;
color: rgba(13,12,16,0.7);
max-width: 620px;
margin: 0 auto 32px;
}
.v3-ph-lede strong { color: #0d0c10; font-weight: 600; }
/* Mobile-only intro block — duplicated after .v3-ph in markup on
* Rise/About/Circles/Cities/Rolodex/Release-notes. The lede inside the
* hero is hidden at ≤720px so phones get a punchier hero (bar + h1 +
* CTA only) and the supporting paragraph reads as a normal intro below. */
.v3-ph-intro { display: none; }
@media (max-width: 720px) {
.v3-ph .v3-ph-lede { display: none; }
.v3-ph-intro {
display: block;
padding: 24px 16px 8px;
}
.v3-ph-intro .v3-ph-lede {
display: block;
margin: 0 auto;
max-width: 38ch;
text-align: left;
font-size: 17px;
}
}
.v3-ph-cta {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.v3-ph-cta .primary {
background: #0d0c10;
color: #f6f6f3;
padding: 16px 24px;
border: 0;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
display: inline-flex; align-items: center; gap: 10px;
cursor: pointer; font-family: inherit; text-decoration: none;
transition: 0.2s;
}
.v3-ph-cta .primary:hover { background: var(--ph); }
.v3-ph-cta .secondary {
background: transparent;
color: #0d0c10;
padding: 16px 22px;
border: 1.5px solid rgba(13,12,16,0.15);
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer; font-family: inherit; text-decoration: none;
transition: 0.2s;
}
.v3-ph-cta .secondary:hover { border-color: #0d0c10; background: rgba(13,12,16,0.04); }
/* Floating polaroids */
.v3-ph-polaroids {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.v3-ph-pol {
position: absolute;
width: 180px;
background: #fff;
border: 1px solid rgba(13,12,16,0.06);
border-radius: 6px;
padding: 10px 10px 14px;
box-shadow:
0 20px 48px rgba(13,12,16,0.18),
0 1px 0 rgba(255,255,255,0.6) inset;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-ph-pol img {
width: 100%;
aspect-ratio: 1 / 1.15;
object-fit: cover;
border-radius: 4px;
filter: grayscale(0.15) contrast(1.02);
display: block;
}
.v3-ph-pol .cap { padding: 10px 4px 0; text-align: left; }
.v3-ph-pol .cap .n {
font-size: 12px;
font-weight: 700;
letter-spacing: -0.01em;
color: #0d0c10;
line-height: 1.2;
}
.v3-ph-pol .cap .r {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(13,12,16,0.5);
margin-top: 4px;
}
/* Polaroids — anchored to the outer gutter of the hero, well clear of the centered text column.
left/right %s are measured against the hero box; combined with the ~720px max-width
on .v3-ph-main this guarantees the text never collides with the photos. */
.v3-ph-pol.p-left { top: 56px; left: 1%; transform: rotate(-7deg); }
.v3-ph-pol.p-right { top: 56px; right: 1%; transform: rotate(6deg); }
.v3-ph-pol.p-left-low { bottom: 56px; left: -1%; transform: rotate(5deg); width: 150px; }
.v3-ph-pol.p-right-low { bottom: 56px; right: -1%; transform: rotate(-6deg); width: 150px; }
.v3-ph-pol.p-far-left { top: 220px; left: -4%; transform: rotate(8deg); width: 140px; opacity: 0.92; }
.v3-ph-pol.p-far-right { top: 220px; right: -4%; transform: rotate(-9deg); width: 140px; opacity: 0.92; }
.v3-ph:hover .v3-ph-pol.p-left { transform: rotate(-5deg) translateY(-4px); }
.v3-ph:hover .v3-ph-pol.p-right { transform: rotate(4deg) translateY(-4px); }
.v3-ph:hover .v3-ph-pol.p-left-low { transform: rotate(3deg) translateY(-4px); }
.v3-ph:hover .v3-ph-pol.p-right-low { transform: rotate(-4deg) translateY(-4px); }
.v3-ph:hover .v3-ph-pol.p-far-left { transform: rotate(6deg) translateY(-3px); }
.v3-ph:hover .v3-ph-pol.p-far-right { transform: rotate(-7deg) translateY(-3px); }
@media (max-width: 1200px) {
/* On mid screens the polaroids collapse to two — left & right only — and sit further out */
.v3-ph-pol.p-far-left,
.v3-ph-pol.p-far-right,
.v3-ph-pol.p-left-low,
.v3-ph-pol.p-right-low { display: none; }
.v3-ph-pol.p-left { left: -1%; width: 150px; }
.v3-ph-pol.p-right { right: -1%; width: 150px; }
}
@media (max-width: 960px) {
.v3-ph-pol.p-far-left,
.v3-ph-pol.p-far-right,
.v3-ph-pol.p-left-low,
.v3-ph-pol.p-right-low { display: none; }
}
@media (max-width: 720px) {
.v3-ph-pol { display: none; }
.v3-ph { padding-left: 16px; padding-right: 16px; padding-bottom: 64px; }
}
/* --- Circular-avatar variant of polaroids (used on Circles page) --- */
.v3-circles-page .v3-ph-pol {
width: 132px;
background: transparent;
border: 0;
border-radius: 50%;
padding: 0;
box-shadow: none;
}
.v3-circles-page .v3-ph-pol img {
width: 132px;
height: 132px;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
border: 4px solid #f6f6f3;
box-shadow:
0 18px 36px rgba(13,12,16,0.18),
0 0 0 1px rgba(13,12,16,0.06);
filter: grayscale(0.1) contrast(1.04);
}
.v3-circles-page .v3-ph-pol .cap {
position: absolute;
left: 50%;
bottom: -32px;
transform: translateX(-50%);
text-align: center;
padding: 0;
white-space: nowrap;
opacity: 0;
transition: opacity 0.25s ease;
}
.v3-circles-page .v3-ph-pol:hover .cap { opacity: 1; }
.v3-circles-page .v3-ph-pol .cap .n {
font-size: 11.5px;
font-weight: 700;
}
.v3-circles-page .v3-ph-pol .cap .r {
font-size: 9px;
margin-top: 2px;
}
.v3-circles-page .v3-ph-pol.p-left-low,
.v3-circles-page .v3-ph-pol.p-right-low,
.v3-circles-page .v3-ph-pol.p-far-left,
.v3-circles-page .v3-ph-pol.p-far-right {
width: 110px;
}
.v3-circles-page .v3-ph-pol.p-left-low img,
.v3-circles-page .v3-ph-pol.p-right-low img,
.v3-circles-page .v3-ph-pol.p-far-left img,
.v3-circles-page .v3-ph-pol.p-far-right img {
width: 110px;
height: 110px;
}
/* ===== TOP NAV ===== */
.v3-topnav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(246,246,243,0.85);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid rgba(36,36,36,0.08);
}
.v3-topnav-inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 32px;
align-items: center;
padding: 14px 56px;
width: 100%;
}
gap: 32px;
align-items: center;
padding: 14px 40px;
max-width: 1480px;
margin: 0 auto;
}
.v3-topnav-logo {
display: inline-flex; align-items: baseline; gap: 8px;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
color: #242424;
}
.v3-topnav-logo .mark {
width: 8px; height: 8px;
background: #fd5924;
border-radius: 2px;
display: inline-block;
transform: translateY(1px);
}
.v3-topnav-nav {
display: flex;
gap: 4px;
justify-self: center;
}
.v3-topnav-nav a {
font-size: 13.5px;
font-weight: 500;
color: rgba(36,36,36,0.65);
padding: 8px 14px;
border-radius: 6px;
transition: 0.15s;
cursor: pointer;
}
.v3-topnav-nav a:hover { color: #242424; background: rgba(36,36,36,0.04); }
.v3-topnav-nav a.active { color: #fd5924; font-weight: 600; }
.v3-topnav-actions { display: flex; gap: 8px; align-items: center; }
.v3-topnav-actions .signin {
background: transparent;
color: #242424;
border: 0;
padding: 8px 14px;
font-size: 13.5px; font-weight: 500;
cursor: pointer;
font-family: inherit;
}
.v3-topnav-actions .signin:hover { color: #fd5924; }
.v3-topnav-actions .apply {
background: #0d0c10;
color: #f6f6f3;
border: 0;
padding: 9px 16px;
border-radius: 7px;
font-size: 13px; font-weight: 600;
cursor: pointer;
font-family: inherit;
display: inline-flex; align-items: center; gap: 6px;
transition: 0.15s;
}
.v3-topnav-actions .apply:hover { background: #fd5924; }
@keyframes v3-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(253,89,36,0.5); }
50% { box-shadow: 0 0 0 6px rgba(253,89,36,0); }
}
/* === PARTNERS TICKER (homepage bottom) === */
.v3-partners {
padding-top: clamp(56px, 5vw, 80px);
padding-bottom: clamp(56px, 5vw, 80px);
background: #faf9f5;
border-top: 1px solid rgba(13,12,16,0.08);
overflow: hidden;
}
.v3-partners-head {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
margin-bottom: 36px;
}
.v3-partners-head .line {
height: 1px;
background: rgba(13,12,16,0.12);
}
.v3-partners-head .label {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(13,12,16,0.55);
font-weight: 600;
}
.v3-partners-track {
display: flex;
align-items: center;
width: max-content;
animation: v3-partners-marquee 40s linear infinite;
padding-inline: 0 !important;
}
.v3-partners-track .v3-partners-logo { margin-right: 72px; }
.v3-partners:hover .v3-partners-track { animation-play-state: paused; }
.v3-partners-logo {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: rgba(13,12,16,0.4);
white-space: nowrap;
transition: color 0.2s ease;
}
.v3-partners-logo:hover { color: #0d0c10; }
.v3-partners-logo img[src*="discord"] { height: 24px; }
.v3-partners-logo img[src*="google"] { height: 24px; }
.v3-partners-logo img {
height: 20px;
width: auto;
display: block;
}
@keyframes v3-partners-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.v3-partners-track { animation: none; flex-wrap: wrap; justify-content: center; }
}
/* ===== MAIN ===== */
.v3-main { display: flex; flex-direction: column; min-width: 0; width: 100%; }
/* Responsive content gutter: floor at 80px on small screens, grow with viewport
so content holds ~1320px max while backgrounds stay full-bleed. */
.v3-hero,
.v3-rx-hero,
.v3-cn-hero,
.v3-cx-hero,
.v3-ph,
.v3-section,
.v3-pivot,
.v3-cta,
.v3-footer,
.v3-operators-head,
.v3-platform-section.dark,
.v3-topnav-inner {
padding-left: max(80px, calc((100% - 1180px) / 2));
padding-right: max(80px, calc((100% - 1180px) / 2));
}
/* Responsive content gutter — placed last so individual section
padding shorthands don't override the inline values.
Excludes nav + footer, which span edge-to-edge. */
.v3-hero,
.v3-rx-hero,
.v3-cn-hero,
.v3-cx-hero,
.v3-ph,
.v3-section,
.v3-pivot,
.v3-cta,
.v3-partners,
.v3-section,
.v3-pivot,
.v3-cta,
.v3-operators-head,
.v3-platform-section.dark {
padding-inline: max(80px, calc((100% - 1180px) / 2)) !important;
}
.v3-operators-track {
padding-inline: max(80px, calc((100% - 1180px) / 2)) !important;
}
/* Full-width nav + footer */
.v3-topnav-inner { padding-inline: 40px !important; }
.v3-footer { padding-inline: 40px !important; }
/* HERO */
.v3-hero {
padding: 24px 56px 96px;
background:
radial-gradient(ellipse 900px 600px at 100% 0%, rgba(253,89,36,0.12), transparent 60%),
linear-gradient(180deg, #f6f6f3 0%, #f0eee9 100%);
border-bottom: 1px solid rgba(36,36,36,0.08);
position: relative;
overflow: hidden;
}
.v3-hero::after {
content: '';
position: absolute; bottom: -200px; left: -200px;
width: 600px; height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(148,65,233,0.08), transparent 60%);
pointer-events: none;
}
.v3-hero > * { position: relative; z-index: 1; }
.v3-hero-bar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(36,36,36,0.55);
margin-bottom: 36px;
font-weight: 500;
}
.v3-hero-bar .now {
display: inline-flex; align-items: center; gap: 8px;
color: #fd5924;
background: rgba(253,89,36,0.08);
padding: 6px 12px;
border-radius: 4px;
}
.v3-hero-bar .now .pulse {
width: 6px; height: 6px; border-radius: 50%; background: #fd5924;
box-shadow: 0 0 0 4px rgba(253,89,36,0.2);
animation: v3-pulse 2s infinite;
}
.v3-hero-bar .sep { color: rgba(36,36,36,0.25); }
.v3-hero-bar strong { color: #242424; font-weight: 600; }
.v3-hero h1 {
font-size: clamp(56px, 8vw, 120px);
line-height: 0.94;
letter-spacing: -0.035em;
font-weight: 700;
margin: 0 0 32px;
color: #242424;
max-width: 1100px;
}
.v3-hero h1 .accent-orange { color: #fd5924; font-style: italic; font-weight: 700; }
.v3-hero h1 em { font-style: italic; font-weight: 700; color: rgba(36,36,36,0.35); }
.v3-hero-aux-rule { display: none; }
.v3-hero h1 em {
font-style: italic;
color: rgba(36,36,36,0.5);
font-weight: 400;
}
.v3-hero h1 .accent-orange {
color: #fd5924;
font-style: italic;
font-weight: 700;
}
.v3-hero h1 .accent-violet {
color: #9441e9;
font-weight: 700;
}
.v3-hero-lede {
font-size: 19px;
line-height: 1.5;
color: rgba(36,36,36,0.7);
max-width: 620px;
margin: 0 0 36px;
}
.v3-hero-lede strong { color: #242424; font-weight: 600; }
.v3-hero-actions {
display: flex; gap: 10px; flex-wrap: wrap;
margin-bottom: 12px;
}
.v3-hero-actions .primary {
background: #0d0c10; color: #f6f6f3;
padding: 14px 24px;
border-radius: 8px;
font-size: 14.5px; font-weight: 600;
display: inline-flex; align-items: center; gap: 8px;
border: 0; transition: 0.2s;
}
.v3-hero-actions .primary:hover { background: #fd5924; }
.v3-hero-actions .secondary {
background: transparent; color: #242424;
padding: 14px 22px;
border: 1.5px solid rgba(36,36,36,0.15);
border-radius: 8px;
font-size: 14.5px; font-weight: 600;
transition: 0.2s;
}
.v3-hero-actions .secondary:hover { border-color: #242424; }
.v3-hero-actions .quiet {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11.5px;
color: rgba(36,36,36,0.5);
letter-spacing: 0.08em;
margin-left: 6px;
align-self: center;
}
.v3-hero-actions .quiet strong { color: #fd5924; font-weight: 600; }
.v3-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding-top: 16px;
border-top: 1px solid rgba(36,36,36,0.08);
}
.v3-hero-stat .n {
font-size: 44px;
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
margin-bottom: 6px;
color: #242424;
}
.v3-hero-stat .n em {
font-style: normal;
background: linear-gradient(135deg, #fd5924, #9441e9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.v3-hero-stat .l {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(36,36,36,0.5);
}
/* === HERO art (right of headline) === */
.v3-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
margin-bottom: 8px;
}
.v3-hero-copy { min-width: 0; }
.v3-hero-art {
position: relative;
min-width: 0;
aspect-ratio: 1 / 0.95;
max-width: 560px;
margin-left: auto;
width: 100%;
}
.v3-hero-art-photo {
position: absolute;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 14px 36px rgba(13,12,16,0.18);
background: #0d0c10;
}
.v3-hero-art-photo img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(0.12) contrast(1.02);
}
.v3-hero-art-photo.p1 {
top: 0; left: 0;
width: 56%; aspect-ratio: 1 / 1.1;
transform: rotate(-3deg);
z-index: 1;
}
.v3-hero-art-photo.p2 {
top: 8%; right: 0;
width: 44%; aspect-ratio: 1 / 1.05;
transform: rotate(4deg);
z-index: 1;
}
.v3-hero-art-photo.p3 {
bottom: 0; right: 14%;
width: 32%; aspect-ratio: 1 / 1.05;
transform: rotate(-5deg);
z-index: 1;
}
.v3-hero-art-card {
position: absolute;
left: 8%; bottom: 4%;
width: 64%;
background: #fff;
border: 1px solid rgba(13,12,16,0.08);
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 24px 56px rgba(13,12,16,0.22);
transform: rotate(-1.5deg);
z-index: 3;
display: flex; flex-direction: column; gap: 14px;
}
.v3-hero-art-card-tag {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fd5924;
font-weight: 600;
}
.v3-hero-art-card-tag .pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: #fd5924;
box-shadow: 0 0 0 4px rgba(253,89,36,0.2);
animation: v3-pulse 2s infinite;
}
.v3-hero-art-card-rows {
display: flex; flex-direction: column;
gap: 0;
border-top: 1px solid rgba(13,12,16,0.08);
border-bottom: 1px solid rgba(13,12,16,0.08);
}
.v3-hero-art-card-rows .row {
display: grid;
grid-template-columns: 8px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 0;
border-top: 1px dashed rgba(13,12,16,0.06);
font-size: 12.5px;
color: rgba(13,12,16,0.65);
line-height: 1.3;
}
.v3-hero-art-card-rows .row:first-child { border-top: 0; }
.v3-hero-art-card-rows .row .dot {
width: 8px; height: 8px; border-radius: 50%;
}
.v3-hero-art-card-rows .row .dot.orange { background: #fd5924; }
.v3-hero-art-card-rows .row .dot.violet { background: #9441e9; }
.v3-hero-art-card-rows .row .dot.azure { background: #081dab; }
.v3-hero-art-card-rows .row .t strong { color: #0d0c10; font-weight: 600; }
.v3-hero-art-card-rows .row .m {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
color: rgba(13,12,16,0.5);
letter-spacing: 0.06em;
}
.v3-hero-art-card-foot {
display: flex; align-items: center; gap: 10px;
}
.v3-hero-art-card-foot .stack { display: flex; }
.v3-hero-art-card-foot .stack img {
width: 22px; height: 22px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
margin-left: -7px;
}
.v3-hero-art-card-foot .stack img:first-child { margin-left: 0; }
.v3-hero-art-card-foot .more {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
color: rgba(13,12,16,0.55);
}
@media (max-width: 1100px) {
.v3-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.v3-hero-art { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 720px) {
/* Hero art on phone: drop the absolute-positioned collage. Show the lead
* photo + live card stacked as ordinary blocks for a calmer mobile read. */
.v3-hero-art {
aspect-ratio: auto;
max-width: none;
margin: 8px 0 0;
display: flex;
flex-wrap: wrap;
gap: 0;
}
.v3-hero-art-photo {
position: relative;
inset: auto;
width: 60%;
aspect-ratio: 4 / 3;
border-radius: 12px;
}
.v3-hero-art-photo.p2 { margin-left: -20%; }
.v3-hero-art-photo.p3 { display: none; }
.v3-hero-art-card { width: 100%; margin-top: 14px; }
.v3-hero-art-card {
position: relative;
inset: auto;
width: 100%;
padding: 18px 18px 16px;
box-shadow: 0 4px 20px rgba(13,12,16,0.06);
}
}
.v3-operators {
padding: 28px 0;
background: #0d0c10;
color: #f6f6f3;
overflow: hidden;
border-bottom: 1px solid rgba(246,246,243,0.06);
}
.v3-operators-head {
display: flex; align-items: center; gap: 16px;
padding: 0 56px 20px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(246,246,243,0.5);
}
.v3-operators-head .line { flex: 1; height: 1px; background: rgba(246,246,243,0.1); }
.v3-operators-track {
display: flex;
align-items: center;
animation: v3-marquee 36s linear infinite;
width: max-content;
padding: 0 56px;
}
.v3-operators-track .logo { display: inline-flex; align-items: center; margin-right: 72px; }
@keyframes v3-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.v3-operators-track .logo {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: rgba(246,246,243,0.7);
white-space: nowrap;
transition: color 0.2s;
}
.v3-operators-track .logo:hover { color: #fd5924; }
.v3-operators-track .logo img {
height: 20px;
width: auto;
display: block;
filter: brightness(0) invert(1);
opacity: 0.7;
transition: opacity 0.2s ease;
}
.v3-operators-track .logo:hover img { opacity: 1; }
.v3-operators-track .logo img[src*="mews"] { height: 11px; }
.v3-operators-track .logo img[src*="polarsteps"] { height: 24px; }
.v3-operators-track .logo img[src*="fourthline"] { height: 17px; }
.v3-operators-track .logo img[src*="hadrian"] { height: 14px; }
.v3-operators-track .logo img[src*="bitvavo"] { height: 14px; }
.v3-operators-track .logo img[src*="carbon-equity"] { height: 26px; }
/* === SECTION shell === */
.v3-section {
padding: 80px 56px;
border-bottom: 1px solid rgba(36,36,36,0.08);
}
/* Homepage: tighter rhythm — less white space between sections */
.v3-home-page .v3-section { padding: 80px 56px; }
.v3-home-page .v3-pivot { padding: 80px 56px; }
.v3-home-page .v3-cta { padding: 88px 56px; }
.v3-home-page .v3-platform-section.dark { padding: 80px 56px; }
.v3-home-page .v3-partners { padding-top: 48px; padding-bottom: 48px; }
.v3-home-page .v3-hero { padding-bottom: 64px; }
.v3-section.dark {
background: #0d0c10;
color: #f6f6f3;
border-bottom-color: rgba(246,246,243,0.06);
}
.v3-section-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: end;
margin-bottom: 56px;
}
.v3-section-num {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fd5924;
margin-bottom: 16px;
font-weight: 500;
}
.v3-section h2 {
font-size: clamp(48px, 6.5vw, 96px);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 700;
margin: 0;
text-wrap: balance;
color: #242424;
max-width: 920px;
}
.v3-section.dark h2 { color: #f6f6f3; }
.v3-section h2 em {
font-style: italic;
color: rgba(36,36,36,0.45);
font-weight: 400;
}
.v3-section.dark h2 em { color: rgba(246,246,243,0.45); }
/* "#problems" sections (Connect's "The problems we're trying to solve.",
* homepage's "Some scaling problems are best solved together.") get a
* slightly larger headline scale than other section h2s — they're the
* page's emphasis moment. Matches the .v3-home-page #problems override
* in index.astro so the two pages render at the same visual weight. */
.v3-section#problems h2 {
font-size: clamp(48px, 6.4vw, 96px);
max-width: 1100px;
}
.v3-section h2 .a-orange { color: #fd5924; }
.v3-section h2 .a-violet { color: #9441e9; }
.v3-section-lede {
font-size: 16px;
line-height: 1.55;
color: rgba(36,36,36,0.65);
max-width: 360px;
margin: 0;
}
.v3-section.dark .v3-section-lede { color: rgba(246,246,243,0.65); }
/* === TWO PROBLEMS === */
.v3-problems {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.v3-problem {
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 16px;
padding: 36px;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
overflow: hidden;
transition: 0.2s;
}
.v3-problem:hover { border-color: #242424; transform: translateY(-2px); }
.v3-problem::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--accent, #fd5924);
}
.v3-problem.conn { --accent: #fd5924; }
.v3-problem.dec { --accent: #9441e9; }
.v3-problem-num {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
.v3-problem h3 {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
color: #242424;
}
.v3-problem h3 em {
font-style: italic;
color: var(--accent);
font-weight: 400;
}
.v3-problem p {
font-size: 15px;
line-height: 1.6;
color: rgba(36,36,36,0.7);
margin: 0;
max-width: 460px;
}
.v3-problem .meta {
display: flex; gap: 16px;
padding-top: 16px;
border-top: 1px dashed rgba(36,36,36,0.15);
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(36,36,36,0.5);
}
.v3-problem .meta strong { color: var(--accent); font-weight: 600; }
/* === THREE PRODUCTS === */
.v3-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(36,36,36,0.08);
border: 1px solid rgba(36,36,36,0.08);
border-radius: 16px;
overflow: hidden;
}
.v3-product {
background: #fff;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: 0.2s;
min-height: 380px;
border: 0;
font-family: inherit;
text-align: left;
color: inherit;
text-decoration: none;
}
.v3-product > *:not(.v3-product-graph) { position: relative; z-index: 1; }
/* Card illustration — Techleap design system graphic elements (Oval/Circle/Stripes).
Treat these as brand accents, not heros. Same optical weight across all three,
soft fade into the card body, no hard divider. */
.v3-product { padding-top: 0; }
.v3-product-graph {
position: relative;
z-index: 1;
height: 152px;
width: calc(100% + 64px);
margin: 0 -32px 20px;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* No hard border — let the card itself frame everything */
}
/* Soft brand wash that fades INTO the card body, not a separated band */
.v3-product-graph::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 70% 90% at center 35%,
var(--graph-tint, rgba(36,36,36,0.04)) 0%,
transparent 70%
);
z-index: 0;
}
.v3-product-graph img,
.v3-product-graph svg {
position: relative;
z-index: 1;
height: 88%;
width: auto;
max-width: 80%;
display: block;
object-fit: contain;
object-position: center center;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Per-product tint only — sizing stays uniform */
.v3-product.connect .v3-product-graph {
--graph-tint: rgba(253,89,36,0.07);
padding-top: 20px;
align-items: flex-end;
}
.v3-product.connect .v3-product-graph img {
height: 100%;
max-width: 95%;
}
.v3-product.circles .v3-product-graph {
--graph-tint: rgba(148,65,233,0.08);
padding-top: 20px;
align-items: flex-end;
}
.v3-product.cities .v3-product-graph { --graph-tint: rgba(8,29,171,0.07); }
.v3-product:hover .v3-product-graph img,
.v3-product:hover .v3-product-graph svg {
transform: scale(1.04);
}
@media (max-width: 720px) {
.v3-product-graph { display: none; }
/* === Product cards: tighter, lighter mobile layout === */
.v3-products {
grid-template-columns: 1fr;
gap: 14px;
border-radius: 14px;
background: transparent;
border: 0;
overflow: visible;
}
.v3-product {
padding: 24px 22px 22px;
gap: 12px;
min-height: 0;
border-radius: 14px;
border: 1px solid rgba(36,36,36,0.08);
}
.v3-product .head { gap: 12px; }
.v3-product .head .tag {
font-size: 10px;
letter-spacing: 0.14em;
}
.v3-product .head .price {
font-size: 10px;
letter-spacing: 0.14em;
}
.v3-product h4 {
font-size: 26px;
line-height: 1.04;
margin: 2px 0 0;
}
.v3-product .pitch {
font-size: 14.5px;
line-height: 1.5;
/* Show 4 lines, then ellipsis — keeps every card the same height */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.v3-product .more {
font-size: 14px;
font-weight: 600;
padding-top: 14px;
margin-top: 4px;
border-top: 1px dashed rgba(13,12,16,0.12);
display: inline-flex;
align-items: center;
gap: 8px;
}
.v3-product .more .arr { font-size: 16px; }
}
.v3-product .more .arr {
transition: transform 0.2s;
display: inline-block;
}
.v3-product:hover .more .arr { transform: translateX(4px); }
.v3-product:hover { background: #faf9f5; }
.v3-product.open {
background: linear-gradient(180deg, #faf9f5 0%, #fff 100%);
}
.v3-product.open::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%) translateY(50%) rotate(45deg);
width: 16px; height: 16px;
background: #0d0c10;
z-index: 2;
}
.v3-product.open .more { color: #0d0c10; }
.v3-product .head {
display: flex; justify-content: space-between; align-items: baseline;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.v3-product .head .tag { color: var(--accent, #fd5924); font-weight: 600; }
.v3-product .head .price { color: rgba(36,36,36,0.4); }
.v3-product h4 {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
color: #242424;
}
.v3-product h4 em { font-style: italic; color: var(--accent); font-weight: 400; }
.v3-product .pitch {
font-size: 13.5px;
line-height: 1.55;
color: rgba(36,36,36,0.65);
margin: 0;
flex: 1;
}
.v3-product .stats {
display: flex;
gap: 16px;
padding-top: 16px;
border-top: 1px dashed rgba(36,36,36,0.15);
}
.v3-product .stats > div .n {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
color: #242424;
line-height: 1;
}
.v3-product .stats > div .l {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(36,36,36,0.45);
margin-top: 4px;
}
.v3-product .more {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
margin-top: auto;
}
.v3-product.connect { --accent: #fd5924; }
.v3-product.circles { --accent: #9441e9; }
.v3-product.cities { --accent: #081dab; }
.v3-product.rise { --accent: #fd5924; }
.v3-product.sprint { --accent: #9441e9; }
.v3-product.rise { --accent: #242424; }
/* === Product detail panel (expanded) === */
.v3-product-detail {
background: #0d0c10;
color: #f6f6f3;
border-radius: 16px;
padding: 48px 56px;
margin-top: 24px;
position: relative;
overflow: hidden;
animation: v3-pd-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes v3-pd-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.v3-product-detail::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--pd-accent, #fd5924);
}
.v3-product-detail-connect { --pd-accent: #fd5924; }
.v3-product-detail-circles { --pd-accent: #9441e9; }
.v3-product-detail-cities { --pd-accent: #081dab; }
.v3-product-detail-rise { --pd-accent: #f6f6f3; }
.v3-pd-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
margin-bottom: 24px;
}
.v3-pd-tag {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pd-accent);
font-weight: 600;
margin-bottom: 12px;
}
.v3-pd-head h3 {
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
color: #f6f6f3;
}
.v3-pd-head h3 em {
font-style: italic;
color: rgba(246,246,243,0.55);
font-weight: 400;
}
.v3-pd-close {
background: rgba(246,246,243,0.06);
border: 1px solid rgba(246,246,243,0.12);
color: rgba(246,246,243,0.7);
width: 36px; height: 36px;
border-radius: 50%;
font-size: 20px;
line-height: 1;
cursor: pointer;
font-family: inherit;
transition: 0.15s;
flex-shrink: 0;
}
.v3-pd-close:hover { background: rgba(246,246,243,0.12); color: #f6f6f3; }
.v3-pd-what {
font-size: 16px;
line-height: 1.65;
color: rgba(246,246,243,0.78);
max-width: 820px;
margin: 0 0 36px;
}
.v3-pd-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 48px;
padding-top: 32px;
border-top: 1px solid rgba(246,246,243,0.08);
}
.v3-pd-subhead {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(246,246,243,0.45);
margin-bottom: 16px;
}
.v3-pd-pillars { display: flex; flex-direction: column; }
.v3-pd-pillar {
display: grid;
grid-template-columns: 40px 1fr;
gap: 16px;
padding: 16px 0;
border-top: 1px solid rgba(246,246,243,0.08);
}
.v3-pd-pillar:first-of-type { border-top: 0; padding-top: 4px; }
.v3-pd-pillar-n {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 13px;
color: var(--pd-accent);
font-weight: 500;
letter-spacing: 0.04em;
}
.v3-pd-pillar-k {
font-size: 15px;
font-weight: 600;
color: #f6f6f3;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.v3-pd-pillar-v {
font-size: 13.5px;
line-height: 1.55;
color: rgba(246,246,243,0.65);
}
.v3-pd-side { display: flex; flex-direction: column; gap: 32px; }
.v3-pd-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.v3-pd-list li {
font-size: 13.5px;
line-height: 1.55;
color: rgba(246,246,243,0.78);
padding-left: 18px;
position: relative;
}
.v3-pd-list li::before {
content: '';
position: absolute;
left: 0; top: 9px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--pd-accent);
}
.v3-pd-meta {
display: flex;
flex-direction: column;
background: rgba(246,246,243,0.04);
border: 1px solid rgba(246,246,243,0.08);
border-radius: 10px;
overflow: hidden;
}
.v3-pd-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid rgba(246,246,243,0.06);
}
.v3-pd-meta-row:last-child { border-bottom: 0; }
.v3-pd-meta-row .k {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(246,246,243,0.45);
}
.v3-pd-meta-row .v {
font-size: 13px;
font-weight: 600;
color: #f6f6f3;
text-align: right;
}
@media (max-width: 880px) {
.v3-product-detail { padding: 32px 28px; }
.v3-pd-grid { grid-template-columns: 1fr; gap: 32px; }
.v3-pd-circles { grid-template-columns: 1fr; gap: 32px; }
.v3-pd-facts { grid-template-columns: repeat(2, 1fr); }
.v3-product.open::after { display: none; }
}
/* === Circles roster inside product detail === */
.v3-pd-circles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding-top: 32px;
border-top: 1px solid rgba(246,246,243,0.08);
margin-bottom: 32px;
}
.v3-pd-subhead.leader { color: rgba(184,124,242,0.7); }
.v3-pd-circle-list {
display: flex;
flex-direction: column;
background: rgba(246,246,243,0.03);
border: 1px solid rgba(246,246,243,0.08);
border-radius: 10px;
overflow: hidden;
}
.v3-pd-circle-row {
display: grid;
grid-template-columns: 48px 1fr auto;
gap: 14px;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid rgba(246,246,243,0.06);
cursor: pointer;
transition: 0.15s;
}
.v3-pd-circle-row:last-child { border-bottom: 0; }
.v3-pd-circle-row:hover { background: rgba(246,246,243,0.04); }
.v3-pd-circle-row .code {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 12px;
color: #fd5924;
font-weight: 500;
letter-spacing: 0.04em;
}
.v3-pd-circle-row.leader .code { color: #b87cf2; }
.v3-pd-circle-row .col2 .name {
font-size: 14px;
font-weight: 600;
color: #f6f6f3;
line-height: 1.25;
letter-spacing: -0.005em;
}
.v3-pd-circle-row .col2 .sub {
font-size: 12px;
color: rgba(246,246,243,0.55);
margin-top: 2px;
line-height: 1.4;
}
.v3-pd-circle-row .seat {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(246,246,243,0.45);
white-space: nowrap;
}
.v3-pd-circle-row .seat strong {
color: #f6f6f3;
font-weight: 700;
margin-right: 3px;
}
.v3-pd-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: rgba(246,246,243,0.03);
border: 1px solid rgba(246,246,243,0.08);
border-radius: 10px;
overflow: hidden;
}
.v3-pd-fact {
padding: 16px 18px;
border-right: 1px solid rgba(246,246,243,0.06);
display: flex;
flex-direction: column;
gap: 6px;
}
.v3-pd-fact:last-child { border-right: 0; }
.v3-pd-fact .k {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(246,246,243,0.45);
}
.v3-pd-fact .v {
font-size: 13.5px;
font-weight: 600;
color: #f6f6f3;
line-height: 1.35;
}
/* === TIMELINE — the 60 days === */
.v3-timeline-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; flex-wrap: wrap; gap: 24px; }
.v3-timeline-filters {
display: flex; gap: 4px;
background: rgba(36,36,36,0.04);
border: 1px solid rgba(36,36,36,0.08);
border-radius: 8px;
padding: 3px;
}
.v3-timeline-filters button {
background: transparent;
border: none;
padding: 8px 14px;
font-size: 12.5px; font-weight: 600;
color: rgba(36,36,36,0.55);
border-radius: 6px;
display: inline-flex; align-items: center; gap: 6px;
transition: 0.15s;
font-family: inherit;
}
.v3-timeline-filters button:hover { color: #242424; }
.v3-timeline-filters button.active {
background: #fff;
color: #242424;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.v3-timeline-filters button .swatch {
width: 6px; height: 6px; border-radius: 50%; background: var(--swatch, #fd5924);
}
/* "Recaps" is a content filter, not a category — set it apart with a divider,
an icon and the brand accent so it draws the eye. */
.v3-timeline-filters button[data-filter="recap"] {
position: relative;
margin-left: 7px;
color: #fd5924;
}
.v3-timeline-filters button[data-filter="recap"]::before {
content: '';
position: absolute;
left: -5px; top: 6px; bottom: 6px;
width: 1px;
background: rgba(36,36,36,0.12);
}
.v3-timeline-filters button[data-filter="recap"] .recap-ico {
opacity: 0.95;
}
.v3-timeline-filters button[data-filter="recap"]:hover { color: #e64614; }
.v3-timeline-filters button[data-filter="recap"].active {
background: #fd5924;
color: #fff;
box-shadow: 0 1px 5px rgba(253,89,36,0.4);
}
.v3-timeline {
position: relative;
padding-left: 32px;
}
.v3-timeline::before {
content: '';
position: absolute; left: 7px; top: 12px; bottom: 12px;
width: 1px;
background: linear-gradient(180deg, rgba(36,36,36,0.2), rgba(36,36,36,0.05));
}
.v3-tl-week {
display: grid;
grid-template-columns: 120px 1fr;
gap: 32px;
position: relative;
margin-bottom: 28px;
}
.v3-tl-week::before {
content: '';
position: absolute; left: -32px; top: 8px;
width: 16px; height: 16px;
border-radius: 50%;
background: #f6f6f3;
border: 2px solid rgba(36,36,36,0.25);
}
.v3-tl-week.now::before {
border-color: #fd5924;
background: #fd5924;
box-shadow: 0 0 0 6px rgba(253,89,36,0.15);
}
.v3-tl-week-label {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
color: #242424;
}
.v3-tl-week-sub {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(36,36,36,0.45);
margin-top: 4px;
}
.v3-tl-week.now .v3-tl-week-label { color: #fd5924; }
.v3-tl-events { display: flex; flex-direction: column; gap: 10px; }
.v3-tl-event {
display: grid;
grid-template-columns: 64px 1fr;
gap: 22px;
align-items: center;
padding: 18px 22px;
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 10px;
cursor: pointer;
transition: 0.2s;
}
.v3-tl-event:hover {
border-color: #242424;
transform: translateX(4px);
box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.v3-tl-event.featured {
background: #0d0c10;
border-color: #0d0c10;
color: #f6f6f3;
}
.v3-tl-event.featured:hover { border-color: #fd5924; }
.v3-tl-event .when .day {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: inherit;
}
.v3-tl-event .when .dow {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(36,36,36,0.45);
margin-top: 4px;
}
.v3-tl-event.featured .when .dow { color: rgba(246,246,243,0.5); }
.v3-tl-event .tag {
display: inline-block;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
background: rgba(253,89,36,0.08);
color: #fd5924;
font-weight: 600;
margin-bottom: 8px;
}
.v3-tl-event.featured .tag { background: rgba(253,89,36,0.18); }
.v3-tl-event .tag.violet { background: rgba(148,65,233,0.1); color: #9441e9; }
.v3-tl-event.featured .tag.violet { background: rgba(148,65,233,0.22); color: #b87cf2; }
.v3-tl-event .tag.azure { background: rgba(8,29,171,0.08); color: #081dab; }
.v3-tl-event.featured .tag.azure { background: rgba(8,29,171,0.25); color: #6a8df0; }
.v3-tl-event .title {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
color: inherit;
}
.v3-tl-event .meta {
font-size: 12.5px;
color: rgba(36,36,36,0.6);
margin-top: 4px;
}
.v3-tl-event.featured .meta { color: rgba(246,246,243,0.55); }
.v3-tl-event .right {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(36,36,36,0.55);
text-align: right;
}
.v3-tl-event.featured .right { color: rgba(246,246,243,0.7); }
.v3-tl-event .right .strong { color: #242424; font-weight: 700; }
.v3-tl-event.featured .right .strong { color: #fd5924; }
.v3-tl-event.has-recap { grid-template-columns: 64px 1fr 110px; }
.v3-tl-event-thumb {
position: relative;
display: block;
width: 110px;
height: 90px;
border-radius: 8px;
overflow: hidden;
background: #0d0c10;
align-self: center;
transition: 0.15s;
}
.v3-tl-event-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s;
}
.v3-tl-event-thumb:hover img { transform: scale(1.06); }
.v3-tl-event-thumb-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 6px 8px;
background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
color: #f6f6f3;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.v3-tl-event-thumb-overlay .arr { transition: transform 0.15s; }
.v3-tl-event-thumb:hover .v3-tl-event-thumb-overlay .arr { transform: translateX(3px); }
/* Read-the-recap button — surfaces on past events that have a recap */
.v3-tl-event-recap {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 8px 14px;
border-radius: 100px;
background: #f6f6f3;
color: #0d0c10;
border: 1px solid rgba(13,12,16,0.12);
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.06em;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
transition: 0.15s;
}
.v3-tl-event-recap span { transition: transform 0.15s; }
.v3-tl-event-recap:hover { background: #0d0c10; color: #f6f6f3; border-color: #0d0c10; }
.v3-tl-event-recap:hover span { transform: translateX(3px); }
.v3-tl-event.featured .v3-tl-event-recap {
background: rgba(246,246,243,0.08);
color: #f6f6f3;
border-color: rgba(246,246,243,0.15);
}
.v3-tl-event.featured .v3-tl-event-recap:hover {
background: #f6f6f3;
color: #0d0c10;
border-color: #f6f6f3;
}
/* === PILLARS / TOPICAL LANES === */
.v3-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.v3-pillar {
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 16px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
cursor: pointer;
transition: 0.2s;
}
.v3-pillar:hover {
background: #faf9f5;
border-color: #242424;
}
.v3-pillar-num {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 64px;
line-height: 1;
font-weight: 400;
color: rgba(36,36,36,0.12);
letter-spacing: -0.04em;
}
.v3-pillar .label {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fd5924;
font-weight: 600;
}
.v3-pillar h3 {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
color: #242424;
}
.v3-pillar .why {
font-size: 14px;
line-height: 1.55;
color: rgba(36,36,36,0.65);
margin: 0;
}
.v3-pillar-topics {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 16px;
border-top: 1px dashed rgba(36,36,36,0.15);
}
.v3-pillar-topic {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
font-size: 13px;
line-height: 1.4;
color: rgba(36,36,36,0.75);
}
.v3-pillar-topic .dot {
width: 6px; height: 6px; border-radius: 50%; background: #fd5924;
margin-top: 8px;
}
.v3-pillar-foot {
display: flex; gap: 6px; flex-wrap: wrap;
padding-top: 12px;
}
.v3-pillar-foot .lands {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(36,36,36,0.5);
margin-right: 4px;
align-self: center;
}
.v3-pillar-foot .where {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
background: rgba(36,36,36,0.06);
color: #242424;
font-weight: 600;
}
/* === CIRCLES DIRECTORY === */
.v3-circles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.v3-circles-col h3 {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 8px;
color: #242424;
}
.v3-circles-col h3 em { font-style: italic; color: #fd5924; font-weight: 400; }
.v3-circles-col .col-sub {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(36,36,36,0.5);
margin-bottom: 20px;
}
.v3-circle-list {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 12px;
overflow: hidden;
}
.v3-circle-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 18px;
align-items: center;
padding: 18px 20px;
border-bottom: 1px solid rgba(36,36,36,0.06);
cursor: pointer;
transition: 0.15s;
}
.v3-circle-row:last-child { border-bottom: none; }
.v3-circle-row:hover { background: #faf9f5; }
.v3-circle-row .code {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 13px;
color: #fd5924;
font-weight: 600;
}
.v3-circle-row .col2 .name {
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: #242424;
line-height: 1.25;
}
.v3-circle-row .col2 .sub {
font-size: 12px;
color: rgba(36,36,36,0.55);
margin-top: 3px;
}
.v3-circle-row .seat {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(36,36,36,0.5);
}
.v3-circle-row .seat strong { color: #242424; font-weight: 700; }
/* === PLATFORM — browser window === */
.v3-platform-section.dark {
padding: 96px 56px;
}
.v3-platform {
display: grid;
grid-template-columns: 380px 1fr;
gap: 48px;
align-items: start;
}
/* Laptop: tighten the feature column so the browser window has room to breathe.
* Below 1200 the grid already stacks (handled later); here we just nudge widths
* inside the desktop 2-column layout. */
@media (max-width: 1280px) and (min-width: 1201px) {
.v3-platform { grid-template-columns: 320px 1fr; gap: 36px; }
.v3-window-body { grid-template-columns: 160px 1fr; min-height: 440px; }
}
/* Tablet & mid sizes: stack the feature list above the browser window.
* Make features a 2-column grid so it doesn't read as one long ribbon. Browser
* window goes full width, sidebar shrinks. */
@media (max-width: 1200px) and (min-width: 721px) {
.v3-platform { grid-template-columns: 1fr; gap: 36px; }
.v3-platform-features {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 28px;
border-top: 1px solid rgba(246,246,243,0.08);
}
.v3-platform-feature {
border-bottom: 1px solid rgba(246,246,243,0.08);
}
.v3-window-body { grid-template-columns: 160px 1fr; min-height: 460px; }
.v3-window-side { padding: 12px 8px; }
.v3-window-side a { padding: 8px 10px; }
}
/* === iMac mock — wraps the platform screenshot in a desktop frame === */
.v3-imac-mock {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.v3-imac-bezel {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: #0d0c10;
border-radius: 18px;
padding: 14px;
box-shadow:
0 0 0 1px #2a2a2e,
0 2px 0 0 rgba(255,255,255,0.04) inset,
0 -2px 0 0 rgba(0,0,0,0.4) inset,
0 60px 120px -30px rgba(0,0,0,0.7);
}
.v3-imac-camera {
position: absolute;
top: 6px; left: 50%;
transform: translateX(-50%);
width: 5px; height: 5px;
border-radius: 50%;
background: #1a1a1d;
box-shadow: 0 0 0 1px rgba(246,246,243,0.06);
}
.v3-imac-screen {
width: 100%;
height: 100%;
background: #0d0c10;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.v3-imac-screen image-slot {
width: 100% !important;
height: 100% !important;
display: block;
}
.v3-imac-screen image-slot img,
.v3-imac-screen img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.v3-imac-chin {
width: 100%;
height: 36px;
margin-top: -1px;
background: linear-gradient(to bottom, #1a1a1d 0%, #0d0c10 60%, #050507 100%);
border-radius: 0 0 18px 18px;
border: 1px solid #2a2a2e;
border-top: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
}
.v3-imac-logo {
width: 18px;
height: 22px;
background: rgba(246,246,243,0.18);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.v3-imac-neck {
width: 28%;
max-width: 220px;
min-width: 140px;
height: 56px;
background: linear-gradient(to bottom, #2a2a2e 0%, #1a1a1d 100%);
margin-top: -2px;
clip-path: polygon(15% 0, 85% 0, 92% 100%, 8% 100%);
position: relative;
}
.v3-imac-neck::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
transparent 0%,
rgba(246,246,243,0.04) 30%,
rgba(246,246,243,0.08) 50%,
rgba(246,246,243,0.04) 70%,
transparent 100%
);
}
.v3-imac-foot {
width: 42%;
max-width: 360px;
min-width: 220px;
height: 12px;
background: linear-gradient(to bottom, #2a2a2e 0%, #0d0c10 100%);
border-radius: 0 0 24px 24px / 0 0 100% 100%;
box-shadow:
0 2px 0 0 rgba(255,255,255,0.03) inset,
0 24px 40px -10px rgba(0,0,0,0.7);
}
/* Platform section — no-mock variant: features list spans full width as a grid */
.v3-platform-no-mock { display: block; }
.v3-platform-no-mock .v3-platform-copy { max-width: 100%; }
.v3-platform-no-mock .v3-platform-features {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1px;
background: rgba(246,246,243,0.08);
border: 1px solid rgba(246,246,243,0.08);
border-radius: 14px;
overflow: hidden;
}
.v3-platform-no-mock .v3-platform-feature {
background: rgba(246,246,243,0.03);
padding: 28px 24px;
grid-template-columns: unset;
display: flex;
gap: 16px;
align-items: flex-start;
transition: background 0.15s;
}
.v3-platform-no-mock .v3-platform-feature:hover { background: rgba(246,246,243,0.06); }
@media (max-width: 720px) {
.v3-imac-bezel { padding: 10px; border-radius: 14px; }
.v3-imac-chin { height: 26px; border-radius: 0 0 14px 14px; }
.v3-imac-logo { width: 14px; height: 17px; }
.v3-imac-neck { height: 40px; min-width: 110px; }
.v3-imac-foot { height: 10px; min-width: 170px; }
}
/* Image-slot variant — used when a screenshot stands in for the rendered mock */
.v3-window-slot {
background: rgba(246,246,243,0.03) !important;
border: 1px solid rgba(246,246,243,0.08) !important;
border-radius: 14px !important;
box-shadow: 0 30px 80px rgba(0,0,0,0.4) !important;
overflow: hidden !important;
display: flex;
flex-direction: column;
}
.v3-window-slot image-slot {
border-radius: 0;
box-shadow: none;
display: block;
width: 100%;
height: auto;
}
.v3-window-slot image-slot img {
width: 100%;
height: auto;
display: block;
}
/* Phone: collapse the browser sidebar to an icon-only rail across the top of
* the window body so cards get the full width. Features become a single column. */
@media (max-width: 720px) {
.v3-platform { grid-template-columns: 1fr !important; gap: 24px; }
.v3-platform-features { display: flex; }
.v3-platform-feature {
grid-template-columns: 32px 1fr;
gap: 12px;
padding: 14px 0;
}
.v3-platform-feature .name { font-size: 15px; }
.v3-platform-feature .desc { font-size: 13px; }
/* Browser window: turn into a vertical layout — top tab bar + content. */
.v3-window-bar {
grid-template-columns: auto 1fr;
padding: 10px 12px;
gap: 10px;
}
.v3-window-bar .url { font-size: 10px; padding: 4px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-window-bar .url > span:first-child { display: none; }
.v3-window-bar .who { display: none; }
.v3-window-body {
grid-template-columns: 1fr !important;
grid-template-rows: auto 1fr;
min-height: 0 !important;
}
.v3-window-side {
border-right: 0;
border-bottom: 1px solid rgba(246,246,243,0.06);
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
padding: 8px 10px;
gap: 4px;
}
.v3-window-side::-webkit-scrollbar { display: none; }
.v3-window-side a {
flex: 0 0 auto;
grid-template-columns: 8px auto auto;
padding: 7px 12px;
border-radius: 999px;
background: rgba(246,246,243,0.04);
font-size: 12px;
white-space: nowrap;
}
.v3-window-side a .meta { font-size: 9px; padding: 2px 6px; }
.v3-window-main { padding: 16px !important; }
.v3-window-h {
grid-template-columns: 1fr !important;
gap: 8px;
padding-bottom: 14px !important;
margin-bottom: 14px !important;
}
.v3-window-h h4 { font-size: 16px !important; }
.v3-window-h p { font-size: 12px !important; }
.v3-window-h .pill { justify-self: start; font-size: 10px; }
.v3-window-card {
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto;
gap: 10px 12px;
padding: 12px !important;
}
.v3-window-card .av img { width: 36px; height: 36px; }
.v3-window-card .acts {
grid-column: 1 / -1;
justify-self: stretch;
}
.v3-window-card .acts button {
width: 100%;
padding: 10px 14px !important;
}
.v3-window-card .row1 { font-size: 13.5px; flex-wrap: wrap; }
.v3-window-card .stage { font-size: 9.5px; }
.v3-window-card .role { font-size: 12px !important; }
.v3-window-card .why { font-size: 12px !important; }
}
.v3-platform-copy h3 {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 16px;
color: #f6f6f3;
}
.v3-platform-copy h3 em { font-style: italic; color: rgba(246,246,243,0.5); font-weight: 400; }
.v3-platform-copy p {
font-size: 15px;
line-height: 1.6;
color: rgba(246,246,243,0.65);
margin: 0 0 24px;
}
.v3-platform-features {
display: flex; flex-direction: column;
border-top: 1px solid rgba(246,246,243,0.08);
}
.v3-platform-feature {
display: grid;
grid-template-columns: 40px 1fr;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid rgba(246,246,243,0.08);
}
.v3-platform-feature .n {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.12em;
color: #fd5924;
font-weight: 600;
}
.v3-platform-feature .label {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(246,246,243,0.45);
margin-bottom: 4px;
}
.v3-platform-feature .name {
font-size: 14.5px;
font-weight: 600;
color: #f6f6f3;
margin-bottom: 4px;
}
.v3-platform-feature .desc {
font-size: 12.5px;
color: rgba(246,246,243,0.6);
line-height: 1.5;
}
/* Browser window */
.v3-window {
background: rgba(246,246,243,0.03);
border: 1px solid rgba(246,246,243,0.08);
border-radius: 14px;
overflow: hidden;
backdrop-filter: blur(20px);
box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.v3-window-bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-bottom: 1px solid rgba(246,246,243,0.06);
background: rgba(246,246,243,0.02);
}
.v3-window-bar .lights { display: flex; gap: 6px; }
.v3-window-bar .lights span {
width: 10px; height: 10px; border-radius: 50%;
background: rgba(246,246,243,0.15);
}
.v3-window-bar .lights span:nth-child(1) { background: #ff5f57; }
.v3-window-bar .lights span:nth-child(2) { background: #febc2e; }
.v3-window-bar .lights span:nth-child(3) { background: #28c840; }
.v3-window-bar .url {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11.5px;
color: rgba(246,246,243,0.55);
background: rgba(246,246,243,0.04);
padding: 5px 12px;
border-radius: 5px;
display: inline-flex; align-items: center; gap: 8px;
justify-self: center;
}
.v3-window-bar .url .path { color: #fd5924; }
.v3-window-bar .who {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(246,246,243,0.5);
}
.v3-window-body {
display: grid;
grid-template-columns: 180px 1fr;
min-height: 480px;
}
.v3-window-side {
border-right: 1px solid rgba(246,246,243,0.06);
padding: 14px 10px;
display: flex; flex-direction: column; gap: 2px;
background: rgba(246,246,243,0.015);
}
.v3-window-side a {
display: grid;
grid-template-columns: 14px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 6px;
font-size: 12px;
color: rgba(246,246,243,0.55);
font-weight: 500;
}
.v3-window-side a:hover { background: rgba(246,246,243,0.04); color: #f6f6f3; }
.v3-window-side a.active { background: rgba(253,89,36,0.12); color: #fd5924; font-weight: 600; }
.v3-window-side a .dot {
width: 10px; height: 10px; border-radius: 50%;
background: currentColor;
opacity: 0.6;
}
.v3-window-side a .meta {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.06em;
}
.v3-window-main { padding: 22px 24px; }
.v3-window-h {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(246,246,243,0.06);
margin-bottom: 16px;
}
.v3-window-h h4 {
font-size: 17px; font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 4px;
color: #f6f6f3;
}
.v3-window-h p {
font-size: 12.5px;
color: rgba(246,246,243,0.55);
margin: 0;
}
.v3-window-h .pill {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 100px;
background: rgba(253,89,36,0.12);
color: #fd5924;
font-weight: 600;
white-space: nowrap;
}
.v3-window-cards { display: flex; flex-direction: column; gap: 8px; }
.v3-window-card {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px;
background: rgba(246,246,243,0.03);
border: 1px solid rgba(246,246,243,0.06);
border-radius: 8px;
}
.v3-window-card.match { border-color: rgba(253,89,36,0.3); background: rgba(253,89,36,0.06); }
.v3-window-card .av {
width: 40px; height: 40px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
}
.v3-window-card .av img { width: 100%; height: 100%; object-fit: cover; }
.v3-window-card .row1 {
display: flex; gap: 8px; align-items: baseline;
}
.v3-window-card .name {
font-size: 13px; color: #f6f6f3; font-weight: 600;
}
.v3-window-card .role {
font-size: 11.5px; color: rgba(246,246,243,0.5);
margin-top: 3px;
}
.v3-window-card .meta {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
color: rgba(246,246,243,0.45);
letter-spacing: 0.06em;
}
.v3-window-card .stage {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 3px;
background: rgba(253,89,36,0.15);
color: #fd5924;
font-weight: 600;
}
.v3-window-card .why {
font-size: 12px;
color: rgba(246,246,243,0.7);
font-style: italic;
margin-top: 4px;
}
.v3-window-card .acts { display: flex; gap: 5px; }
.v3-window-card .acts .accept {
background: #fd5924; color: #fff;
border: 0;
padding: 5px 11px;
border-radius: 5px;
font-size: 11px; font-weight: 600;
}
/* === TESTIMONIALS === */
.v3-testimonials {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.v3-testimonial {
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 14px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.v3-testimonial.featured {
background: #0d0c10;
color: #f6f6f3;
border-color: #0d0c10;
grid-column: span 2;
}
/* Laptop+: shift to a tall-featured layout so the long Polarsteps quote gets
* room to breathe vertically, and the 4 supporting quotes sit beside it as a
* 2×2 grid instead of a wide-but-short marquee. Reads more like an editorial
* pull-quote spread. */
@media (min-width: 981px) {
.v3-testimonials {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
grid-auto-rows: 1fr;
gap: 20px;
align-items: stretch;
}
.v3-testimonial.featured {
grid-column: 1 / 2;
grid-row: 1 / 3;
padding: 40px 36px 36px;
justify-content: space-between;
}
.v3-testimonial.featured blockquote {
font-size: 24px;
line-height: 1.4;
max-width: none;
}
.v3-testimonial:not(.featured) {
padding: 26px 26px 24px;
gap: 16px;
}
.v3-testimonial:not(.featured) blockquote {
font-size: 15.5px;
line-height: 1.55;
}
}
@media (min-width: 1200px) {
.v3-testimonials {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 22px;
}
.v3-testimonial.featured blockquote { font-size: 26px; }
.v3-testimonial:not(.featured) { padding: 30px; }
.v3-testimonial:not(.featured) blockquote { font-size: 16px; }
}
.v3-testimonial .meta {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fd5924;
font-weight: 600;
}
.v3-testimonial blockquote {
font-size: 18px;
line-height: 1.5;
margin: 0;
color: #242424;
letter-spacing: -0.005em;
text-wrap: balance;
}
.v3-testimonial.featured blockquote {
font-size: 28px;
letter-spacing: -0.015em;
line-height: 1.35;
color: #f6f6f3;
max-width: 880px;
}
.v3-testimonial cite {
display: flex; align-items: center; gap: 12px;
font-style: normal;
padding-top: 14px;
border-top: 1px solid rgba(36,36,36,0.08);
}
.v3-testimonial.featured cite { border-color: rgba(246,246,243,0.1); }
.v3-testimonial cite img {
width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
}
.v3-testimonial.featured cite img { width: 44px; height: 44px; }
.v3-testimonial cite .name {
font-size: 14px; font-weight: 600;
}
.v3-testimonial.featured cite .name { color: #f6f6f3; }
.v3-testimonial cite .role {
font-size: 12px; color: rgba(36,36,36,0.6);
margin-top: 2px;
}
.v3-testimonial.featured cite .role { color: rgba(246,246,243,0.55); }
/* === PIVOT BAND === */
.v3-pivot {
background: linear-gradient(135deg, #fd5924 0%, #9441e9 100%);
color: #fff;
padding: 128px 56px;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(36,36,36,0.08);
}
.v3-pivot::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 24px 24px;
}
.v3-pivot-inner { position: relative; z-index: 1; max-width: 1200px; }
.v3-pivot .eyebrow {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
margin-bottom: 20px;
}
.v3-pivot h2 {
font-size: clamp(36px, 5vw, 56px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 32px;
color: #fff;
max-width: 880px;
}
.v3-pivot h2 em { font-style: italic; color: rgba(255,255,255,0.7); font-weight: 400; }
.v3-pivot-lede {
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.45;
color: rgba(246,246,243,0.75);
margin: 28px 0 0;
max-width: 880px;
text-wrap: pretty;
}
.v3-pivot-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
}
.v3-pivot-grid > div {
background: rgba(13,12,16,0.25);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 12px;
padding: 24px;
display: flex; flex-direction: column; gap: 10px;
}
.v3-pivot-grid .n {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 24px;
font-weight: 400;
color: #fff;
letter-spacing: -0.02em;
opacity: 0.9;
}
.v3-pivot-grid .t {
font-size: 14.5px;
line-height: 1.5;
color: #fff;
}
/* === CTA === */
.v3-cta {
text-align: left;
padding: 144px 56px;
background:
radial-gradient(ellipse 700px 400px at 20% 50%, rgba(253,89,36,0.1), transparent 60%);
border-bottom: 1px solid rgba(36,36,36,0.08);
}
.v3-cta-meta {
display: inline-flex; gap: 10px; flex-wrap: wrap;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
color: rgba(36,36,36,0.55);
margin-bottom: 24px;
}
.v3-cta-meta strong { color: #fd5924; }
.v3-cta h2 {
font-size: clamp(44px, 6.5vw, 88px);
line-height: 1;
letter-spacing: -0.04em;
font-weight: 700;
margin: 0 0 40px;
color: #242424;
text-wrap: balance;
max-width: 1100px;
}
.v3-cta h2 em { font-style: italic; color: rgba(36,36,36,0.45); font-weight: 400; }
.v3-cta h2 .a-orange { color: #fd5924; }
.v3-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.v3-cta-primary {
background: #0d0c10; color: #f6f6f3;
padding: 16px 28px; border-radius: 10px;
font-size: 15px; font-weight: 600;
display: inline-flex; align-items: center; gap: 8px;
border: 0; transition: 0.2s;
}
.v3-cta-primary:hover { background: #fd5924; }
.v3-cta-secondary {
background: transparent; color: #242424;
padding: 16px 28px;
border: 1.5px solid rgba(36,36,36,0.15);
border-radius: 10px;
font-size: 15px; font-weight: 600;
transition: 0.2s;
}
.v3-cta-secondary:hover { border-color: #242424; }
/* === FOOTER === */
.v3-footer {
background: #0d0c10;
color: rgba(246,246,243,0.55);
padding: 96px 56px 40px;
}
.v3-footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(246,246,243,0.08);
margin-bottom: 24px;
}
.v3-footer-brand {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 14px;
color: #f6f6f3;
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
}
.v3-footer-brand .mark {
width: 9px; height: 9px; background: #fd5924; border-radius: 2px;
}
.v3-footer-tag {
font-size: 14px;
line-height: 1.55;
color: rgba(246,246,243,0.5);
max-width: 320px;
margin: 0 0 20px;
}
.v3-footer-news {
display: flex; gap: 6px;
background: rgba(246,246,243,0.04);
border: 1px solid rgba(246,246,243,0.1);
border-radius: 8px;
padding: 4px;
}
.v3-footer-news input {
flex: 1;
background: transparent; border: 0; outline: 0;
padding: 10px 12px;
font-size: 13px; font-family: inherit;
color: #f6f6f3;
}
.v3-footer-news input::placeholder { color: rgba(246,246,243,0.35); }
.v3-footer-news button {
background: #fd5924; color: #fff;
border: 0;
padding: 10px 16px; border-radius: 6px;
font-size: 13px; font-weight: 600;
font-family: inherit;
}
.v3-footer-news button:hover { background: #fff; color: #0d0c10; }
.v3-footer-col h5 {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(246,246,243,0.45);
font-weight: 500;
margin: 0 0 16px;
}
.v3-footer-col a {
display: block;
font-size: 13px;
color: rgba(246,246,243,0.65);
padding: 5px 0;
transition: 0.15s;
}
.v3-footer-col a:hover { color: #f6f6f3; }
.v3-footer-bottom {
display: flex; justify-content: space-between;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(246,246,243,0.4);
}
/* Responsive */
@media (max-width: 1200px) {
.v3-products { grid-template-columns: repeat(2, 1fr); }
/* 3 cards in 2 cols leaves an awkward empty slot — span the 3rd full-width.
* Only inside the three-products grid (not the 2-card programmes grid). */
.v3-products:not(.v3-programmes-grid) { grid-template-columns: repeat(2, 1fr); }
.v3-programmes { grid-template-columns: 1fr; }
.v3-pillars { grid-template-columns: 1fr; }
.v3-platform { grid-template-columns: 1fr; }
.v3-circles { grid-template-columns: 1fr; }
.v3-testimonials { grid-template-columns: 1fr; }
.v3-pivot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
.v3-topnav-nav { display: none; }
.v3-topnav-inner { grid-template-columns: 1fr auto; padding: 12px 20px; }
.v3-topnav-logo { font-size: 32px; }
.v3-products,
.v3-products:not(.v3-programmes-grid) { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.v3-hero, .v3-rx-hero, .v3-cn-hero, .v3-cx-hero, .v3-ph, .v3-section, .v3-pivot, .v3-cta, .v3-footer, .v3-operators-head, .v3-platform-section.dark { padding-left: 16px; padding-right: 16px; }
.v3-operators-track { padding: 0 16px; }
.v3-operators-track .logo { margin-right: 96px; }
.v3-partners-track .v3-partners-logo { margin-right: 96px; }
.v3-hero-stats { grid-template-columns: 1fr 1fr; }
.v3-products { grid-template-columns: 1fr; }
.v3-problems { grid-template-columns: 1fr; }
/* Tighten the shared .v3-ph hero on phones: 48px floor was too chunky for
the long italic sub-lines on Rise/About/Circles/Cities/Rolodex/Release-notes. */
.v3-ph { padding-top: 20px; padding-bottom: 48px; }
.v3-ph-bar { margin-bottom: 32px; }
.v3-ph-h1 { font-size: clamp(34px, 9vw, 52px); margin-bottom: 18px; }
.v3-ph-h1 em { margin-top: 12px; }
.v3-hero-actions { flex-direction: column; align-items: stretch; }
.v3-hero-actions .primary,
.v3-hero-actions .secondary {
width: 100%;
justify-content: center;
text-align: center;
}
.v3-tt-meta { display: none; }
/* === Timeline mobile === */
.v3-timeline-head { gap: 16px; margin-bottom: 20px; }
.v3-timeline-filters {
/* Keep the left aligned with the section content, but stretch the right
edge to the viewport edge so the last filter is cut off, and fade the
right edge so the horizontal-scroll affordance is unmistakable. */
width: calc(50% + 50vw);
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-right: 48px;
scroll-padding-right: 48px;
mask-image: linear-gradient(to right, black 78%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 78%, transparent 100%);
}
.v3-timeline-filters::-webkit-scrollbar { display: none; }
.v3-timeline-filters button {
flex: 0 0 auto;
padding: 8px 12px;
font-size: 12px;
}
.v3-timeline {
padding-left: 24px;
}
.v3-timeline::before {
left: 5px;
top: 8px;
bottom: 8px;
}
.v3-tl-week {
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 20px;
}
.v3-tl-week::before {
left: -24px;
top: 2px;
width: 12px; height: 12px;
}
.v3-tl-week.now::before { box-shadow: 0 0 0 4px rgba(253,89,36,0.15); }
.v3-tl-week-label { font-size: 13px; }
.v3-tl-week-sub { font-size: 10px; letter-spacing: 0.1em; }
.v3-tl-events { gap: 8px; }
.v3-tl-event {
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
gap: 8px 14px;
padding: 14px 14px;
}
.v3-tl-event:hover { transform: none; }
.v3-tl-event .when { grid-row: 1 / 3; }
.v3-tl-event .when .day { font-size: 22px; }
.v3-tl-event .when .dow { font-size: 9.5px; letter-spacing: 0.1em; }
.v3-tl-event .tag { font-size: 9px; padding: 2px 6px; margin-bottom: 6px; }
.v3-tl-event .title { font-size: 14px; line-height: 1.2; }
.v3-tl-event .meta { font-size: 11.5px; margin-top: 3px; }
.v3-tl-event.has-recap { grid-template-columns: 56px 1fr; }
.v3-tl-event-thumb { grid-column: 1 / -1; width: 100%; height: 120px; margin-top: 8px; }
.v3-tl-event .right {
grid-column: 2;
grid-row: 2;
align-self: end;
text-align: left;
font-size: 10px;
padding-top: 6px;
margin-top: 4px;
border-top: 1px dashed rgba(36,36,36,0.12);
}
.v3-tl-event.featured .right { border-top-color: rgba(246,246,243,0.15); }
.v3-section-head { grid-template-columns: 1fr; }
.v3-footer-top { grid-template-columns: 1fr; gap: 24px; }
.v3-programme { padding: 28px 24px; }
.v3-pg-body { grid-template-columns: 1fr; gap: 32px; }
.v3-pg-title { flex-direction: column; align-items: flex-start; gap: 8px; }
.v3-pg-stats { grid-template-columns: repeat(3, 1fr); }
}
/* === PROGRAMMES === */
.v3-programmes-section { background: #faf9f5; }
.v3-programmes {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.v3-programme {
--pg-accent: #fd5924;
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 4px;
padding: 36px 40px;
position: relative;
overflow: hidden;
transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.v3-programme::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px;
background: var(--pg-accent);
}
.v3-programme:hover {
border-color: rgba(36,36,36,0.2);
box-shadow: 0 8px 32px rgba(36,36,36,0.06);
transform: translateY(-2px);
}
.v3-pg-rise { --pg-accent: #fd5924; }
.v3-pg-sprint { --pg-accent: #9441e9; }
.v3-pg-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
gap: 24px;
flex-wrap: wrap;
}
.v3-pg-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.v3-pg-tag .t { color: var(--pg-accent); font-weight: 600; }
.v3-pg-tag .sep { color: rgba(36,36,36,0.25); }
.v3-pg-tag .price { color: rgba(36,36,36,0.5); font-weight: 500; }
.v3-pg-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(36,36,36,0.6);
padding: 6px 12px 6px 10px;
background: rgba(36,36,36,0.04);
border-radius: 100px;
}
.v3-pg-status .pulse {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--pg-accent);
box-shadow: 0 0 0 0 var(--pg-accent);
animation: v3-pulse 2s infinite;
}
.v3-pg-title {
display: flex;
align-items: baseline;
gap: 20px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.v3-pg-title h3 {
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
margin: 0;
color: #0d0c10;
}
.v3-pg-when {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 12px;
color: rgba(36,36,36,0.6);
letter-spacing: 0.02em;
}
.v3-pg-when .cohort {
color: #0d0c10;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
}
.v3-pg-when .dot {
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(36,36,36,0.3);
}
.v3-pg-pitch {
font-size: 17px;
line-height: 1.55;
color: rgba(36,36,36,0.78);
margin: 0 0 28px 0;
max-width: 720px;
letter-spacing: -0.005em;
}
.v3-pg-stats {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 32px;
padding: 20px 0;
border-top: 1px dashed rgba(36,36,36,0.15);
border-bottom: 1px dashed rgba(36,36,36,0.15);
margin-bottom: 32px;
}
.v3-pg-stats > div .n {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--pg-accent);
line-height: 1;
}
.v3-pg-stats > div .l {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(36,36,36,0.5);
margin-top: 6px;
}
.v3-pg-body {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 48px;
}
.v3-pg-subhead {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(36,36,36,0.45);
margin-bottom: 16px;
font-weight: 600;
}
.v3-pg-pillars { display: flex; flex-direction: column; }
.v3-pg-pillar {
display: grid;
grid-template-columns: 40px 1fr;
padding: 16px 0;
border-top: 1px solid rgba(36,36,36,0.08);
}
.v3-pg-pillar:first-of-type { border-top: 0; padding-top: 4px; }
.v3-pg-pillar-n {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 13px;
color: var(--pg-accent);
font-weight: 600;
letter-spacing: 0.04em;
}
.v3-pg-pillar-k {
font-size: 15px;
font-weight: 600;
color: #0d0c10;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.v3-pg-pillar-v {
font-size: 13.5px;
line-height: 1.55;
color: rgba(36,36,36,0.65);
}
.v3-pg-side { display: flex; flex-direction: column; gap: 24px; }
.v3-pg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.v3-pg-list li {
font-size: 13.5px;
line-height: 1.5;
color: rgba(36,36,36,0.75);
padding-left: 16px;
position: relative;
}
.v3-pg-list li::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--pg-accent);
}
.v3-pg-meta {
display: flex;
flex-direction: column;
background: #faf9f5;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 4px;
overflow: hidden;
}
.v3-pg-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 12px 14px;
gap: 12px;
border-bottom: 1px solid rgba(36,36,36,0.06);
}
.v3-pg-meta-row:last-child { border-bottom: 0; }
.v3-pg-meta-row .k {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(36,36,36,0.5);
}
.v3-pg-meta-row .v {
font-size: 13px;
font-weight: 600;
color: #0d0c10;
text-align: right;
letter-spacing: -0.005em;
}
.v3-pg-apply {
background: #0d0c10;
color: #f6f6f3;
border: 0;
padding: 14px 20px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
letter-spacing: -0.005em;
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 12px;
cursor: pointer;
transition: 0.2s;
}
.v3-pg-apply:hover {
background: var(--pg-accent);
}
.v3-pg-apply span {
transition: 0.2s;
}
.v3-pg-apply:hover span {
transform: translateX(3px);
}
/* === Connect product detail extras === */
.v3-pd-connect-hero {
display: grid;
gap: 32px;
margin-bottom: 32px;
}
.v3-pd-subhead .ct {
margin-left: 10px;
color: rgba(246,246,243,0.45);
font-weight: 500;
}
.v3-pd-faces-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 12px;
}
.v3-pd-face {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.v3-pd-face img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 4px;
filter: grayscale(0.4) contrast(1.05);
transition: 0.25s;
}
.v3-pd-face:hover img {
filter: grayscale(0) contrast(1);
}
.v3-pd-face-info .name {
font-size: 11.5px;
font-weight: 600;
color: #f6f6f3;
line-height: 1.2;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v3-pd-face-info .role {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 9.5px;
color: rgba(246,246,243,0.5);
margin-top: 3px;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v3-pd-face.more {
background: rgba(246,246,243,0.04);
border: 1px dashed rgba(246,246,243,0.18);
border-radius: 4px;
padding: 12px;
align-items: flex-start;
justify-content: space-between;
aspect-ratio: 1 / 1.4;
}
.v3-pd-face-more {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.03em;
color: #fd5924;
line-height: 1;
}
.v3-pd-scenes-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
}
.v3-pd-scene {
margin: 0;
border-radius: 4px;
overflow: hidden;
position: relative;
background: rgba(246,246,243,0.04);
min-height: 0;
}
.v3-pd-scene.wide {
grid-row: span 2;
aspect-ratio: 4 / 3;
}
.v3-pd-scene img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.85) contrast(1.05);
transition: 0.3s;
}
.v3-pd-scene:hover img { filter: brightness(1) contrast(1); transform: scale(1.02); }
.v3-pd-scene figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 14px 16px;
background: linear-gradient(180deg, transparent, rgba(13,12,16,0.85));
display: flex;
flex-direction: column;
gap: 4px;
}
.v3-pd-scene .tag {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fd5924;
font-weight: 600;
}
.v3-pd-scene .cap {
font-size: 12.5px;
color: rgba(246,246,243,0.92);
line-height: 1.3;
letter-spacing: -0.005em;
}
/* === Connect agenda preview === */
.v3-pd-agenda {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid rgba(246,246,243,0.08);
}
.v3-pd-agenda-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.v3-pd-agenda-head h4 {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: #f6f6f3;
margin: 8px 0 0 0;
line-height: 1.15;
}
.v3-pd-see-all {
background: #fd5924;
color: #0d0c10;
border: 0;
padding: 11px 16px 11px 18px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.v3-pd-see-all:hover { background: #ff6b3a; }
.v3-pd-see-all .arrow { transition: 0.2s; }
.v3-pd-see-all:hover .arrow { transform: translateX(3px); }
.v3-pd-agenda-list {
display: flex;
flex-direction: column;
background: rgba(246,246,243,0.03);
border: 1px solid rgba(246,246,243,0.08);
border-radius: 4px;
overflow: hidden;
}
.v3-pd-agenda-row {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 20px;
align-items: center;
padding: 14px 18px;
border-top: 1px solid rgba(246,246,243,0.06);
transition: 0.15s;
}
.v3-pd-agenda-row:first-child { border-top: 0; }
.v3-pd-agenda-row:hover { background: rgba(246,246,243,0.04); }
.v3-pd-agenda-row.featured {
background: linear-gradient(90deg, rgba(253,89,36,0.08), transparent 60%);
}
.v3-pd-agenda-row.featured:hover {
background: linear-gradient(90deg, rgba(253,89,36,0.12), rgba(246,246,243,0.03) 60%);
}
.v3-pd-agenda-row .when {
text-align: left;
border-right: 1px solid rgba(246,246,243,0.08);
padding-right: 16px;
}
.v3-pd-agenda-row .when .day {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
color: #f6f6f3;
line-height: 1;
}
.v3-pd-agenda-row .when .dow {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
color: rgba(246,246,243,0.5);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 4px;
}
.v3-pd-agenda-row .body .tag {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fd5924;
font-weight: 600;
}
.v3-pd-agenda-row .body .tag.violet { color: #b87cf2; }
.v3-pd-agenda-row .body .tag.azure { color: #5a9cff; }
.v3-pd-agenda-row .body .title {
font-size: 14.5px;
font-weight: 600;
color: #f6f6f3;
margin-top: 4px;
letter-spacing: -0.01em;
line-height: 1.3;
}
.v3-pd-agenda-row .body .meta {
font-size: 12px;
color: rgba(246,246,243,0.55);
margin-top: 3px;
line-height: 1.4;
}
.v3-pd-agenda-row .right .seats {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(246,246,243,0.7);
padding: 6px 10px;
background: rgba(246,246,243,0.06);
border-radius: 4px;
white-space: nowrap;
}
@media (max-width: 1100px) {
.v3-pd-faces-grid { grid-template-columns: repeat(6, 1fr); }
.v3-pd-face:nth-child(n+7) { display: none; }
.v3-pd-face.more { display: flex !important; }
.v3-pd-scenes-grid { grid-template-columns: 1fr; grid-template-rows: none; }
.v3-pd-scene { aspect-ratio: 16 / 9; }
.v3-pd-scene.wide { aspect-ratio: 16 / 9; grid-row: auto; }
}
@media (max-width: 720px) {
.v3-pd-faces-grid { grid-template-columns: repeat(3, 1fr); }
.v3-pd-face:nth-child(n+4) { display: none; }
.v3-pd-face.more { display: flex !important; }
.v3-pd-agenda-row { grid-template-columns: 48px 1fr; gap: 14px; }
.v3-pd-agenda-row .right { grid-column: 2; }
.v3-pd-agenda-row .when { padding-right: 12px; }
}
/* ============================================================
V3 PROGRAMME CARD VARIANT (shown on homepage)
============================================================ */
.v3-programmes-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.v3-programmes-grid > :only-child {
grid-column: 1 / -1;
}
.v3-product-pg {
padding: 0 !important;
gap: 0 !important;
overflow: hidden;
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
min-height: 0 !important;
background: #fff;
}
.v3-product-pg .v3-product-pg-body {
padding: 40px 36px;
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
background: #fff;
position: relative;
z-index: 1;
}
.v3-product-pg .v3-product-pg-media {
position: relative;
overflow: hidden;
background: #0d0c10;
width: 100%;
height: 100%;
min-height: 380px;
align-self: stretch;
}
.v3-product-pg .v3-product-pg-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.v3-product-pg:hover .v3-product-pg-media img { transform: scale(1.04); }
.v3-product-pg-media-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(13,12,16,0.18) 0%, rgba(13,12,16,0.62) 100%);
}
.v3-product-pg-media-stamp {
position: absolute;
left: 20px;
bottom: 20px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 100px;
background: rgba(13,12,16,0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #f6f6f3;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
border: 1px solid rgba(246,246,243,0.12);
}
.v3-product-pg-media-stamp .pulse {
width: 7px; height: 7px;
border-radius: 50%;
background: #fd5924;
box-shadow: 0 0 0 4px rgba(253,89,36,0.25);
animation: v3-pulse 2s infinite;
}
.v3-product-pg .v3-product-graph { display: none; }
@media (max-width: 880px) {
.v3-programmes-grid { grid-template-columns: 1fr !important; }
.v3-product-pg { grid-template-columns: 1fr; }
.v3-product-pg .v3-product-pg-media { min-height: 220px; order: -1; }
}
.v3-product-pg {
min-height: 420px;
}
.v3-product-pg h4 { color: var(--accent); }
.v3-product-pg-when {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11.5px;
color: rgba(36,36,36,0.55);
letter-spacing: 0.02em;
margin-top: -8px;
}
.v3-product-pg-when .cohort {
color: #0d0c10;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 10.5px;
}
.v3-product-pg-when .dot {
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(36,36,36,0.3);
}
.v3-product-pg-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 16px;
border-top: 1px dashed rgba(36,36,36,0.15);
gap: 12px;
flex-wrap: wrap;
}
.v3-product-pg-foot .deadline {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(36,36,36,0.65);
}
.v3-product-pg-foot .deadline .pulse {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 var(--accent);
animation: v3-pulse 2s infinite;
}
.v3-product-pg-foot .more {
font-size: 13px;
font-weight: 700;
}
@media (max-width: 880px) {
}
/* ============================================================
PRODUCT/PROGRAMME DETAIL PAGE (v3-pp-*)
============================================================ */
.v3-pp .v3-main { padding-bottom: 0; }
/* HERO */
.v3-pp-hero {
padding: 32px 56px 80px;
background:
radial-gradient(ellipse 1000px 600px at 100% 0%, var(--hero-accent, rgba(253,89,36,0.04)), transparent 60%),
linear-gradient(180deg, #f6f6f3 0%, #f0eee9 100%);
border-bottom: 1px solid rgba(36,36,36,0.08);
position: relative;
overflow: hidden;
}
.v3-pp-connect { --hero-accent: rgba(253,89,36,0.04); --pp-accent: #fd5924; }
.v3-pp-circles { --hero-accent: rgba(148,65,233,0.04); --pp-accent: #9441e9; }
.v3-pp-cities { --hero-accent: rgba(8,29,171,0.04); --pp-accent: #081dab; }
.v3-pp-rise { --hero-accent: rgba(253,89,36,0.04); --pp-accent: #fd5924; }
.v3-pp-sprint { --hero-accent: rgba(148,65,233,0.18); --pp-accent: #9441e9; }
.v3-pp-hero-bar {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.04em;
color: rgba(36,36,36,0.55);
text-transform: uppercase;
margin-bottom: 56px;
flex-wrap: wrap;
}
.v3-pp-hero-bar .back {
color: #0d0c10;
font-weight: 600;
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: 0.15s;
}
.v3-pp-hero-bar .back:hover { border-bottom-color: var(--pp-accent); }
.v3-pp-hero-bar .sep { color: rgba(36,36,36,0.25); }
.v3-pp-hero-bar .kind { color: var(--pp-accent); font-weight: 600; }
.v3-pp-hero-bar .deadline {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pp-accent);
font-weight: 600;
padding: 4px 10px;
background: rgba(253,89,36,0.08);
border-radius: 100px;
}
.v3-pp-sprint .v3-pp-hero-bar .deadline { background: rgba(148,65,233,0.1); }
.v3-pp-hero-bar .deadline .pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--pp-accent);
animation: v3-pulse 2s infinite;
}
.v3-pp-hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: start;
}
.v3-pp-hero-main h1 {
font-size: clamp(72px, 11vw, 168px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.92;
margin: 0 0 32px;
color: #0d0c10;
display: flex;
align-items: baseline;
}
.v3-pp-hero-main h1 .name { color: #0d0c10; }
.v3-pp-hero-main h1 .dot { color: var(--pp-accent); }
.v3-pp-sub {
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.3;
font-weight: 500;
color: #0d0c10;
letter-spacing: -0.015em;
margin: 0 0 24px;
max-width: 640px;
}
.v3-pp-pitch {
font-size: 16px;
line-height: 1.6;
color: rgba(36,36,36,0.7);
max-width: 580px;
margin: 0 0 32px;
}
.v3-pp-hero-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.v3-pp-hero-cta .primary {
background: #0d0c10;
color: #f6f6f3;
border: 0;
padding: 14px 22px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: 0.2s;
}
.v3-pp-hero-cta .primary:hover { background: var(--pp-accent); }
.v3-pp-hero-cta .secondary {
background: transparent;
color: #0d0c10;
border: 1px solid rgba(36,36,36,0.18);
padding: 13px 20px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
letter-spacing: -0.005em;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: 0.2s;
}
.v3-pp-hero-cta .secondary:hover { border-color: #0d0c10; background: rgba(13,12,16,0.04); }
/* hero meta sidebar */
.v3-pp-hero-meta {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 12px;
}
.v3-pp-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 4px;
overflow: hidden;
}
.v3-pp-stat {
padding: 20px 18px;
border-right: 1px solid rgba(36,36,36,0.06);
}
.v3-pp-stat:last-child { border-right: 0; }
.v3-pp-stat .n {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--pp-accent);
line-height: 1;
}
.v3-pp-stat .l {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(36,36,36,0.5);
margin-top: 8px;
}
.v3-pp-meta-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 4px;
overflow: hidden;
}
.v3-pp-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 14px 18px;
gap: 16px;
border-bottom: 1px solid rgba(36,36,36,0.06);
}
.v3-pp-meta-row:last-child { border-bottom: 0; }
.v3-pp-meta-row .k {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(36,36,36,0.45);
flex-shrink: 0;
}
.v3-pp-meta-row .v {
font-size: 13px;
font-weight: 600;
color: #0d0c10;
text-align: right;
letter-spacing: -0.005em;
}
/* FACES (Connect product page) */
.v3-pp-faces-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 16px;
}
.v3-pp-face {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
text-decoration: none;
color: inherit;
}
.v3-pp-face img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 4px;
filter: grayscale(0.3) contrast(1.05);
transition: 0.25s;
}
.v3-pp-face:hover img { filter: grayscale(0) contrast(1); }
.v3-pp-face-info .name {
font-size: 12.5px;
font-weight: 600;
color: #0d0c10;
line-height: 1.2;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v3-pp-face-info .role {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
color: rgba(36,36,36,0.55);
margin-top: 3px;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v3-pp-face.more {
background: #fff;
border: 1px dashed rgba(36,36,36,0.2);
border-radius: 4px;
padding: 14px;
align-items: flex-start;
justify-content: space-between;
aspect-ratio: 1 / 1.4;
transition: 0.2s;
}
.v3-pp-face.more:hover {
border-color: #fd5924;
background: rgba(253,89,36,0.04);
}
.v3-pp-face-more {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.03em;
color: #fd5924;
line-height: 1;
}
/* PILLARS (Inside section) */
.v3-pp-pillars {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: rgba(36,36,36,0.08);
border: 1px solid rgba(36,36,36,0.08);
border-radius: 4px;
overflow: hidden;
}
.v3-pp-pillar {
background: #fff;
padding: 32px;
display: grid;
grid-template-columns: 56px 1fr;
gap: 12px;
transition: 0.15s;
}
.v3-pp-pillar:hover { background: #faf9f5; }
.v3-pp-pillar .n {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 14px;
color: var(--pp-accent, #fd5924);
font-weight: 600;
letter-spacing: 0.04em;
padding-top: 4px;
}
.v3-pp-pillar h3 {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.015em;
color: #0d0c10;
margin: 0 0 8px;
line-height: 1.2;
}
.v3-pp-pillar p {
font-size: 14px;
line-height: 1.55;
color: rgba(36,36,36,0.65);
margin: 0;
}
/* TRACKS (Circles product page) */
.v3-pp-tracks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.v3-pp-track-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(246,246,243,0.12);
}
.v3-pp-track-head .label {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fd5924;
font-weight: 600;
}
.v3-pp-track-head .label.leader { color: #b87cf2; }
.v3-pp-track-head .meta {
font-size: 12px;
color: rgba(246,246,243,0.5);
}
.v3-pp-track-rows {
display: flex;
flex-direction: column;
background: rgba(246,246,243,0.03);
border: 1px solid rgba(246,246,243,0.08);
border-radius: 4px;
overflow: hidden;
}
.v3-pp-track-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 16px;
padding: 14px 18px;
align-items: center;
border-top: 1px solid rgba(246,246,243,0.06);
transition: 0.15s;
}
.v3-pp-track-row:first-child { border-top: 0; }
.v3-pp-track-row:hover { background: rgba(246,246,243,0.04); }
.v3-pp-track-row .code {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 12px;
color: #fd5924;
font-weight: 600;
letter-spacing: 0.04em;
}
.v3-pp-track-row.leader .code { color: #b87cf2; }
.v3-pp-track-row .name {
font-size: 14px;
font-weight: 600;
color: #f6f6f3;
letter-spacing: -0.005em;
}
.v3-pp-track-row .sub {
font-size: 12px;
color: rgba(246,246,243,0.55);
margin-top: 3px;
line-height: 1.4;
}
.v3-pp-track-row .seat {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(246,246,243,0.55);
white-space: nowrap;
}
.v3-pp-track-row .seat strong {
color: #f6f6f3;
font-weight: 700;
}
/* AGENDA (Connect product page) */
.v3-pp-agenda {
display: flex;
flex-direction: column;
background: rgba(246,246,243,0.03);
border: 1px solid rgba(246,246,243,0.08);
border-radius: 4px;
overflow: hidden;
}
.v3-pp-agenda-row {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 24px;
align-items: center;
padding: 18px 22px;
border-top: 1px solid rgba(246,246,243,0.06);
transition: 0.15s;
}
.v3-pp-agenda-row:first-child { border-top: 0; }
.v3-pp-agenda-row:hover { background: rgba(246,246,243,0.04); }
.v3-pp-agenda-row.featured {
background: linear-gradient(90deg, rgba(253,89,36,0.1), transparent 60%);
}
.v3-pp-agenda-row .when {
border-right: 1px solid rgba(246,246,243,0.08);
padding-right: 16px;
}
.v3-pp-agenda-row .when .day {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.03em;
color: #f6f6f3;
line-height: 1;
}
.v3-pp-agenda-row .when .dow {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
color: rgba(246,246,243,0.5);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 6px;
}
.v3-pp-agenda-row .body .tag {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fd5924;
font-weight: 600;
}
.v3-pp-agenda-row .body .tag.violet { color: #b87cf2; }
.v3-pp-agenda-row .body .tag.azure { color: #5a9cff; }
.v3-pp-agenda-row .body .title {
font-size: 15.5px;
font-weight: 600;
color: #f6f6f3;
margin-top: 5px;
letter-spacing: -0.01em;
line-height: 1.3;
}
.v3-pp-agenda-row .body .meta {
font-size: 12.5px;
color: rgba(246,246,243,0.55);
margin-top: 4px;
line-height: 1.4;
}
.v3-pp-agenda-row .right .seats {
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11.5px;
letter-spacing: 0.04em;
color: rgba(246,246,243,0.75);
padding: 7px 12px;
background: rgba(246,246,243,0.07);
border-radius: 4px;
white-space: nowrap;
}
.v3-pp-agenda-foot {
margin-top: 24px;
display: flex;
justify-content: center;
}
.v3-pp-see-all {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fd5924;
color: #0d0c10;
padding: 14px 22px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
letter-spacing: -0.005em;
transition: 0.2s;
}
.v3-pp-see-all:hover { background: #ff6b3a; }
.v3-pp-see-all span { transition: 0.2s; }
.v3-pp-see-all:hover span:last-child { transform: translateX(4px); }
/* FIT */
.v3-pp-fit {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(36,36,36,0.08);
border: 1px solid rgba(36,36,36,0.08);
border-radius: 4px;
overflow: hidden;
}
.v3-pp-fit-col {
background: #fff;
padding: 32px;
}
.v3-pp-fit-col.no { background: #faf9f5; }
.v3-pp-fit-head {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #0d0c10;
font-weight: 600;
margin-bottom: 20px;
}
.v3-pp-fit-head .dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--pp-accent, #fd5924);
}
.v3-pp-fit-col.no .v3-pp-fit-head .dot {
background: transparent;
border: 1.5px solid rgba(36,36,36,0.35);
}
.v3-pp-fit-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.v3-pp-fit-col li {
font-size: 15px;
line-height: 1.5;
color: rgba(36,36,36,0.85);
padding-left: 22px;
position: relative;
letter-spacing: -0.005em;
}
.v3-pp-fit-col li::before {
content: '';
position: absolute;
left: 0; top: 9px;
width: 8px; height: 2px;
background: var(--pp-accent, #fd5924);
}
.v3-pp-fit-col.no li::before { background: rgba(36,36,36,0.35); }
.v3-pp-fit-col.no li { color: rgba(36,36,36,0.55); }
/* SIBLINGS */
.v3-pp-siblings-section { background: #faf9f5; }
.v3-pp-siblings {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.v3-pp-sibling {
background: #fff;
border: 1px solid rgba(36,36,36,0.08);
border-radius: 4px;
padding: 28px;
display: flex;
flex-direction: column;
gap: 14px;
text-decoration: none;
color: inherit;
transition: 0.2s;
}
.v3-pp-sibling:hover {
border-color: var(--accent, #fd5924);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(36,36,36,0.06);
}
.v3-pp-sibling-connect { --accent: #fd5924; }
.v3-pp-sibling-circles { --accent: #9441e9; }
.v3-pp-sibling-cities { --accent: #081dab; }
.v3-pp-sibling-rise { --accent: #fd5924; }
.v3-pp-sibling-sprint { --accent: #9441e9; }
.v3-pp-sibling .head {
display: flex;
justify-content: space-between;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.v3-pp-sibling .head .tag { color: var(--accent); font-weight: 600; }
.v3-pp-sibling .head .price { color: rgba(36,36,36,0.45); }
.v3-pp-sibling h4 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.025em;
margin: 0;
color: #0d0c10;
}
.v3-pp-sibling p {
font-size: 13px;
line-height: 1.55;
color: rgba(36,36,36,0.65);
margin: 0;
flex: 1;
}
.v3-pp-sibling .more {
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 6px;
}
.v3-pp-sibling .more span { transition: 0.2s; }
.v3-pp-sibling:hover .more span { transform: translateX(4px); }
/* Make sure "first" section (no faces section before it) has the right spacing */
.v3-pp-first-section { padding-top: 88px; }
/* CTA spacing on product pages */
.v3-pp-cta { border-top: 1px solid rgba(36,36,36,0.08); }
/* RESPONSIVE */
@media (max-width: 1100px) {
.v3-pp-hero-grid { grid-template-columns: 1fr; gap: 48px; }
.v3-pp-hero-meta { padding-top: 0; }
.v3-pp-faces-grid { grid-template-columns: repeat(5, 1fr); }
.v3-pp-face:nth-child(n+5) { display: none; }
.v3-pp-face.more { display: flex !important; }
.v3-pp-pillars { grid-template-columns: 1fr; }
.v3-pp-tracks { grid-template-columns: 1fr; }
.v3-pp-fit { grid-template-columns: 1fr; }
.v3-pp-siblings { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.v3-pp-hero { padding: 24px 24px 56px; }
.v3-pp-hero-bar { margin-bottom: 32px; }
.v3-pp-hero-main h1 { font-size: clamp(56px, 18vw, 96px); }
.v3-pp-stats { grid-template-columns: repeat(3, 1fr); }
.v3-pp-faces-grid { grid-template-columns: repeat(3, 1fr); }
.v3-pp-face:nth-child(n+3) { display: none; }
.v3-pp-face.more { display: flex !important; }
.v3-pp-pillar { padding: 24px; }
.v3-pp-agenda-row { grid-template-columns: 56px 1fr; gap: 16px; }
.v3-pp-agenda-row .right { grid-column: 2; }
.v3-pp-agenda-row .when { padding-right: 12px; }
}
/* ============================================================
GLOBAL HEADLINE SCALE
Hero headlines × 0.9 · Section titles × 0.85
Applied last so it cascades over every hero/section variant.
============================================================ */
.v3-hero h1 { font-size: clamp(50px, 7.2vw, 108px); }
.v3-cn-hero-h1 { font-size: clamp(43px, 6.75vw, 94px); }
.v3-cx-hero-h1 { font-size: clamp(40px, 6.3vw, 86px); }
.v3-rx-hero-h1 { font-size: clamp(40px, 6.3vw, 86px); }
.v3-rs-hero-h1 { font-size: clamp(40px, 5.85vw, 86px); }
.v3-rcp-hero-h1 { font-size: clamp(38px, 5.85vw, 76px); }
.v3-ph-h1 { font-size: clamp(43px, 6.75vw, 94px); }
.v3-pp-hero-main h1 { font-size: clamp(65px, 9.9vw, 151px); }
.v3-section h2 { font-size: clamp(36px, 4.88vw, 72px); }
/* === TIMELINE EMPTY STATE === */
.v3-tl-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 64px 24px;
text-align: center;
color: rgba(13,12,16,0.45);
background: #faf9f5;
border: 1.5px dashed rgba(13,12,16,0.1);
border-radius: 12px;
}
.v3-tl-empty-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(13,12,16,0.05);
display: flex;
align-items: center;
justify-content: center;
color: rgba(13,12,16,0.3);
}
.v3-tl-empty p {
font-size: 15px;
line-height: 1.5;
max-width: 320px;
margin: 0;
}
.v3-tl-empty-reset {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 100px;
border: 1px solid rgba(13,12,16,0.14);
background: #fff;
color: #0d0c10;
font-family: 'Fira Mono', ui-monospace, monospace;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: 0.15s;
}
.v3-tl-empty-reset:hover {
background: #0d0c10;
color: #f6f6f3;
border-color: #0d0c10;
}