.hero-mosaic-image,
.hero-mag-image,
.hero-break-image {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
background-color: #1a1a1a;
background-size: cover;
background-position: center;
}
.hero-mosaic-image img,
.hero-mag-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-mosaic-overlay,
.hero-mag-overlay,
.hero-break-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
padding: 1.5rem;
transition: background 0.3s;
}
.hero-mosaic-cat,
.hero-break-badge,
.hero-mag-cat {
display: inline-block;
background-color: var(--color-primary);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 2px;
margin-bottom: 0.5rem;
} .hero-classica-main {
margin-bottom: var(--spacing-xl);
}
.hero-classica-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
} .hero-magazine {
display: grid;
grid-template-columns: 62% 38%;
gap: var(--spacing-lg);
min-height: 480px;
} .hero-magazine-main { height: 100%; }
.hero-mag-featured { height: 100%; }
.hero-mag-featured a { display: block; height: 100%; }
.hero-mag-image {
height: 100%;
min-height: 480px;
}
.hero-mag-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.hero-mag-featured:hover .hero-mag-image img {
transform: scale(1.03);
}
.hero-mag-overlay { padding: 2rem; }
.hero-mag-title {
font-size: 1.75rem;
font-weight: 900;
color: #fff;
line-height: 1.25;
margin-bottom: 0.75rem;
}
.hero-mag-meta {
font-size: 0.8rem;
color: rgba(255,255,255,0.75);
}
.hero-mag-meta .sep { margin: 0 0.4rem; } .hero-magazine-stack {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.hero-mag-stacked {
flex: 1;
border-radius: var(--radius-md);
overflow: hidden;
background-color: var(--color-bg-light);
transition: box-shadow 0.25s;
}
.hero-mag-stacked:hover { box-shadow: var(--shadow-md); }
.hero-mag-stacked a {
display: flex;
height: 100%;
gap: 0;
}
.hero-mag-stacked-image {
width: 120px;
flex-shrink: 0;
overflow: hidden;
}
.hero-mag-stacked-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.hero-mag-stacked:hover .hero-mag-stacked-image img { transform: scale(1.05); }
.hero-mag-stacked-content {
padding: 0.85rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.3rem;
}
.hero-mag-stacked-cat {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
color: var(--color-primary);
letter-spacing: 0.5px;
}
.hero-mag-stacked-title {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.35;
color: var(--color-secondary);
}
body.dark-mode .hero-mag-stacked-title { color: #f0f0f0; }
.hero-mag-stacked-time {
font-size: 0.72rem;
color: var(--color-text-light);
}
body.dark-mode .hero-mag-stacked { background-color: #2a2a2a; } .hero-mosaico {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
} .hero-mosaico-top {
display: grid;
grid-template-columns: 60% 40%;
gap: var(--spacing-md);
height: 380px;
}
.hero-mosaico-featured { height: 100%; }
.hero-mosaico-featured a,
.hero-mosaic-big { height: 100%; }
.hero-mosaic-big .hero-mosaic-image { height: 100%; } .hero-mosaico-right {
display: grid;
grid-template-rows: 1fr 1fr;
gap: var(--spacing-md);
height: 100%;
}
.hero-mosaic-medium .hero-mosaic-image {
height: 100%;
min-height: 0;
}
.hero-mosaic-medium a { display: block; height: 100%; } .hero-mosaico-bottom {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
}
.hero-mosaic-small {
border-radius: var(--radius-md);
overflow: hidden;
background-color: var(--color-bg-light);
transition: box-shadow 0.25s;
}
.hero-mosaic-small:hover { box-shadow: var(--shadow-md); }
.hero-mosaic-small a {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
}
.hero-mosaic-small-image {
width: 100%;
height: 140px;
overflow: hidden;
}
.hero-mosaic-small-image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.hero-mosaic-small:hover .hero-mosaic-small-image img { transform: scale(1.05); }
.hero-mosaic-small-content {
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
}
.hero-mosaic-cat-dark {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
color: var(--color-primary);
}
.hero-mosaic-small-title {
font-size: 0.88rem;
font-weight: 700;
line-height: 1.35;
color: var(--color-secondary);
}
body.dark-mode .hero-mosaic-small-title { color: #f0f0f0; } .hero-mosaic-title {
font-size: 1.5rem;
font-weight: 900;
color: #fff;
line-height: 1.25;
}
.hero-mosaic-title-sm {
font-size: 1rem;
font-weight: 700;
}
.hero-mosaic-time {
font-size: 0.75rem;
color: rgba(255,255,255,0.8);
display: block;
margin-top: 0.4rem;
} .hero-mosaic-time-dark {
color: var(--color-text-light) !important;
font-size: 0.72rem;
} .hero-mosaic-cat-dark {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
color: var(--color-primary);
letter-spacing: 0.5px;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
display: block;
}
body.dark-mode .hero-mosaic-small { background-color: #2a2a2a; } .hero-breaking {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
} .hero-break-main a { display: block; }
.hero-break-image {
position: relative;
height: 520px;
border-radius: var(--radius-md);
overflow: hidden;
}
.hero-break-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.95) 0%,
rgba(0,0,0,0.6) 40%,
rgba(0,0,0,0.2) 70%,
transparent 100%
);
z-index: 1;
}
.hero-break-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 2;
padding: 3rem;
background: none;
}
.hero-break-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 1.5px;
}
.hero-break-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation: pulse-dot 1.5s infinite;
flex-shrink: 0;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.hero-break-title {
font-size: 2.75rem;
font-weight: 900;
color: #fff;
line-height: 1.15;
margin-bottom: 1rem;
max-width: 800px;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.hero-break-excerpt {
font-size: 1rem;
color: rgba(255,255,255,0.85);
margin-bottom: 1rem;
max-width: 600px;
line-height: 1.5;
}
.hero-break-meta {
font-size: 0.8rem;
color: rgba(255,255,255,0.75);
}
.hero-break-meta .sep { margin: 0 0.4rem; }
.hero-break-author { font-weight: 600; color: #fff; }
.hero-break-main:hover .hero-break-title {
text-decoration: underline;
text-decoration-color: var(--color-primary);
text-underline-offset: 3px;
} .hero-break-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
}
.hero-break-strip-item {
border-radius: var(--radius-md);
overflow: hidden;
background-color: var(--color-bg-light);
transition: box-shadow 0.25s, transform 0.25s;
}
.hero-break-strip-item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.hero-break-strip-item a { display: block; text-decoration: none; }
.hero-break-strip-image {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
}
.hero-break-strip-image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.35s;
}
.hero-break-strip-item:hover .hero-break-strip-image img { transform: scale(1.05); }
.hero-break-strip-content {
padding: 0.85rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.hero-break-strip-cat {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
color: var(--color-primary);
letter-spacing: 0.5px;
}
.hero-break-strip-title {
font-size: 0.88rem;
font-weight: 700;
line-height: 1.35;
color: var(--color-secondary);
}
body.dark-mode .hero-break-strip-title { color: #f0f0f0; }
.hero-break-strip-time {
font-size: 0.72rem;
color: var(--color-text-light);
}
body.dark-mode .hero-break-strip-item { background-color: #2a2a2a; }