feat: changes for citation ad dynamic
This commit is contained in:
mohamad
+244
-13
@@ -264,14 +264,14 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.blob--1 {
|
||||
width: 520px; height: 520px;
|
||||
background: radial-gradient(circle, rgba(79, 142, 247, 0.4) 0%, rgba(79, 142, 247, 0.1) 70%);
|
||||
background: radial-gradient(circle, rgba(79, 142, 247, 0.18) 0%, rgba(79, 142, 247, 0.05) 70%);
|
||||
top: -120px; left: -120px;
|
||||
animation-delay: 0s, 0s;
|
||||
}
|
||||
|
||||
.blob--2 {
|
||||
width: 440px; height: 440px;
|
||||
background: radial-gradient(circle, rgba(167, 139, 250, 0.35) 0%, rgba(167, 139, 250, 0.08) 70%);
|
||||
background: radial-gradient(circle, rgba(167, 139, 250, 0.15) 0%, rgba(167, 139, 250, 0.04) 70%);
|
||||
top: 80px; right: -100px;
|
||||
animation-delay: 0.3s, 3s;
|
||||
animation-duration: 1.2s, 18s;
|
||||
@@ -279,7 +279,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.blob--3 {
|
||||
width: 340px; height: 340px;
|
||||
background: radial-gradient(circle, rgba(34, 211, 238, 0.25) 0%, rgba(34, 211, 238, 0.06) 70%);
|
||||
background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, rgba(34, 211, 238, 0.03) 70%);
|
||||
bottom: 0; left: 35%;
|
||||
animation-delay: 0.6s, 6s;
|
||||
animation-duration: 1.2s, 20s;
|
||||
@@ -342,14 +342,12 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 34px; height: 34px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--gradient-brand);
|
||||
border-radius: 9px;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
letter-spacing: -0.03em;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
@@ -822,6 +820,18 @@ h1, h2, h3, h4, h5, h6 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-card-logo {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius-sm);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.product-card-title {
|
||||
@@ -883,6 +893,57 @@ h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Supporters Grid
|
||||
============================================================ */
|
||||
.supporters-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.supporter-card {
|
||||
padding: 1.75rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.supporter-logo {
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.supporter-logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.supporter-body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.supporter-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.35rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.supporter-desc {
|
||||
font-size: 0.83rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
About Strip
|
||||
============================================================ */
|
||||
@@ -1120,7 +1181,119 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.article-card {
|
||||
padding: 2rem;
|
||||
padding: 2rem 2rem 5.5rem 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.article-card-header {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.citation-count-badge {
|
||||
position: absolute;
|
||||
bottom: 1.25rem;
|
||||
right: 1.5rem;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
border: 2px dashed rgba(79, 142, 247, 0.4);
|
||||
background: rgba(79, 142, 247, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
color: var(--accent-blue-light);
|
||||
transition: opacity 0.2s, border-color 0.2s, background 0.2s;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.citation-count-badge {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.citation-count-badge:hover {
|
||||
opacity: 1;
|
||||
border-color: rgba(79, 142, 247, 0.65);
|
||||
background: rgba(79, 142, 247, 0.12);
|
||||
}
|
||||
|
||||
.citation-count-number {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.citation-count-label {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.article-citations {
|
||||
margin-top: 1.25rem;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.article-citations-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--accent-blue-light);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.article-citations-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
counter-reset: citations;
|
||||
}
|
||||
|
||||
.article-citation-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.55;
|
||||
counter-increment: citations;
|
||||
}
|
||||
|
||||
.article-citation-item::before {
|
||||
content: counter(citations) ".";
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent-blue-light);
|
||||
flex-shrink: 0;
|
||||
min-width: 1.2em;
|
||||
}
|
||||
|
||||
.citation-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.citation-link {
|
||||
flex-shrink: 0;
|
||||
color: var(--accent-blue-light);
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.citation-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
@@ -1640,11 +1813,21 @@ h1, h2, h3, h4, h5, h6 {
|
||||
.rich-content h2 { font-size: 1.25rem; }
|
||||
.rich-content h3 { font-size: 1.05rem; }
|
||||
|
||||
.rich-content ul, .rich-content ol {
|
||||
.rich-content ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 0.85em;
|
||||
}
|
||||
|
||||
.rich-content ol {
|
||||
list-style-type: decimal;
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 0.85em;
|
||||
}
|
||||
|
||||
.rich-content ul ul { list-style-type: circle; }
|
||||
.rich-content ul ul ul { list-style-type: square; }
|
||||
|
||||
.rich-content li { margin-bottom: 0.3em; line-height: 1.65; }
|
||||
|
||||
.rich-content a {
|
||||
@@ -2868,3 +3051,51 @@ h1, h2, h3, h4, h5, h6 {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Read More / Content Truncation
|
||||
============================================================ */
|
||||
.readmore-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.readmore-wrap.is-clamped {
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 92%);
|
||||
mask-image: linear-gradient(to bottom, black 45%, transparent 92%);
|
||||
}
|
||||
|
||||
.readmore-wrap:not(.is-clamped) {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
.readmore-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3em;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-blue-light);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem 0;
|
||||
margin-top: 0.5rem;
|
||||
line-height: 1;
|
||||
transition: color 0.18s ease;
|
||||
}
|
||||
|
||||
.readmore-btn:hover {
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.readmore-btn svg {
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.22s ease;
|
||||
}
|
||||
|
||||
.readmore-btn.is-open svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user