65e345585a
- fonts.css : strong { font-weight: 900 }
- layout.css : ajustement grid-template-rows (lignes 6-7 réduites à 2fr)
- collection.css : padding header mobile, tailles de police, gap carte,
image aspect-ratio avec marges, line-height description
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
191 lines
3.5 KiB
CSS
191 lines
3.5 KiB
CSS
/* Shared styles for collection pages (Blog, WhitePapers) */
|
|
|
|
/* --- Header / Intro --- */
|
|
.collection-header {
|
|
text-align: center;
|
|
padding: 6rem 0 3rem;
|
|
max-width: 40rem;
|
|
margin: auto;
|
|
}
|
|
|
|
.collection-header h1 {
|
|
font-size: var(--font-size-title-main);
|
|
text-transform: uppercase;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.collection-header p {
|
|
font-size: var(--font-size-subtitle);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.collection-header :global(h1) {
|
|
font-family: "Terminal", sans-serif;
|
|
font-size: var(--font-size-title-main);
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.collection-header :global(p) {
|
|
font-size: var(--font-size-subtitle);
|
|
line-height: 1.6;
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* --- Card --- */
|
|
.collection-card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 2rem;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.collection-card-text {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
max-width: 640px;
|
|
}
|
|
|
|
.collection-card-date {
|
|
color: #d9d9d9;
|
|
font-size: var(--font-size-paragraph);
|
|
}
|
|
|
|
.collection-card-title {
|
|
font-family: "Danzza", sans-serif;
|
|
font-size: 40px;
|
|
max-width: 80%;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.collection-card-title a {
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.collection-card-title a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.collection-card-description {
|
|
color: #d9d9d9;
|
|
font-family: "Danzza", sans-serif;
|
|
font-size: var(--font-size-paragraph);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.collection-card-readmore {
|
|
color: var(--color-primary);
|
|
font-family: "Danzza", sans-serif;
|
|
font-size: var(--font-size-paragraph);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.collection-card-readmore .arrow {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* --- Image --- */
|
|
.collection-card-image img {
|
|
width: 300px;
|
|
height: 169px;
|
|
object-fit: cover;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.collection-card-image img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.collection-card-image--featured img {
|
|
width: auto;
|
|
height: 300px;
|
|
}
|
|
|
|
/* --- Divider --- */
|
|
.collection-divider {
|
|
border: none;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- Featured --- */
|
|
.collection-card--featured .collection-card-title {
|
|
font-size: 36px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* --- Loading --- */
|
|
.collection-loading {
|
|
text-align: center;
|
|
padding: 4rem 0;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* --- Mobile --- */
|
|
@media (max-width: 700px) {
|
|
.collection-header {
|
|
padding: 6rem 0 2rem;
|
|
}
|
|
|
|
.collection-header h1 {
|
|
font-size: var(--font-size-title-section-mobile);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.collection-header p {
|
|
font-family: "Danzza Medium", sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
font-size: var(--font-size-subtitle);
|
|
}
|
|
|
|
.collection-card {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.collection-card-image img,
|
|
.collection-card-image--featured img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16/9;
|
|
margin-top: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.collection-card--featured .collection-card-title {
|
|
font-size: var(--font-size-title-section-mobile);
|
|
}
|
|
|
|
.collection-card-title {
|
|
font-size: var(--font-size-title-section-mobile);
|
|
}
|
|
|
|
.collection-card-description {
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
/* --- Tablet --- */
|
|
@media (min-width: 701px) and (max-width: 912px) {
|
|
.collection-header :global(h1) {
|
|
font-size: var(--font-size-title-main-tablet);
|
|
}
|
|
|
|
.collection-card {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.collection-card-image img,
|
|
.collection-card-image--featured img {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16/9;
|
|
}
|
|
}
|