/* =========================================================================
blog-listing.css
Magazine-style blog index for coldjet.fr. Static port of the IceRocket
(icerocket-app) Next.js BlogListingPage — framer-motion → CSS reveal,
Tailwind utilities → Bootstrap grid + these rules. Reuses the design
tokens declared in blog-extras.css :root (load blog-extras.css first).
Brand: navy var(--cj-navy) #001D77, lime var(--cj-lime) #aed047.
Fonts: "Roboto" (display) + "Inter" (body), already loaded in .
GATED FULL SCAFFOLD: only the Lead Story renders today (1 FR post). The
Editor's Picks row, the "More Insights" tail grid, and the search/filter
rail are authored but carry the `hidden` attribute. Reveal each (remove
`hidden` + populate cards) once ≥4 posts exist. See blog/index.html.
========================================================================= */
.blog-listing-page {
padding-top: var(--cj-nav-h); /* clear the fixed navbar (mirrors .blog-post-page) */
background: var(--cj-bg);
color: var(--cj-text);
font-family: "Inter", system-ui, sans-serif;
}
/* style.css sets .footer-alt to position:fixed (overlaps content). Reset it
on the listing page — same fix gTimmermans applied for .blog-post-page. */
.blog-listing-page ~ .footer-alt {
position: relative;
bottom: auto;
left: auto;
width: 100%;
}
.blog-container {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
}
/* ── Page header band ─────────────────────────────────────────────────── */
.listing-head {
background: var(--cj-bg-soft);
border-bottom: 1px solid var(--cj-border-soft);
padding: 56px 0 44px;
text-align: center;
}
.listing-head-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
}
.listing-head .hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--cj-border);
border-radius: 999px;
padding: 7px 14px 7px 12px;
font-family: "Roboto", "Inter", sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--cj-navy);
letter-spacing: 0.04em;
margin-bottom: 24px;
box-shadow: var(--cj-shadow-sm);
}
.listing-head .hero-eyebrow::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cj-lime);
display: inline-block;
}
.listing-head h1 {
font-family: "Roboto", "Inter", sans-serif;
font-size: clamp(30px, 4.5vw, 48px);
line-height: 1.08;
font-weight: 700;
color: var(--cj-ink);
letter-spacing: -0.02em;
margin: 0 0 16px;
text-wrap: balance;
}
.listing-head .listing-sub {
font-size: 17px;
line-height: 1.6;
color: var(--cj-muted);
margin: 0;
text-wrap: pretty;
}
/* ── Section eyebrow (dash rule + tracked label) ──────────────────────── */
/* Mirrors icerocket's ` + label`. */
.section-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 32px;
}
.section-eyebrow::before {
content: "";
height: 1px;
width: 48px;
background: var(--cj-navy);
flex: none;
}
.section-eyebrow span {
font-family: "Roboto", "Inter", sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cj-navy);
}
.listing-section { padding: 56px 0; }
.listing-section + .listing-section { padding-top: 0; }
/* ── Lead story card ──────────────────────────────────────────────────── */
.lead-card {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
text-decoration: none;
color: inherit;
}
@media (min-width: 992px) {
.lead-card {
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
}
.lead-card-media {
position: relative;
border-radius: var(--cj-radius-lg);
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--cj-border-soft);
}
@media (min-width: 992px) {
.lead-card-media { aspect-ratio: 5 / 4; }
}
.lead-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.lead-card:hover .lead-card-media img { transform: scale(1.03); }
.lead-card-body {
display: flex;
flex-direction: column;
gap: 18px;
}
.lead-eyebrow-row {
display: flex;
align-items: center;
gap: 12px;
}
.lead-eyebrow-row .cat {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cj-navy);
}
.lead-eyebrow-row .rule {
height: 1px;
flex: 1;
max-width: 72px;
background: var(--cj-border);
}
.lead-title {
font-family: "Roboto", "Inter", sans-serif;
font-size: clamp(28px, 4vw, 46px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--cj-ink);
margin: 0;
text-wrap: balance;
transition: color 0.2s ease;
}
.lead-card:hover .lead-title { color: var(--cj-navy); }
.lead-excerpt {
font-size: 17px;
line-height: 1.65;
color: var(--cj-text);
margin: 0;
text-wrap: pretty;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-meta {
display: flex;
align-items: center;
gap: 14px;
font-size: 13px;
color: var(--cj-muted);
margin-top: 4px;
}
.card-meta .author {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.card-meta .author img {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
background: var(--cj-border-soft);
flex: none;
}
.card-meta .divider {
width: 1px;
height: 12px;
background: var(--cj-border);
flex: none;
}
.card-meta .reading {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
flex: none;
}
.lead-readmore {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cj-navy);
margin-top: 4px;
transition: gap 0.2s ease;
}
.lead-card:hover .lead-readmore { gap: 12px; }
.lead-readmore .mdi { font-size: 16px; }
/* ── Secondary / tail "insight" card ──────────────────────────────────── */
.insight-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 576px) { .insight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .insight-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } }
.insight-card {
display: flex;
flex-direction: column;
gap: 14px;
text-decoration: none;
color: inherit;
}
.insight-card-media {
position: relative;
border-radius: var(--cj-radius);
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--cj-border-soft);
}
.insight-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.insight-card:hover .insight-card-media img { transform: scale(1.03); }
.insight-card .cat {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--cj-lime-dark);
}
/* AEO rule: secondary cards use bold , not a heading. Headings stay
reserved for the page H1 + the lead story's H2 (structural pillars). */
.insight-card .insight-card-title {
font-family: "Roboto", "Inter", sans-serif;
font-size: 19px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--cj-ink);
margin: 0;
text-wrap: balance;
transition: color 0.2s ease;
}
.insight-card:hover .insight-card-title { color: var(--cj-navy); }
/* ── Pill CTA (View all) ──────────────────────────────────────────────── */
.cta-row { margin-top: 56px; display: flex; justify-content: center; }
.btn-pill-outline {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--cj-navy);
border-radius: 999px;
padding: 13px 26px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cj-navy);
text-decoration: none;
background: transparent;
transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}
.btn-pill-outline:hover {
background: var(--cj-navy);
color: #fff;
gap: 12px;
}
/* ── "More coming" placeholder (visible while only 1 post exists) ──────── */
.more-coming {
margin-top: 40px;
padding: 28px 24px;
border: 1px dashed var(--cj-border);
border-radius: var(--cj-radius);
text-align: center;
color: var(--cj-muted);
font-size: 15px;
background: var(--cj-bg-soft);
}
.more-coming strong { color: var(--cj-text); font-weight: 600; }
/* ── Search + filter rail (gated) ─────────────────────────────────────── */
.listing-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 20px;
margin: 0 0 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--cj-border-soft);
}
.filter-search {
flex: 1 1 240px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--cj-border);
border-radius: 999px;
padding: 9px 16px;
background: #fff;
}
.filter-search input {
border: 0;
outline: 0;
width: 100%;
font-size: 14px;
font-family: inherit;
color: var(--cj-ink);
background: transparent;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
border: 1px solid var(--cj-border);
border-radius: 999px;
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
color: var(--cj-text);
background: #fff;
cursor: pointer;
transition: all 0.18s ease;
}
.chip.is-active,
.chip:hover { border-color: var(--cj-navy); color: var(--cj-navy); background: var(--cj-navy-tint); }
/* ── Reveal-on-scroll (progressive enhancement; no JS = always visible) ── */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.js-reveal .reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
}