/* ================================================================
TP SalesFlow v5 — white · red · League Spartan
Sticky-frame architecture with scroll-driven content morph
================================================================ */
:root{
/* surfaces */
--bg: #FFFFFF;
--bg-2: #FAFAFA;
--bg-3: #F4F4F4;
/* ink */
--ink: #0A0A0A;
--ink-2: #1A1A1A;
--ink-soft: #2C2C2C;
--muted: #6B6B6B;
--muted-2: #9A9A9A;
/* lines */
--line: #ECECEC;
--line-2: #DCDCDC;
/* brand red */
--red: #E11D2E;
--red-dk: #B91626;
--red-soft: #FFE4E7;
--red-tint: #FFF1F3;
/* shadows */
--sh-sm: 0 1px 2px rgba(10,10,10,.04), 0 2px 6px rgba(10,10,10,.04);
--sh-md: 0 4px 16px rgba(10,10,10,.06), 0 12px 40px -16px rgba(10,10,10,.10);
--sh-lg: 0 12px 40px -8px rgba(10,10,10,.10), 0 40px 80px -32px rgba(10,10,10,.16);
--sh-red: 0 20px 60px -20px rgba(225,29,46,.30);
/* typography */
--ff: "League Spartan", system-ui, -apple-system, sans-serif;
/* layout */
--rad-sm: 8px;
--rad-md: 14px;
--rad-lg: 20px;
--rad-xl: 28px;
--rad-frame: 18px;
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html{
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
/* ================================================================
HYBRID SCALE WRAPPER
The page is authored at 1920px design width. CSS `zoom` is set on
#design-root by main.js so the same design renders correctly at any
desktop viewport (matching the bridge video overlays' scale exactly):
viewport >= 1920px : zoom = 1, design-root centered (letterbox)
viewport 1280–1919 : zoom = innerWidth / 1920 (scaled DOWN to fit)
viewport < 1280 : zoom cleared, mobile responsive layout
We use `zoom` (not transform:scale) because zoom recomputes layout —
keeps position:fixed bridge frames pinned to viewport, removes the
need for a body-height hack, and gives crisper text rasterisation.
================================================================ */
#design-root{
width: 1920px;
margin: 0 auto;
/* Hidden on first paint to prevent FOUC: the page is authored at 1920px
and only gets scaled to fit once main.js applies CSS `zoom`. Without
this, sub-1920 viewports show the page at its huge native size for a
few frames. JS adds .is-ready after applyHybridScale() runs; a 200ms
setTimeout fallback also adds it so the page can't get stuck blank. */
opacity: 0;
}
#design-root.is-ready{
opacity: 1;
}
@media (max-width: 1279px){
#design-root{
width: 100%;
margin: 0;
zoom: 1 !important;
}
}
body{
font-family: var(--ff);
background: var(--bg);
color: var(--ink);
font-size: 17px;
line-height: 1.55;
font-weight: 400;
letter-spacing: -.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,svg{ display: block; max-width: 100%; }
button{ font: inherit; }
a{ color: inherit; }
/* ================================================================
NAV
================================================================ */
.nav{
position: sticky; top: 0; z-index: 60;
background: rgba(255,255,255,.85);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid var(--line);
}
.nav-inner{
display: flex; align-items: center; justify-content: space-between;
max-width: 1280px; margin: 0 auto;
padding: 14px 28px;
}
.logo{
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none; color: var(--ink);
}
.logo-mark{
width: 26px; height: 26px; border-radius: 50%;
background: var(--red); position: relative;
box-shadow: 0 0 0 0 rgba(225,29,46,0);
animation: pulseDot 3.6s ease-in-out infinite;
}
.logo-mark::after{
content: ""; position: absolute; inset: 6px;
border-radius: 50%; border: 1.5px solid #fff;
border-right-color: transparent; border-bottom-color: transparent;
transform: rotate(-30deg);
}
@keyframes pulseDot{
0%,100%{ box-shadow: 0 0 0 0 rgba(225,29,46,.0); }
50% { box-shadow: 0 0 0 6px rgba(225,29,46,.10); }
}
.logo-text{ font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.logo-text b{ font-weight: 700; }
.nav-links{ display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn){
color: var(--ink-soft); text-decoration: none;
font-size: 15px; font-weight: 500; letter-spacing: -.005em;
transition: color .15s ease;
}
.nav-links a:not(.btn):hover{ color: var(--red); }
.nav-burger{
display: none;
background: none; border: 0; cursor: pointer;
padding: 10px; gap: 5px; flex-direction: column;
}
.nav-burger span{
display: block; width: 22px; height: 1.6px;
background: var(--ink); border-radius: 2px;
transition: transform .25s ease, opacity .25s ease;
}
@media (max-width: 880px){
.nav-links a:not(.btn){ display: none; }
/* --- Mobile dropdown nav (v4-style behavior in v5 chrome) --- */
.nav-burger{ display: flex; }
/* Burger lines morph to X when the panel is open */
.nav-links.open ~ .nav-burger span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
.nav-links.open ~ .nav-burger span:nth-child(2){ opacity: 0; }
.nav-links.open ~ .nav-burger span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }
/* Convert .nav-links into a dropdown panel anchored under the sticky bar */
.nav-links{
position: absolute;
top: 100%;
left: 16px;
right: 16px;
margin-top: 8px;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 10px;
background: rgba(255,255,255,.98);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,.28);
transform: translateY(-8px) scale(.98);
transform-origin: top right;
opacity: 0;
pointer-events: none;
transition: opacity .22s ease, transform .22s ease;
z-index: 55;
}
.nav-links.open{
transform: none;
opacity: 1;
pointer-events: auto;
}
/* Panel items — full-width tap targets */
.nav-links.open a:not(.btn){
display: flex;
width: 100%;
align-items: center;
font-size: 15px;
padding: 12px 14px;
color: var(--ink);
border-radius: 10px;
}
.nav-links.open a:not(.btn):hover,
.nav-links.open a:not(.btn):focus{
background: var(--bg-2);
color: var(--red);
}
.nav-links.open a.is-current{
color: var(--red);
font-weight: 600;
background: rgba(225,29,46,.08);
}
.nav-links.open a.is-current::after{ display: none; }
/* Demo CTA — full-width branded button at bottom of panel */
.nav-links a.btn{
margin-top: 6px;
padding: 13px 14px;
justify-content: center;
width: 100%;
}
}
/* ================================================================
BUTTONS
================================================================ */
.btn{
display: inline-flex; align-items: center; gap: 9px;
padding: 12px 22px; border-radius: 999px;
font-family: var(--ff); font-size: 15px; font-weight: 500;
letter-spacing: -.005em; text-decoration: none;
border: 1px solid transparent; cursor: pointer;
transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn .arr{ display: inline-block; transition: transform .18s ease; }
.btn:hover .arr{ transform: translateX(4px); }
.btn-primary{
background: var(--red); color: #fff;
box-shadow: 0 8px 22px -10px rgba(225,29,46,.55);
}
.btn-primary:hover{ background: var(--red-dk); transform: translateY(-1px); box-shadow: 0 14px 32px -12px rgba(225,29,46,.65); }
.btn-ghost{
background: transparent; color: var(--ink); border-color: var(--line-2);
}
.btn-ghost:hover{ border-color: var(--ink); background: var(--bg-2); }
.btn-lg{ padding: 16px 28px; font-size: 16px; }
.btn-xl{ padding: 20px 36px; font-size: 17px; font-weight: 500; }
/* ================================================================
HERO
================================================================ */
.hero{
position: relative;
padding: 120px 28px 100px;
overflow: hidden;
}
.hero::before{
/* subtle red bloom in the upper-right */
content: ""; position: absolute; top: -200px; right: -200px;
width: 800px; height: 800px;
background: radial-gradient(closest-side, rgba(225,29,46,.16), transparent 70%);
pointer-events: none;
z-index: 0;
}
.hero-inner{
position: relative; z-index: 1;
max-width: 1400px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.7fr;
gap: 56px; align-items: center;
}
.hero-text h1{
font-family: var(--ff);
font-weight: 600;
font-size: clamp(56px, 8vw, 116px);
line-height: .94;
letter-spacing: -.045em;
margin-bottom: 32px;
text-wrap: balance;
}
.hero-body{
font-size: 17px; line-height: 1.6; color: var(--ink-soft);
max-width: 540px; margin-bottom: 16px;
text-wrap: pretty;
}
.hero-text .btn{ margin-top: 20px; }
/* Hero visual: GHL pipeline preview — mockup IS the visual, no extra chrome */
.hero-visual{
display: flex; align-items: center; justify-content: center;
perspective: 2400px;
perspective-origin: 50% 30%;
}
.hero-frame{
position: relative;
width: 100%; max-width: 720px;
aspect-ratio: 16 / 9;
display: flex; flex-direction: column;
/* Hero text is on the LEFT — frame faces left (rotateY negative) */
transform: rotateY(-6deg) rotateX(2deg);
transform-style: preserve-3d;
transition: transform .8s cubic-bezier(.2,.7,.25,1);
}
.hero-frame .hero-frame-body{ flex: 1; height: auto; }
.hero-frame-glow{
position: absolute; inset: -40%;
background: radial-gradient(closest-side, rgba(225,29,46,.18), transparent 70%);
pointer-events: none;
animation: glowDrift 12s ease-in-out infinite alternate;
}
@keyframes glowDrift{
from{ transform: translate(-8%,-4%); }
to { transform: translate(8%, 6%); }
}
.hero-frame-bar{
position: relative; z-index: 2;
display: flex; align-items: center; gap: 8px;
padding: 12px 16px;
background: var(--bg-2);
border-bottom: 1px solid var(--line);
font-size: 12px; color: var(--muted);
}
.hero-frame-bar .dot,
.frame-bar .dot{
width: 9px; height: 9px; border-radius: 50%;
background: var(--line-2);
}
.hero-frame-bar .dot:first-child,
.frame-bar .dot:first-child{ background: #FF5F57; }
.hero-frame-bar .dot:nth-child(2),
.frame-bar .dot:nth-child(2){ background: #FEBC2E; }
.hero-frame-bar .dot:nth-child(3),
.frame-bar .dot:nth-child(3){ background: #28C840; }
.hero-frame-title,
.frame-title{
margin-left: 10px;
font-size: 12px; font-weight: 500;
letter-spacing: -.01em; color: var(--ink-soft);
}
.hero-frame-body{
position: relative; z-index: 1;
height: calc(100% - 42px);
display: flex; align-items: center; justify-content: center;
}
/* Hero mini-pipeline (no sidebar, condensed) */
.hero-pipe{
width: 100%; height: 100%;
padding: 12px 14px 14px;
display: flex; flex-direction: column;
font-family: "Inter", system-ui, sans-serif;
position: relative; z-index: 2;
}
.hero-pipe-tabs{
display: flex; align-items: center; gap: 16px;
padding: 0 2px 8px;
border-bottom: 1px solid var(--line);
font-size: 11px;
flex-shrink: 0;
}
.hero-pipe-tab{
color: var(--muted);
padding: 2px 0;
border-bottom: 2px solid transparent;
margin-bottom: -10px;
padding-bottom: 8px;
}
.hero-pipe-tab.active{
color: var(--ink); font-weight: 600;
border-bottom-color: var(--red);
}
.hero-pipe-stat{
margin-left: auto; color: var(--muted); font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
.hero-pipe-stat strong{ color: var(--red); font-weight: 600; }
.hero-pipe-cols{
flex: 1;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding-top: 12px;
min-height: 0;
}
.hpcol{
display: flex; flex-direction: column; gap: 4px;
background: var(--bg-2);
border-radius: 6px;
padding: 7px 6px;
min-width: 0;
}
.hpcol-h{
display: flex; align-items: center; justify-content: space-between;
font-size: 10.5px; font-weight: 600;
color: var(--ink);
padding: 0 2px 5px;
border-bottom: 1px solid var(--line);
letter-spacing: -.005em;
}
.hpcol-h span:last-child{ color: var(--muted); font-weight: 500; font-size: 9.5px; }
.hpcard{
background: #fff;
border: 1px solid var(--line);
border-left: 3px solid var(--line-2);
border-radius: 4px;
padding: 6px 7px;
font-size: 9.5px;
color: var(--ink-soft);
display: flex; align-items: center; justify-content: space-between;
position: relative;
letter-spacing: -.005em;
white-space: nowrap; overflow: hidden;
}
.hpcard > strong{ font-weight: 600; color: var(--ink); font-size: 9.5px; flex-shrink: 0; margin-left: 6px; }
.hpcard.hot{
border-left-color: var(--red);
background: linear-gradient(90deg, rgba(225,29,46,.07), #fff 60%);
}
.hpcard.won{
border-left-color: #10B981;
background: linear-gradient(90deg, rgba(16,185,129,.07), #fff 60%);
}
.hpcard.hpc-new{
animation: hpcNewIn 6.4s ease-out infinite;
}
@keyframes hpcNewIn{
0% { opacity: 0; transform: translateY(-6px); }
6% { opacity: 1; transform: translateY(0); }
100% { opacity: 1; transform: translateY(0); }
}
.hppulse{
position: absolute; right: 7px; top: 50%;
transform: translate(0,-50%);
width: 5px; height: 5px;
border-radius: 50%;
background: var(--red);
box-shadow: 0 0 0 0 rgba(225,29,46,.6);
animation: hppulseAnim 2s ease-in-out infinite;
}
.hpcard.hot > strong{ margin-right: 12px; }
@keyframes hppulseAnim{
0%, 100%{ box-shadow: 0 0 0 0 rgba(225,29,46,.5); }
50% { box-shadow: 0 0 0 6px rgba(225,29,46,0); }
}
@media (max-width: 980px){
.hero{ padding: 90px 22px 70px; }
.hero-inner{ grid-template-columns: 1fr; gap: 50px; }
.hero-visual{ min-height: 380px; }
}
/* ================================================================
MODULES — sticky frame architecture
================================================================ */
.modules{
position: relative;
padding: 120px 28px 120px;
background: var(--bg);
}
.modules-grid{
position: relative;
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px;
/* IMPORTANT: do not use align-items: start here — it collapses the right
column to its content height (560px), which kills position:sticky
because the sticky element needs a tall containing block to scroll within. */
}
.modules-text{ display: flex; flex-direction: column; gap: 0; }
.module{
min-height: 92vh;
padding: 60px 0;
display: flex; flex-direction: column; justify-content: center;
}
.module:first-child{ padding-top: 0; }
.module-num{
font-size: 13px; font-weight: 600; letter-spacing: .14em;
color: var(--red); margin-bottom: 22px;
display: inline-flex; align-items: center; gap: 10px;
}
.module-num::after{
content: ""; display: inline-block; width: 36px; height: 1px;
background: var(--red); opacity: .6;
}
.module-h{
font-family: var(--ff);
font-weight: 600;
font-size: clamp(36px, 4.4vw, 56px);
line-height: 1.04;
letter-spacing: -.035em;
margin-bottom: 28px;
text-wrap: balance;
}
.module-list{
list-style: none; padding: 0; margin: 0 0 36px;
border-top: 1px solid var(--line);
}
.module-list > li{
padding: 18px 0 18px 28px;
border-bottom: 1px solid var(--line);
font-size: 16px; line-height: 1.55; color: var(--ink-soft);
position: relative;
}
.module-list > li::before{
content: ""; position: absolute; left: 0; top: 28px;
width: 14px; height: 1.5px; background: var(--red);
}
.module-sublist{
list-style: none; margin: 12px 0 0; padding-left: 0;
}
.module-sublist li{
padding: 6px 0 6px 18px;
font-size: 15px; color: var(--muted);
position: relative;
}
.module-sublist li::before{
content: "·"; position: absolute; left: 0; color: var(--red);
font-weight: 700;
}
/* ================================================================
STICKY FRAME (right column)
The right grid column stretches to match the tall left column so the
sticky element below has room to actually stick.
================================================================ */
.modules-frame-col{
position: relative;
height: 100%;
}
.modules-frame-sticky{
position: sticky;
top: 96px;
height: calc(100vh - 140px);
max-height: 720px;
display: flex; flex-direction: column;
transform-style: preserve-3d;
perspective: 1400px;
}
.modules-frame-sticky > .frame{
transform: rotateX(var(--tilt, 0deg));
transition: transform .25s ease-out;
}
.frame{
position: relative;
width: 100%; flex: 1;
overflow: hidden;
}
.frame-stage{
position: relative;
overflow: hidden;
}
/* ================================================================
Frame state transitions — clean crossfade with red backlight wash
================================================================ */
.frame-bloom{
position: absolute; inset: 0;
background:
radial-gradient(closest-side at 50% 50%,
rgba(225,29,46, .55) 0%,
rgba(225,29,46, .22) 38%,
transparent 72%),
radial-gradient(closest-side at 50% 50%,
rgba(255,90,110, .35) 0%, transparent 50%);
opacity: var(--bloom, 0);
z-index: 6;
pointer-events: none;
transition: opacity .12s linear;
mix-blend-mode: normal;
}
.frame-state{
position: absolute; inset: 0;
z-index: 2;
opacity: 0;
transform: scale(.96);
filter: blur(8px);
transition: opacity .45s cubic-bezier(.4,0,.2,1),
transform .45s cubic-bezier(.4,0,.2,1),
filter .45s cubic-bezier(.4,0,.2,1);
pointer-events: none;
will-change: opacity, transform, filter;
background: #fff;
overflow: hidden;
}
.frame-state.is-active{
opacity: 1;
transform: scale(1);
filter: blur(0);
pointer-events: auto;
}
/* ================================================================
STATE 1 — Facebook ad placement
================================================================ */
.fb-shell{
height: 100%;
background: #F0F2F5;
display: flex; flex-direction: column;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fb-topbar{
background: #fff;
border-bottom: 1px solid #DADDE1;
padding: 9px 14px;
display: flex; align-items: center; gap: 12px;
flex-shrink: 0;
}
.fb-logo{
width: 30px; height: 30px;
border-radius: 8px;
background: #1877F2;
color: #fff;
font-size: 22px; font-weight: 800; line-height: 1;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fb-search{
flex: 1;
background: #F0F2F5;
border-radius: 999px;
padding: 8px 14px;
font-size: 12.5px; color: #65676B;
}
.fb-icons{ display: flex; gap: 6px; }
.fb-icons span{
width: 30px; height: 30px;
border-radius: 50%;
background: #E4E6EB;
display: inline-block;
}
.fb-feed{
flex: 1; overflow: hidden;
padding: 12px;
display: flex; flex-direction: column; gap: 12px;
}
.fb-ad{
background: #fff;
border-radius: 8px;
border: 1px solid #DADDE1;
padding: 12px 14px;
display: flex; flex-direction: column; gap: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.fb-ad-head{ display: flex; align-items: center; gap: 8px; }
.fb-avatar{
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--red), var(--red-dk));
flex-shrink: 0;
}
.fb-meta{ flex: 1; min-width: 0; }
.fb-page{ font-size: 13px; font-weight: 600; color: #050505; line-height: 1.2; }
.fb-sub{ font-size: 11.5px; color: #65676B; line-height: 1.2; margin-top: 1px; }
.fb-dots{ color: #65676B; font-size: 16px; font-weight: 700; padding: 0 4px; }
.fb-ad-copy{ font-size: 13px; line-height: 1.4; color: #050505; }
.fb-ad-creative{
position: relative;
aspect-ratio: 16/8.5;
border-radius: 6px; overflow: hidden;
background: linear-gradient(135deg, #1A1A1A, #0A0A0A);
}
.fb-ad-creative.alt{ background: linear-gradient(135deg, #B91626, #5B0810); }
.fb-ad-creative-grad{
position: absolute; inset: 0;
background: radial-gradient(at 30% 30%, rgba(255,255,255,.20), transparent 60%);
}
.fb-ad-headline{
position: absolute; left: 12px; top: 14px; right: 90px;
color: #fff;
}
.fb-ad-h{
font-size: 16px; font-weight: 700; letter-spacing: -.01em;
line-height: 1.15; margin-bottom: 4px;
text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.fb-ad-d{
font-size: 10px; opacity: .80; text-transform: uppercase; letter-spacing: .06em;
font-weight: 600;
}
.fb-ad-btn{
position: absolute; right: 10px; bottom: 10px;
background: var(--red); color: #fff;
font-size: 11px; font-weight: 700;
padding: 7px 12px; border-radius: 5px;
}
.fb-ad-actions{
display: flex; gap: 18px;
padding-top: 8px;
border-top: 1px solid #E4E6EB;
font-size: 11.5px; color: #65676B; font-weight: 600;
}
.fb-ad-compact .fb-ad-creative{ aspect-ratio: 16/7.5; }
/* ================================================================
STATES 2 + 3 — Go High Level shell
================================================================ */
.ghl-shell{
height: 100%;
display: flex;
background: #fff;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 12px;
}
.ghl-side{
width: 50px; flex-shrink: 0;
background: #1F2937;
display: flex; flex-direction: column;
padding: 12px 0;
align-items: center;
gap: 6px;
}
.ghl-side-logo{
width: 32px; height: 32px;
border-radius: 8px;
background: var(--red);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 800;
margin-bottom: 8px;
box-shadow: 0 4px 12px -4px rgba(225,29,46,.45);
}
.ghl-side-list{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 2px; width: 100%; align-items: center;
}
.ghl-side-list li{
width: 36px; height: 34px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
color: #9CA3AF;
cursor: pointer;
transition: background .15s, color .15s;
}
.ghl-side-list li.active{
background: rgba(225,29,46,.22);
color: #fff;
box-shadow: inset 2px 0 0 var(--red);
}
.ghl-side-list li:hover:not(.active){ background: rgba(255,255,255,.04); color: #D1D5DB; }
.ghl-main{
flex: 1; min-width: 0;
display: flex; flex-direction: column;
background: #F9FAFB;
}
.ghl-header{
background: #fff;
border-bottom: 1px solid #E5E7EB;
padding: 10px 14px;
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.ghl-crumb{ font-size: 11.5px; color: #6B7280; letter-spacing: -.005em; }
.ghl-crumb strong{ color: #111827; font-weight: 600; }
.ghl-crumb-sep{ margin: 0 6px; color: #D1D5DB; }
.ghl-tools{ display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6B7280; }
.ghl-search{
background: #F3F4F6;
border-radius: 6px;
padding: 5px 10px;
font-size: 11px; color: #6B7280;
}
.ghl-bell{ font-size: 13px; }
.ghl-avatar{
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--red), var(--red-dk));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 9.5px; font-weight: 700;
}
.ghl-tabs{
background: #fff;
border-bottom: 1px solid #E5E7EB;
padding: 7px 14px;
display: flex; align-items: center; gap: 18px;
font-size: 11.5px;
flex-shrink: 0;
}
.ghl-tab{ color: #6B7280; padding: 4px 0; border-bottom: 2px solid transparent; cursor: pointer; }
.ghl-tab.active{ color: #111827; font-weight: 600; border-bottom-color: var(--red); }
.ghl-stat{ margin-left: auto; color: #6B7280; font-size: 11px; }
.ghl-stat strong{ color: var(--red); font-weight: 600; }
/* Pipeline (state 2) */
.ghl-pipeline{
flex: 1;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 10px;
overflow: hidden;
}
.ghl-col{
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 8px;
display: flex; flex-direction: column; gap: 6px;
min-width: 0;
}
.ghl-col-h{
display: flex; flex-direction: column; gap: 1px;
padding-bottom: 6px;
border-bottom: 1px solid #F3F4F6;
}
.ghl-col-name{ font-size: 11.5px; font-weight: 600; color: #111827; letter-spacing: -.005em; }
.ghl-col-stat{ font-size: 10px; color: #6B7280; font-variant-numeric: tabular-nums; }
.ghl-card{
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 6px;
padding: 7px 8px;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
display: flex; flex-direction: column; gap: 3px;
font-size: 10.5px;
border-left: 3px solid #D1D5DB;
}
.ghl-card.dim{ opacity: .55; }
.ghl-card.hot{
border-left-color: var(--red);
background: linear-gradient(90deg, rgba(225,29,46,.07), #fff 50%);
}
.ghl-card.won{
border-left-color: #10B981;
background: linear-gradient(90deg, rgba(16,185,129,.07), #fff 50%);
}
.ghl-card-name{ font-size: 11px; font-weight: 600; color: #111827; line-height: 1.2; }
.ghl-card-val{
font-size: 10.5px; font-weight: 600; color: #111827;
font-variant-numeric: tabular-nums;
}
.ghl-card-meta{
display: flex; justify-content: space-between; align-items: center;
font-size: 9.5px; color: #6B7280;
}
.ghl-src{
background: #F3F4F6; color: #4B5563;
border-radius: 3px;
padding: 1px 5px;
font-size: 9px; font-weight: 500;
}
.ghl-flag{ color: var(--red); font-size: 11px; line-height: 1; }
.ghl-flag.won{ color: #10B981; }
/* Contacts table (state 3) */
.ghl-table{
width: 100%;
border-collapse: collapse;
background: #fff;
font-size: 11px;
flex: 1;
}
.ghl-table thead{ background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
.ghl-table th{
padding: 9px 12px;
text-align: left;
font-size: 9.5px; font-weight: 600;
color: #6B7280;
text-transform: uppercase; letter-spacing: .06em;
}
.ghl-th-check{ width: 28px; padding-right: 0 !important; }
.ghl-th-act{ width: 36px; }
.ghl-check{
display: inline-block;
width: 14px; height: 14px;
border: 1.5px solid #D1D5DB;
border-radius: 3px;
background: #fff;
}
.ghl-tr{ border-bottom: 1px solid #F3F4F6; transition: background .15s; }
.ghl-tr td{ padding: 9px 12px; vertical-align: middle; }
.ghl-tr.dim{ opacity: .55; }
.ghl-tr.hot td:first-child{ position: relative; }
.ghl-tr.hot td:first-child::before{
content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
width: 2.5px; background: var(--red); border-radius: 0 2px 2px 0;
}
.ghl-tr-name{ display: flex; align-items: center; gap: 10px; }
.ghl-av{
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--red), var(--red-dk));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700;
flex-shrink: 0;
}
.ghl-tr-name > div{ min-width: 0; }
.ghl-tr-name > div > div:first-child{
font-size: 11.5px; font-weight: 600; color: #111827;
margin-bottom: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ghl-tr-sub{
font-size: 10px; color: #6B7280;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 200px;
}
.ghl-status{
display: inline-flex; align-items: center; gap: 4px;
font-size: 10.5px; font-weight: 500;
}
.ghl-status.hot{ color: var(--red); }
.ghl-status.warm{ color: #D97706; }
.ghl-status.cold{ color: #6B7280; }
.ghl-tag{
display: inline-block;
font-size: 9.5px; font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
white-space: nowrap;
}
.tag-hot{ background: rgba(225,29,46,.10); color: var(--red); }
.tag-warm{ background: #FEF3C7; color: #92400E; }
.tag-cold{ background: #F3F4F6; color: #6B7280; }
.ghl-act{ color: #6B7280; font-size: 14px; cursor: pointer; }
/* mobile collapses sticky to inline */
@media (max-width: 980px){
.modules{ padding: 60px 22px; }
.modules-grid{ grid-template-columns: 1fr; gap: 24px; }
.module{ min-height: auto; padding: 30px 0; }
.modules-frame-col{ order: -1; }
.modules-frame-sticky{ position: relative; top: 0; height: 420px; }
}
/* ================================================================
CSOMAGOK TEASER
================================================================ */
.csomagok-teaser{
/* Splash CTA — bg starts transparent so the trans-7 bridge can play
THROUGH the section. Once the bridge has fully faded out (onLeave
fires), main.js adds .is-cta-revealed and the dark bg + red glow
ease in over .7s instead of snapping (smoother feel, no spawn-in). */
position: relative;
overflow: hidden;
min-height: 70vh;
padding: 90px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 36px;
text-align: center;
background-color: transparent;
color: var(--ink);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background-color .7s cubic-bezier(.4,0,.2,1),
color .7s cubic-bezier(.4,0,.2,1);
}
.csomagok-teaser.is-cta-revealed{
background-color: var(--ink) !important;
color: #fff;
}
.csomagok-teaser::before{
/* Red radial glow — only visible once dark bg is on. Fades in
alongside the bg so the two coordinate as one move. */
content: '';
position: absolute;
inset: 0;
background: radial-gradient(closest-side at 50% 50%,
rgba(225,29,46,0.32) 0%,
rgba(225,29,46,0.10) 50%,
transparent 70%);
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity .7s cubic-bezier(.4,0,.2,1);
}
.csomagok-teaser.is-cta-revealed::before{
opacity: 1;
}
.csomagok-teaser > *{
position: relative;
z-index: 1;
}
.csomagok-teaser h2{
font-family: var(--ff);
font-size: clamp(40px, 5.4vw, 72px);
font-weight: 600;
line-height: .98;
letter-spacing: -0.04em;
max-width: 18ch;
text-wrap: balance;
color: inherit;
transition: color .7s cubic-bezier(.4,0,.2,1);
}
.csomagok-teaser.is-cta-revealed h2{
color: #fff;
}
.csomagok-teaser .btn-primary{
background: var(--red);
}
.csomagok-teaser .btn-primary:hover{
background: #fff;
color: var(--red);
}
/* ================================================================
MIÉRT MÁS / KINEK VALÓ
================================================================ */
.cards-row{
padding: 120px 28px;
}
.cards-row-inner{
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 28px;
}
.big-card{
background: #fff;
border: 1px solid var(--line);
border-radius: var(--rad-xl);
padding: 48px 44px;
position: relative;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.big-card:hover{
transform: translateY(-4px);
box-shadow: var(--sh-lg);
border-color: var(--line-2);
}
.big-card::before{
content: ""; position: absolute; top: -50%; right: -30%;
width: 70%; aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(225,29,46,.10), transparent 70%);
pointer-events: none;
}
.big-card-eyebrow{
font-size: 12px; font-weight: 600; letter-spacing: .14em;
color: var(--red); margin-bottom: 16px;
}
.big-card-h{
font-family: var(--ff); font-weight: 600;
font-size: clamp(28px, 3.2vw, 38px);
line-height: 1.04; letter-spacing: -.03em;
margin-bottom: 22px;
text-wrap: balance;
position: relative; z-index: 1;
}
.big-card-pull{
font-size: 18px; line-height: 1.4;
color: var(--ink-2); font-weight: 500;
margin-bottom: 28px;
display: flex; align-items: baseline; gap: 10px;
}
.big-card-pull .hand{ color: var(--red); font-size: 22px; flex-shrink: 0; }
.big-card-list{
list-style: none; padding: 0;
border-top: 1px solid var(--line);
position: relative; z-index: 1;
}
.big-card-list li{
padding: 14px 0 14px 26px;
border-bottom: 1px solid var(--line);
font-size: 16px; color: var(--ink-soft);
position: relative;
}
.big-card-list li::before{
content: ""; position: absolute; left: 0; top: 22px;
width: 14px; height: 1.5px; background: var(--red);
}
.big-card-list-spaced li{ padding: 16px 0 16px 26px; }
.big-card-list-spaced li::before{ top: 24px; }
@media (max-width: 880px){
.cards-row{ padding: 70px 22px; }
.cards-row-inner{ grid-template-columns: 1fr; }
.big-card{ padding: 36px 28px; }
}
/* ================================================================
FINAL CTA
================================================================ */
.final-cta{
background: var(--ink);
color: #fff;
padding: 130px 28px;
text-align: center;
position: relative;
overflow: hidden;
}
.final-cta::before{
content: ""; position: absolute; inset: 0;
background: radial-gradient(closest-side at 50% 50%, rgba(225,29,46,.30), transparent 60%);
pointer-events: none;
}
.final-cta-inner{
position: relative; z-index: 1;
max-width: 820px; margin: 0 auto;
}
.final-cta h2{
font-family: var(--ff); font-weight: 600;
font-size: clamp(40px, 5.4vw, 72px);
line-height: .98; letter-spacing: -.04em;
margin-bottom: 22px;
text-wrap: balance;
}
.final-cta p{
font-size: 19px; line-height: 1.5;
color: rgba(255,255,255,.72);
max-width: 580px; margin: 0 auto 40px;
text-wrap: pretty;
}
.final-cta .btn-primary{ background: var(--red); }
.final-cta .btn-primary:hover{ background: #fff; color: var(--red); }
/* ================================================================
REVIEWS placeholder
================================================================ */
.reviews{
padding: 100px 0 110px;
background: var(--bg);
border-top: 1px solid var(--line);
overflow: hidden; /* marquee track extends past viewport edges */
}
.reviews-inner{ max-width: 1100px; margin: 0 auto 56px; padding: 0 28px; text-align: center; }
.reviews-eyebrow{
font-size: 12px; font-weight: 600; letter-spacing: .14em;
color: var(--red); margin-bottom: 14px;
}
.reviews-h{
font-family: var(--ff); font-weight: 600;
font-size: clamp(28px, 3.4vw, 42px);
letter-spacing: -.03em;
margin: 0;
}
/* ---- Infinite marquee carousel ----
JS clones each card once; the track becomes 2× its original width.
The CSS animation moves the track from translateX(0) to translateX(-50%),
which lands the clone-start exactly where the original-start began —
seamless loop. Edges fade via mask-image; hover pauses. */
.reviews-marquee{
position: relative;
width: 100%;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.reviews-track{
display: flex;
gap: 22px;
width: max-content;
padding: 24px 22px;
animation: reviews-scroll 70s linear infinite;
}
.reviews-track:hover{ animation-play-state: paused; }
@keyframes reviews-scroll{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.review-card{
flex: 0 0 auto;
width: 360px;
min-height: 240px;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 26px 28px 22px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
box-shadow: 0 12px 28px -16px rgba(20,20,30,.18);
}
.review-stars{
color: #F5B400; /* Google gold */
font-size: 17px;
letter-spacing: 2px;
line-height: 1;
}
.review-quote-mk{
position: absolute;
top: 16px; right: 22px;
font-family: var(--ff);
font-weight: 700;
font-size: 80px;
line-height: .5;
color: var(--red);
opacity: .35;
pointer-events: none;
}
.review-card blockquote{
font-family: var(--ff);
font-size: 15.5px;
line-height: 1.5;
color: var(--ink);
margin: 0;
padding-right: 40px; /* clear of the quote mark */
font-style: normal;
font-weight: 400;
}
.review-meta{
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.review-avatar{
flex: 0 0 auto;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--red);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--ff);
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
}
.review-author b{
display: block;
font-family: var(--ff);
font-size: 14px;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.review-author small{
display: block;
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
/* Pause animation if user prefers reduced motion. */
@media (prefers-reduced-motion: reduce){
.reviews-track{ animation: none; }
}
/* Slightly tighter cards on smaller viewports. */
@media (max-width: 760px){
.review-card{ width: 300px; min-height: 220px; padding: 22px 24px 20px; }
.review-card blockquote{ font-size: 14.5px; padding-right: 32px; }
.review-quote-mk{ font-size: 64px; top: 14px; right: 18px; }
}
/* ================================================================
FOOTER
================================================================ */
.foot{
padding: 70px 28px 32px;
background: var(--bg-2);
border-top: 1px solid var(--line);
}
.foot-inner{ max-width: 1280px; margin: 0 auto; }
.foot-grid{
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 50px;
}
.foot .logo{ margin-bottom: 16px; }
.foot-about{ color: var(--muted); font-size: 14.5px; max-width: 320px; line-height: 1.55; }
.foot h5{
font-size: 13px; font-weight: 600; color: var(--ink);
margin-bottom: 16px; letter-spacing: -.005em;
}
.foot ul{ list-style: none; padding: 0; }
.foot li{ padding: 5px 0; }
.foot a{
color: var(--ink-soft); text-decoration: none; font-size: 14.5px;
transition: color .15s ease;
}
.foot a:hover{ color: var(--red); }
.foot-bar{
padding-top: 24px; border-top: 1px solid var(--line);
display: flex; justify-content: space-between;
font-size: 12.5px; color: var(--muted);
}
@media (max-width: 880px){
.foot-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* ================================================================
GHL FULL SIDEBAR (workspace switcher + labeled menu) — v2
used by sales-workflow and reactivation-pipeline mockups
================================================================ */
.ghl-side-full{
width: 168px; flex-shrink: 0;
background: #131C2E;
display: flex; flex-direction: column;
padding: 0;
font-family: "Inter", system-ui, sans-serif;
font-size: 10.5px;
color: #9CA3AF;
overflow: hidden;
}
.ghl-side-ws{
display: flex; align-items: center; gap: 8px;
padding: 12px 12px;
border-bottom: 1px solid rgba(255,255,255,.04);
background: rgba(255,255,255,.02);
}
.ghl-side-ws-logo{
width: 28px; height: 28px; border-radius: 6px;
background: linear-gradient(135deg, var(--red), var(--red-dk));
color: #fff; font-weight: 800; font-size: 11px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ghl-side-ws-meta{ flex: 1; min-width: 0; line-height: 1.15; }
.ghl-side-ws-name{
font-size: 11px; font-weight: 600; color: #E5E7EB;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ghl-side-ws-sub{
font-size: 9.5px; color: #6B7280;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ghl-side-ws-chev{ color: #4B5563; font-size: 11px; }
.ghl-side-search-full{
margin: 8px 10px 4px;
padding: 5px 9px;
background: rgba(255,255,255,.04);
border-radius: 5px;
font-size: 10px;
color: #6B7280;
display: flex; align-items: center; gap: 6px;
}
.ghl-side-search-full .kbd{
margin-left: auto;
font-size: 8.5px; color: #4B5563;
border: 1px solid #2C3344;
border-radius: 3px;
padding: 0 4px;
}
.ghl-side-section{ margin-top: 8px; }
.ghl-side-label{
font-size: 8.5px; font-weight: 600;
color: #4B5563; letter-spacing: .12em;
text-transform: uppercase;
padding: 4px 14px 6px;
}
.ghl-side-list-full{
list-style: none; padding: 0; margin: 0;
}
.ghl-side-list-full li{
display: flex; align-items: center; gap: 8px;
padding: 5px 14px;
font-size: 10.5px;
color: #9CA3AF;
cursor: pointer;
border-left: 2px solid transparent;
transition: background .12s, color .12s;
}
.ghl-side-list-full li .ico{
width: 14px; flex-shrink: 0;
font-size: 11px;
display: inline-flex; justify-content: center;
color: #6B7280;
}
.ghl-side-list-full li.active{
background: rgba(225,29,46,.10);
color: #fff;
border-left-color: var(--red);
}
.ghl-side-list-full li.active .ico{ color: var(--red); }
.ghl-side-list-full li:hover:not(.active){
background: rgba(255,255,255,.03);
color: #D1D5DB;
}
.ghl-side-bottom{
margin-top: auto;
padding: 8px 14px;
border-top: 1px solid rgba(255,255,255,.04);
display: flex; align-items: center; gap: 8px;
font-size: 10px;
color: #9CA3AF;
}
.ghl-side-bottom .ghl-av-sm{
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, #10B981, #059669);
display: inline-block;
}
/* ================================================================
GHL WORKFLOW BUILDER (sales-workflow)
================================================================ */
.ghl-wf-shell{
height: 100%;
display: flex;
background: #fff;
font-family: "Inter", system-ui, sans-serif;
font-size: 11px;
}
.ghl-wf-main{
flex: 1; min-width: 0;
display: flex; flex-direction: column;
background: #FAFAFB;
}
.ghl-wf-head{
background: #fff;
border-bottom: 1px solid #E5E7EB;
padding: 11px 16px;
display: flex; align-items: center; gap: 10px;
}
.ghl-wf-back{ color: #6B7280; font-size: 13px; }
.ghl-wf-title{
font-size: 13px; font-weight: 600; color: #111827;
display: inline-flex; align-items: center; gap: 8px;
}
.ghl-wf-title .ghl-wf-edit{ color: #9CA3AF; font-size: 11px; }
.ghl-wf-tabs{
background: #fff;
padding: 0 16px;
display: flex; gap: 22px;
border-bottom: 1px solid #E5E7EB;
}
.ghl-wf-tab{
font-size: 11px; color: #6B7280;
padding: 9px 0;
border-bottom: 2px solid transparent;
cursor: pointer;
}
.ghl-wf-tab.active{
color: #2463EB; font-weight: 500;
border-bottom-color: #2463EB;
}
.ghl-wf-canvas{
flex: 1;
background:
radial-gradient(circle at 1px 1px, rgba(17,24,39,.06) 1px, transparent 0)
0 0 / 16px 16px, #F3F4F6;
padding: 18px 16px 30px;
overflow: hidden;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.wf-trigger-row{
display: flex; align-items: stretch; gap: 14px;
align-self: center;
}
.wf-node{
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 7px;
box-shadow: 0 1px 3px rgba(17,24,39,.06);
padding: 8px 10px;
min-width: 160px;
display: flex; align-items: center; gap: 8px;
position: relative;
}
.wf-node.is-trigger{
align-items: stretch;
flex-direction: column;
min-width: 200px;
padding: 9px 11px 6px;
}
.wf-node-row{ display: flex; align-items: center; gap: 8px; }
.wf-node-icon{
width: 22px; height: 22px;
border-radius: 5px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px;
flex-shrink: 0;
background: #EFF1F4;
color: #374151;
}
.wf-node-icon.green{ background: #DCFCE7; color: #166534; }
.wf-node-icon.blue { background: #DBEAFE; color: #1E40AF; }
.wf-node-icon.amber{ background: #FEF3C7; color: #92400E; }
.wf-node-icon.gray { background: #F3F4F6; color: #6B7280; }
.wf-node-icon.red { background: #FEE2E2; color: #991B1B; }
.wf-node-icon.violet{ background: #EDE9FE; color: #5B21B6; }
.wf-node-icon.tg { background: #DBEAFE; color: #2463EB; }
.wf-node-title{
font-size: 11px; font-weight: 500; color: #111827;
line-height: 1.25;
}
.wf-node.is-trigger .wf-node-sub{
font-size: 10px; color: #6B7280;
padding: 2px 0 0 30px;
line-height: 1.4;
}
.wf-node-foot{
display: flex; align-items: center; gap: 10px;
margin-top: 5px; padding: 4px 0 0 30px;
border-top: 1px solid #F3F4F6;
font-size: 9.5px; color: #9CA3AF;
}
.wf-node-foot .wf-stats{
margin-left: auto; color: #2463EB; font-weight: 500;
}
.wf-trigger-add{
align-self: stretch;
border: 1.5px dashed #93C5FD;
border-radius: 7px;
background: #EFF6FF;
min-width: 160px;
display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: 11px; color: #2463EB; font-weight: 500;
}
.wf-conn{
width: 2px; height: 18px;
background: #D1D5DB;
position: relative;
}
.wf-conn::after{
content: "+"; position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%);
width: 16px; height: 16px;
background: #fff; border: 1px solid #D1D5DB;
border-radius: 50%;
font-size: 11px; color: #6B7280; font-weight: 500;
line-height: 14px; text-align: center;
}
.wf-branches{
display: flex; align-items: flex-start; gap: 32px;
margin-top: 4px;
position: relative;
}
.wf-branches::before{
/* horizontal split line */
content: ""; position: absolute;
left: 25%; right: 25%; top: -10px;
border-top: 2px solid #D1D5DB;
}
.wf-branch{
display: flex; flex-direction: column; align-items: center; gap: 4px;
position: relative;
}
.wf-branch-label{
border: 1.5px solid #C4B5FD;
background: #fff;
border-radius: 7px;
padding: 6px 14px;
font-size: 11px; font-weight: 500;
color: #6D28D9;
display: inline-flex; align-items: center; gap: 6px;
min-width: 160px; justify-content: center;
}
.wf-branch-sub{
font-size: 9.5px; color: #9CA3AF;
margin-top: -3px;
text-align: center; max-width: 200px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-end{
margin-top: 6px;
background: #F3F4F6;
color: #6B7280;
border-radius: 999px;
padding: 4px 14px;
font-size: 10px; font-weight: 600;
letter-spacing: .04em;
}
/* ================================================================
N8N WORKFLOW (sales-n8n) — dark canvas, horizontal flow
================================================================ */
.n8n-shell{
height: 100%;
background: #1A1D27;
font-family: "Inter", system-ui, sans-serif;
display: flex; flex-direction: column;
position: relative;
overflow: hidden;
}
.n8n-bar{
flex-shrink: 0;
background: #1F2330;
border-bottom: 1px solid #2A2F3D;
padding: 8px 14px;
display: flex; align-items: center; gap: 10px;
font-size: 10.5px; color: #9CA3AF;
}
.n8n-bar .n8n-logo{
width: 18px; height: 18px;
border-radius: 4px;
background: linear-gradient(135deg, #FF6B35, #E14A1E);
display: inline-block;
}
.n8n-bar .n8n-name{ font-weight: 600; color: #E5E7EB; font-size: 11px; }
.n8n-bar .n8n-sub{ color: #6B7280; }
.n8n-bar .n8n-bar-right{
margin-left: auto;
display: flex; align-items: center; gap: 12px;
font-size: 10px;
}
.n8n-bar .n8n-status{
display: inline-flex; align-items: center; gap: 5px;
color: #34D399;
}
.n8n-bar .n8n-status::before{
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #34D399; box-shadow: 0 0 8px rgba(52,211,153,.6);
}
.n8n-canvas{
position: relative;
flex: 1;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0)
0 0 / 16px 16px;
overflow: hidden;
padding: 0;
}
.n8n-flow{
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
display: flex; align-items: flex-start;
padding: 0 18px;
gap: 0;
white-space: nowrap;
min-height: 200px;
}
.n8n-node{
position: relative;
width: 56px;
flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
font-size: 9px;
color: #94A3B8;
cursor: default;
}
.n8n-node + .n8n-node{ margin-left: 8px; }
.n8n-node-box{
width: 50px; height: 50px;
border-radius: 8px;
background: #2A2F3D;
border: 1px solid #353B4C;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
color: #CBD5E1;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
position: relative;
z-index: 2;
}
.n8n-node.trigger .n8n-node-box{
background: #2A2F3D;
border: 1px solid #FF6B35;
box-shadow: 0 2px 8px rgba(255,107,53,.20);
color: #FF8C5A;
}
.n8n-node.if .n8n-node-box{ color: #FACC15; }
.n8n-node.set .n8n-node-box{ color: #60A5FA; }
.n8n-node.send .n8n-node-box{ color: #34D399; }
.n8n-node.send-tg .n8n-node-box{ color: #38BDF8; }
.n8n-node.send-sms .n8n-node-box{ color: #F87171; }
.n8n-node.merge .n8n-node-box{ color: #A78BFA; }
.n8n-node.respond .n8n-node-box{ color: #FB923C; }
.n8n-node-label{
margin-top: 6px;
font-size: 8.5px;
letter-spacing: -.005em;
text-align: center;
max-width: 70px;
line-height: 1.2;
white-space: normal;
}
.n8n-node.trigger .n8n-node-label{ color: #FF8C5A; }
.n8n-node.if .n8n-node-label{ color: #FACC15; }
.n8n-node.set .n8n-node-label{ color: #60A5FA; }
.n8n-node.send .n8n-node-label{ color: #34D399; }
.n8n-node.send-tg .n8n-node-label{ color: #38BDF8; }
.n8n-node.send-sms .n8n-node-label{ color: #F87171; }
.n8n-node.merge .n8n-node-label{ color: #A78BFA; }
.n8n-node.respond .n8n-node-label{ color: #FB923C; }
.n8n-node-sub{
font-size: 7.5px;
color: #475569;
margin-top: 2px;
max-width: 70px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.n8n-conn{
align-self: center;
width: 22px;
height: 1.5px;
background: linear-gradient(90deg, #353B4C, #353B4C);
margin: 0 -2px;
flex-shrink: 0;
position: relative;
z-index: 1;
transform: translateY(-22px);
}
.n8n-conn::after{
content: ""; position: absolute; right: -4px; top: 50%;
transform: translateY(-50%);
width: 0; height: 0;
border-left: 5px solid #353B4C;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.n8n-node-spawn{
position: absolute;
bottom: -54px; left: 50%;
width: 50px; height: 44px;
transform: translateX(-50%);
background: #2A2F3D;
border: 1px solid #353B4C;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 14px; color: #FB923C;
}
.n8n-node-spawn::before{
content: ""; position: absolute;
top: -10px; left: 50%;
width: 1.5px; height: 10px;
background: #353B4C;
}
/* ================================================================
GHL OPPORTUNITIES — DENSE pipeline (~10 cols, horizontal scroll)
used by sales-pipeline (refactored) + reactivation-pipeline
================================================================ */
.ghl-pipeline.is-dense{
display: flex;
grid-template-columns: none;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
padding: 8px;
scrollbar-width: thin;
}
.ghl-pipeline.is-dense::-webkit-scrollbar{ height: 4px; }
.ghl-pipeline.is-dense::-webkit-scrollbar-thumb{ background: #D1D5DB; border-radius: 2px; }
.ghl-pipeline.is-dense .ghl-col{
min-width: 132px; max-width: 132px;
flex: 0 0 132px;
background: #F3F4F6;
border: 1px solid #E5E7EB;
border-radius: 6px;
padding: 6px;
gap: 5px;
}
.ghl-pipeline.is-dense .ghl-col-h{
padding-bottom: 5px;
border-bottom: 1px solid #E5E7EB;
display: flex; flex-direction: column; gap: 2px;
}
.ghl-pipeline.is-dense .ghl-col-name{
font-size: 10.5px; font-weight: 600;
display: inline-flex; align-items: center; gap: 5px;
color: #1F2937;
}
.ghl-pipeline.is-dense .ghl-col-name::before{
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: #9CA3AF;
flex-shrink: 0;
}
.ghl-pipeline.is-dense .ghl-col-stat{ font-size: 9.5px; color: #6B7280; }
.ghl-pipeline.is-dense .ghl-card{
font-size: 10px;
padding: 6px 7px;
background: #fff;
}
.ghl-pipeline.is-dense .ghl-card-name{ font-size: 10.5px; line-height: 1.2; }
.ghl-pipeline.is-dense .ghl-card-val{ font-size: 9.5px; }
.ghl-pipeline.is-dense .ghl-card-meta{ font-size: 9px; }
/* Reactivation column accents — cold gray → amber → orange → red → green */
.ghl-pipeline.is-reactivation .ghl-col:nth-child(1) .ghl-col-name::before{ background: #9CA3AF; }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(2) .ghl-col-name::before{ background: #FBBF24; }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(3) .ghl-col-name::before{ background: #F59E0B; }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(4) .ghl-col-name::before{ background: #FB923C; }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(5) .ghl-col-name::before{ background: #F87171; }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(6) .ghl-col-name::before{ background: var(--red); }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(7) .ghl-col-name::before{ background: var(--red); }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(8) .ghl-col-name::before{ background: #B91626; }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(9) .ghl-col-name::before{ background: #10B981; }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(10) .ghl-col-name::before{ background: #6B7280; }
.ghl-pipeline.is-reactivation .ghl-col:nth-child(10){ opacity: .65; }
/* Channel pill (used in reactivation cards: SMS / Email / Call) */
.ghl-ch{
display: inline-flex; align-items: center; gap: 3px;
font-size: 8.5px; font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
background: #F3F4F6; color: #4B5563;
letter-spacing: .03em;
}
.ghl-ch.sms{ background: rgba(225,29,46,.10); color: var(--red); }
.ghl-ch.email{ background: #DBEAFE; color: #1E40AF; }
.ghl-ch.call{ background: #FEF3C7; color: #92400E; }
/* ================================================================
SECTION BLOCKS (post-restructure 2026-05-07)
Each module is its own block with text on top + a big landscape
16:9 frame below. Text alignment alternates (right/left/right) per
the original "alternating sides" idea, but the frame is centered
full-width so it has room to breathe.
================================================================ */
.modules{
padding: 80px 28px 100px;
background: var(--bg);
}
.section-block{
max-width: 1400px;
margin: 0 auto;
padding: 90px 0;
display: grid;
/* default: frame on LEFT (larger), text on RIGHT (smaller) — for marketing + reaktiválás */
grid-template-areas: "frame text";
grid-template-columns: 1.6fr 1fr;
gap: 56px;
align-items: center;
}
.section-block + .section-block{ border-top: 1px solid var(--line); }
/* Sales: text LEFT, frame RIGHT (alternating) */
.section-block[data-section="sales"]{
grid-template-areas: "text frame";
grid-template-columns: 1fr 1.6fr;
}
.section-text{
grid-area: text;
width: 100%;
max-width: none;
margin: 0;
}
.section-frame{
grid-area: frame;
width: 100%;
perspective: 2400px;
perspective-origin: 50% 30%;
}
/* Subtle 3D tilt — frame leans toward the section's text.
Marketing/Reakt: text on right → frame faces right (rotateY +).
Sales: text on left → frame faces left (rotateY -). */
.section-block[data-section="marketing"] .section-frame .frame,
.section-block[data-section="reactivation"] .section-frame .frame{
transform: rotateY(6deg) rotateX(2deg);
transform-style: preserve-3d;
transition: transform .8s cubic-bezier(.2,.7,.25,1);
}
.section-block[data-section="sales"] .section-frame .frame{
transform: rotateY(-6deg) rotateX(2deg);
transform-style: preserve-3d;
transition: transform .8s cubic-bezier(.2,.7,.25,1);
}
.section-block .module{
min-height: auto;
padding: 0;
display: block;
}
/* Big landscape 16:9 frame — transparent container, mockup IS the visual */
.section-frame .frame{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
display: flex; flex-direction: column;
}
.section-frame .frame-stage{
flex: 1;
height: auto;
position: relative;
overflow: hidden;
}
/* Swipe / page nav inside the frame (for sections with >1 mockup) */
.frame-nav{
position: absolute;
bottom: 16px; left: 50%;
transform: translateX(-50%);
display: flex; align-items: center; gap: 14px;
z-index: 12;
padding: 7px 14px;
background: rgba(255,255,255,.94);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: var(--sh-sm);
}
.frame-nav-arrow{
background: none; border: 0; cursor: pointer;
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--ink-soft);
border-radius: 50%;
transition: background .15s, color .15s;
font-family: var(--ff);
}
.frame-nav-arrow:hover{ background: var(--bg-2); color: var(--red); }
.frame-nav-arrow:disabled{ opacity: .25; cursor: default; }
.frame-nav-dots{ display: inline-flex; gap: 7px; }
.frame-nav-dot{
width: 6px; height: 6px; border-radius: 50%;
background: var(--line-2);
transition: background .15s, transform .15s;
}
.frame-nav-dot.is-on{
background: var(--red);
transform: scale(1.3);
}
@media (max-width: 980px){
.modules{ padding: 50px 22px 70px; }
.section-block,
.section-block[data-section="sales"]{
padding: 50px 0;
grid-template-areas: "text" "frame";
grid-template-columns: 1fr;
gap: 28px;
}
/* Disable 3D tilt on mobile — the frame is full-width below text, no side */
.section-block[data-section="marketing"] .section-frame .frame,
.section-block[data-section="reactivation"] .section-frame .frame,
.section-block[data-section="sales"] .section-frame .frame,
.hero-frame{
transform: none;
}
}
/* ================================================================
IMAGE-BASED FRAME STATES (post-pivot)
Each frame-state's content is now a single screenshot inside a
.frame-state-img wrapper. Same pattern is used in the hero
(.hero-img) so the hero previews the Sales pipeline screenshot.
================================================================ */
.frame-state-img,
.hero-img{
position: relative;
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
background: #F4F5F7;
}
.frame-state-img img,
.hero-img img{
display: block;
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
}
/* frame-stage is transparent — the mockup IS the visual */
/* ================================================================
Frame mockup container — let v4 mockups fill their frame
================================================================ */
.frame-state-mock-fill .gv .ghl-mock,
.frame-state-mock-fill .gv .fb-mock,
.frame-state-mock-fill .gv .n8n-mock{
height: auto;
}
/* ================================================================
FACEBOOK AD MOCKUP — v4-quality, namespaced under .gv
================================================================ */
.gv .fb-mock{
background: #f0f2f5;
border-radius: 10px;
border: 1px solid #d9dae0;
box-shadow:
0 60px 120px -40px rgba(20,40,30,.45),
0 30px 60px -30px rgba(20,40,30,.25),
0 0 0 1px rgba(255,255,255,.06);
overflow: hidden;
display: flex; flex-direction: column;
font-family: "Inter", system-ui, sans-serif;
color: #050505;
height: 560px;
}
.gv .fb-top{
background: #fff;
border-bottom: 1px solid #dadde1;
padding: 9px 14px;
display: flex; align-items: center; gap: 12px;
flex-shrink: 0;
}
.gv .fb-top .fb-logo{
width: 36px; height: 36px;
border-radius: 50%;
background: #1877f2;
color: #fff;
font-family: Georgia, serif;
font-size: 24px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.gv .fb-top .fb-search{
flex: 1;
background: #f0f2f5;
border-radius: 999px;
padding: 8px 14px;
font-size: 12px; color: #65676b;
}
.gv .fb-top .fb-icons{ display: flex; gap: 6px; }
.gv .fb-top .fb-icons span{
width: 36px; height: 36px;
border-radius: 50%; background: #e4e6eb;
display: inline-block;
}
.gv .fb-feed{
flex: 1; min-height: 0;
padding: 18px;
display: flex; align-items: flex-start; justify-content: center;
overflow: hidden;
}
.gv .fb-ad{
background: #fff;
border-radius: 8px;
border: 1px solid #dadde1;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
width: 100%; max-width: 500px;
overflow: hidden;
}
.gv .fb-ad-head{
display: flex; align-items: center; gap: 9px;
padding: 12px 14px 8px;
}
.gv .fb-ad-avatar{
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #E11D2E, #B91626);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 700; font-size: 14px;
flex-shrink: 0;
}
.gv .fb-ad-meta{ flex: 1; min-width: 0; }
.gv .fb-ad-meta .nm{ font-size: 13px; font-weight: 600; color: #050505; line-height: 1.2; }
.gv .fb-ad-meta .sub{ font-size: 11.5px; color: #65676b; line-height: 1.2; margin-top: 1px; display: inline-flex; align-items: center; gap: 4px; }
.gv .fb-ad-dots{ color: #65676b; font-size: 16px; padding: 0 4px; }
.gv .fb-ad-copy{
padding: 6px 14px 12px;
font-size: 13px; color: #050505; line-height: 1.4;
}
.gv .fb-creative{
position: relative;
aspect-ratio: 16/8.5;
background: linear-gradient(135deg, #1a1a24 0%, #0a0a0a 100%);
overflow: hidden;
display: flex; align-items: center;
padding: 22px 26px;
}
.gv .fb-creative::before{
content: ""; position: absolute; top: -40%; right: -30%;
width: 70%; aspect-ratio: 1;
background: radial-gradient(closest-side, rgba(225,29,46,.40), transparent 70%);
pointer-events: none;
}
.gv .fb-creative-text{ position: relative; z-index: 2; max-width: 80%; }
.gv .fb-creative-h{
color: #fff; font-size: 22px; font-weight: 700;
line-height: 1.08; letter-spacing: -.018em;
}
.gv .fb-creative-sub{
color: rgba(255,255,255,.78);
font-size: 12px; margin-top: 8px; line-height: 1.35;
}
.gv .fb-creative-btn{
display: inline-flex; align-items: center; gap: 4px;
margin-top: 14px;
background: #E11D2E; color: #fff;
padding: 8px 14px; border-radius: 5px;
font-size: 12px; font-weight: 700;
}
.gv .fb-creative-prev{
position: absolute; right: 22px; top: 50%;
transform: translateY(-50%);
width: 150px; height: 100px;
background: #fff; border-radius: 6px; padding: 6px;
box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
}
.gv .fb-creative-prev .pr-bar{
display: flex; gap: 3px; margin-bottom: 5px; padding: 1px;
}
.gv .fb-creative-prev .pr-bar span{
width: 5px; height: 5px; border-radius: 50%;
}
.gv .fb-creative-prev .pr-bar span:nth-child(1){ background: #ff5f57; }
.gv .fb-creative-prev .pr-bar span:nth-child(2){ background: #febc2e; }
.gv .fb-creative-prev .pr-bar span:nth-child(3){ background: #28c840; }
.gv .fb-creative-prev .pr-cols{
display: grid; grid-template-columns: repeat(4,1fr);
gap: 2px;
}
.gv .fb-creative-prev .pr-col{
background: #f4f5f7; border-radius: 2px;
padding: 3px 2px;
display: flex; flex-direction: column; gap: 2px;
min-height: 70px;
}
.gv .fb-creative-prev .pr-cell{ background: #fff; border-radius: 1px; height: 5px; }
.gv .fb-creative-prev .pr-col.hot .pr-cell:first-child{ background: #fee2e2; }
.gv .fb-creative-prev .pr-col.won .pr-cell:first-child{ background: #dcfce7; }
.gv .fb-ad-link{
background: #f7f8fa;
padding: 10px 14px;
border-top: 1px solid #f0f0f4;
display: flex; align-items: center; gap: 12px;
}
.gv .fb-ad-link .info{ flex: 1; min-width: 0; }
.gv .fb-ad-link .url{ font-size: 11px; color: #65676b; text-transform: uppercase; letter-spacing: .04em; }
.gv .fb-ad-link .title{ font-size: 14px; font-weight: 600; color: #050505; margin-top: 2px; line-height: 1.2; }
.gv .fb-ad-link .cta{
background: #e4e6eb; color: #050505;
padding: 8px 16px; border-radius: 5px;
font-size: 13px; font-weight: 600;
flex-shrink: 0;
}
.gv .fb-ad-actions{
display: flex; padding: 2px 6px;
border-top: 1px solid #ced0d4;
}
.gv .fb-ad-actions .a{
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px;
font-size: 13px; font-weight: 600; color: #65676b;
}
/* ================================================================
GHL WORKFLOW BUILDER MOCKUP — v4-quality, namespaced under .gv
Reuses .ghl-side from pipeline mockup (Automation tab active)
================================================================ */
.gv .ghl-mock.workflow{ grid-template-columns: 62px 1fr; height: 560px; }
.gv .ghl-mock.workflow .ghl-main{
display: flex; flex-direction: column;
background: #fafbfc;
min-width: 0;
}
.gv .wf-head{
background: #fff;
border-bottom: 1px solid #e3e3e8;
padding: 11px 16px;
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.gv .wf-head .back{ color: #6b6b7d; font-size: 13px; }
.gv .wf-head .ttl{
font-size: 12.5px; font-weight: 600; color: #1a1a24;
display: inline-flex; align-items: center; gap: 6px;
}
.gv .wf-head .ttl .pen{ color: #9897a8; font-size: 10px; }
.gv .wf-head .right{
margin-left: auto; display: flex; gap: 6px; align-items: center;
}
.gv .wf-head .pill{
background: #f0f0f4; color: #6b6b7d;
padding: 4px 9px; border-radius: 4px; font-size: 10px;
}
.gv .wf-head .pill.live{ background: #dcfce7; color: #16a34a; font-weight: 600; }
.gv .wf-tabs{
background: #fff;
padding: 0 16px;
display: flex; gap: 22px;
border-bottom: 1px solid #e3e3e8;
flex-shrink: 0;
}
.gv .wf-tabs .tb{
font-size: 11px; color: #6b6b7d;
padding: 9px 0;
border-bottom: 2px solid transparent;
cursor: pointer;
}
.gv .wf-tabs .tb.active{
color: #2463eb; font-weight: 500;
border-bottom-color: #2463eb;
}
.gv .wf-canvas{
flex: 1; min-height: 0;
background:
radial-gradient(circle at 1px 1px, rgba(17,24,39,.06) 1px, transparent 0)
0 0 / 14px 14px,
#f3f4f6;
padding: 18px 16px 24px;
overflow: hidden;
display: flex; flex-direction: column; align-items: center; gap: 0;
}
.gv .wf-row{
display: flex; align-items: stretch; gap: 14px;
}
.gv .wf-node{
background: #fff;
border: 1px solid #e3e3e8;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(17,24,39,.08), 0 6px 18px -10px rgba(17,24,39,.15);
padding: 9px 11px;
min-width: 200px;
display: flex; flex-direction: column; gap: 4px;
}
.gv .wf-node.compact{ min-width: 170px; }
.gv .wf-node-row{ display: flex; align-items: center; gap: 8px; }
.gv .wf-node-icon{
width: 22px; height: 22px;
border-radius: 5px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: #eff1f4;
color: #374151;
}
.gv .wf-node-icon.green{ background: #dcfce7; color: #166534; }
.gv .wf-node-icon.blue{ background: #dbeafe; color: #1e40af; }
.gv .wf-node-icon.gray{ background: #f0f0f4; color: #6b6b7d; }
.gv .wf-node-icon.violet{ background: #ede9fe; color: #5b21b6; }
.gv .wf-node-icon.red{ background: #fee2e2; color: #991b1b; }
.gv .wf-node-icon.amber{ background: #fef3c7; color: #92400e; }
.gv .wf-node-title{
font-size: 11.5px; font-weight: 500; color: #1a1a24;
line-height: 1.25;
}
.gv .wf-node-sub{
font-size: 10px; color: #6b6b7d;
padding-left: 30px; line-height: 1.4;
}
.gv .wf-node-foot{
display: flex; align-items: center; gap: 10px;
margin-top: 4px; padding: 5px 0 0 30px;
border-top: 1px solid #f0f0f4;
font-size: 9.5px; color: #9897a8;
}
.gv .wf-node-foot .stats{ margin-left: auto; color: #2463eb; font-weight: 500; }
.gv .wf-add-trigger{
align-self: stretch;
border: 1.5px dashed #93c5fd;
border-radius: 8px;
background: #eff6ff;
min-width: 170px;
display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: 11px; color: #2463eb; font-weight: 500;
}
.gv .wf-conn{
width: 2px; height: 20px;
background: #d1d5db;
position: relative;
margin: 2px 0;
}
.gv .wf-conn::after{
content: "+"; position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%);
width: 18px; height: 18px;
background: #fff; border: 1px solid #d1d5db;
border-radius: 50%;
font-size: 12px; color: #6b6b7d; font-weight: 500;
line-height: 16px; text-align: center;
}
.gv .wf-branches{
display: flex; align-items: flex-start; gap: 36px;
position: relative; margin-top: 8px;
}
.gv .wf-branches::before{
content: ""; position: absolute;
left: 25%; right: 25%; top: -10px;
border-top: 2px solid #d1d5db;
}
.gv .wf-branch{
display: flex; flex-direction: column; align-items: center; gap: 0;
}
.gv .wf-branch-pill{
border: 1.5px solid #c4b5fd;
background: #fff;
border-radius: 999px;
padding: 5px 14px;
font-size: 11px; font-weight: 500;
color: #6d28d9;
display: inline-flex; align-items: center; gap: 6px;
min-width: 130px; justify-content: center;
}
.gv .wf-branch-sub{
font-size: 9.5px; color: #9897a8;
margin-top: 4px;
text-align: center; max-width: 200px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gv .wf-end{
margin-top: 6px;
background: #f0f0f4;
color: #6b6b7d;
border-radius: 999px;
padding: 4px 14px;
font-size: 10px; font-weight: 600;
letter-spacing: .04em;
}
/* ================================================================
N8N MOCKUP — dark canvas, horizontal flow, namespaced under .gv
================================================================ */
.gv .n8n-mock{
background: #f5f5f7;
border-radius: 10px;
border: 1px solid #e5e5e7;
box-shadow:
0 60px 120px -40px rgba(20,40,30,.20),
0 30px 60px -30px rgba(20,40,30,.12);
overflow: hidden;
display: flex; flex-direction: column;
font-family: "Open Sans", "Inter", system-ui, sans-serif;
height: 560px;
}
.gv .n8n-bar{
background: #ffffff;
border-bottom: 1px solid #e5e5e7;
padding: 10px 14px;
display: flex; align-items: center; gap: 10px;
font-size: 11px; color: #6b7280;
flex-shrink: 0;
}
.gv .n8n-bar .n8n-logo{
width: 22px; height: 22px;
border-radius: 6px;
background: linear-gradient(135deg, #ff6b35, #e14a1e);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 11px;
}
.gv .n8n-bar .n8n-name{ font-weight: 600; color: #1a1a24; font-size: 12px; }
.gv .n8n-bar .n8n-sub{ color: #9ca0a8; font-size: 10.5px; }
.gv .n8n-bar .right{
margin-left: auto; display: flex; align-items: center; gap: 12px;
}
.gv .n8n-bar .status-pill{
display: inline-flex; align-items: center; gap: 5px;
font-size: 10.5px; color: #34d399;
padding: 3px 8px;
background: rgba(52,211,153,.10);
border-radius: 999px;
}
.gv .n8n-bar .status-pill::before{
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #34d399;
box-shadow: 0 0 6px rgba(52,211,153,.6);
}
.gv .n8n-canvas{
position: relative;
flex: 1; min-height: 0;
background:
radial-gradient(circle at 1px 1px, rgba(0,0,0,.18) 1px, transparent 0)
0 0 / 16px 16px;
overflow: visible;
}
.gv .n8n-edges{
position: absolute;
inset: 0;
width: 100%; height: 100%;
pointer-events: none;
overflow: visible;
}
.gv .n8n-edges path{
fill: none;
stroke: #b0b3b8;
stroke-width: 2;
}
.gv .n8n-edges .arrow{
fill: #b0b3b8;
}
.gv .n8n-flow{
position: absolute;
inset: 0;
display: block; /* override old display:flex */
transform: none; /* override old translateY(-50%) */
padding: 0; /* override old padding:0 18px */
min-height: 0; /* override old min-height:200 */
white-space: normal;
}
.gv .n8n-flow .n8n-node{
position: absolute !important;
width: 96px !important;
height: 96px !important;
display: block !important;
transform: translate(-50%, -50%);
margin: 0 !important;
}
.gv .n8n-flow::-webkit-scrollbar{ height: 4px; }
.gv .n8n-flow::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.1); border-radius: 2px; }
.gv .n8n-node{
position: relative;
display: flex; flex-direction: column; align-items: center;
flex-shrink: 0;
width: 64px;
}
.gv .n8n-node + .n8n-node{ margin-left: 26px; }
.gv .n8n-node-box{
width: 56px; height: 56px;
border-radius: 10px;
background: #2a2f3d;
border: 1px solid #353b4c;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
color: #cbd5e1;
box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.gv .n8n-node.trigger .n8n-node-box{
background: linear-gradient(135deg, #2a2f3d, #1f232f);
border-color: #ff6b35;
color: #ff8c5a;
box-shadow: 0 0 0 1px rgba(255,107,53,.20), 0 4px 14px rgba(255,107,53,.20);
}
.gv .n8n-node.if .n8n-node-box{ color: #facc15; border-color: rgba(250,204,21,.4); }
.gv .n8n-node.set .n8n-node-box{ color: #60a5fa; border-color: rgba(96,165,250,.4); }
.gv .n8n-node.mail .n8n-node-box{ color: #34d399; border-color: rgba(52,211,153,.4); }
.gv .n8n-node.sms .n8n-node-box{ color: #f87171; border-color: rgba(248,113,113,.4); }
.gv .n8n-node.tg .n8n-node-box{ color: #38bdf8; border-color: rgba(56,189,248,.4); }
.gv .n8n-node.respond .n8n-node-box{ color: #fb923c; border-color: rgba(251,146,60,.4); }
.gv .n8n-node-label{
margin-top: 8px;
font-size: 9.5px;
color: #94a3b8;
text-align: center;
max-width: 80px;
line-height: 1.25;
white-space: normal;
}
.gv .n8n-node.trigger .n8n-node-label{ color: #ff8c5a; }
.gv .n8n-node.if .n8n-node-label{ color: #facc15; }
.gv .n8n-node.set .n8n-node-label{ color: #60a5fa; }
.gv .n8n-node.mail .n8n-node-label{ color: #34d399; }
.gv .n8n-node.sms .n8n-node-label{ color: #f87171; }
.gv .n8n-node.tg .n8n-node-label{ color: #38bdf8; }
.gv .n8n-node.respond .n8n-node-label{ color: #fb923c; }
.gv .n8n-conn{
align-self: center;
width: 24px; height: 1.5px;
background: rgba(255,255,255,.18);
flex-shrink: 0;
margin: 0 -2px;
transform: translateY(-14px);
position: relative;
}
.gv .n8n-conn::after{
content: ""; position: absolute; right: -1px; top: 50%;
transform: translateY(-50%);
width: 0; height: 0;
border-left: 5px solid rgba(255,255,255,.18);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.gv .n8n-node-spawn{
position: absolute;
bottom: -56px; left: 50%; transform: translateX(-50%);
width: 50px; height: 44px;
background: #2a2f3d;
border: 1px solid #353b4c;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 14px; color: #fb923c;
}
.gv .n8n-node-spawn::before{
content: ""; position: absolute; top: -10px; left: 50%;
width: 1.5px; height: 10px; background: #353b4c;
}
/* GHL mockup text — bumped ~30% for readability after scaling */
.gv .ghl-mock{ font-size: 13px !important; }
.gv .ghl-side{ font-size: 10px !important; }
.gv .ghl-side .navi .lbl{ font-size: 9.5px !important; }
.gv .ghl-topbar .ghl-tab{ font-size: 13px !important; }
.gv .ghl-topbar .ghl-pill{ font-size: 11px !important; }
.gv .ghl-col-head .name{ font-size: 12px !important; }
.gv .ghl-col-head .meta{ font-size: 9.5px !important; }
.gv .ghl-card-mini{ font-size: 10.5px !important; }
.gv .ghl-card-mini .nm{ font-size: 12px !important; }
.gv .ghl-card-mini .biz{ font-size: 10px !important; }
.gv .ghl-card-mini .opp{ font-size: 9.5px !important; }
.gv .ghl-card-mini .src-pill{ font-size: 8.5px !important; }
.gv .ghl-card-mini .ai-status{ font-size: 9px !important; }
.gv .ghl-card-mini .tag{ font-size: 9px !important; }
/* Contact-detail panel font bumps */
.gv .ghl-mock.contact .ghl-cdpane{ font-size: 12px !important; }
.gv .ghl-mock.contact .cd-name-block .nm{ font-size: 13px !important; }
.gv .ghl-mock.contact .cd-name-block .sub{ font-size: 10.5px !important; }
.gv .ghl-mock.contact .cd-tags .t{ font-size: 9.5px !important; }
.gv .ghl-mock.contact .cd-section-head{ font-size: 11.5px !important; }
.gv .ghl-mock.contact .cd-field .lbl{ font-size: 9.5px !important; }
.gv .ghl-mock.contact .cd-field .val{ font-size: 11.5px !important; }
.gv .ghl-mock.contact .cdmid-head .nm{ font-size: 13px !important; }
.gv .ghl-mock.contact .cd-day{ font-size: 11px !important; }
.gv .ghl-mock.contact .cd-event{ font-size: 12px !important; }
.gv .ghl-mock.contact .cd-event .body .det{ font-size: 11px !important; }
.gv .ghl-mock.contact .cd-event .time{ font-size: 10.5px !important; }
.gv .ghl-mock.contact .cdmid-foot .input{ font-size: 11.5px !important; }
.gv .ghl-mock.contact .cdt-head .lbl{ font-size: 12.5px !important; }
.gv .ghl-mock.contact .cdt-head .add{ font-size: 11px !important; }
.gv .ghl-mock.contact .cdt-search{ font-size: 11px !important; }
.gv .ghl-mock.contact .cdt-empty .h{ font-size: 12px !important; }
.gv .ghl-mock.contact .cdt-empty .s{ font-size: 10.5px !important; }
/* ================================================================
V4 MOCKUPS — ported from v4-agency, namespaced under .gv
The user said "v4 mockups are way better" so we use those designs
as the source of truth. Hand-coded CSS with SVG icons, designed
not recreated. Namespaced so nothing collides with v5 styles.
================================================================ */
/* SVG-VIEWBOX-LIKE SCALING for HTML mockups
Each mockup is authored at FIXED natural dimensions (--mock-w / --mock-h
on the inner). The inner is absolutely positioned inside .frame-state-mock,
centered, and scaled via transform. JS only writes --mock-scale on the
container. Layout doesn't reflow on resize — pure GPU transform. */
.frame-state-mock{
position: relative;
width: 100%; height: 100%;
background: transparent;
overflow: visible; /* let mockup shadows extend past frame edges */
--mock-scale: 1;
}
.frame-state-mock > *{
position: absolute !important;
top: 0; left: 50%;
transform-origin: top center !important;
transform: translateX(-50%) scale(var(--mock-scale, 1)) !important;
flex: 0 0 auto !important;
/* Hidden until JS measures and writes --mock-scale. Prevents the huge
unscaled first-paint. Middle-section mockups stay hidden until the
bridge reveals them via opacity on the parent .frame; no fade needed
on the inner. */
opacity: 0;
}
.frame-state-mock.is-scaled > *{
opacity: 1;
}
/* ================================================================
v4-style scroll reveals (ported from v4-agency/index.html line 1102).
Elements start hidden + offset; IntersectionObserver in main.js adds
.in when they enter viewport, triggering the fade + rise.
SCOPE: only used on .hero text/visual and the .final-cta / .reviews
inner blocks (the sections AFTER the last bridge). Middle bridge-target
sections are NOT tagged with data-anim because the bridge architecture
already controls their opacity — adding data-anim there would fight it.
================================================================ */
/* CSS @keyframes animations (NOT transitions). Transitions only fire when
the browser detects a property change in the compositor — for elements
already in viewport on page load (the hero), the initial state and the
.in state can get collapsed into one paint, skipping the transition.
@keyframes always run when applied, regardless of paint timing. */
[data-anim]{
opacity: 0;
transform: translateY(28px);
}
[data-anim].in{
animation: anim-rise .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes anim-rise{
to { opacity: 1; transform: none; }
}
[data-anim-stagger] > *{
opacity: 0;
transform: translateY(24px);
}
[data-anim-stagger].in > *{
animation: anim-rise-small .8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes anim-rise-small{
to { opacity: 1; transform: none; }
}
[data-anim-stagger].in > *:nth-child(1){ animation-delay: .05s; }
[data-anim-stagger].in > *:nth-child(2){ animation-delay: .15s; }
[data-anim-stagger].in > *:nth-child(3){ animation-delay: .25s; }
[data-anim-stagger].in > *:nth-child(4){ animation-delay: .35s; }
[data-anim-stagger].in > *:nth-child(5){ animation-delay: .45s; }
[data-anim-stagger].in > *:nth-child(6){ animation-delay: .55s; }
/* ================================================================
Mockup lightbox — full-screen modal that displays a clicked mockup
at large size. Lives OUTSIDE #design-root so it isn't subject to
the page's CSS `zoom` scaling. Hidden by default; .is-open reveals
with a fade + scale-in.
================================================================ */
.mock-lightbox{
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 8, 12, .88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
transition: opacity .25s ease-out;
}
.mock-lightbox.is-open{
opacity: 1;
pointer-events: auto;
}
.mock-lightbox-content{
position: relative;
width: min(90vw, 1600px);
height: min(90vh, 1000px);
display: flex;
align-items: center;
justify-content: center;
background: var(--bg, #fff);
border-radius: 14px;
box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
overflow: hidden;
transform: scale(.94);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.mock-lightbox.is-open .mock-lightbox-content{
transform: scale(1);
}
/* JS injects: .mock-lightbox-content > .gv > .ghl-mock (or .fb-mock,
.n8n-mock). The .gv wrapper exists only to satisfy `.gv X` CSS
selectors that define the mockup's natural size + grid layout. */
.mock-lightbox-content > .gv{
display: flex;
align-items: center;
justify-content: center;
}
.mock-lightbox-content > .gv > *{
position: relative !important;
left: auto !important;
top: auto !important;
transform: scale(var(--lightbox-scale, 1)) !important;
transform-origin: center center !important;
flex: 0 0 auto !important;
opacity: 1 !important;
filter: none !important;
}
.mock-lightbox-close{
position: absolute;
top: 20px; right: 24px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
border: 1px solid rgba(255, 255, 255, .2);
font-size: 28px;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease-out, transform .2s ease-out;
z-index: 1;
}
.mock-lightbox-close:hover{
background: rgba(255, 255, 255, .2);
transform: scale(1.08);
}
/* Clickable mockups get a soft cursor cue. Inactive carousel states
already have pointer-events:none (line 502/512) so only the visible
state is interactive. */
.frame-state.is-active .frame-state-mock,
.hero-frame .frame-state-mock{
cursor: zoom-in;
}
/* Disable cursor when bridge is mid-transition — JS toggles this. */
body.is-bridge-active .frame-state-mock{
cursor: default;
}
/* FB centered vertically too since natural height < frame */
.frame-state[data-state="marketing"] .frame-state-mock > *{
top: 50%;
transform-origin: center !important;
transform: translate(-50%, -50%) scale(var(--mock-scale, 1)) !important;
}
/* All section frames need overflow:visible so the heavy mockup shadows
don't get clipped at the frame edges. Inactive frame-states stay
hidden via opacity:0 so visual stacking is unaffected. */
.section-frame .frame,
.section-frame .frame-stage,
.section-frame .frame-state{
overflow: visible !important;
}
/* FB ad: compact-centered alignment. JS sets width and scale. */
.frame-state[data-state="marketing"] .frame-state-mock{
align-items: center;
}
.frame-state[data-state="marketing"] .fb-feed{
flex: 0 0 auto;
padding: 16px;
}
.frame-state[data-state="marketing"] .fb-ad{
max-width: none;
width: 100%;
}
/* Workflow node sizes — bigger + visible connections */
.frame-state-mock .wf-node{ min-width: 240px; }
.frame-state-mock .wf-node.compact{ min-width: 200px; }
.frame-state-mock .wf-node-title{ font-size: 13px; }
.frame-state-mock .wf-canvas{ padding: 22px 16px 28px; }
/* CONNECTION LINES — make sure they actually render */
.gv .wf-conn{
width: 3px;
min-width: 3px;
height: 28px;
flex: 0 0 auto;
align-self: center;
background: #6b7280;
position: relative;
margin: 4px 0;
display: block;
}
.gv .wf-conn::after{
content: "+";
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 22px; height: 22px;
background: #fff;
border: 1.5px solid #6b7280;
border-radius: 50%;
font-size: 14px;
font-weight: 600;
line-height: 19px;
text-align: center;
color: #6b7280;
}
.gv .wf-branches::before{
border-top-width: 3px;
border-color: #6b7280;
}
/* n8n nodes — bigger + brighter connections + status pulse */
/* REAL n8n node — square 96×96 card, icon centered, label BELOW card.
Spec sourced from n8n-io/n8n source code (CanvasNodeDefault.vue,
workflow-builder/constants.ts: DEFAULT_NODE_SIZE = 96×96). */
.frame-state-mock .n8n-node{
width: 96px;
display: block;
}
.frame-state-mock .n8n-node-card{
position: relative;
width: 96px; height: 96px;
background: #ffffff;
border: 1.5px solid rgba(0,0,0,.10);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* Trigger nodes: asymmetric pill — rounded left side, square right */
.frame-state-mock .n8n-node.trigger .n8n-node-card{
border-radius: 36px 8px 8px 36px;
}
.frame-state-mock .n8n-node-icon{
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
}
.frame-state-mock .n8n-node-icon svg{ width: 100%; height: 100%; }
/* Per-category icon glyph colors (verified against n8n source) */
.frame-state-mock .n8n-node.trigger .n8n-node-icon{ color: #e54b7a; } /* magenta */
.frame-state-mock .n8n-node.if .n8n-node-icon{ color: #52cc7a; } /* green-light */
.frame-state-mock .n8n-node.code .n8n-node-icon{ color: #ff6d5a; } /* crimson */
.frame-state-mock .n8n-node.http .n8n-node-icon{ color: #3f8fe0; } /* blue */
.frame-state-mock .n8n-node.mail .n8n-node-icon{ color: #d4574b; } /* gmail red-orange */
.frame-state-mock .n8n-node.sms .n8n-node-icon{ color: #e11d2e; } /* twilio red */
.frame-state-mock .n8n-node.tg .n8n-node-icon{ color: #2da9ec; } /* telegram blue */
.frame-state-mock .n8n-node.respond .n8n-node-icon{ color: #e54b7a; } /* magenta */
.frame-state-mock .n8n-node.skip .n8n-node-icon{ color: #6b7280; }
/* LABEL appears BELOW the card, centered, max width 2× card */
.frame-state-mock .n8n-node-label{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 8px;
width: 192px;
font-family: "Open Sans", "Inter", system-ui, sans-serif;
font-size: 13px; font-weight: 500;
color: #1a1a24;
line-height: 1.3;
text-align: center;
white-space: normal;
}
.frame-state-mock .n8n-node-sub{
display: block;
margin-top: 2px;
font-size: 11px; font-weight: 400;
color: #6b7280;
line-height: 1.3;
white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
/* connection ports — n8n shows them on hover only; we omit so arrows land
cleanly at the card edge instead of appearing to fall short of a dot. */
/* Hero frame: bigger + taller aspect for the mini pipeline */
.hero-frame{ max-width: 920px !important; aspect-ratio: 5 / 3 !important; }
.gv .ghl-mock{
background: #fff;
border-radius: 10px;
border: 1px solid #e3e3e8;
box-shadow:
0 60px 120px -40px rgba(20,40,30,.45),
0 30px 60px -30px rgba(20,40,30,.25),
0 0 0 1px rgba(255,255,255,.06);
overflow: hidden;
display: grid;
font-family: "Inter", system-ui, sans-serif;
color: #1a1a24;
font-size: 11px; line-height: 1.3;
}
/* FIXED natural dimensions per mockup type (the "viewBox") */
.gv .ghl-mock.pipeline{ grid-template-columns: 62px 1fr; width: 1300px; height: 600px; }
.gv .ghl-mock.workflow{ grid-template-columns: 62px 1fr; width: 760px; height: 600px; }
.gv .ghl-mock.contact { grid-template-columns: 62px 220px 1fr 200px; width: 1100px; height: 540px; }
.gv .fb-mock{ width: 640px; height: 700px; }
.gv .n8n-mock{ width: 1400px; height: 540px; }
.gv .ghl-side{
background: #1f1f29;
color: #a8a8b8;
padding: 14px 0;
display: flex; flex-direction: column; align-items: center; gap: 4px;
font-size: 8px;
}
.gv .ghl-side .logo{
width: 32px; height: 32px; border-radius: 7px;
background: linear-gradient(135deg, #ffb547, #ff8a3d);
margin-bottom: 14px; position: relative;
}
.gv .ghl-side .logo::after{
content: "↑↑";
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 14px; font-weight: 900;
}
.gv .ghl-side .navi{
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 7px 0; width: 100%;
color: #9897a8; cursor: pointer;
}
.gv .ghl-side .navi.active{
background: #2a2a36; color: #fff;
border-left: 2px solid #7c5cff;
}
.gv .ghl-side .navi .ico{
width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
}
.gv .ghl-side .navi .lbl{ font-size: 7.5px; letter-spacing: .02em; }
.gv .ghl-side .badge{
margin-top: auto; width: 8px; height: 8px;
border-radius: 50%; background: #22c55e; margin-bottom: 8px;
}
.gv .ghl-mock.pipeline .ghl-main{
display: flex; flex-direction: column;
background: #f5f6f9;
min-width: 0;
}
.gv .ghl-topbar{
background: #fff;
border-bottom: 1px solid #e3e3e8;
padding: 8px 14px;
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
}
.gv .ghl-topbar .ghl-tab{
font-size: 10.5px; color: #1a1a24; font-weight: 600;
display: flex; align-items: center; gap: 5px;
}
.gv .ghl-topbar .ghl-pill{
font-size: 9px; color: #6b6b7d;
background: #f0f0f4;
padding: 3px 7px; border-radius: 4px;
display: flex; align-items: center; gap: 4px;
}
.gv .ghl-topbar .ghl-pill.purple{ color: #7c5cff; background: #efebff; }
.gv .ghl-topbar .ghl-pill.green{ color: #16a34a; background: #dcfce7; }
.gv .ghl-topbar .right{
margin-left: auto; display: flex; gap: 6px; align-items: center;
}
.gv .ghl-topbar .icon-btn{
width: 22px; height: 22px;
border-radius: 5px; background: #f0f0f4;
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: #6b6b7d;
}
.gv .ghl-board{
display: flex; gap: 8px;
padding: 10px;
overflow: hidden; flex: 1; min-height: 0;
}
.gv .ghl-col{
flex: 0 0 145px;
background: #eef0f4;
border-radius: 6px; padding: 6px;
display: flex; flex-direction: column; gap: 6px;
height: 100%; overflow: hidden;
}
.gv .ghl-col.won{ background: #e8f7ee; }
.gv .ghl-col-head{
display: flex; justify-content: space-between; align-items: center;
padding: 2px 4px;
}
.gv .ghl-col-head .name{
font-size: 9.5px; font-weight: 700; color: #1a1a24;
letter-spacing: .01em; line-height: 1.2;
}
.gv .ghl-col-head .meta{ font-size: 7.5px; color: #7d7d8e; font-weight: 500; }
.gv .ghl-col-cards{
display: flex; flex-direction: column; gap: 5px;
overflow: hidden;
}
.gv .ghl-card-mini{
background: #fff;
border: 1px solid #e3e3e8;
border-radius: 5px;
padding: 7px 8px;
display: flex; flex-direction: column; gap: 3px;
font-size: 8.5px;
}
.gv .ghl-card-mini.lost{ background: #fff7e0; border-color: #f4d977; }
.gv .ghl-card-mini.won{ background: #dcfce7; border-color: #86efac; }
.gv .ghl-card-mini .nm{ font-weight: 600; color: #1a1a24; font-size: 9px; line-height: 1.25; }
.gv .ghl-card-mini .nm em{ font-style: normal; color: #6b6b7d; font-weight: 500; }
.gv .ghl-card-mini .biz{ color: #6b6b7d; font-size: 7.5px; }
.gv .ghl-card-mini .opp{ color: #6b6b7d; font-size: 7.5px; }
.gv .ghl-card-mini .row{
display: flex; justify-content: space-between; align-items: center;
margin-top: 2px;
}
.gv .ghl-card-mini .icons{ display: flex; gap: 3px; }
.gv .ghl-card-mini .icons span{
width: 11px; height: 11px;
border-radius: 50%; display: block;
}
.gv .ghl-card-mini .icons .b{ background: #3b82f6; }
.gv .ghl-card-mini .icons .g{ background: #22c55e; }
.gv .ghl-card-mini .icons .o{ background: #f59e0b; }
.gv .ghl-card-mini .icons .p{ background: #a855f7; }
.gv .ghl-card-mini .icons .r{ background: #ef4444; }
.gv .ghl-card-mini .tag{
font-size: 7px; background: #f4d977; color: #7a5410;
padding: 1px 4px; border-radius: 3px;
font-weight: 700; letter-spacing: .04em;
}
.gv .ghl-card-mini .tag.won{ background: #22c55e; color: #fff; }
.gv .ghl-card-mini .src{ display: flex; gap: 3px; align-items: center; }
.gv .ghl-card-mini .src-pill{
font-size: 6.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
padding: 1.5px 4px; border-radius: 3px; line-height: 1;
}
.gv .ghl-card-mini .src-pill.meta{ background: #dbeafe; color: #1d4ed8; }
.gv .ghl-card-mini .src-pill.google{ background: #fee2e2; color: #b91c1c; }
.gv .ghl-card-mini .src-pill.web{ background: #f3e8ff; color: #7e22ce; }
.gv .ghl-card-mini .src-pill.refer{ background: #fef3c7; color: #92400e; }
.gv .ghl-card-mini .ai-status{
font-size: 7px; color: #6b6b7d;
margin-top: 1px;
display: flex; align-items: center; gap: 3px;
font-weight: 500;
}
.gv .ghl-card-mini .ai-status::before{
content: "";
width: 5px; height: 5px; border-radius: 50%;
background: #7c5cff;
display: block; flex-shrink: 0;
}
.gv .ghl-card-mini .ai-status.done::before{ background: #22c55e; }
.gv .ghl-card-mini .ai-status.fail::before{ background: #ef4444; }
.gv .ghl-card-mini .ai-status.wait::before{ background: #f59e0b; }
/* Contact detail mockup — dimensions set in the consolidated block above */
.gv .ghl-mock.contact .ghl-cdpane{
background: #fff; border-right: 1px solid #e3e3e8;
padding: 14px; overflow: hidden; font-size: 10px;
}
.gv .ghl-mock.contact .cd-back{ font-size: 9.5px; color: #6b6b7d; margin-bottom: 10px; }
.gv .ghl-mock.contact .cd-head{
display: flex; align-items: flex-start; gap: 9px;
margin-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid #f0f0f4;
}
.gv .ghl-mock.contact .cd-avatar{
width: 30px; height: 30px;
border-radius: 50%; background: #fb923c;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px;
}
.gv .ghl-mock.contact .cd-name-block .nm{ font-weight: 600; color: #1a1a24; font-size: 11px; }
.gv .ghl-mock.contact .cd-name-block .sub{ color: #6b6b7d; font-size: 8.5px; margin-top: 1px; }
.gv .ghl-mock.contact .cd-row{ display: flex; justify-content: space-between; font-size: 9px; margin-bottom: 7px; }
.gv .ghl-mock.contact .cd-row .lbl{ color: #6b6b7d; }
.gv .ghl-mock.contact .cd-row .val{ color: #1a1a24; font-weight: 500; }
.gv .ghl-mock.contact .cd-tags{ display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.gv .ghl-mock.contact .cd-tags .t{
font-size: 7.5px; background: #efebff; color: #7c5cff;
padding: 2px 6px; border-radius: 3px; font-weight: 500;
}
.gv .ghl-mock.contact .cd-section-head{
font-size: 9.5px; color: #1a1a24; font-weight: 600;
padding: 8px 0;
border-top: 1px solid #f0f0f4;
display: flex; justify-content: space-between; align-items: center;
cursor: pointer;
}
.gv .ghl-mock.contact .cd-section-head .chev{ color: #9897a8; }
.gv .ghl-mock.contact .cd-field{ margin-bottom: 8px; }
.gv .ghl-mock.contact .cd-field .lbl{
font-size: 8px; color: #6b6b7d;
letter-spacing: .04em; text-transform: uppercase;
margin-bottom: 2px;
}
.gv .ghl-mock.contact .cd-field .val{ font-size: 9.5px; color: #1a1a24; }
.gv .ghl-mock.contact .ghl-cdmid{
background: #fafbfc; display: flex; flex-direction: column;
min-width: 0;
}
.gv .ghl-mock.contact .cdmid-head{
padding: 12px 16px;
background: #fff; border-bottom: 1px solid #e3e3e8;
display: flex; align-items: center; gap: 10px;
}
.gv .ghl-mock.contact .cdmid-head .nm{ font-weight: 600; font-size: 11px; color: #1a1a24; }
.gv .ghl-mock.contact .cdmid-head .right{ margin-left: auto; display: flex; gap: 5px; }
.gv .ghl-mock.contact .cdmid-head .ico{
width: 22px; height: 22px;
border-radius: 5px; background: #f0f0f4;
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: #6b6b7d;
}
.gv .ghl-mock.contact .cd-timeline{
padding: 16px 18px;
display: flex; flex-direction: column; gap: 14px;
flex: 1; overflow: hidden;
}
.gv .ghl-mock.contact .cd-day{
font-size: 9px; color: #6b6b7d; font-weight: 500;
background: #fff; padding: 3px 9px;
border-radius: 10px; align-self: flex-start;
border: 1px solid #e3e3e8;
}
.gv .ghl-mock.contact .cd-event{ display: flex; gap: 10px; font-size: 10px; color: #1a1a24; line-height: 1.45; }
.gv .ghl-mock.contact .cd-event .dot{
flex-shrink: 0; width: 18px; height: 18px;
border-radius: 5px; background: #efebff; color: #7c5cff;
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; margin-top: 1px;
}
.gv .ghl-mock.contact .cd-event .body{ flex: 1; }
.gv .ghl-mock.contact .cd-event .body b{ font-weight: 600; color: #1a1a24; }
.gv .ghl-mock.contact .cd-event .body .det{ color: #6b6b7d; font-size: 9px; margin-top: 1px; }
.gv .ghl-mock.contact .cd-event .time{ color: #9897a8; font-size: 8.5px; flex-shrink: 0; margin-top: 1px; }
.gv .ghl-mock.contact .cdmid-foot{
padding: 10px 14px;
background: #fff; border-top: 1px solid #e3e3e8;
display: flex; align-items: center; gap: 8px;
}
.gv .ghl-mock.contact .cdmid-foot .input{
flex: 1; background: #f5f6f9;
border-radius: 5px; padding: 7px 10px;
font-size: 9.5px; color: #9897a8;
}
.gv .ghl-mock.contact .cdmid-foot .send{
width: 26px; height: 22px;
background: #efebff; color: #7c5cff;
border-radius: 5px;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
}
.gv .ghl-mock.contact .ghl-cdtasks{
background: #fff; border-left: 1px solid #e3e3e8;
padding: 14px 12px; overflow: hidden;
}
.gv .ghl-mock.contact .cdt-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.gv .ghl-mock.contact .cdt-head .lbl{ font-weight: 600; font-size: 10.5px; color: #1a1a24; }
.gv .ghl-mock.contact .cdt-head .add{ font-size: 9px; color: #7c5cff; font-weight: 500; }
.gv .ghl-mock.contact .cdt-search{
background: #f5f6f9;
border-radius: 5px; padding: 6px 9px;
font-size: 9px; color: #9897a8;
margin-bottom: 14px;
}
.gv .ghl-mock.contact .cdt-empty{
text-align: center; padding: 24px 8px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.gv .ghl-mock.contact .cdt-empty .icn{
width: 32px; height: 32px;
border-radius: 8px; background: #f0f0f4;
color: #9897a8;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
.gv .ghl-mock.contact .cdt-empty .h{ font-size: 10px; font-weight: 500; color: #1a1a24; }
.gv .ghl-mock.contact .cdt-empty .s{ font-size: 8.5px; color: #6b6b7d; line-height: 1.35; }
.gv .ghl-mock.contact .cdt-empty .add-link{ font-size: 9px; color: #7c5cff; font-weight: 500; margin-top: 4px; }
/* ================================================================
Section bridges — Veo particle-flock transition flip-books played
between sections. Each bridge holds an ![]()
whose src is swapped
to one of N pre-extracted WEBP frames as the user scrolls. This
beats