.podcast-page .edit *{
box-sizing: border-box;
}
.acnb-banner{
width: 500px;
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
}
h1.page-title{
font-family: 'Big Shoulders Text', sans-serif;
font-size: 32px;
margin: 20px auto;
line-height: 2.4rem;
width: 500px;
max-width: 100%;
text-align: left;
}
.featured-episode{
width: 500px;
max-width: 100%;
margin: 0 auto 30px;
border: 3px solid #2563eb;
background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%);
position: relative;
overflow: hidden;
}
.featured-episode.local-voices{
border-color: #228b22;
background: linear-gradient(135deg, #f0fff0 0%, #fff 100%);
}
.featured-episode .featured-label{
position: absolute;
top: 0;
right: 0;
background: #2563eb;
color: white;
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.featured-episode.local-voices .featured-label{
background: #228b22;
}
.featured-episode .featured-series{
font-family: 'Big Shoulders Text', sans-serif;
font-size: 14px;
font-weight: 500;
color: #64748b;
padding: 24px 16px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.featured-episode .podcast_item{
border: none;
margin: 0;
background: transparent;
}
.featured-episode .podcast_header{
background: transparent;
cursor: default;
}
.featured-episode .podcast_header:hover{
background: transparent;
}
.featured-episode .featured-header{
padding: 10px 16px;
}
.featured-episode .podcast_title{
font-size: 24px;
line-height: 28px;
}
.featured-episode .custom_player_container{
padding: 0 16px 16px;
}
.featured-episode .play_button{
width: 60px;
height: 60px;
}
.featured-episode .play_button svg{
width: 28px;
height: 28px;
}
.featured-episode .progress_bar{
height: 28px;
}
.podcast-section{
margin-bottom: 40px;
}
.section-title{
font-family: 'Big Shoulders Text', sans-serif;
font-size: 28px;
margin: 30px auto 20px;
line-height: 2.2rem;
width: 500px;
max-width: 100%;
text-align: left;
color: #1e293b;
font-weight: 600;
}
.episode-navigation{
width: 100%;
max-width: 500px;
margin: 30px auto;
}
.episode-section{
margin-bottom: 25px;
border: 1px solid #e2e8f0;
background: #fff;
overflow: hidden;
}
.section-header-nav{
background: #f8fafc;
padding: 16px;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-section-title{
font-family: 'Big Shoulders Text', sans-serif;
font-size: 20px;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.toggle-episodes-btn,
.scroll-to-section-btn{
background: #2563eb;
color: white;
border: none;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s ease;
}
.toggle-episodes-btn:hover,
.scroll-to-section-btn:hover{
background: #1e40af;
}
.toggle-episodes-btn.expanded{
background: #64748b;
}
.toggle-episodes-btn.expanded:hover{
background: #475569;
}
.episode-links-container{
padding: 16px;
}
.episode-links{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.episode-link.hidden-episode{
display: none;
}
.podcast_list{
list-style: none;
width: 100%;
margin-left: 0;
padding-left: 0;
}
.podcast_list *{
user-select: none;
}
.podcast_item{
background: #fff;
margin: 0 0 15px 0;
border: 1px solid #e2e8f0;
position: relative;
width: 100%;
scroll-margin-top: 20px;
}
.podcast_header{
display: flex;
align-items: center;
padding: 0 15px;
cursor: pointer;
background-color: #fcfcfc;
position: relative;
overflow: hidden;
z-index: 1;
}
.podcast_header:hover{
background-color: #f7f7f7;
}
.open .podcast_header{
border-bottom: 1px solid #e2e8f0;
margin-bottom: 20px;
}
.header_progress{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0%;
background-color: rgba(37,99,235,0.1);
z-index: -1;
transition: width 0.2s ease;
}
.expand_icon{
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 24px;
font-weight: bold;
color: #151515;
flex-shrink: 0;
}
.podcast_title{
font-size: 22px;
line-height: 16px;
font-weight: 300;
color: #1e293b;
font-family: "Big Shoulders Text", sans-serif;
flex-grow: 1;
}
.podcast_title strong{
font-weight: 700;
}
.podcast_title em{
font-style: italic;
font-weight: 300;
}
.episode_duration{
margin-left: 15px;
color: #929cab;
font-weight: 360;
font-size: 16px;
white-space: nowrap;
}
.custom_player_container{
padding: 0 15px 15px;
display: none;
}
.podcast_item.open .custom_player_container{
display: grid;
}
.custom_player_container{
grid-template-areas:
"player_row player_row"
"time speeds";
gap: 10px;
width: 100%;
}
.player_row{
grid-area: player_row;
display: flex;
align-items: center;
gap: 15px;
}
.play_button{
width: 50px;
height: 50px;
border: none;
background: #2563eb;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: white;
border-radius: 50%;
}
.play_button:hover{
background-color: #1e40af;
}
.play_button svg{
width: 24px;
height: 24px;
fill: currentColor;
}
.audio_controls{
flex-grow: 1;
display: flex;
align-items: center;
height: 50px;
}
.time_display{
grid-area: time;
font-size: 14px;
font-weight: 400;
color: #64748b;
text-align: left;
user-select: none;
}
.speed_controls{
grid-area: speeds;
display: flex;
justify-content: flex-end;
gap: 5px;
}
.speed_button{
border: 1px solid #cbd5e1;
background: #f8fafc;
color: #64748b;
font-weight: 500;
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
padding: 5px 10px;
}
.speed_button:hover{
background: #e2e8f0;
}
.speed_button.active{
background: #2563eb;
border-color: #2563eb;
color: white;
}
.progress_bar{
width: 100%;
height: 24px;
background: #e2e8f0;
cursor: pointer;
position: relative;
overflow: hidden;
}
.progress_filled{
background: #2563eb;
width: 0%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: width 0.1s ease;
}
.progress_hover{
background: rgba(37,99,235,0.2);
width: 0%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
}
.progress_bar:hover .progress_hover{
display: block;
}
.social-links{
margin: 30px auto 0;
text-align: center;
}
.social-link{
display: inline-flex;
align-items: center;
gap: 10px;
color: #1e293b;
text-decoration: none;
font-weight: 500;
padding: 20px 30px;
border: 1px solid #e6e6e6;
margin: 30px auto;
border-radius: 50px;
}
.social-link:hover{
background-color: #f7f7f7;
border-color: #aaa;
}
.social-link img{
width: 32px;
height: 24px;
}
.episode-link{
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: #fff;
text-decoration: none;
color: #1e293b;
font-size: 16px;
font-weight: 500;
position: relative;
overflow: hidden;
border: 1px solid #e2e8f0;
padding: 0;
flex-shrink: 0;
}
.episode-link-progress{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0%;
background-color: rgba(37,99,235,0.3);
z-index: 1;
transition: width 0.2s ease;
}
.episode-link.paused-with-progress .episode-link-progress{
background-color: rgba(0,0,0,0.4);
}
.episode-link span{
position: relative;
z-index: 2;
transition: opacity 0.2s ease;
}
.episode-link-icon{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.episode-link:hover .episode-link-icon{
opacity: 1;
}
.episode-link:hover span{
opacity: 0;
}
.episode-link-icon svg{
width: 24px;
height: 24px;
fill: currentColor;
}
.episode-link:hover{
background: #f1f5f9;
color: #2563eb;
border-color: #cbd5e1;
}
.episode-link.playing{
background: #ff8c00;
color: white;
border-color: #ff8c00;
}
.episode-link.playing:hover{
background: #e07b00;
color: white;
border-color: #e07b00;
}
.episode-link.county-episode{
background: #4169e1;
color: white;
border-color: #4169e1;
}
.episode-link.county-episode:hover{
background: #3557c7;
color: white;
border-color: #3557c7;
}
.episode-link.county-episode.playing{
background: #ff8c00;
color: white;
border-color: #ff8c00;
}
.episode-link.county-episode.paused-with-progress{
background: #2c5aa0;
color: white;
border-color: #2c5aa0;
}
.episode-link.local-voices-episode{
background: #228b22;
color: white;
font-size: 13px;
border-color: #228b22;
}
.episode-link.local-voices-episode:hover{
background: #1e7b1e;
color: white;
border-color: #1e7b1e;
}
.episode-link.local-voices-episode.playing{
background: #ff8c00;
color: white;
border-color: #ff8c00;
}
.episode-link.local-voices-episode.paused-with-progress{
background: #1a5e1a;
color: white;
border-color: #1a5e1a;
}
.podcast_item.playing .podcast_header{
background-color: #f8f9fa;
}
.podcast_item.has-progress .header_progress{
background-color: rgba(37,99,235,0.1);
}
.podcast_item.error{
border-color: #ef4444;
}
.podcast_item.error .play_button{
background-color: #ef4444;
}
.podcast_item.loading .play_button{
opacity: 0.7;
}
.hidden{
display: none;
}
@media screen and (max-width: 888px){
.podcast_title{
line-height: 30px;
}
.custom_player_container{
grid-template-areas:
"player_row player_row"
"time time"
"speeds speeds";
}
.section-header-nav{
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.toggle-episodes-btn,
.scroll-to-section-btn{
width: 100%;
}
.featured-episode .podcast_title{
font-size: 20px;
line-height: 26px;
}
}
.speed_button::after{
content: '';
}