dpnmw/community-landing
1
0
Fork 0
mirror of https://github.com/dpnmw/community-landing.git synced 2026-03-18 09:27:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI Revamped v5

Browse Source 
Landing page section migration and ui improvements.
This commit is contained in:
DPN MW
2026-03-07 20:57:59 -04:00
parent 2eb0d79394
commit 8700b35f3f
7 changed files with 153 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
assets/stylesheets/community_landing/landing.css
View File

@@ -739,7 +739,7 @@
height: 80px;
border-radius: 50%;
border: none;
background: var(--cl-accent);
background: var(--cl-video-btn-bg, var(--cl-accent));
color: #fff;
cursor: pointer;
display: flex;
@@ -752,7 +752,7 @@
.cl-hero-play:hover {
transform: translate(-50%, -50%) scale(1.1);
background: var(--cl-accent-hover);
background: var(--cl-video-btn-bg, var(--cl-accent-hover));
box-shadow: 0 12px 40px var(--cl-accent-glow);
}
@@ -882,26 +882,44 @@
}
}
/* ── Blur hero image on play button hover ── */
.cl-hero__image:has(.cl-hero-play[data-blur-hover="true"]:hover) .cl-hero__image-img {
filter: blur(4px);
transition: filter 0.4s ease;
}
.cl-hero__image .cl-hero__image-img {
transition: filter 0.4s ease;
}
/* ── Hero Creators (top 3 pills in hero) ── */
.cl-hero__creators {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
/* ═══════════════════════════════════════════════════════════════════
3. PREMIUM STATS — icon with bg, label, animated counter
3. COMPACT STATS BAR — icon + count + label inline
═══════════════════════════════════════════════════════════════════ */
.cl-stats {
padding: 2.5rem 0 2rem;
padding: 2rem 0 1.5rem;
}
.cl-stats__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
gap: 0.6rem;
}
@media (min-width: 640px) {
@media (min-width: 480px) {
.cl-stats__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
@media (min-width: 768px) {
.cl-stats__grid {
grid-template-columns: repeat(5, 1fr);
}
@@ -909,14 +927,13 @@
.cl-stat-card {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
gap: 1rem;
padding: 2.5rem 1.5rem;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: var(--cl-card);
border: 1px solid var(--cl-border);
border-radius: var(--cl-radius);
text-align: center;
border-radius: var(--cl-radius-sm);
backdrop-filter: var(--cl-blur);
-webkit-backdrop-filter: var(--cl-blur);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
@@ -924,18 +941,18 @@
.cl-stat-card:hover {
border-color: var(--cl-accent);
transform: translateY(-10px);
box-shadow: 0 20px 40px var(--cl-shadow);
transform: translateY(-4px);
box-shadow: 0 12px 28px var(--cl-shadow);
background: var(--cl-glass);
}
/* Icon with background */
.cl-stat-card__icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
width: 36px;
height: 36px;
flex-shrink: 0;
background: var(--cl-stat-icon-bg);
color: var(--cl-stat-icon-color);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
@@ -948,8 +965,8 @@
}
.cl-stat-card__icon-wrap svg {
width: 28px;
height: 28px;
width: 18px;
height: 18px;
}
.cl-stat-icon--circle {
@@ -957,24 +974,32 @@
}
.cl-stat-icon--rounded {
border-radius: 16px;
border-radius: 10px;
}
.cl-stat-card__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.cl-stat-card__value {
font-size: 1.3rem;
font-weight: 900;
color: var(--cl-stat-counter-color, var(--cl-text-strong));
letter-spacing: -0.02em;
line-height: 1.1;
}
.cl-stat-card__label {
font-size: 0.85rem;
font-size: 0.72rem;
color: var(--cl-muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Counter */
.cl-stat-card__value {
font-size: 2rem;
font-weight: 900;
color: var(--cl-stat-counter-color, var(--cl-text-strong));
letter-spacing: -0.02em;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ═══════════════════════════════════════════════════════════════════
@@ -1266,7 +1291,7 @@
}
/* ═══════════════════════════════════════════════════════════════════
7. COMMUNITY SPACES — colored header cards
7. COMMUNITY SPACES — compact horizontal pills with accent stripe
═══════════════════════════════════════════════════════════════════ */
.cl-spaces {
padding: 1.5rem 0 2rem;
@@ -1274,85 +1299,61 @@
.cl-spaces__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
grid-template-columns: 1fr;
gap: 0.6rem;
}
@media (min-width: 480px) {
.cl-spaces__grid {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px) {
.cl-spaces__grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.cl-spaces__grid {
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(3, 1fr);
}
}
.cl-space-card {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1rem 0.6rem 0.6rem;
background: var(--cl-space-card-bg, var(--cl-card));
border: 1px solid var(--cl-border);
border-radius: var(--cl-radius);
border-left: 3px solid var(--space-color);
border-radius: var(--cl-radius-sm);
text-decoration: none;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
backdrop-filter: var(--cl-blur);
-webkit-backdrop-filter: var(--cl-blur);
}
.cl-space-card:hover {
border-color: var(--cl-accent);
transform: translateY(-10px);
box-shadow: 0 25px 50px var(--cl-shadow);
}
/* Colored header band */
.cl-space-card__header {
background: var(--space-color);
padding: 2.5rem 1rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.cl-space-card__header::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
pointer-events: none;
border-left-color: var(--space-color);
transform: translateY(-4px);
box-shadow: 0 12px 28px var(--cl-shadow);
background: var(--cl-glass);
}
.cl-space-card__icon {
width: 64px;
height: 64px;
border-radius: 18px;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
background: var(--space-color);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.cl-space-card:hover .cl-space-card__icon {
transform: scale(1.15) rotate(3deg);
transform: scale(1.1) rotate(5deg);
}
.cl-space-card__icon img {
@@ -1362,23 +1363,21 @@
}
.cl-space-card__letter {
font-size: 1.8rem;
font-size: 0.9rem;
font-weight: 900;
color: #fff;
line-height: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Card body */
.cl-space-card__body {
padding: 1.25rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.cl-space-card__name {
font-size: 0.95rem;
font-size: 0.88rem;
font-weight: 800;
color: var(--cl-text-strong);
white-space: nowrap;
@@ -1387,7 +1386,7 @@
}
.cl-space-card__sub {
font-size: 0.78rem;
font-size: 0.72rem;
color: var(--cl-muted);
font-weight: 600;
text-transform: uppercase;