.empower-cta-container {
text-align: center;
margin: 50px 0;
font-family: 'Poppins', sans-serif;
}
.empower-btn {
display: inline-block;
background: linear-gradient(180deg, #ffaa75 0%, #FF7F32 100%);
color: #ffffff !important;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
padding: 20px 40px;
border-radius: 50px;
box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.6), inset 0 -4px 6px rgba(0, 0, 0, 0.1), 0 6px 0 #c75618, 0 12px 20px rgba(255, 127, 50, 0.4);
transition: all 0.2s ease;
letter-spacing: 0.5px;
max-width: 100%;
box-sizing: border-box;
transform: translateY(0);
}
.empower-btn:hover {
background: linear-gradient(180deg, #5c9df5 0%, #1F5FAA 100%);
box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.6), inset 0 -4px 6px rgba(0, 0, 0, 0.1), 0 6px 0 #123966, 0 12px 20px rgba(31, 95, 170, 0.4);
color: #ffffff !important;
}
.empower-btn:active {
transform: translateY(6px);
box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.6), inset 0 -4px 6px rgba(0, 0, 0, 0.1), 0 0px 0 #123966, 0 5px 10px rgba(31, 95, 170, 0.4);
}
@media (max-width: 768px) {
.empower-btn { font-size: 0.95rem; padding: 15px 25px; display: block; width: 90%; margin: 0 auto; line-height: 1.4; }
}
.empower-dates-header { text-align: center; margin-bottom: 15px; font-family: 'Poppins', sans-serif; }
.empower-dates-header h2 { color: #1F5FAA; font-size: 2.2rem; font-weight: 700; margin: 0 0 10px; }
.empower-dates-header p { color: #444444; font-size: 1.1rem; margin: 0; }
.empower-standalone-timer { text-align: center; margin-bottom: 25px; font-family: 'Poppins', sans-serif; }
.empower-standalone-timer h3 { color: #FF7F32; font-size: 1.1rem; font-weight: 800; margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.empower-countdown-container { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.empower-time-box { background: linear-gradient(180deg, #5c9df5 0%, #1F5FAA 100%); border-radius: 12px; padding: 10px 15px; min-width: 50px; text-align: center; color: #ffffff; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.1), 0 3px 0 #123966, 0 6px 10px rgba(31, 95, 170, 0.3); }
.empower-time-number { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1; margin-bottom: 3px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.empower-time-label { display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #d6e9ff; }
.empower-collapsible { max-width: 900px; margin: 0 auto; font-family: 'Poppins', sans-serif; }
.empower-summary { background: linear-gradient(180deg, #448cf0 0%, #1F5FAA 100%); color: #ffffff; padding: 20px 30px; font-size: 1.3rem; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; border-radius: 20px; margin: 0 0 15px 0; box-shadow: inset 0 4px 6px rgba(255,255,255,0.4), inset 0 -4px 6px rgba(0,0,0,0.1), 0 6px 0 #123966, 0 12px 15px rgba(31,95,170,0.3); transition: all 0.15s ease; }
.empower-summary::-webkit-details-marker { display: none; }
.empower-summary:active { transform: translateY(6px); box-shadow: inset 0 4px 6px rgba(255,255,255,0.4), inset 0 -4px 6px rgba(0,0,0,0.1), 0 0px 0 #123966, 0 5px 10px rgba(31,95,170,0.3); }
.empower-summary i { transition: transform 0.3s ease; }
.empower-collapsible[open] .empower-summary i { transform: rotate(180deg); }
.timeline-container { position: relative; padding: 40px 20px; margin: 0 auto; border-radius: 20px; background-color: #ffffff; box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 2px solid #ffffff; overflow: hidden; z-index: 1; }
.timeline-container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: var(--topo-img); background-size: cover; background-position: center; opacity: 0.5; z-index: -1; }
.timeline-container::after { content: ''; position: absolute; top: 40px; bottom: 20px; left: 50%; width: 4px; background: rgba(31, 95, 170, 0.2); transform: translateX(-50%); border-radius: 2px; z-index: 0; }
.timeline-progress-dot { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: #F3D33A; border: 4px solid #ffffff; border-radius: 50%; z-index: 3; box-shadow: 0 0 15px rgba(243, 211, 58, 0.9); transition: top 1s cubic-bezier(0.25, 0.8, 0.25, 1); }
.timeline-progress-dot::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid #F3D33A; animation: pulseDot 2s infinite ease-out; }
@keyframes pulseDot { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.timeline-item { position: relative; margin-bottom: 40px; width: 100%; clear: both; z-index: 1; }
.timeline-item:nth-child(odd) .timeline-content { float: left; text-align: right; margin-right: 50px; }
.timeline-item:nth-child(even) .timeline-content { float: right; text-align: left; margin-left: 50px; }
.timeline-item::after { content: ""; display: table; clear: both; }
.timeline-marker { position: absolute; top: 15px; left: 50%; width: 50px; height: 50px; background: #1F5FAA; border: 4px solid #fff; border-radius: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.timeline-item:nth-child(even) .timeline-marker { background: #FF7F32; }
.timeline-marker i { color: #fff; font-size: 20px; }
.timeline-content { position: relative; width: 42%; padding: 25px; background: rgba(255, 255, 255, 0.95); border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; border-top: 4px solid #1F5FAA; box-sizing: border-box; }
.timeline-item:nth-child(even) .timeline-content { border-top-color: #FF7F32; }
.timeline-item:hover .timeline-content { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0,0,0,0.25); }
.timeline-content h3 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; color: #1F5FAA; }
.timeline-content .timeline-date { margin: 0; font-size: 1.1rem; font-weight: 600; color: #FF7F32; }
@media (max-width: 768px) {
.empower-dates-header h2 { font-size: 1.8rem; }
.timeline-container::after { left: 30px; }
.timeline-progress-dot { left: 30px; }
.timeline-marker { left: 30px; width: 40px; height: 40px; }
.timeline-marker i { font-size: 16px; }
.timeline-item:nth-child(odd) .timeline-content, .timeline-item:nth-child(even) .timeline-content { float: none; width: calc(100% - 70px); margin-left: 70px; text-align: left; }
.timeline-content { padding: 20px; }
.empower-summary { font-size: 1.1rem; padding: 15px 20px; }
}
View Timeline
Registration Opens
Tuesday, February 24, 2026
Registration Closes
Friday, April 24, 2026
Notification of Acceptance
Early May 2026
Attendance Confirmation Deadline
Mid May 2026
Virtual Information Session
Late May 2026
2026 EmpowerLA Youth Conference
Saturday, June 6, 2026
.empower-process-flow { display: flex; align-items: flex-start; justify-content: center; max-width: 1100px; margin: 0 auto; font-family: 'Poppins', sans-serif; gap: 15px; }
.locked-step { opacity: 0.4; filter: grayscale(100%); pointer-events: none; transition: all 0.5s ease !important; }
.process-card { flex: 1; background-color: #ffffff; border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,0.08); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 2px solid #ffffff; }
.process-card:not(.locked-step):hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.process-header { padding: 20px; text-align: center; font-size: 1.3rem; font-weight: 800; color: #ffffff; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.15); cursor: pointer; position: relative; z-index: 2; overflow: hidden; }
.header-orange { background: linear-gradient(180deg, #ffaa75 0%, #FF7F32 100%); color: #fffad6; }
.header-blue { background: linear-gradient(180deg, #5c9df5 0%, #1F5FAA 100%); color: #d6e9ff; }
.header-light-blue { background: linear-gradient(180deg, #d4e8f9 0%, #AECFEB 100%); color: #1F5FAA; }
.collapse-icon { position: absolute; right: 20px; font-size: 1rem; transition: transform 0.3s ease; }
.process-card.is-open .collapse-icon { transform: rotate(180deg); }
.process-content-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.process-card.is-open .process-content-wrapper { grid-template-rows: 1fr; }
.process-content-inner { overflow: hidden; padding: 15px; }
.process-content { background: rgba(255, 255, 255, 0.95); border-radius: 15px; padding: 25px 20px; color: #444444; font-size: 1rem; line-height: 1.6; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.process-content p { margin-bottom: 15px; }
.process-content p:last-child { margin-bottom: 0; }
.process-content strong { color: #1F5FAA; font-weight: 700; }
.process-content u { text-decoration-color: #FF7F32; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.process-checklist { list-style: none; padding: 0; margin: 15px 0 0 0; }
.process-checklist li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 0.95rem; font-weight: 500; }
.process-checklist li i { position: absolute; left: 0; top: 4px; color: #FF7F32; font-size: 1.1rem; }
.process-arrow-wrapper { display: flex; align-items: center; justify-content: center; margin-top: 8px; z-index: 10; filter: drop-shadow(0 4px 0 #c2a623) drop-shadow(0 6px 10px rgba(0,0,0,0.15)); animation: bounceRight 2s infinite ease-in-out; }
.process-arrow-wrapper.locked-step { animation: none; }
.process-arrow-shape { width: 60px; height: 45px; background: linear-gradient(180deg, #ffe875 0%, #F3D33A 100%); clip-path: polygon(0% 25%, 55% 25%, 55% 0%, 100% 50%, 55% 100%, 55% 75%, 0% 75%); position: relative; color: #c2a623; overflow: hidden; }
@keyframes bounceRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 900px) {
.empower-process-flow { flex-direction: column; align-items: center; gap: 20px; }
.process-card { width: 100%; max-width: 500px; }
.process-arrow-wrapper { transform: rotate(90deg); margin-top: -15px; margin-bottom: -15px; animation: bounceDown 2s infinite ease-in-out; }
.process-arrow-wrapper.locked-step { animation: none; transform: rotate(90deg); }
@keyframes bounceDown { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(6px); } }
}
CHECK YOUR ELIGIBILITY
The 2026 EmpowerLA Youth Conference is available to any selected youth who is between the ages of 14-17 and has some sort of stakeholder status within the City of Los Angeles jurisdiction. Below are examples of what would constitute you as a stakeholder:
- If you live in Los Angeles
- If you go to school in Los Angeles
- If you volunteer in Los Angeles
- If you work in Los Angeles
- If you are a member of an institution in Los Angeles
REGISTER FOR THE EVENT
Youth interested in participating in the 2026 EmpowerLA Youth Conference must register by Friday, April 24, 2026.
Registration does not guarantee entry to the conference. Applications will undergo a lottery selection, and only 100 applicants will be selected to attend the event.
CONFIRM YOUR ATTENDANCE
In early May, every applicant will receive an email notification about the status of their attendance.
If an applicant has been invited to attend the 2026 EmpowerLA Youth Conference, an email response to confirm your attendance is required no later than mid-May.
CHECK YOUR ELIGIBILITY
The 2026 EmpowerLA Youth Conference is available to any selected youth who is between the ages of 14-17 and has some sort of stakeholder status within the City of Los Angeles jurisdiction. Below are examples of what would constitute you as a stakeholder:
- If you live in Los Angeles
- If you go to school in Los Angeles
- If you volunteer in Los Angeles
- If you work in Los Angeles
- If you are a member of an institution in Los Angeles
REGISTER FOR THE EVENT
Youth interested in participating in the 2026 EmpowerLA Youth Conference must register by Friday, April 24, 2026.
Registration does not guarantee entry to the conference. Applications will undergo a lottery selection, and only 100 applicants will be selected to attend the event.
CONFIRM YOUR ATTENDANCE
In early May, every applicant will receive an email notification about the status of their attendance.
If an applicant has been invited to attend the 2026 EmpowerLA Youth Conference, an email response to confirm your attendance is required no later than mid-May.
.empower-faq-wrapper { position: relative; max-width: 1200px; margin: 60px auto; padding: 20px; z-index: 1; }
.empower-faq-header { text-align: center; margin-bottom: 25px; font-family: 'Poppins', sans-serif; }
.empower-faq-header h2 { color: #1F5FAA; font-size: 2.2rem; font-weight: 700; margin: 0 0 10px; }
.empower-faq-header p { color: #444444; font-size: 1.1rem; margin: 0 auto; max-width: 800px; line-height: 1.6; }
.faq-embed-container { position: relative; width: 100%; height: 600px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.15); border: 4px solid #1F5FAA; background: #ffffff; margin-top: 15px; animation: pulseBg 2s infinite; }
@keyframes pulseBg { 0% { background-color: #f0f5fa; } 50% { background-color: #e1edf8; } 100% { background-color: #f0f5fa; } }
.faq-embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: #ffffff; }
@media (max-width: 768px) { .empower-faq-header h2 { font-size: 1.8rem; } .faq-embed-container { height: 450px; border-width: 3px; } }
.empower-toolkit-wrapper { position: relative; max-width: 1200px; margin: 60px auto; padding: 20px; z-index: 1; }
.empower-toolkit-header { text-align: center; margin-bottom: 25px; font-family: 'Poppins', sans-serif; }
.empower-toolkit-header h2 { color: #1F5FAA; font-size: 2.2rem; font-weight: 700; margin: 0 0 10px; }
.empower-toolkit-header p { color: #444444; font-size: 1.1rem; margin: 0 auto; max-width: 800px; line-height: 1.6; }
.toolkit-embed-container { position: relative; width: 100%; height: 600px; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.15); border: 4px solid #1F5FAA; background: #ffffff; margin-top: 15px; animation: pulseBg 2s infinite; }
.toolkit-embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: #ffffff; }
@media (max-width: 768px) { .empower-toolkit-header h2 { font-size: 1.8rem; } .toolkit-embed-container { height: 450px; border-width: 3px; } }
.empower-recap-wrapper { position: relative; max-width: 1000px; margin: 60px auto; padding: 20px; z-index: 1; }
.empower-recap-header { text-align: center; margin-bottom: 25px; font-family: 'Poppins', sans-serif; }
.empower-recap-header h2 { color: #FF7F32; font-size: 2.2rem; font-weight: 700; margin: 0 0 10px; }
.empower-recap-header p { color: #444444; font-size: 1.1rem; margin: 0 auto; max-width: 800px; line-height: 1.6; }
.recap-video-container { position: relative; width: 100%; padding-top: 56.25%; border-radius: 15px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.15); border: 4px solid #1F5FAA; background: #000000; }
.recap-video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; object-fit: cover; }
@media (max-width: 768px) { .empower-recap-header h2 { font-size: 1.8rem; } .recap-video-container { border-width: 3px; } }
/* --- Shared Section Background Wrapper --- */
.empower-section-wrapper {
position: relative;
max-width: 1200px;
margin: 60px auto;
padding: 60px 20px;
border-radius: 30px;
background-color: #fdfdfd;
overflow: hidden;
z-index: 1;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.empower-section-wrapper > * {
position: relative;
z-index: 2;
}
.empower-section-wrapper.has-dark-bg .empower-dates-header h2,
.empower-section-wrapper.has-dark-bg .empower-dates-header p {
color: #ffffff !important;
text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
@media (max-width: 900px) {
.empower-section-wrapper { padding: 40px 15px; }
}
(function() {
console.log("🚀 Civic Youth 2026: Script initialized.");
const whiteBgUrl = "https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Spot-Background-White-2-scaled.png";
const sectionBgs = [
"https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Spot-Background-Blue-scaled.png",
"https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Spot-Background-Blue-2-scaled.png",
whiteBgUrl,
"https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Spot-Background-Blue-3-scaled.png"
];
const topoBgs = [
"https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Topo-Yellow-Black-scaled.png",
"https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Topo-Blue-Black-scaled.png",
"https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Topo-Black-Yellow-scaled.png",
"https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Topo-Black-Orange-scaled.png",
"https://neighborhoodempowerment.lacity.gov/wp-content/uploads/2026/02/Topo-Black-Blue-scaled.png"
];
function runEmpowerScripts() {
// 1. SECTION BACKGROUNDS
const sections = document.querySelectorAll('.empower-section-wrapper:not([data-bg-init="true"])');
if (sections.length > 0) {
console.log(`🎨 Found ${sections.length} sections. Applying backgrounds...`);
sections.forEach(section => {
section.setAttribute('data-bg-init', 'true');
const randomBg = sectionBgs[Math.floor(Math.random() * sectionBgs.length)];
section.style.backgroundImage = `url('${randomBg}')`;
section.style.backgroundSize = 'cover';
section.style.backgroundPosition = 'center';
if (randomBg !== whiteBgUrl) section.classList.add('has-dark-bg');
});
}
// 2. TIMELINE BACKGROUND
document.querySelectorAll('.timeline-container:not([data-bg-init="true"])').forEach(timeline => {
timeline.setAttribute('data-bg-init', 'true');
const randomTopo = topoBgs[Math.floor(Math.random() * topoBgs.length)];
timeline.style.setProperty('--topo-img', `url('${randomTopo}')`);
});
// 3. STEP CARDS
document.querySelectorAll('.process-card:not([data-card-init="true"])').forEach(card => {
card.setAttribute('data-card-init', 'true');
const randomTopo = topoBgs[Math.floor(Math.random() * topoBgs.length)];
card.style.backgroundImage = `url('${randomTopo}')`;
card.style.backgroundSize = 'cover';
card.style.backgroundPosition = 'center';
const header = card.querySelector('.process-header');
if(header) {
card.addEventListener('mouseenter', () => { if (!card.classList.contains('locked-step')) card.classList.add('is-open'); });
header.addEventListener('click', () => { if (!card.classList.contains('locked-step')) card.classList.toggle('is-open'); });
}
});
// 4. STEP UNLOCKING LOGIC
const bindUnlock = (triggerClass, targetClass, arrowClass) => {
document.querySelectorAll(triggerClass).forEach(trigger => {
if (trigger.getAttribute('data-unlock-init')) return;
trigger.setAttribute('data-unlock-init', 'true');
const unlock = () => {
document.querySelectorAll(targetClass).forEach(t => t.classList.remove('locked-step'));
document.querySelectorAll(arrowClass).forEach(a => a.classList.remove('locked-step'));
};
trigger.addEventListener('mouseenter', unlock);
const head = trigger.querySelector('.process-header');
if (head) head.addEventListener('click', unlock);
});
};
bindUnlock('.js-step-1', '.js-step-2', '.js-arrow-1');
bindUnlock('.js-step-2', '.js-step-3', '.js-arrow-2');
// 5. COUNTDOWN TIMER
const timerElements = document.querySelectorAll('.js-cd-days');
if (timerElements.length > 0 && !window.empowerTimerRunning) {
console.log("⏱️ Timer elements found. Starting countdown...");
window.empowerTimerRunning = true;
const deadline = new Date("April 24, 2026 23:59:59").getTime();
const updateTimer = () => {
const distance = deadline - new Date().getTime();
if (distance el.innerText = d);
document.querySelectorAll('.js-cd-hours').forEach(el => el.innerText = h);
document.querySelectorAll('.js-cd-minutes').forEach(el => el.innerText = m);
document.querySelectorAll('.js-cd-seconds').forEach(el => el.innerText = s);
};
updateTimer();
setInterval(updateTimer, 1000);
}
// 6. PROGRESS DOT
const updateDot = () => {
document.querySelectorAll('.timeline-container').forEach(container => {
const markers = container.querySelectorAll('.timeline-marker');
const dot = container.querySelector('.js-timeline-dot');
if(markers.length {
details.addEventListener('toggle', () => { if (details.open) setTimeout(updateDot, 50); });
});
}
}
// Wait for the DOM to be ready before starting the loop
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => setInterval(runEmpowerScripts, 500));
} else {
setInterval(runEmpowerScripts, 500);
}
})();