/* ============================
AFRICAN LEGISLATORS IN RED 2025
============================ */
.alir-slider-wrapper {
position: relative;
overflow: hidden;
width: 100%;
max-width: 1000px;
margin: 2em auto;
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
background: #000;
}
/* Key difference: the slider is now doubled in width */
.alir-slider {
display: flex;
width: calc(200%); /* double container so we can duplicate slides */
animation: alirSlideMotion 80s linear infinite;
}
/* Each slide remains the same */
.alir-slide {
flex: 0 0 calc(100% / 21);
position: relative;
}
.alir-img img {
width: 100%;
height: 150px;
object-fit: cover;
filter: brightness(0.85);
transition: filter 0.6s ease, transform 0.8s ease;
}
/* hover pause and zoom */
.alir-slider-wrapper:hover .alir-slider {
animation-play-state: paused;
}
.alir-slider-wrapper:hover .alir-img img {
filter: brightness(1);
transform: scale(1.03);
}
/* gradient overlay */
.alir-slide::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
z-index: 1;
}
/* caption */
.alir-caption {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
color: #fff;
background: rgba(0,0,0,0.55);
padding: 8px 20px;
border-radius: 20px;
font-weight: 600;
font-size: 1.1em;
letter-spacing: 0.3px;
transition: opacity 0.4s;
}
/* navigation dots (optional) */
.alir-nav-dots {
text-align: center;
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
z-index: 3;
}
.alir-nav-dots span {
display: inline-block;
width: 10px;
height: 10px;
background: rgba(255,255,255,0.6);
margin: 0 4px;
border-radius: 50%;
animation: alirDotsFlash 5s infinite ease-in-out;
}
.alir-nav-dots span:nth-child(2){animation-delay:5s}
.alir-nav-dots span:nth-child(3){animation-delay:10s}
.alir-nav-dots span:nth-child(4){animation-delay:15s}
.alir-nav-dots span:nth-child(5){animation-delay:20s}
/* --- animations --- */
@keyframes alirSlideMotion {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* slides across half since content is duplicated */
}
@keyframes alirDotsFlash {
0%,20%,100% {background: rgba(255,255,255,0.5);}
10% {background: #ff4747;}
}
/* responsiveness */
@media (max-width: 768px) {
.alir-img img { height: 200px; }
.alir-caption { font-size: 0.9em; }
}
/* ==============================
AFRICAN LEGISLATORS IN RED 2025
============================== */
/* ---------- MASTHEAD ---------- */
.alir-masthead {
position: relative;
background: linear-gradient(135deg, #000, #111, #220000);
color: #fff;
text-align: center;
padding: 2em 1em 0em;
overflow: hidden;
font-family: 'Segoe UI', sans-serif;
animation: alirGradient 20s infinite alternate ease-in-out;
}
.alir-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at center, rgba(255,0,0,0.15), transparent 70%);
}
.alir-content2 {
position: relative;
z-index: 2;
}
.alir-logo {
margin-bottom: 1em;
animation: fadeIn 2s ease-in;
}
.alir-masthead-title {
font-size: 2.8em;
font-weight: 800;
margin: 0.3em 0;
letter-spacing: 1px;
display: inline-block;
}
.alir-masthead-title span {
color: #e3242b;
animation: glowPulse 3s infinite alternate ease-in-out;
}
.alir-masthead-title .year {
color: #fff;
opacity: 0.85;
font-weight: 600;
animation: none;
}
.alir-tagline {
font-size: 1.2em;
max-width: 650px;
margin: 0.5em auto 0;
color: #ccc;
}
/* Animated gradient background */
@keyframes alirGradient {
0% { background-position: 0 0; }
100% { background-position: 100% 100%; }
}
/* Glow pulse for “Red” */
@keyframes glowPulse {
0% { text-shadow: 0 0 10px rgba(227,36,43,0.5); }
100% { text-shadow: 0 0 25px rgba(227,36,43,0.9); }
}
/* Logo fade-in */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
/* ---------- DATA SECTION ---------- */
.alir-data-section {
background: #fafafa;
color: #111;
padding: 3em 1em;
text-align: center;
font-family: 'Segoe UI', sans-serif;
}
.alir-section-title {
font-size: 1.8em;
color: #b00000;
margin-bottom: 1.2em;
font-weight: 700;
border: none;
}
.alir-data-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.8em auto;
max-width: 700px;
gap: 1em;
}
.alir-data-bar .label {
flex: 1;
text-align: left;
font-weight: 600;
}
.alir-data-bar .bar {
flex: 3;
height: 14px;
background: #ddd;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.alir-data-bar .fill {
height: 100%;
background: linear-gradient(90deg, #e3242b, #ff9a47);
border-radius: 20px;
animation-duration: 6s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* Each bar has its own width target, repeating forever */
.alir-data-bar.senators .fill { animation-name: loadSenators; }
.alir-data-bar.house .fill { animation-name: loadHouse; }
.alir-data-bar.assemblies .fill { animation-name: loadAssemblies; }
.alir-data-bar.commissioners .fill { animation-name: loadCommissioners; }
.alir-data-bar.ministers .fill { animation-name: loadMinisters; }
.alir-data-bar.presidents .fill { animation-name: loadPresidents; }
.alir-data-bar.council .fill { animation-name: loadCouncil; }
/* Keyframes — use subtle pulsating effect that resets to zero and refills */
@keyframes loadSenators { 0%,90%{width:0;} 50%{width:7%;} }
@keyframes loadHouse { 0%,90%{width:0;} 50%{width:12%;} }
@keyframes loadAssemblies { 0%,90%{width:0;} 50%{width:2.6%;} }
@keyframes loadCommissioners { 0%,90%{width:0;} 50%{width:1%;} }
@keyframes loadMinisters { 0%,90%{width:0;} 50%{width:35%;} }
@keyframes loadPresidents { 0%,90%{width:0;} 50%{width:88%;} }
@keyframes loadCouncil { 0%,90%{width:0;} 50%{width:0.5%;} }
.alir-data-bar .percent {
flex: 0.5;
text-align: right;
font-weight: 600;
color: #444;
}
@media (max-width: 768px) {
.alir-masthead-title { font-size: 2em; }
.alir-tagline { font-size: 1em; }
.alir-data-bar { flex-direction: column; align-items: flex-start; }
.alir-data-bar .bar { width: 100%; }
.alir-data-bar .percent { align-self: flex-end; }
}