/* ============================================================
OPERATIONAL ITAM — Podcast Stylesheet
Brand: Operational ITAM | EpicB Media LLC
Author: William G. Van Nort
PURPOSE
Styles for the podcast hub, episode pages, and listener
question page. Loads AFTER style.css and uses the same
design tokens (--navy-deep, --teal, --orange, etc.) so
nothing here introduces a new color or font.
INSTALL
Upload to: public_html/css/podcast.css
Then in each podcast page , load both:
This file does NOT modify style.css. It only adds new
classes. Existing pages are completely unaffected.
============================================================ */
/* ============================================================
1. SUBSCRIBE BUTTON ROW
Platform links (Apple, Spotify, YouTube, RSS).
============================================================ */
.podcast-subscribe {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
/* Centered variant for use inside .text-center blocks */
.podcast-subscribe--center {
justify-content: center;
}
.podcast-subscribe__label {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
margin-right: 4px;
}
.podcast-subscribe__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-card);
color: var(--off-white);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.podcast-subscribe__btn:hover {
border-color: var(--teal);
color: var(--teal);
transform: translateY(-1px);
}
.podcast-subscribe__btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ============================================================
2. AUDIO PLAYER WRAPPER
Holds the Transistor embed iframe. The iframe is given a
transparent background so it blends into the dark theme.
============================================================ */
.podcast-player {
background: var(--surface-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin: 28px 0;
}
.podcast-player iframe {
width: 100%;
border: 0;
display: block;
border-radius: var(--radius);
}
/* Small mono caption above the player */
.podcast-player__label {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 12px;
}
/* ============================================================
3. FEATURED / LATEST EPISODE BLOCK
============================================================ */
.episode-featured {
background: var(--surface-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 36px;
margin-top: 40px;
}
.episode-featured__badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--navy-deep);
background: var(--teal);
padding: 4px 10px;
border-radius: 3px;
margin-bottom: 16px;
}
.episode-featured__title {
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
font-weight: 800;
color: var(--white);
line-height: 1.25;
margin-bottom: 12px;
}
.episode-featured__desc {
font-size: 1rem;
color: var(--slate-light);
line-height: 1.75;
margin-bottom: 8px;
}
/* ============================================================
4. EPISODE META LINE
"Episode 007 · 14 July 2026 · 31 min"
============================================================ */
.episode-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--slate);
margin-bottom: 14px;
}
.episode-meta__sep {
color: var(--border);
}
/* ============================================================
5. EPISODE ARCHIVE GRID
============================================================ */
.episode-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
margin-top: 40px;
}
.episode-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 26px;
text-decoration: none;
transition: border-color 0.25s, transform 0.25s;
}
.episode-card:hover {
border-color: var(--border-orange);
transform: translateY(-3px);
}
/* Large ghosted episode number, top-right */
.episode-card__num {
position: absolute;
top: 18px;
right: 22px;
font-family: var(--font-mono);
font-size: 1.6rem;
font-weight: 600;
color: rgba(76, 184, 214, 0.16);
line-height: 1;
}
.episode-card__title {
font-size: 1.05rem;
font-weight: 700;
color: var(--white);
line-height: 1.35;
margin-bottom: 10px;
padding-right: 52px; /* clears the ghosted number */
}
.episode-card__desc {
font-size: 0.87rem;
color: var(--slate-light);
line-height: 1.65;
margin-bottom: 18px;
flex-grow: 1;
}
.episode-card__link {
font-size: 0.85rem;
font-weight: 600;
color: var(--orange);
margin-top: auto;
}
.episode-card:hover .episode-card__link {
color: var(--orange-hover);
}
/* Topic tags on episode cards */
.episode-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.episode-tag {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--teal);
background: rgba(76, 184, 214, 0.10);
border: 1px solid var(--border);
border-radius: 3px;
padding: 3px 8px;
}
/* ============================================================
6. FAQ — native / accordion
No JavaScript required, keyboard accessible by default.
============================================================ */
.faq-list {
max-width: 820px;
margin: 40px auto 0;
}
.faq-item {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-card);
margin-bottom: 12px;
overflow: hidden;
}
.faq-item summary {
cursor: pointer;
padding: 18px 52px 18px 22px;
font-size: 0.98rem;
font-weight: 600;
color: var(--white);
position: relative;
list-style: none; /* hide default triangle, Firefox */
transition: color 0.2s;
}
/* Hide default disclosure triangle in WebKit/Blink */
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary:hover {
color: var(--teal);
}
/* Custom +/− indicator */
.faq-item summary::after {
content: '+';
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 1.2rem;
font-weight: 400;
color: var(--orange);
transition: transform 0.2s;
}
.faq-item[open] summary::after {
content: '−';
}
.faq-item summary:focus-visible {
outline: 2px solid var(--teal);
outline-offset: -2px;
}
.faq-item__answer {
padding: 0 22px 20px;
font-size: 0.92rem;
color: var(--slate-light);
line-height: 1.75;
}
.faq-item__answer p + p {
margin-top: 12px;
}
/* ============================================================
7. EPISODE PAGE — TAKEAWAYS
The "In this episode" bullet block. Written as complete
sentences because this is the block AI answer engines lift.
============================================================ */
.takeaway-list {
list-style: none;
padding: 0;
margin: 24px 0 0;
max-width: 760px;
}
.takeaway-list li {
position: relative;
padding-left: 30px;
margin-bottom: 14px;
font-size: 0.98rem;
color: var(--off-white);
line-height: 1.7;
}
.takeaway-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 12px;
height: 12px;
border: 1.5px solid var(--teal);
border-radius: 50%;
background: rgba(76, 184, 214, 0.15);
}
/* ============================================================
8. EPISODE PAGE — KEY TERMS DEFINITION LIST
Cheap, honest long-tail keyword coverage.
============================================================ */
.term-list {
margin: 24px 0 0;
max-width: 820px;
}
.term-list dt {
font-weight: 700;
color: var(--teal);
font-size: 0.95rem;
margin-top: 20px;
}
.term-list dt:first-child {
margin-top: 0;
}
.term-list dd {
margin: 6px 0 0;
font-size: 0.92rem;
color: var(--slate-light);
line-height: 1.7;
}
/* ============================================================
9. EPISODE PAGE — TRANSCRIPT
Optimized for long-form readability. Narrower measure than
the rest of the site because this is genuinely read, not
skimmed — roughly 70 characters per line.
============================================================ */
.transcript {
max-width: 760px;
margin-top: 28px;
}
.transcript p {
font-size: 1rem;
line-height: 1.85;
color: var(--slate-light);
margin-bottom: 20px;
}
/* Descriptive section headings inside the transcript.
Use these instead of timestamps — crawlers index words,
not "00:14:32". */
.transcript h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--white);
margin: 44px 0 16px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.transcript h3:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
/* Speaker name prefix, e.g. "Bill:" */
.transcript__speaker {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
color: var(--orange);
display: block;
margin-bottom: 4px;
letter-spacing: 0.04em;
}
/* Pull quote for a standout line */
.transcript blockquote {
border-left: 3px solid var(--orange);
padding: 4px 0 4px 22px;
margin: 28px 0;
font-size: 1.08rem;
font-style: italic;
color: var(--off-white);
line-height: 1.7;
}
/* Collapsible transcript wrapper — keeps the page scannable
while leaving all text in the DOM for crawlers. Search
engines index content inside ; it is not hidden
text in the spam sense. */
.transcript-toggle {
margin-top: 24px;
}
.transcript-toggle > summary {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
color: var(--off-white);
font-weight: 600;
font-size: 0.9rem;
list-style: none;
transition: border-color 0.2s, color 0.2s;
}
.transcript-toggle > summary::-webkit-details-marker {
display: none;
}
.transcript-toggle > summary:hover {
border-color: var(--teal);
color: var(--teal);
}
.transcript-toggle > summary:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.transcript-toggle[open] > summary {
margin-bottom: 8px;
}
/* ============================================================
10. EPISODE PAGE — RESOURCES MENTIONED
============================================================ */
.resource-links {
list-style: none;
padding: 0;
margin: 24px 0 0;
max-width: 760px;
}
.resource-links li {
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.resource-links li:last-child {
border-bottom: none;
}
.resource-links a {
color: var(--teal);
font-size: 0.94rem;
font-weight: 600;
text-decoration: none;
}
.resource-links a:hover {
color: var(--orange);
}
.resource-links span {
display: block;
font-size: 0.84rem;
color: var(--slate);
margin-top: 3px;
}
/* ============================================================
11. PREVIOUS / NEXT EPISODE NAVIGATION
============================================================ */
.ep-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.ep-nav__item {
display: block;
padding: 20px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-card);
text-decoration: none;
transition: border-color 0.2s;
}
.ep-nav__item:hover {
border-color: var(--teal);
}
.ep-nav__item--next {
text-align: right;
}
.ep-nav__dir {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--orange);
display: block;
margin-bottom: 6px;
}
.ep-nav__title {
font-size: 0.92rem;
font-weight: 600;
color: var(--off-white);
line-height: 1.4;
}
/* Empty placeholder so a lone "next" link stays right-aligned */
.ep-nav__spacer {
display: block;
}
/* ============================================================
12. BREADCRUMBS
============================================================ */
.breadcrumb {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.06em;
color: var(--slate);
margin-bottom: 18px;
}
.breadcrumb a {
color: var(--slate);
text-decoration: none;
}
.breadcrumb a:hover {
color: var(--teal);
}
.breadcrumb span {
margin: 0 8px;
color: var(--border);
}
/* ============================================================
13. ASK-A-QUESTION CALLOUT
Teal-accented panel, distinct from the orange .cta-banner
so the two never compete on the same page.
============================================================ */
.ask-callout {
background: linear-gradient(135deg, var(--surface-card) 0%, var(--navy-mid) 100%);
border: 1px solid var(--border);
border-left: 3px solid var(--teal);
border-radius: var(--radius-lg);
padding: 34px 36px;
margin-top: 48px;
display: grid;
grid-template-columns: 1fr auto;
gap: 28px;
align-items: center;
}
.ask-callout__title {
font-size: 1.25rem;
font-weight: 800;
color: var(--white);
margin-bottom: 8px;
}
.ask-callout__desc {
font-size: 0.94rem;
color: var(--slate-light);
line-height: 1.7;
margin: 0;
}
/* ============================================================
14. RADIO / CHECKBOX GROUPS
Used on the listener question form in Step 3. Extends the
existing .form-* system rather than replacing it.
============================================================ */
.radio-group {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.radio-option {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-card);
cursor: pointer;
transition: border-color 0.2s;
}
.radio-option:hover {
border-color: var(--teal);
}
.radio-option:has(input:checked) {
border-color: var(--teal);
background: rgba(76, 184, 214, 0.07);
}
.radio-option input {
margin-top: 3px;
accent-color: var(--teal);
flex-shrink: 0;
cursor: pointer;
}
.radio-option__text {
font-size: 0.9rem;
color: var(--off-white);
line-height: 1.5;
}
.radio-option__note {
display: block;
font-size: 0.78rem;
color: var(--slate);
margin-top: 3px;
}
.checkbox-option {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.checkbox-option input {
margin-top: 3px;
accent-color: var(--teal);
flex-shrink: 0;
cursor: pointer;
}
.checkbox-option__text {
font-size: 0.88rem;
color: var(--slate-light);
line-height: 1.55;
}
/* ============================================================
15. FORM SUCCESS MESSAGE
Mirrors the pattern already used on contact.html.
============================================================ */
.form-success {
display: none;
text-align: center;
padding: 48px 32px;
background: var(--surface-card);
border: 1px solid var(--teal);
border-radius: var(--radius-lg);
}
.form-success.show {
display: block;
}
.form-success__icon {
width: 52px;
height: 52px;
margin: 0 auto 18px;
border-radius: 50%;
background: rgba(76, 184, 214, 0.15);
border: 1.5px solid var(--teal);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal);
font-size: 1.4rem;
}
.form-success__title {
font-size: 1.3rem;
font-weight: 800;
color: var(--white);
margin-bottom: 10px;
}
.form-success__text {
font-size: 0.95rem;
color: var(--slate-light);
line-height: 1.7;
max-width: 460px;
margin: 0 auto;
}
/* ============================================================
16. RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.episode-featured {
padding: 26px 22px;
}
.ask-callout {
grid-template-columns: 1fr;
padding: 28px 24px;
text-align: left;
}
.ep-nav {
grid-template-columns: 1fr;
}
.ep-nav__item--next {
text-align: left;
}
.episode-grid {
grid-template-columns: 1fr;
}
.podcast-subscribe__label {
width: 100%;
margin-bottom: 4px;
}
.transcript p {
font-size: 0.96rem;
line-height: 1.8;
}
}
@media (max-width: 480px) {
.podcast-player {
padding: 14px;
}
.episode-card {
padding: 22px;
}
.faq-item summary {
font-size: 0.92rem;
padding: 16px 46px 16px 18px;
}
}
/* ============================================================
17. REDUCED MOTION
Respects the OS-level "reduce motion" setting, matching the
rule already present at the end of style.css.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.episode-card,
.podcast-subscribe__btn,
.ep-nav__item,
.faq-item summary::after {
transition: none;
}
.episode-card:hover,
.podcast-subscribe__btn:hover {
transform: none;
}
}
/* ============================================================
18. NEWSLETTER SUBSCRIBE CARD
Placed where someone has just finished reading or listening,
which is the point of peak willingness to subscribe.
============================================================ */
.news-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 26px;
align-items: center;
background: linear-gradient(135deg, var(--surface-card) 0%, var(--navy-mid) 100%);
border: 1px solid var(--border);
border-left: 3px solid var(--orange);
border-radius: var(--radius-lg);
padding: 30px 34px;
margin-top: 44px;
}
.news-card__icon {
width: 52px;
height: 52px;
border-radius: var(--radius);
background: rgba(240, 122, 26, 0.12);
border: 1px solid var(--border-orange);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.news-card__icon svg {
width: 24px;
height: 24px;
color: var(--orange);
}
.news-card__label {
font-family: var(--font-mono);
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--orange);
margin-bottom: 7px;
}
.news-card__title {
font-size: 1.2rem;
font-weight: 800;
color: var(--white);
line-height: 1.3;
margin-bottom: 7px;
}
.news-card__desc {
font-size: 0.92rem;
color: var(--slate-light);
line-height: 1.65;
margin: 0;
}
@media (max-width: 768px) {
.news-card {
grid-template-columns: 1fr;
gap: 18px;
padding: 26px 24px;
}
.news-card__icon { display: none; }
}