/* ── Congregation Sermon Library — "Digital Cathedral" public theme ── * Scoped entirely under body.teaching-page so it never leaks into the * staff app, which keeps its own light style.css. Rules below are ported * directly from the validated interactive prototype (tp- prefix added to * every prototype class name) rather than re-approximated, so production * matches the prototype's actual layout, not just its color tokens. */ body.teaching-page { --tp-surface: #0b1326; --tp-surface-lowest: #060e20; --tp-surface-low: #131b2e; --tp-surface-c: #171f33; --tp-surface-high: #222a3d; --tp-surface-highest: #2d3449; --tp-surface-bright: #31394d; --tp-primary: #d2bbff; --tp-primary-container: #a476ff; --tp-secondary: #4edea3; --tp-tertiary: #ffb95f; --tp-on-surface: #dae2fd; --tp-on-surface-variant: #c7c4d7; --tp-outline: #908fa0; --tp-outline-variant: #464554; --tp-font-headline: "Noto Serif", Georgia, serif; --tp-font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; background: var(--tp-surface); color: var(--tp-on-surface); font-family: var(--tp-font-body); line-height: 1.55; } body.teaching-page a { color: inherit; } body.teaching-page .hidden { display: none !important; } body.teaching-page .container { max-width: 1080px; padding: 0 24px 90px; } body.teaching-page #back-to-top { background: var(--tp-surface-high); border-color: var(--tp-outline-variant); color: var(--tp-on-surface); } body.teaching-page #back-to-top:hover { border-color: var(--tp-primary); color: var(--tp-primary); } /* ── site header: brand + persistent search ── */ .tp-site-header { /* .container (base.html) is max-width:1080px and centered, so a plain negative margin here only reaches that box's own edge, not the real viewport edge — full-bleed requires escaping the container's width constraint itself, not just its padding. */ width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding: 20px 24px; background: linear-gradient(180deg, var(--tp-surface-low), transparent); border-bottom: 1px solid var(--tp-outline-variant); } .tp-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto; } .tp-brand { display: flex; align-items: center; gap: 10px; font-family: var(--tp-font-headline); font-size: 20px; letter-spacing: .2px; text-decoration: none; } .tp-brand:hover { text-decoration: none; } .tp-brand-mark-img { height: 34px; width: auto; flex: none; display: block; } .tp-header-search { display: flex; align-items: center; background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-radius: 999px; height: 38px; flex: 1 1 240px; max-width: 320px; color: var(--tp-outline); transition: border-color .12s ease; } .tp-header-search:focus-within { border-color: var(--tp-primary); } .tp-header-search-icon { flex: none; width: 38px; height: 38px; border: none; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; padding: 0 0 0 6px; pointer-events: none; } .tp-header-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--tp-on-surface); font-size: 13px; font-family: var(--tp-font-body); min-width: 0; padding-right: 14px; } .tp-header-search input::placeholder { color: var(--tp-outline); } @media (max-width: 480px) { .tp-header-search { flex-basis: 100%; max-width: none; order: 3; } } .tp-backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tp-outline); text-decoration: none; margin: 22px 0 10px; cursor: pointer; } .tp-backlink:hover { color: var(--tp-primary); text-decoration: none; } .tp-backlink-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .tp-backlink-row .tp-backlink { margin: 22px 0; } /* ── hero ── */ .tp-hero { padding: 46px 0 30px; } .tp-hero h1 { font-family: var(--tp-font-headline); font-size: clamp(28px,4vw,42px); margin: 0 0 10px; line-height: 1.15; } .tp-hero p { color: var(--tp-on-surface-variant); max-width: 560px; margin: 0 0 24px; font-size: 15.5px; } .tp-hero-search { display: flex; align-items: center; gap: 12px; max-width: 640px; background: var(--tp-surface-c); border: 1.5px solid var(--tp-outline-variant); border-radius: 16px; padding: 6px 8px 6px 20px; box-shadow: 0 8px 30px -12px rgba(0,0,0,.35); transition: border-color .15s ease; } .tp-hero-search:focus-within { border-color: var(--tp-primary); } .tp-hero-search svg { flex: none; color: var(--tp-outline); } .tp-hero-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--tp-on-surface); font-family: var(--tp-font-body); font-size: 16px; padding: 12px 0; min-width: 0; } .tp-hero-search input::placeholder { color: var(--tp-outline); } .tp-hero-search button { flex: none; background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-container)); color: #1b1030; border: none; border-radius: 11px; font-family: var(--tp-font-body); font-weight: 800; font-size: 13.5px; padding: 12px 18px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 8px; } .tp-hero-search button:hover { filter: brightness(1.08); } .tp-hero-search button:disabled { cursor: default; filter: brightness(.92); } .tp-hero-search button .btn-spinner { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(27,16,48,.35); border-top-color: #1b1030; animation: tp-spin .7s linear infinite; } .tp-hero-search button.loading .btn-label { display: none; } .tp-hero-search button.loading .btn-spinner { display: block; } @keyframes tp-spin { to { transform: rotate(360deg); } } /* Header search has no visible button (submits on Enter) — spin the magnifying-glass icon itself so a click/Enter still shows something happening, since the real search can take a few seconds. */ .tp-header-search-spinner { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--tp-outline-variant); border-top-color: var(--tp-primary); animation: tp-spin .7s linear infinite; } .tp-header-search.loading .tp-header-search-glass { display: none; } .tp-header-search.loading .tp-header-search-spinner { display: block; } .tp-header-search.loading input { opacity: .5; } @media (max-width: 480px) { .tp-hero-search { padding-left: 14px; } .tp-hero-search input { font-size: 15px; } } /* ── topic chips ── */ .tp-guided-section { margin: 8px 0 34px; } .tp-guided-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .tp-guided-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-outline); font-weight: 700; } .tp-guided-toggle { font-size: 12.5px; font-weight: 700; color: var(--tp-outline); background: none; border: none; padding: 0; cursor: pointer; } .tp-guided-toggle:hover { color: var(--tp-primary); } .tp-chip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; } .tp-topic-chip { font-family: var(--tp-font-body); font-weight: 700; font-size: 12.5px; color: var(--tp-on-surface); background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-radius: 12px; padding: 14px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 84px; line-height: 1.3; text-decoration: none; transition: border-color .12s ease, transform .12s ease; } .tp-topic-chip:hover { border-color: var(--tp-primary); color: var(--tp-primary); transform: translateY(-2px); text-decoration: none; } /* Homepage need-state row is capped so it doesn't compete with search — 5 real topics on desktop, 3 on mobile, the rest revealed in place by the toggle link in the section header (not a grid tile, so collapsing back never leaves an orphaned tile alone on its own row). Two separate grids (not one grid with responsive hiding) because each breakpoint's toggle needs its own correct count label. */ .tp-chip-hidden { display: none; } .tp-chip-row.tp-expanded .tp-chip-hidden { display: flex; } .tp-chip-row-mobile { display: none; } .tp-guided-toggle-mobile { display: none; } @media (max-width: 640px) { .tp-chip-row-desktop { display: none; } .tp-chip-row-mobile { display: grid; grid-template-columns: repeat(2, 1fr); } .tp-guided-toggle-desktop { display: none; } .tp-guided-toggle-mobile { display: inline; } } /* ── start here rail ── */ .tp-start-here-section { margin-bottom: 38px; } .tp-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 14px; } .tp-section-head h2 { font-family: var(--tp-font-headline); font-size: 20px; margin: 0; } .tp-section-head .sub { font-size: 12.5px; color: var(--tp-outline); } .tp-spotlight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; } .tp-spotlight-card { background: linear-gradient(160deg, rgba(210,187,255,.12), rgba(34,42,61,.5)); border: 0.5px solid rgba(210,187,255,.25); border-radius: 14px; padding: 20px; cursor: pointer; text-decoration: none; color: inherit; display: block; transition: transform .12s ease, border-color .12s ease; } .tp-spotlight-card:hover { transform: translateY(-2px); border-color: var(--tp-primary); text-decoration: none; } .tp-spotlight-card .cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-primary); font-weight: 700; margin-bottom: 8px; } .tp-spotlight-card h3 { font-family: var(--tp-font-headline); font-size: 16.5px; margin: 0 0 8px; line-height: 1.3; } .tp-spotlight-card p { font-size: 13px; color: var(--tp-on-surface-variant); margin: 0; line-height: 1.5; } /* ── latest teaching (homepage) ── */ .tp-latest-section { margin-bottom: 38px; } /* ── go deeper ── */ .tp-deeper-section { margin-bottom: 38px; } .tp-deeper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; } .tp-deeper-card { background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-radius: 14px; padding: 20px; text-decoration: none; color: inherit; text-align: center; display: block; transition: border-color .12s ease; } .tp-deeper-card:hover { border-color: var(--tp-primary); text-decoration: none; } .tp-deeper-card svg { color: var(--tp-primary); margin-bottom: 10px; } .tp-deeper-card h3 { font-family: var(--tp-font-headline); font-size: 15.5px; margin: 0 0 4px; } .tp-deeper-card p { font-size: 12px; color: var(--tp-outline); margin: 0; } /* ── explore the library (demoted catalog entrance, open/close toggle) ── Styled as an obvious pressable bar (background + border), not plain text with a small chevron — the whole row is the click target. */ .tp-explore-toggle { text-decoration: none; cursor: pointer; align-items: center; background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-radius: 14px; padding: 16px 20px; margin-bottom: 0; transition: border-color .12s ease, background .12s ease; } .tp-explore-toggle:hover { border-color: var(--tp-primary); background: var(--tp-surface-high); } .tp-explore-toggle:hover h2 { color: var(--tp-primary); } .tp-explore-toggle.open { border-radius: 14px 14px 0 0; border-bottom-color: transparent; } .tp-explore-chevron { color: var(--tp-outline); flex: none; transition: transform .18s ease, color .12s ease; } .tp-explore-toggle:hover .tp-explore-chevron { color: var(--tp-primary); } .tp-explore-toggle.open .tp-explore-chevron { transform: rotate(180deg); } .tp-catalog-block { background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-top: none; border-radius: 0 0 14px 14px; padding: 4px 20px 20px; } .tp-catalog-block .tp-tabbar { margin-top: 18px; } /* ── OT/NT filter pills (Browse by Book tab) ── */ .tp-testament-pills { display: flex; gap: 8px; margin-bottom: 18px; } .tp-testament-pills button { font-family: var(--tp-font-body); font-weight: 700; font-size: 12.5px; color: var(--tp-on-surface-variant); background: var(--tp-surface-high); border: 0.5px solid var(--tp-outline-variant); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .tp-testament-pills button:hover { border-color: var(--tp-primary); color: var(--tp-primary); } .tp-testament-pills button.active { background: var(--tp-primary); border-color: var(--tp-primary); color: #241a3d; } /* ── chapter filter nav (Book detail page) — wraps rather than scrolls horizontally, a pattern already rejected once in this codebase as a weaker discoverability choice for a non-technical audience. ── */ .tp-chapter-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 20px; } .tp-chapter-nav button { min-width: 34px; font-family: var(--tp-font-body); font-weight: 700; font-size: 12.5px; color: var(--tp-on-surface-variant); background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-radius: 8px; padding: 6px 9px; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .tp-chapter-nav button:hover { border-color: var(--tp-primary); color: var(--tp-primary); } .tp-chapter-nav button.active { background: var(--tp-primary); border-color: var(--tp-primary); color: #241a3d; } /* ── tabs (plain text + underline, NOT pills) ── */ .tp-tabbar { display: flex; gap: 6px; margin: 28px 0 22px; border-bottom: 1px solid var(--tp-outline-variant); padding-bottom: 0; flex-wrap: wrap; } .tp-tabbar button { font-family: var(--tp-font-body); font-weight: 700; font-size: 14px; color: var(--tp-outline); background: transparent; border: none; padding: 10px 4px; margin-right: 22px; cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: .01em; } .tp-tabbar button.active { color: var(--tp-on-surface); border-bottom-color: var(--tp-primary); } /* ── filter bar (shown on long lists/grids) ── */ .tp-filter-bar { display: flex; align-items: center; gap: 8px; background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-radius: 10px; padding: 9px 12px; } .tp-filter-bar .icon { color: var(--tp-outline); font-size: 15px; } .tp-filter-bar input { flex: 1; background: transparent; border: none; outline: none; color: var(--tp-on-surface); font-size: 13.5px; font-family: var(--tp-font-body); } .tp-filter-bar input::placeholder { color: var(--tp-outline); } .tp-filter-bar .filter-count { font-size: 11.5px; color: var(--tp-outline); white-space: nowrap; } /* ── toolbar: sort + view toggle, sits above a tab panel or sermon list ── */ .tp-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin: 4px 0 16px; } .tp-toolbar .tp-filter-bar { flex: 1; min-width: 200px; max-width: 420px; } .tp-sort-select { width: auto; font-family: var(--tp-font-body); font-weight: 700; font-size: 12.5px; color: var(--tp-on-surface); background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-radius: 10px; padding: 9px 30px 9px 12px; cursor: pointer; appearance: none; flex: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23908fa0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .tp-view-toggle { display: flex; background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-radius: 10px; padding: 3px; gap: 2px; flex: none; } .tp-view-toggle button { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--tp-outline); display: flex; align-items: center; justify-content: center; cursor: pointer; } .tp-view-toggle button.active { background: var(--tp-surface-highest); color: var(--tp-primary); } /* ── cards (grid tiles) ── */ .tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 40px; } @media (max-width: 860px) { .tp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .tp-grid { grid-template-columns: 1fr; } } .tp-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--tp-font-headline); font-weight: 700; font-size: 15px; color: #241a3d; background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-container)); margin-bottom: 12px; } .tp-az-label { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--tp-primary); margin: 10px 0 -4px; padding-left: 2px; } .tp-az-label:first-child { margin-top: 0; } /* ── list mode: same cards, restyled into compact rows via flex reorder instead of duplicating markup — .cat hides, title/meta/badges/avatar realign horizontally. Applied per-tab-panel via .tp-list-mode. ── */ .tp-tab-panel.tp-list-mode .tp-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; } .tp-tab-panel.tp-list-mode .tp-grid { max-width: none; } .tp-tab-panel.tp-list-mode .tp-card { flex-direction: row; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 10px; min-height: 0; } .tp-tab-panel.tp-list-mode .tp-card:hover { transform: none; } .tp-tab-panel.tp-list-mode .tp-card .cat { display: none; } .tp-tab-panel.tp-list-mode .tp-card .tp-avatar { width: 32px; height: 32px; font-size: 12px; margin: 0; order: -1; } .tp-tab-panel.tp-list-mode .tp-card h3 { flex: 1; min-width: 0; min-height: 0; font-size: 15px; margin: 0; -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-tab-panel.tp-list-mode .tp-card .meta { flex: none; order: 3; } .tp-tab-panel.tp-list-mode .tp-card .tp-badges { margin: 0; padding-top: 0; order: 2; } .tp-tab-panel.tp-list-mode .tp-az-label { padding-left: 4px; } /* Individual sermon cards inside Devotionals/Study Guides: list mode drops to badge + counter only — no speaker/date line, full content is one tap away on the sermon page itself. */ .tp-tab-panel.tp-list-mode .tp-card-sermon .meta { display: none; } .tp-card { background: rgba(34,42,61,.55); border: 0.5px solid rgba(70,69,84,.25); backdrop-filter: blur(20px); border-radius: 14px; padding: 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 148px; cursor: pointer; transition: transform .12s ease, border-color .12s ease; } .tp-card:hover { transform: translateY(-2px); border-color: var(--tp-primary); text-decoration: none; } .tp-card .cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-outline); font-weight: 700; margin-bottom: 6px; } .tp-card h3 { font-family: var(--tp-font-headline); font-size: 17px; margin: 0 0 8px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tp-card .meta { font-size: 12.5px; color: var(--tp-on-surface-variant); } .tp-card .tp-badges { margin-top: auto; padding-top: 10px; } .tp-badges { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .tp-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--tp-surface-highest); color: var(--tp-on-surface-variant); white-space: nowrap; } .tp-badge svg { flex: none; } .tp-badge-study { color: var(--tp-primary); background: rgba(210,187,255,.12); } .tp-badge-devo { color: var(--tp-secondary); background: rgba(78,222,163,.12); } /* ── pill lists ── */ .tp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .tp-pill { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--tp-surface-highest); color: var(--tp-on-surface-variant); border: 0.5px solid var(--tp-outline-variant); text-decoration: none; } .tp-pill-ref { font-family: inherit; font-size: 11.5px; color: var(--tp-tertiary); background: rgba(255,185,95,.1); cursor: pointer; text-decoration: none; } .tp-pill-ref:hover { border-color: var(--tp-tertiary); background: rgba(255,185,95,.2); text-decoration: none; } .tp-pill-ref::after { content: "\2197"; font-size: 9px; opacity: .7; margin-left: 3px; } .tp-pill-theme { cursor: pointer; } .tp-pill-theme:hover { border-color: var(--tp-primary); color: var(--tp-primary); text-decoration: none; } /* ── semantic search result excerpt (grounded "why this matched" line) ── */ .tp-search-excerpt { font-size: 13px; color: var(--tp-on-surface-variant); font-style: italic; margin: 6px 0 0; line-height: 1.5; } @media (max-width: 640px) { .tp-search-excerpt, .tp-related-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } } .tp-answer-card { background: linear-gradient(160deg, var(--tp-surface-c), var(--tp-surface-low)); border: 1px solid var(--tp-outline-variant); border-radius: 16px; padding: 22px 24px; margin: 18px 0 28px; } .tp-answer-kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-tertiary); font-weight: 700; margin-bottom: 12px; } .tp-answer-kicker svg { width: 14px; height: 14px; flex: none; } .tp-answer-body { font-size: 16px; line-height: 1.72; color: var(--tp-on-surface); margin: 0; } .tp-answer-body a.tp-cite { color: var(--tp-primary); text-decoration: none; border-bottom: 1px solid rgba(210,187,255,.4); font-weight: 600; } .tp-answer-body a.tp-cite:hover { border-bottom-color: var(--tp-primary); } .tp-bridge-note { font-size: 13px; color: var(--tp-outline); margin: 0 0 14px; } .tp-bridge-note strong { color: var(--tp-on-surface-variant); font-weight: 700; } .tp-pill-theme.tp-pill-active { background: var(--tp-primary); border-color: var(--tp-primary); color: #241a3d; font-weight: 700; } .tp-clear-filter { cursor: pointer; text-decoration: underline; font-weight: 600; margin-left: 8px; color: var(--tp-primary); } /* "Sermons" list under a synthesized answer — replaces the old excerpt-card "Also related" section when synthesis succeeds; scoped to just the cited sermons (not the full raw match set), reusing the same .tp-related-card style as the sermon page's Related Sermons section. */ .tp-also-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tp-outline); font-weight: 700; margin: 0 0 10px; } /* Related Sermons — sermon detail page, populated only when the visitor arrived via a search's "Sermons" list above (?related=id,id on the URL). */ .tp-related-card { display: flex; gap: 16px; align-items: flex-start; background: var(--tp-surface-low); border: 1px solid var(--tp-outline-variant); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; text-decoration: none; color: inherit; } .tp-related-card:hover { text-decoration: none; border-color: var(--tp-primary); } .tp-related-date { flex: none; width: 52px; text-align: center; background: var(--tp-surface-highest); border-radius: 10px; padding: 8px 4px; font-family: var(--tp-font-headline); } .tp-related-date .d { font-size: 18px; font-weight: 700; line-height: 1; display: block; } .tp-related-date .m { font-size: 10px; color: var(--tp-outline); text-transform: uppercase; letter-spacing: .05em; } .tp-related-body { flex: 1; min-width: 0; } .tp-related-body h4 { font-family: var(--tp-font-headline); font-size: 16.5px; margin: 0 0 2px; } .tp-related-body .meta { font-size: 12.5px; color: var(--tp-on-surface-variant); margin-bottom: 8px; } .tp-related-summary { font-size: 13.5px; color: var(--tp-on-surface-variant); line-height: 1.55; margin: 0; } /* ── detail hero (theme/topic/book/series list pages) ── */ .tp-detail-hero { padding: 34px 0 8px; } .tp-detail-hero .kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--tp-outline); font-weight: 700; } .tp-detail-hero h1 { font-family: var(--tp-font-headline); font-size: clamp(26px,3.6vw,36px); margin: 6px 0 4px; } .tp-detail-hero .count { color: var(--tp-on-surface-variant); font-size: 14px; } .tp-related-rail { margin: 18px 0 30px; } .tp-related-rail .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-outline); font-weight: 700; margin-bottom: 10px; } /* ── sermon row (used in theme/topic/series/book lists + search matches) ── */ .tp-sermon-row { display: flex; gap: 16px; padding: 18px; background: rgba(34,42,61,.4); border: 0.5px solid rgba(70,69,84,.2); border-radius: 14px; margin-bottom: 12px; text-decoration: none; color: inherit; align-items: flex-start; transition: border-color .12s ease; cursor: pointer; } .tp-sermon-row:hover { border-color: var(--tp-primary); text-decoration: none; } .tp-sermon-row .date-chip { flex: none; width: 56px; text-align: center; background: var(--tp-surface-highest); border-radius: 10px; padding: 8px 4px; font-family: var(--tp-font-headline); } .tp-sermon-row .date-chip .d { font-size: 19px; font-weight: 700; line-height: 1; } .tp-sermon-row .date-chip .m { font-size: 10px; color: var(--tp-outline); text-transform: uppercase; letter-spacing: .05em; } .tp-sermon-row .body { flex: 1; min-width: 0; } .tp-sermon-row h3 { font-family: var(--tp-font-headline); font-size: 16.5px; margin: 0 0 4px; } .tp-sermon-row .meta { font-size: 12.5px; color: var(--tp-on-surface-variant); } /* Play button sits on the right edge of the card, vertically centered, rather than stacked under the text — scripture refs are intentionally left off the card entirely now (see teaching_sermon_list.html) so users discover them by opening the sermon. */ .tp-sermon-row > .tp-media-row, .tp-related-card > .tp-media-row { margin: 0 0 0 auto; align-self: center; flex: none; } /* List view: bare essentials — title, speaker, play button. Date chip and scripture-ref/theme pills drop out; open the sermon to see everything. */ #tp-row-list.tp-list-mode .tp-sermon-row { align-items: center; padding: 12px 16px; } #tp-row-list.tp-list-mode .date-chip { display: none; } #tp-row-list.tp-list-mode .body { display: flex; align-items: baseline; gap: 10px; } #tp-row-list.tp-list-mode h3 { flex: none; margin: 0; font-size: 15px; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tp-row-list.tp-list-mode .meta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #tp-row-list.tp-list-mode .tp-pills { display: none; } /* ── media buttons (Listen / Watch) ── */ .tp-media-row { display: flex; gap: 8px; margin-top: 10px; } .tp-media-btn { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--tp-surface-highest); border: 0.5px solid var(--tp-outline-variant); color: var(--tp-on-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color .12s ease, color .12s ease, background .12s ease; } .tp-media-btn:hover { border-color: var(--tp-primary); color: var(--tp-primary); } /* Shared color treatment for audio/video regardless of size — the list-row "small" buttons match the same red/green as the big detail-page buttons. */ .tp-media-btn.audio { background: linear-gradient(135deg, var(--tp-secondary), #2fae7d); color: #08281c; } .tp-media-btn.audio:hover { border-color: transparent; color: #08281c; filter: brightness(1.07); } .tp-media-btn.video { background: linear-gradient(135deg, #ff4d4d, #c81d25); color: #fff; } .tp-media-btn.video:hover { border-color: transparent; color: #fff; filter: brightness(1.07); } .tp-media-btn.audio.playing { background: rgba(78,222,163,.16); border-color: var(--tp-secondary); color: var(--tp-secondary); } .tp-media-btn.video.playing { background: rgba(210,187,255,.16); border-color: var(--tp-primary); color: var(--tp-primary); } /* List-row buttons: collapsed to a small dot by default, expand to reveal their label when the whole row/card is hovered (not just the tiny button itself, since it's a small target) — or on keyboard focus. */ .tp-media-btn.small { width: auto; height: 26px; min-width: 26px; max-width: 26px; border: none; border-radius: 999px; overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: flex-start; transition: max-width .22s cubic-bezier(.2,.8,.2,1); } .tp-media-btn.small .ic { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; } .tp-media-btn.small .txt { font-family: var(--tp-font-body); font-weight: 800; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .14s ease; padding-right: 13px; margin-left: -2px; } .tp-media-btn.small:focus-visible { max-width: 160px; } .tp-media-btn.small:focus-visible .txt { opacity: 1; transition: opacity .18s ease .06s; } /* Always compact icon-only — no hover-to-expand on desktop or mobile (previously expanded on row hover, user found it distracting). */ /* Video promo card — sermon detail page only. Replaces the old hover-expand icon buttons: a poster frame (real YouTube thumbnail when available) plus Listen/Watch buttons that stay visible underneath at all times — they're static triggers for the one shared #sv-mini-player, not a second player, so there's nothing to hide/swap once something starts playing. */ .tp-video-promo { margin-top: 18px; } /* Fixed 16:9 box — same shape and size whether it holds the poster frame or the real player, so playback starts as a crossfade in place instead of a swap between two differently-shaped elements (see teaching_media_buttons.html). */ .tp-video-promo-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px 18px 0 0; overflow: hidden; background: #000; border: 0.5px solid var(--tp-outline-variant); border-bottom: none; } /* Audio has no video box to preserve — collapse the reserved 16:9 space back to the docked bar's natural height instead of leaving a tall empty stage. */ .tp-video-promo-stage.tp-audio-active { aspect-ratio: auto; background: none; border: none; border-radius: 0; overflow: visible; } .tp-video-promo-stage.tp-audio-active #sv-player-anchor { position: static; } .tp-video-promo-frame { position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 160% at 25% 15%, var(--tp-surface-highest), var(--tp-surface-lowest) 72%); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .35s ease; } /* Dark gradient so the play button and title always read clearly over whatever the real thumbnail image looks like, and the frame feels like a control rather than a stray photo. */ .tp-video-promo-frame::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.05) 38%, rgba(0,0,0,.6) 100%); } .tp-video-promo-frame.tp-fade-out { opacity: 0; pointer-events: none; } #sv-player-anchor { position: absolute; inset: 0; z-index: 1; } .tp-video-promo-play { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(210,187,255,.18); border: 1.5px solid rgba(210,187,255,.45); color: var(--tp-primary); transition: transform .15s ease; } .tp-video-promo-frame:hover .tp-video-promo-play { transform: scale(1.06); } .tp-video-promo-actions { display: flex; gap: 10px; padding: 14px; background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); border-top: none; border-radius: 0 0 18px 18px; } .tp-video-promo-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--tp-font-body); font-weight: 700; font-size: 13.5px; color: var(--tp-on-surface-variant); background: var(--tp-surface-high); border: 0.5px solid var(--tp-outline-variant); border-radius: 11px; padding: 11px; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .tp-video-promo-btn:hover { border-color: var(--tp-primary); color: var(--tp-primary); } .tp-video-promo-btn.audio.playing { background: rgba(78,222,163,.16); border-color: var(--tp-secondary); color: var(--tp-secondary); } .tp-video-promo-btn.video.playing { background: rgba(210,187,255,.16); border-color: var(--tp-primary); color: var(--tp-primary); } /* ── series/collection detail ── */ .tp-series-hero { padding: 38px 30px; border-radius: 18px; margin-top: 26px; background: linear-gradient(135deg, rgba(210,187,255,.12), rgba(78,222,163,.06)); border: 0.5px solid var(--tp-outline-variant); } .tp-series-hero .kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--tp-primary); font-weight: 700; } .tp-series-hero h1 { font-family: var(--tp-font-headline); font-size: clamp(26px,4vw,38px); margin: 8px 0 10px; } .tp-series-hero p { color: var(--tp-on-surface-variant); max-width: 640px; font-size: 14.5px; } .tp-series-hero .tp-badges { margin-top: 14px; } .tp-material-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 26px 0; } @media (max-width: 720px) { .tp-material-grid { grid-template-columns: 1fr; } } .tp-material-card { background: var(--tp-surface-high); border: 0.5px solid var(--tp-outline-variant); border-radius: 16px; padding: 22px; } .tp-material-card .icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .tp-material-card .icon-row .ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .tp-material-card.study .ic { background: rgba(210,187,255,.15); color: var(--tp-primary); } .tp-material-card.devo .ic { background: rgba(78,222,163,.15); color: var(--tp-secondary); } .tp-material-card h3 { font-family: var(--tp-font-headline); font-size: 17px; margin: 0; } .tp-material-card .desc { font-size: 13px; color: var(--tp-on-surface-variant); margin: 8px 0 14px; max-height: 4.6em; overflow: hidden; } .tp-material-card .cta-row { display: flex; gap: 10px; align-items: center; } .tp-session-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .tp-session-list .s-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; gap: 12px; background: var(--tp-surface-c); border-radius: 10px; font-size: 13px; text-decoration: none; color: inherit; flex-wrap: wrap; } .tp-session-list .s-item:hover { color: var(--tp-primary); text-decoration: none; } .tp-session-list .s-item .n { color: var(--tp-outline); font-size: 11.5px; margin-right: 8px; } .tp-session-list .s-item .right { display: flex; align-items: center; gap: 14px; } .tp-session-list .s-item .right .date { color: var(--tp-outline); font-size: 12px; } /* ── sermon detail ── */ .tp-sermon-hero { padding: 34px 0 10px; } .tp-sermon-hero .kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--tp-outline); font-weight: 700; } .tp-hero-title-row { display: flex; align-items: flex-start; gap: 12px; } .tp-hero-title-row h1 { flex: 1; min-width: 0; } .tp-sermon-hero h1 { font-family: var(--tp-font-headline); font-size: clamp(26px,4vw,38px); margin: 8px 0 6px; } .tp-sermon-hero .meta { color: var(--tp-on-surface-variant); font-size: 14px; } .tp-sermon-excerpt { margin: 14px 0 0; color: var(--tp-on-surface-variant); font-size: 15px; line-height: 1.6; } /* ── share ── */ .tp-share-btn { flex: none; margin-top: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--tp-surface-c); border: 0.5px solid var(--tp-outline-variant); color: var(--tp-on-surface-variant); display: flex; align-items: center; justify-content: center; cursor: pointer; } .tp-share-btn:hover { border-color: var(--tp-primary); color: var(--tp-primary); } /* Sits inside a lightbox header, left of the download FAB — same 36px circle, ghost styling since it isn't the primary action there. */ .tp-share-fab { position: absolute; top: 16px; right: 60px; margin: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--tp-surface-highest); border: 0.5px solid var(--tp-outline-variant); color: var(--tp-on-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .tp-share-fab:hover { border-color: var(--tp-primary); color: var(--tp-primary); } /* Shifts left of the mobile close button's new inside-the-card position (see .tp-lightbox-close), same as the download fab beside it. */ @media (max-width: 639px) { .tp-share-fab { top: 14px; right: 100px; } } .tp-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); z-index: 400; background: var(--tp-surface-highest); color: var(--tp-on-surface); border: 0.5px solid var(--tp-outline-variant); padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; font-family: var(--tp-font-body); box-shadow: 0 8px 24px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .tp-toast.show { opacity: 1; transform: translate(-50%, 0); } .tp-content-card { background: var(--tp-surface-high); border: 0.5px solid var(--tp-outline-variant); border-radius: 16px; padding: 24px; margin: 18px 0; } .tp-content-card .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .tp-content-card h3 { font-family: var(--tp-font-headline); font-size: 18px; margin: 0; } /* Scrollable box: the rendered guide/devotional lives inside a fixed-height pane with its own scrollbar, so a long multi-day devotional doesn't make the whole page balloon — matches the staff app's white preview-box pattern, just themed dark for the public page. */ .tp-scroll-box { max-height: 420px; overflow-y: auto; padding-right: 6px; } .tp-scroll-box::-webkit-scrollbar { width: 8px; } .tp-scroll-box::-webkit-scrollbar-track { background: transparent; } .tp-scroll-box::-webkit-scrollbar-thumb { background: var(--tp-outline-variant); border-radius: 8px; } .tp-scroll-box::-webkit-scrollbar-thumb:hover { background: var(--tp-outline); } /* Rendered markdown/devotional markup — same structural classes the staff app uses (sg-body, devo-body/.devo-card), restyled with dark tokens. */ .sg-body { font-family: var(--tp-font-body); font-size: 14px; color: var(--tp-on-surface-variant); } .sg-body h1, .sg-body h2 { font-family: var(--tp-font-headline); font-weight: 700; color: var(--tp-on-surface); margin: 20px 0 10px; } .sg-body h1:first-child, .sg-body h2:first-child { margin-top: 0; } .sg-body h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-tertiary); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 0.5px solid rgba(255,185,95,.25); } .sg-body h4 { font-size: 13.5px; font-weight: 700; color: var(--tp-on-surface); margin: 16px 0 8px; } .sg-body p { margin: 0 0 12px; line-height: 1.7; } .sg-body strong { color: var(--tp-on-surface); } .sg-body em { color: var(--tp-on-surface-variant); font-style: italic; } .sg-body hr { border: none; border-top: 0.5px solid var(--tp-outline-variant); margin: 18px 0; } .sg-body ol, .sg-body ul { padding-left: 20px; margin: 0 0 12px; } .sg-body li { margin-bottom: 8px; line-height: 1.65; } .sg-body blockquote { border-left: 3px solid rgba(255,185,95,.5); margin: 0 0 12px; padding: 8px 14px; color: var(--tp-on-surface-variant); font-style: italic; background: rgba(255,185,95,.06); border-radius: 0 6px 6px 0; } .devo-body { font-family: var(--tp-font-body); font-size: 14px; color: var(--tp-on-surface-variant); } .devo-card { margin: 0 0 24px; padding-bottom: 20px; border-bottom: 0.5px solid var(--tp-outline-variant); } .devo-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .devo-day { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-tertiary); margin: 0 0 6px; } .devo-body h3 { font-family: var(--tp-font-headline); font-weight: 700; color: var(--tp-on-surface); margin: 0 0 12px; font-size: 17px; } .devo-body blockquote { border-left: 3px solid rgba(255,185,95,.5); margin: 0 0 12px; padding: 8px 14px; color: var(--tp-on-surface-variant); font-style: italic; background: rgba(255,185,95,.06); border-radius: 0 6px 6px 0; } .devo-body p { margin: 0 0 12px; line-height: 1.7; } .devo-prayer { font-style: italic; } .devo-prayer::before { content: 'Prayer: '; font-style: normal; font-weight: 700; color: var(--tp-on-surface); } .devo-action { background: rgba(255,185,95,.06); border: 0.5px solid rgba(255,185,95,.25); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; } .devo-action::before { content: 'Daily Action: '; font-weight: 700; color: var(--tp-tertiary); } .tp-empty { font-size: 13px; color: var(--tp-outline); font-style: italic; padding: 20px 0; } .tp-raw-text { font-family: var(--tp-font-body); font-size: 13.5px; color: var(--tp-on-surface-variant); white-space: pre-wrap; line-height: 1.7; margin: 0; } /* ── study-material tiles + lightbox (replaces the always-open content cards) ── */ .tp-section-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-outline); font-weight: 700; margin: 26px 0 12px; } .tp-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: none; } @media (max-width: 420px) { .tp-tile-grid { grid-template-columns: 1fr; gap: 10px; max-width: none; } } /* Sermon detail page, when Tags & References has content: Small Group Guide + Daily Devotional stack on the left; Tags & References stretches (CSS Grid's default row-stretch) to match that stack's combined height on the right, instead of all three squeezed into equal-width squares. */ .tp-study-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; } .tp-study-stack { display: flex; flex-direction: column; gap: 14px; } .tp-study-stack .tp-tile { aspect-ratio: auto; min-height: 118px; } .tp-study-layout .tp-tags-card { aspect-ratio: auto; } @media (max-width: 639px) { /* deliberate single-column stack, not an accidental grid-min-content collapse — Tags & References gets the same full-width treatment as the other two instead of landing at an uneven size next to them. */ .tp-study-layout { grid-template-columns: 1fr; } } .tp-tile { aspect-ratio: 1 / 1; border-radius: 18px; border: 0.5px solid var(--tp-outline-variant); background: var(--tp-surface-high); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; text-align: left; font-family: var(--tp-font-body); color: var(--tp-on-surface); transition: transform .18s ease, border-color .18s ease; position: relative; overflow: hidden; } .tp-tile:hover { transform: translateY(-3px); border-color: var(--tp-outline); } .tp-tile:active { transform: translateY(-1px) scale(.98); } .tp-tile.study { background: linear-gradient(155deg, var(--tp-surface-high), rgba(210,187,255,.08)); } .tp-tile.devo { background: linear-gradient(155deg, var(--tp-surface-high), rgba(78,222,163,.08)); } .tp-tile.tags { background: linear-gradient(155deg, var(--tp-surface-high), rgba(255,185,95,.08)); } .tp-tile.disabled { cursor: default; opacity: .55; } .tp-tile.disabled:hover { transform: none; border-color: var(--tp-outline-variant); } .tp-tile .ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; } .tp-tile.study .ic { background: rgba(210,187,255,.16); color: var(--tp-primary); } .tp-tile.devo .ic { background: rgba(78,222,163,.16); color: var(--tp-secondary); } .tp-tile.tags .ic { background: rgba(255,185,95,.16); color: var(--tp-tertiary); } /* Tags & References tile shows its content directly instead of opening a lightbox. Stays the same fixed square as the other two tiles — pills are capped with a "+N more" toggle, and the body scrolls internally so an expanded list never grows the tile past its siblings' size. */ .tp-tile.tp-tags-card { cursor: default; display: flex; flex-direction: column; } .tp-tile.tp-tags-card:hover { transform: none; border-color: var(--tp-outline-variant); } .tp-tags-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex: none; } .tp-tags-card-head h3 { font-family: var(--tp-font-headline); font-size: 17px; margin: 0; min-width: 0; } .tp-tags-card-body { flex: 1; min-height: 0; overflow-y: auto; } .tp-tags-card-body::-webkit-scrollbar { width: 6px; } .tp-tags-card-body::-webkit-scrollbar-track { background: transparent; } .tp-tags-card-body::-webkit-scrollbar-thumb { background: var(--tp-outline-variant); border-radius: 8px; } .tp-tile h3 { font-family: var(--tp-font-headline); font-size: 19px; margin: 0; line-height: 1.2; } .tp-tile .sub { font-size: 12px; color: var(--tp-outline); font-weight: 600; margin-top: 2px; } .tp-tile .tap-hint { font-size: 11.5px; font-weight: 700; color: var(--tp-on-surface-variant); display: flex; align-items: center; gap: 5px; opacity: .75; } .tp-tile .tap-hint svg { transition: transform .18s ease; } .tp-tile:hover .tap-hint svg { transform: translateX(3px); } .tp-lightbox-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(4,7,16,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .28s ease; display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 640px) { .tp-lightbox-backdrop { align-items: center; padding: 40px; } } .tp-lightbox-backdrop.open { opacity: 1; pointer-events: auto; } .tp-lightbox-card { position: relative; width: 100%; max-width: 640px; max-height: 88vh; max-height: 88dvh; background: var(--tp-surface-high); border: 0.5px solid var(--tp-outline-variant); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1); } @media (min-width: 640px) { .tp-lightbox-card { border-radius: 22px; transform: scale(.9) translateY(18px); } } .tp-lightbox-backdrop.open .tp-lightbox-card { transform: none; } /* Verse lightbox — sized close to 1440x900 so the embedded BibleGateway page has real reading room, capped to whatever the viewport allows. */ .tp-lightbox-card.wide { max-width: min(1440px, 96vw); height: min(900px, 92vh); } .tp-lightbox-card.wide .tp-lightbox-body.tp-verse-body { padding: 0; flex: 1; min-height: 0; } .tp-verse-body iframe { width: 100%; height: 100%; border: none; display: block; background: #fff; } /* Rounded-corner clipping lives on this inner wrapper (not the card itself) so the close button — a sibling, not a child — can float just outside the card's edge without being cut off by overflow:hidden. The download button stays a child of .tp-lightbox-card so it stays inside the card. */ .tp-lightbox-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; border-radius: inherit; } .tp-lightbox-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 0.5px solid var(--tp-outline-variant); flex: none; } .tp-lightbox-head .ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; } .tp-lightbox-head .titles { flex: 1; min-width: 0; } .tp-lightbox-head h3 { font-family: var(--tp-font-headline); font-size: 17px; margin: 0; } .tp-lightbox-head .badge { font-size: 11px; color: var(--tp-outline); font-weight: 700; } .tp-lightbox-close { position: absolute; top: -14px; right: -14px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0.5px solid var(--tp-outline-variant); background: var(--tp-surface-c); color: var(--tp-on-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .75; transition: opacity .15s ease, border-color .15s ease, color .15s ease; } .tp-lightbox-close:hover { opacity: 1; border-color: var(--tp-primary); color: var(--tp-primary); } /* On mobile the card is a near-full-height bottom sheet, so floating the close button above the card (as on desktop) can push it past the top of the real visible viewport when the browser's address bar is showing — keep it inside the card's header instead, always reachable. */ @media (max-width: 639px) { .tp-lightbox-close { position: absolute; top: 14px; right: 14px; } /* room for close + download + share, all in a row (see their own mobile overrides below) instead of stacked on top of each other */ .tp-lightbox-head { padding-right: 150px; } } .tp-lightbox-body { overflow-y: auto; padding: 22px 24px 32px; } .tp-lightbox-subhead { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-outline); font-weight: 700; margin: 0 0 4px; } .tp-lightbox-subhead:not(:first-child) { margin-top: 24px; } /* Download button that expands to reveal its label on hover/focus, collapses back to an icon otherwise — sits inside the lightbox header. */ .tp-download-fab { position: absolute; top: 16px; right: 16px; height: 36px; min-width: 36px; max-width: 36px; border-radius: 999px; background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-container)); color: #241a3d; border: none; display: flex; align-items: center; cursor: pointer; overflow: hidden; padding: 0; text-decoration: none; transition: max-width .26s cubic-bezier(.2,.8,.2,1); z-index: 2; } .tp-download-fab .ic { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; } .tp-download-fab .txt { font-family: var(--tp-font-body); font-weight: 800; font-size: 12.5px; white-space: nowrap; opacity: 0; transition: opacity .16s ease; padding-right: 16px; margin-left: -6px; } .tp-download-fab:focus-visible { max-width: 170px; } .tp-download-fab:focus-visible .txt { opacity: 1; transition: opacity .2s ease .1s; } @media (hover: hover) and (pointer: fine) { .tp-download-fab:hover { max-width: 170px; } .tp-download-fab:hover .txt { opacity: 1; transition: opacity .2s ease .1s; } } /* On mobile the close button moved inside the card header (see .tp-lightbox-close above) and landed directly on top of this — same top-right corner, same size. Sits to its left instead, both reachable. */ @media (max-width: 639px) { .tp-download-fab { top: 14px; right: 56px; max-width: 36px !important; } .tp-download-fab .txt { display: none; } } /* ── buttons ── */ .tp-btn { font-family: var(--tp-font-body); font-weight: 700; font-size: 13px; border: none; border-radius: 999px; padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .tp-btn:hover { text-decoration: none; opacity: .92; } .tp-btn-primary { background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-container)); color: #241a3d; } .tp-btn-ghost { background: var(--tp-surface-highest); color: var(--tp-on-surface); } .tp-btn-sm { padding: 7px 13px; font-size: 12px; } .tp-btn-icon { width: 38px; height: 38px; padding: 0; justify-content: center; flex: none; } /* ── mini-player ── */ #sv-mini-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 250; background: var(--tp-surface-lowest); border-top: 1px solid var(--tp-outline-variant); box-shadow: 0 -8px 30px rgba(0,0,0,.4); transform: translateY(100%); transition: transform .22s ease, height .28s ease, top .28s ease; } #sv-mini-player.show { transform: translateY(0); } #sv-mini-player.expanded { top: 0; height: 100vh; } #sv-mini-player .sv-mp-expanded { display: none; } #sv-mini-player.expanded .sv-mp-inner { display: none; } /* Anchored: the sermon detail page's promo card moved this same player in-page (see tpOpenPlayer's anchor handling) instead of leaving it fixed to the viewport bottom — no second, separate player ever appears. */ #sv-mini-player.anchored { position: relative; left: auto; right: auto; bottom: auto; top: auto; transform: none; z-index: 1; box-shadow: none; border-top: none; border-radius: 18px; overflow: hidden; margin-bottom: 14px; } #sv-mini-player.anchored.expanded { height: auto; } /* flex:none instead of the base flex:1 — a flex:1 wrap can end up taller than the 16:9 stage it centers, leaving reserved space around it that shows through as a plain dark/gradient backdrop instead of a clean, tight 16:9 box. */ #sv-mini-player.anchored .sv-mp-video-wrap { margin: 0; flex: none; } /* Kept at the video's native 16:9 (the base rule's ratio) rather than matching the 21:9 poster frame — forcing 21:9 here mismatched the real video's shape and letterboxed it with black bars on mobile. */ #sv-mini-player.anchored .sv-mp-video-stage { max-height: none; border-radius: 0; } /* object-fit:contain (the base rule) letterboxes/pillarboxes whenever the real source isn't exactly 16:9 (e.g. a YouTube thumbnail, which is 4:3), showing its own dark/tinted background around the gap — cover fills the box completely instead, cropping overflow, so the box is a clean 16:9 with nothing visible behind it. */ #sv-mini-player.anchored .sv-mp-video-stage video { object-fit: cover; } #sv-mini-player.anchored .sv-mp-inner, #sv-mini-player.anchored .sv-mp-panel-inner { max-width: none; } /* .sv-mp-panel-inner is a grid item (its parent .sv-mp-panel is display:grid) — margin:0 auto (inherited from the base rule, meant for the old fixed-width centered layout) disables grid's default stretch and shrinks the item to its content width instead, which is what was actually causing the rate button and +15 to land on top of each other: the whole row was only ~144px wide, not the panel's real width. */ #sv-mini-player.anchored .sv-mp-panel-inner { margin: 0; } /* Audio, anchored: one persistent scrubbable timeline instead of a thin display-only track in the docked bar plus a second, real one hidden behind a tap-to-open panel — the icon is gone too, there's no longer a second "kind" glyph needed once Listen/Watch sit right below as their own persistent buttons. */ #sv-mini-player.anchored .sv-mp-ic, #sv-mini-player.anchored .sv-mp-track, #sv-mini-player.anchored .sv-mp-chevron { display: none; } #sv-mini-player.anchored .sv-mp-panel { grid-template-rows: 1fr !important; opacity: 1 !important; } /* The minimize chevron and "NOW WATCHING" label only made sense for the fullscreen lightbox takeover this replaced — anchored inline, there's no separate collapsed/expanded state to minimize into, so just title + share + close remain. */ #sv-mini-player.anchored .sv-mp-minimize, #sv-mini-player.anchored .sv-mp-expanded-label { display: none; } /* No lightbox to dismiss once anchored — it's just sitting in the page, not floating over anything — so the whole top bar (title/minimize/share/close, all leftovers of the fullscreen takeover) goes. Switching to Listen or tapping Watch again (toggles play/pause) covers what Close used to do. */ #sv-mini-player.anchored .sv-mp-expanded-top { display: none; } /* Anchored mode doesn't reserve the fixed bar's bottom padding, since the player isn't fixed to the viewport in this state. */ body.teaching-page.sv-has-player.tp-player-anchored { padding-bottom: 0; } #sv-mini-player.expanded .sv-mp-expanded { display: flex; flex-direction: column; height: 100%; max-width: 960px; margin: 0 auto; } /* Same specificity as the rule above, so source order is what decides — this has to come after it to actually win and go full-width. */ #sv-mini-player.anchored .sv-mp-expanded { max-width: none; } .sv-mp-expanded-top { display: flex; align-items: center; padding: 16px 22px; flex: none; gap: 10px; } .sv-mp-expanded-label { flex: 1; text-align: center; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-outline); font-weight: 700; } .sv-mp-expanded-actions { display: flex; align-items: center; gap: 6px; } .sv-mp-minimize, .sv-mp-close { width: 34px; height: 34px; border-radius: 50%; border: 0.5px solid var(--tp-outline-variant); background: var(--tp-surface-c); color: var(--tp-on-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } /* Centers a fixed 16:9 box in whatever vertical space is left below the top bar, instead of stretching the stage itself to fill it — a taller viewport (mobile portrait, a wide desktop window) used to letterbox the video hard inside an oversized stage. */ .sv-mp-video-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 0 22px 22px; } .sv-mp-video-stage { position: relative; width: 100%; max-height: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; overflow: hidden; } .sv-mp-video-stage video { width: 100%; height: 100%; object-fit: contain; } .sv-mp-video-stage #sv-yt-host, .sv-mp-video-stage #sv-yt-host iframe { width: 100%; height: 100%; border: none; } .sv-mp-video-stage:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; } /* iOS Safari fallback (see tpToggleFullscreen) for when no real Fullscreen API is reachable at all — a YouTube iframe on iOS, specifically, has neither the standard API nor the video-specific one native