Clean up hero section, fix Silas voice exclusion bug

- Remove cover art from hero (duplicated in clips below)
- Merge about section into hero for single flowing layout
- Center hero content, remove side-by-side layout
- Fix _match_voices_to_styles() bypassing BLACKLISTED_VOICES —
  Sebastian could get assigned to non-Silas callers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-16 03:21:13 -06:00
parent 39297d4aa5
commit 908255e5cf
3 changed files with 36 additions and 82 deletions
+29 -63
View File
@@ -136,12 +136,9 @@ a:hover {
gap: 1.5rem;
}
.cover-art {
width: 260px;
height: 260px;
border-radius: var(--radius);
box-shadow: 0 8px 32px rgba(232, 121, 29, 0.25);
object-fit: cover;
.hero-inner--full {
max-width: 700px;
margin: 0 auto;
}
.hero-info {
@@ -151,6 +148,29 @@ a:hover {
gap: 0.5rem;
}
.hero-info--centered {
align-items: center;
text-align: center;
}
.hero-about {
font-size: 1.05rem;
color: var(--text-muted);
line-height: 1.7;
max-width: 600px;
margin: 0.75rem auto 0;
}
.hero-about--bold {
color: var(--text);
font-weight: 600;
font-size: 1.1rem;
}
.hero-cta {
margin-top: 0.5rem;
}
.hero h1 {
font-size: 2.8rem;
font-weight: 800;
@@ -1721,33 +1741,7 @@ a:hover {
);
}
/* About Section */
.about-section {
max-width: 900px;
margin: 0 auto;
padding: 1.5rem 1.5rem 2.5rem;
text-align: center;
border-top: 1px solid #2a2015;
border-bottom: 1px solid #2a2015;
}
.about-section p {
font-size: 1.05rem;
color: var(--text-muted);
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
.about-section p + p {
margin-top: 0.75rem;
}
p.about-teaser {
color: var(--text);
font-weight: 600;
font-size: 1.1rem;
}
/* About Section (legacy — now merged into hero) */
/* Featured Clips (homepage) */
.home-clips-section {
@@ -1782,41 +1776,20 @@ p.about-teaser {
}
.hero-inner {
flex-direction: row;
text-align: left;
gap: 2.5rem;
align-items: center;
}
.hero-info {
align-items: flex-start;
}
.cover-art {
width: 280px;
height: 280px;
flex-shrink: 0;
gap: 2rem;
}
.hero h1 {
font-size: 2.8rem;
}
.phone {
justify-content: flex-start;
}
.subscribe-row {
flex-direction: row;
align-items: center;
justify-content: flex-start;
justify-content: center;
gap: 0.5rem;
}
.secondary-links {
justify-content: flex-start;
}
.episodes-section {
padding: 2rem 2rem 3rem;
}
@@ -1854,9 +1827,6 @@ p.about-teaser {
padding: 0 2rem 2.5rem;
}
.about-section {
padding: 1.5rem 2rem 2.5rem;
}
.site-nav {
padding: 1rem 2rem;
@@ -1909,10 +1879,6 @@ p.about-teaser {
font-size: 2rem;
}
.cover-art {
width: 200px;
height: 200px;
}
.page-header h1 {
font-size: 2rem;
+5 -18
View File
@@ -117,17 +117,8 @@
<!-- Hero -->
<section class="hero">
<div class="hero-inner">
<img
class="cover-art"
src="images/cover.png"
alt="Luke at the Roost cover art"
width="1440"
height="1440"
sizes="(min-width: 768px) 280px, 200px"
loading="eager"
>
<div class="hero-info">
<div class="hero-inner hero-inner--full">
<div class="hero-info hero-info--centered">
<h1>Luke at the Roost</h1>
<p class="tagline">The call-in talk show where Luke gives life advice to biologically questionable organisms.</p>
<div class="phone" id="phone-section">
@@ -170,17 +161,13 @@
<span class="secondary-sep">&middot;</span>
<a href="https://ko-fi.com/lukemacneil" target="_blank" rel="noopener" class="secondary-link support-link">Support the Show</a>
</div>
<p class="hero-about">Late-night call-in radio from a desert hermit's RV. Callers ring in with relationship disasters, workplace chaos, and life's dumbest decisions — and Luke tries to help. Sometimes it works. Sometimes it makes things worse.</p>
<p class="hero-about hero-about--bold">Part human callers, part AI-generated characters, fully unhinged advice. Each AI caller is generated in real-time with a unique personality, backstory, and voice — powered by large language models and custom text-to-speech. 37+ episodes and counting.</p>
<p class="hero-cta"><a href="/how-it-works">See how it works</a></p>
</div>
</div>
</section>
<!-- About -->
<section class="about-section">
<p>Late-night call-in radio from a desert hermit's RV. Callers ring in with relationship disasters, workplace chaos, and life's dumbest decisions — and Luke tries to help. Sometimes it works. Sometimes it makes things worse.</p>
<p class="about-teaser">Part human callers, part AI-generated characters, fully unhinged advice. Each AI caller is generated in real-time with a unique personality, backstory, and voice — powered by large language models and custom text-to-speech. 37+ episodes and counting.</p>
<p><a href="/how-it-works">See how it works</a></p>
</section>
<!-- Featured Clips -->
<section class="home-clips-section">
<div class="home-clips-header">