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);
|
||||
}
|
||||
|
||||
@@ -152,12 +152,51 @@ function initIntersectionObserver() {
|
||||
});
|
||||
}
|
||||
|
||||
function initReadMore() {
|
||||
var chevronSVG = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
||||
|
||||
document.querySelectorAll('[data-readmore]').forEach(function (el) {
|
||||
var threshold = parseInt(el.getAttribute('data-readmore'), 10) || 120;
|
||||
var fullHeight = el.scrollHeight;
|
||||
|
||||
if (fullHeight <= threshold + 12) return;
|
||||
|
||||
var storedHeight = fullHeight;
|
||||
|
||||
el.classList.add('readmore-wrap', 'is-clamped');
|
||||
el.style.maxHeight = threshold + 'px';
|
||||
|
||||
var btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'readmore-btn';
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
btn.innerHTML = 'Read more ' + chevronSVG;
|
||||
el.insertAdjacentElement('afterend', btn);
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
var collapsed = el.classList.toggle('is-clamped');
|
||||
if (collapsed) {
|
||||
el.style.maxHeight = threshold + 'px';
|
||||
btn.innerHTML = 'Read more ' + chevronSVG;
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
btn.classList.remove('is-open');
|
||||
} else {
|
||||
el.style.maxHeight = storedHeight + 'px';
|
||||
btn.innerHTML = 'Read less ' + chevronSVG;
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
btn.classList.add('is-open');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
initNavbarScroll();
|
||||
initMobileMenu();
|
||||
initMegaMenu();
|
||||
initFAQAccordion();
|
||||
initIntersectionObserver();
|
||||
initReadMore();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
|
||||
Reference in New Issue
Block a user