Add CBP logo bar at top of hero — cyan/purple ClickBaitPays brand badge with 'Team Project' label, above CTBN badge

This commit is contained in:
Marty Bostick
2026-07-29 19:51:08 +00:00
parent 39b023ef80
commit 62ee9b9227
+61
View File
@@ -130,6 +130,52 @@
font-weight: 600;
}
/* CBP logo bar at top of hero */
.cbp-logo-bar {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(0,229,255,0.06);
border: 1px solid rgba(0,229,255,0.2);
border-radius: 100px;
padding: 6px 18px 6px 10px;
margin-bottom: 14px;
backdrop-filter: blur(4px);
}
.cbp-logo-icon {
display: flex;
align-items: center;
}
.cbp-logo-text {
font-family: 'Orbitron', sans-serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.5px;
}
.cbp-logo-click {
background: linear-gradient(135deg, #00e5ff, #06b6d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cbp-logo-pays {
background: linear-gradient(135deg, #a855f7, #d946ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cbp-logo-badge {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dim);
background: rgba(255,255,255,0.06);
padding: 2px 10px;
border-radius: 100px;
margin-left: 4px;
}
/* CTA buttons */
.hero-ctas {
display: flex;
@@ -1161,6 +1207,21 @@
<section class="hero" id="heroSection">
<div class="hero-content">
<!-- CBP Logo / Brand bar -->
<div class="cbp-logo-bar">
<div class="cbp-logo-icon">
<svg viewBox="0 0 32 32" width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="28" height="28" rx="6" stroke="url(#cbpGrad)" stroke-width="2.5" fill="rgba(0,229,255,0.08)"/>
<path d="M10 16h4l3-7 3 14 3-7h4" stroke="url(#cbpGrad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs><linearGradient id="cbpGrad" x1="0" y1="0" x2="32" y2="32"><stop stop-color="#00e5ff"/><stop offset="1" stop-color="#a855f7"/></linearGradient></defs>
</svg>
</div>
<div class="cbp-logo-text">
<span class="cbp-logo-click">ClickBait</span><span class="cbp-logo-pays">Pays</span>
</div>
<span class="cbp-logo-badge">Team Project</span>
</div>
<!-- Team badge -->
<div class="team-badge">
<span class="dot"></span>