/* Theme Name: CCB Theme URI: https://cubachristianbrotherhood.org Description: A quiet, dark, phone-first theme for Cuba Christian Brotherhood. Made to work with the CCB Audio plugin: greeting, live service card, instant search and a player that stays out of the way. Version: 1.6.0 Requires at least: 6.0 Requires PHP: 7.4 Author: Cuba Christian Brotherhood License: GPL-2.0-or-later Text Domain: ccbt */ /* ---------- tokens ---------- */ html:root { --bg: #0F0E0D; --s1: #1B1917; --s2: #26231F; --line: #2E2A26; --line2: #3A3631; --text: #F5F1EA; --muted: #A39A8E; --accent: #E9A649; --on-accent: #1A1206; --live: #4ADE80; /* on air */ --off: #FF6B5E; /* no broadcast */ --radius: 20px; --ts: 1; /* text size (Customize → Home screen) */ --hs: 1; /* heading size */ --sp: 1; /* spacing */ --font: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* CCB Audio plugin follows the theme */ --ccb-bg: var(--bg); --ccb-bg-2: var(--s1); --ccb-line: var(--line); --ccb-text: var(--text); --ccb-muted: var(--muted); --ccb-on-accent: var(--on-accent); --ccb-font: var(--font); --ccb-shadow: 0 -8px 28px rgba(0, 0, 0, .5); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } a { color: var(--accent); } a:hover { color: var(--text); } img, video, iframe { max-width: 100%; height: auto; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .ccbt-skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; z-index: 100001; } .ccbt-skip:focus { left: 8px; } .ccbt-wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 20px; } .ccbt-muted { color: var(--muted); } .ccbt-small { font-size: 14px; } .ccbt-i { display: block; flex: none; } /* ---------- header ---------- */ .ccbt-header { padding-top: env(safe-area-inset-top, 0px); } .ccbt-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 60px; } .ccbt-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: 0 -10px; border-radius: 22px; border: 0; background: transparent; color: var(--text); cursor: pointer; padding: 0; } .ccbt-icon-btn:hover { background: var(--s1); color: var(--text); } .ccbt-brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; text-align: center; } .ccbt-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ccbt-brand:hover { color: var(--text); } .ccbt-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; } /* ---------- home ---------- */ .ccbt-home { display: flex; flex-direction: column; gap: calc(18px * var(--sp)); padding-bottom: 24px; } .ccbt-greeting h1 { margin: 4px 0 6px; font-size: calc(32px * var(--hs)); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; } .ccbt-greeting p { margin: 0; font-size: calc(15px * var(--ts)); line-height: 1.45; } .ccbt-greeting p[hidden] { display: none; } .ccbt-searchbar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 14px; background: var(--s1); color: var(--muted); text-decoration: none; font-size: 16px; } .ccbt-searchbar:hover { color: var(--text); background: var(--s2); } .ccbt-searchbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ccbt .ccb-player.has-error .ccb-bar-sub { color: var(--off); } .ccbt-live, .ccbt-card { display: flex; flex-direction: column; gap: calc(12px * var(--sp)); padding: calc(18px * var(--sp)); border-radius: var(--radius); background: var(--s1); border: 1px solid var(--line); } .ccbt-live-kicker, .ccbt-kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .ccbt-live-kicker[hidden] { display: none; } .ccbt-status { display: flex; align-items: center; gap: 10px; font-size: calc(14px * var(--ts)); font-weight: 800; color: var(--off); } .ccbt-light { width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; } .ccbt-live.is-live { border-color: rgba(74, 222, 128, .35); } .ccbt-live.is-live .ccbt-status { color: var(--live); } .ccbt-live.is-live .ccbt-light, .ccbt-livebar .ccbt-light { background: var(--live); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18), 0 0 12px 2px rgba(74, 222, 128, .75); animation: ccbt-glow 1.8s ease-in-out infinite; } @keyframes ccbt-glow { 50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, .08), 0 0 20px 6px rgba(74, 222, 128, .45); } } @media (prefers-reduced-motion: reduce) { .ccbt-live.is-live .ccbt-light, .ccbt-livebar .ccbt-light { animation: none; } } .ccbt-live-title { font-size: calc(20px * var(--ts)); font-weight: 700; line-height: 1.25; margin-top: -4px; } .ccbt-live-sub { font-size: calc(14px * var(--ts)); color: var(--muted); margin-top: -6px; } .ccbt-countdown { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: calc(15px * var(--ts)); margin-top: -4px; } .ccbt-countdown[hidden] { display: none; } .ccbt-countdown b { font-size: calc(34px * var(--ts)); font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .ccbt-ping { font-size: 12px; color: var(--muted); margin-top: -2px; } .ccbt-ping[hidden] { display: none; } .ccbt-live-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0 0; } .ccbt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 24px; border: 1px solid transparent; font-size: 16px; font-weight: 700; text-decoration: none; text-align: center; line-height: 1.2; cursor: pointer; } .ccbt-btn-primary { background: var(--accent); color: var(--on-accent); } .ccbt-btn-primary:hover { color: var(--on-accent); filter: brightness(1.08); } .ccbt-btn-listen { width: 100%; margin-top: 2px; background: var(--live); color: #052E14; } .ccbt-btn-listen:hover { color: #052E14; filter: brightness(1.08); } .ccbt-live:not(.is-live) .ccbt-btn-listen { display: none; } /* Live: Listen now dials in, so only Directions sits below it. Not live: Call in + Directions. */ .ccbt-live.is-live .ccbt-btn-call { display: none; } .ccbt-live.is-live .ccbt-live-actions { grid-template-columns: 1fr; } .ccbt-btn-call { border-color: var(--line2); color: var(--text); } .ccbt-btn-call:hover { color: var(--text); background: var(--s2); } .ccbt-btn-quiet { background: var(--s2); color: var(--text); } .ccbt-btn-quiet:hover { color: var(--text); background: var(--line2); } .ccbt-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 2px; } .ccbt-section-head h2 { margin: 0; font-size: calc(20px * var(--hs)); font-weight: 800; } .ccbt-section-head a { font-size: calc(14px * var(--ts)); font-weight: 600; color: var(--muted); text-decoration: none; } .ccbt-section-head a:hover { color: var(--text); } .ccbt-recent .ccb-item { border-bottom: 0; padding: calc(6px * var(--sp)) 0; } .ccbt-recent .ccb-item-type { display: none; } .ccbt-recent .ccb-list { margin-top: 4px !important; } .ccbt-home-content { margin-top: 12px; } /* ---------- search overlay ---------- */ html.ccbt-search-open, html.ccbt-search-open body { overflow: hidden; } .ccbt-search { position: fixed; inset: 0; z-index: 99997; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--text); opacity: 0; transition: opacity .15s ease; } .ccbt-search.is-open { opacity: 1; } .ccbt-search[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .ccbt-search { transition: none; } } .ccbt-search-top { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--line); } .ccbt-search-row { display: flex; align-items: center; gap: 10px; min-height: 64px; } .ccbt-search-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 14px; border-radius: 14px; background: var(--s1); color: var(--muted); } .ccbt-search-field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); } .ccbt-search-field input { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; outline: none; background: transparent; color: var(--text); caret-color: var(--accent); font: inherit; font-size: 17px; /* 16px+ stops iPhone zooming */ } .ccbt-search-field input::-webkit-search-cancel-button, .ccbt-search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .ccbt-search-field input::placeholder { color: var(--muted); opacity: 1; } .ccbt-search-clear { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 18px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; flex: none; } .ccbt-search-clear[hidden] { display: none; } .ccbt-search-cancel { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; flex: none; } .ccbt-sr-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; } .ccbt-sr-chips::-webkit-scrollbar { display: none; } .ccbt-chip { flex: none; min-height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid var(--line2); background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .ccbt-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .ccbt-sr-body { padding-bottom: 120px; } .ccbt-sr-info { margin: 14px 0 4px; font-size: 13px; color: var(--muted); min-height: 1em; } .ccbt-search.is-loading .ccbt-sr-list { opacity: .6; } .ccbt-sr-list { list-style: none; margin: 0; padding: 0; } .ccbt-sr-all { display: inline-block; margin: 14px 0; font-weight: 700; text-decoration: none; } .ccbt-sr-all[hidden] { display: none; } @media (min-width: 900px) { .ccbt-search-row, .ccbt-sr-chips, .ccbt-sr-body { max-width: 820px; } .ccbt-search-row { min-height: 84px; } .ccbt-search-field { height: 56px; border-radius: 16px; } .ccbt-search-field input { font-size: 19px; } .ccbt-sr-body .ccb-item-title { font-size: 18px; } } /* ---------- live bar (other pages) ---------- */ .ccbt-livebar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; background: var(--s1); border-bottom: 1px solid var(--line); color: var(--text); font-size: 15px; text-decoration: none; } .ccbt-livebar[hidden] { display: none; } .ccbt-livebar span:last-child { color: var(--live); font-weight: 700; } .ccbt-livebar:hover { color: var(--text); background: var(--s2); } /* ---------- menu ---------- */ html.ccbt-menu-open, html.ccbt-menu-open body { overflow: hidden; } .ccbt-menu { position: fixed; inset: 0; z-index: 99998; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--text); padding: env(safe-area-inset-top, 0px) 0 calc(24px + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; } .ccbt-menu.is-open { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ccbt-menu { transition: none; } } .ccbt-menu-inner { display: flex; flex-direction: column; gap: 22px; min-height: 100%; } .ccbt-brand-static:hover { color: var(--muted); } .ccbt-nav-list, .ccbt-nav-list ul { list-style: none; margin: 0; padding: 0; } .ccbt-nav-list > li > a { display: flex; align-items: center; min-height: 52px; font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--text); text-decoration: none; } .ccbt-nav-list > li > a:hover, .ccbt-nav-list .current-menu-item > a, .ccbt-nav-list .current_page_item > a { color: var(--accent); } .ccbt-nav-list ul a { display: flex; align-items: center; min-height: 44px; padding-left: 16px; font-size: 18px; font-weight: 600; color: var(--muted); text-decoration: none; } .ccbt-nav-list ul a:hover { color: var(--text); } .ccbt-menu-block { display: flex; flex-direction: column; gap: 8px; margin-top: auto; } .ccbt-times { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; } .ccbt-times li { display: flex; flex-direction: column; gap: 0; } .ccbt-times li .ccbt-muted { font-size: 14px; } .ccbt-phone { font-size: 24px; font-weight: 800; margin-top: -4px; } .ccbt-card .ccbt-muted { margin-top: -10px; font-size: 15px; } .ccbt-card .ccbt-small { margin: 0; } .ccbt-card .ccbt-btn { font-size: 15px; padding: 0 12px; } .ccbt-row-link { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; border-radius: 16px; background: var(--s1); color: var(--text); font-weight: 700; text-decoration: none; } .ccbt-row-link:hover { background: var(--s2); color: var(--text); } /* ---------- pages ---------- */ .ccbt-main { min-height: 50vh; } .ccbt-page { padding-bottom: 32px; } .ccbt-title { margin: 8px 0 16px; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; } .ccbt-meta { margin: -8px 0 16px; font-size: 14px; } .ccbt-feature { margin: 0 0 20px; } .ccbt-feature img { border-radius: 16px; display: block; } .ccbt-content > * { margin-top: 0; margin-bottom: 1em; } .ccbt-content > h2, .ccbt-content > .wp-block-group h2 { font-size: 24px; line-height: 1.25; margin-top: 1.6em; } .ccbt-content > h3, .ccbt-content > .wp-block-group h3 { font-size: 20px; line-height: 1.3; margin-top: 1.4em; } .ccbt-content ul, .ccbt-content ol { padding-left: 1.3em; } .ccbt-content blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: var(--text); font-size: 19px; } .ccbt-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; } .ccbt-content img { border-radius: 12px; } .ccbt-content figure { margin-left: 0; margin-right: 0; } .ccbt-content figcaption { font-size: 14px; color: var(--muted); } .ccbt-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .ccbt-content th, .ccbt-content td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; } .ccbt-content .wp-block-button__link { background: var(--accent); color: var(--on-accent); border-radius: 24px; font-weight: 700; padding: 12px 22px; text-decoration: none; } .ccbt-content .wp-block-columns { gap: 20px; } .ccbt-content form input:not([type=checkbox]):not([type=radio]):not([type=submit]), .ccbt-content form textarea, .ccbt-content form select, .search-form input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--s1); color: var(--text); font: inherit; font-size: 16px; } .ccbt-content form button, .ccbt-content input[type=submit], .search-form button, .search-form input[type=submit] { width: auto; min-height: 48px; padding: 0 22px; border-radius: 24px; border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; } .search-form { display: flex; gap: 8px; margin-bottom: 20px; } .alignwide { width: 100%; } .alignfull { width: 100vw; margin-left: calc(50% - 50vw); } /* posts list */ .ccbt-postlist { list-style: none; margin: 0; padding: 0; } .ccbt-postlist a { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; } .ccbt-postlist-title { font-size: 18px; font-weight: 700; } .ccbt-postlist-excerpt { font-size: 15px; } .ccbt-pager .nav-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .ccbt-pager a, .ccbt-pager span { color: var(--muted); text-decoration: none; padding: 8px 4px; } .ccbt-pager .current { color: var(--text); font-weight: 700; } /* ---------- audio library (plugin) inside the theme ---------- */ .ccbt .ccb-lib { max-width: none; } .ccbt .ccb-lib-head { top: 0; } .ccbt .ccb-single-art { box-shadow: 0 18px 40px rgba(0, 0, 0, .5); } .ccbt .ccb-back-link a { color: var(--muted); text-decoration: none; } /* ---------- footer ---------- */ .ccbt-footer { padding: 28px 0 32px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); margin-top: 24px; } .ccbt-footer p { margin: 0; } /* Home screen sizes follow the Customize sliders */ .ccbt-home .ccbt-btn { font-size: calc(16px * var(--ts)); } .ccbt-home .ccbt-searchbar { font-size: calc(16px * var(--ts)); } .ccbt-home .ccb-item-title { font-size: calc(16px * var(--ts)); } .ccbt-home .ccb-item-sub { font-size: calc(13px * var(--ts)); } /* ---------- menu side column (stacks on phones) ---------- */ .ccbt-menu-side { display: flex; flex-direction: column; gap: 22px; margin-top: auto; } .ccbt-menu-side .ccbt-menu-block { margin-top: 0; } .ccbt-home-side, .ccbt-home-main { display: flex; flex-direction: column; gap: calc(18px * var(--sp)); min-width: 0; } /* ================= tablets & desktops ================= */ @media (min-width: 900px) { .ccbt-greeting h1 { font-size: calc(40px * var(--hs)); } .ccbt-title { font-size: 40px; } } @media (min-width: 900px) { body { font-size: 18px; } .ccbt-wrap { max-width: 1240px; padding: 0 48px; } .ccbt-header-row { height: 84px; } .ccbt-brand { font-size: 14px; } .ccbt-icon-btn { width: 52px; height: 52px; border-radius: 26px; } .ccbt-icon-btn .ccbt-i { width: 26px; height: 26px; } /* Home: two columns — welcome + service on the left (stays in view), recordings on the right */ .ccbt-home { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(32px * var(--sp)) 72px; align-items: start; padding-top: 16px; padding-bottom: 48px; } .ccbt-home-side { position: sticky; top: 24px; gap: calc(24px * var(--sp)); } .ccbt-home-main { gap: 8px; } .ccbt-greeting h1 { font-size: calc(56px * var(--hs)); letter-spacing: -.03em; margin-bottom: 12px; } .ccbt-greeting p { font-size: calc(19px * var(--ts)); line-height: 1.5; max-width: 34ch; } .ccbt-searchbar { height: 60px; font-size: calc(18px * var(--ts)); border-radius: 16px; padding: 0 20px; } .ccbt-live, .ccbt-card { padding: calc(28px * var(--sp)); gap: calc(16px * var(--sp)); border-radius: 24px; } .ccbt-status { font-size: calc(16px * var(--ts)); } .ccbt-live-title { font-size: calc(28px * var(--ts)); } .ccbt-live-sub { font-size: calc(16px * var(--ts)); } .ccbt-countdown b { font-size: calc(48px * var(--ts)); } .ccbt-btn { min-height: 56px; font-size: 18px; border-radius: 28px; padding: 0 22px; } .ccbt-ping { font-size: 13px; } .ccbt-section-head { margin-top: 0; } .ccbt-section-head h2 { font-size: calc(28px * var(--hs)); } .ccbt-section-head a { font-size: calc(16px * var(--ts)); } .ccbt-home-content { grid-column: 1 / -1; } .ccbt-home .ccbt-btn { font-size: calc(18px * var(--ts)); } .ccbt-home .ccbt-searchbar { font-size: calc(18px * var(--ts)); } .ccbt-home .ccb-item-title { font-size: calc(19px * var(--ts)); } .ccbt-home .ccb-item-sub { font-size: calc(15px * var(--ts)); } /* Bigger recording rows everywhere */ .ccbt .ccb-item { gap: 18px; padding: 12px 0; } .ccbt .ccb-item-play, .ccbt .ccb-item-play img, .ccbt .ccb-noart { width: 76px !important; height: 76px; border-radius: 14px !important; } .ccbt .ccb-item-title { font-size: 19px; } .ccbt .ccb-item-sub { font-size: 15px; } .ccbt .ccb-item-type { font-size: 12px; } .ccbt-recent .ccb-item { padding: calc(10px * var(--sp)) 12px; margin: 0 -12px !important; border-radius: 16px; } .ccbt-recent .ccb-item:hover { background: var(--s1); } /* Pages: wide, but text lines stay easy to read */ .ccbt-page { padding-top: 16px; padding-bottom: 56px; } .ccbt-title { font-size: 48px; margin-bottom: 24px; } .ccbt-content > :where(p, ul, ol, h2, h3, h4, blockquote, figure:not(.alignwide):not(.alignfull)) { max-width: 72ch; } /* Audio library: larger controls, recordings in two columns */ .ccbt .ccb-lib-head { padding: 16px 0 12px; } .ccbt .ccb-search { height: 60px; border-radius: 16px; } .ccbt .ccb-search input { font-size: 18px; } .ccbt .ccb-chip { min-height: 44px; padding: 0 20px !important; font-size: 16px; } .ccbt .ccb-tab { font-size: 17px; padding: 12px 16px !important; } .ccbt .ccb-lib .ccb-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } .ccbt .ccb-more { max-width: 360px; margin: 24px auto !important; } /* Menu: pages on the left, service info on the right */ .ccbt-menu-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto 1fr; gap: 24px 96px; align-items: start; } .ccbt-menu-inner > .ccbt-header-row { grid-column: 1 / -1; } .ccbt-nav-list > li > a { font-size: 48px; min-height: 76px; } .ccbt-nav-list ul a { font-size: 22px; } .ccbt-menu-side { margin-top: 12px; } .ccbt-times { font-size: 17px; gap: 10px; } /* Player bar a little taller */ html:root { --ccb-bar-h: 84px; } .ccbt .ccb-bar-art { width: 60px; height: 60px; } .ccbt .ccb-bar-title { font-size: 17px; } .ccbt .ccb-bar-sub { font-size: 14px; } .ccbt-footer { font-size: 14px; } } @media (min-width: 900px) and (max-width: 1239px) { .ccbt-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(32px * var(--sp)) 48px; } .ccbt-greeting h1 { font-size: calc(48px * var(--hs)); } .ccbt-live-title { font-size: calc(24px * var(--ts)); } } @media (min-width: 900px) { /* Player bar lines up with the page edges */ .ccbt .ccb-bar { padding-left: max(48px, calc((100vw - 1240px) / 2 + 48px)); padding-right: max(48px, calc((100vw - 1240px) / 2 + 48px)); } } @media (min-width: 1440px) { .ccbt .ccb-bar { padding-left: max(48px, calc((100vw - 1360px) / 2 + 48px)); padding-right: max(48px, calc((100vw - 1360px) / 2 + 48px)); } .ccbt-wrap { max-width: 1360px; } .ccbt-greeting h1 { font-size: calc(64px * var(--hs)); } } /* Keep the player bar visible above the search screen, so a recording started from search can be seen and paused */ html.ccbt-search-open .ccb-player { z-index: 99998; } html.ccbt-search-open .ccbt-sr-body { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } /* Result rows in the search screen use the plugin's row style */ .ccbt-search .ccb-item-play { border: 0; padding: 0; margin: 0; background: var(--s1); border-radius: 10px; overflow: hidden; cursor: pointer; color: #fff; } .ccbt-search .ccb-item-text { text-decoration: none; } /* ================= v1.3 ================= */ /* Header: name on the left, search then menu on the right */ .ccbt-header-row { justify-content: space-between; } .ccbt-brand { text-align: left; } .ccbt-header-actions { display: flex; align-items: center; gap: 6px; margin-right: -10px; flex: none; } .ccbt-header-actions .ccbt-icon-btn { margin: 0; } /* "Recent" row: heading, type filters, See all */ .ccbt-recent .ccbt-section-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; } .ccbt-recent-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); } .ccbt-recent-chips::-webkit-scrollbar { display: none; } .ccbt-recent-chips .ccbt-chip { min-height: 32px; padding: 0 10px; font-size: calc(13px * var(--ts)); } .ccbt-recent .ccbt-section-head { gap: 10px; } .ccbt-recent.is-loading .ccb-list { opacity: .5; transition: opacity .15s; } .ccbt-empty { list-style: none; color: var(--muted); padding: 16px 0; } @media (min-width: 900px) { .ccbt-recent-chips { -webkit-mask-image: none; mask-image: none; } .ccbt-recent-chips .ccbt-chip { min-height: 38px; padding: 0 16px; font-size: calc(15px * var(--ts)); } } /* Player bar: glass. Phones: full width, flush with the bottom. Larger screens: floating. */ html.ccb-has-player body { padding-bottom: calc(var(--ccb-bar-h) + env(safe-area-inset-bottom, 0px)); } .ccbt .ccb-bar { background: rgba(26, 24, 21, .96); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .ccbt .ccb-bar { background: rgba(26, 24, 21, .78); -webkit-backdrop-filter: saturate(170%) blur(28px); backdrop-filter: saturate(170%) blur(28px); } } .ccbt .ccb-progress-line::before { background: rgba(255, 255, 255, .14); } .ccbt .ccb-bar-open { padding: 0 !important; } @media (min-width: 900px) { html.ccb-has-player body { padding-bottom: calc(var(--ccb-bar-h) + 32px); } .ccbt .ccb-player { padding: 0 max(16px, calc((100vw - 1240px) / 2 + 32px)) 16px; pointer-events: none; } .ccbt .ccb-player > * { pointer-events: auto; } .ccbt .ccb-bar { height: var(--ccb-bar-h); padding: 0 18px 0 10px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } /* progress line sits inside the bottom edge of the floating bar */ .ccbt .ccb-progress-line { top: auto; bottom: -8px; left: 20px; right: 20px; } .ccbt .ccb-progress-line::before, .ccbt .ccb-progress-line span { border-radius: 2px; } } @media (min-width: 1440px) { .ccbt .ccb-player { padding: 0 max(16px, calc((100vw - 1360px) / 2 + 32px)) 16px; } } @media (max-width: 420px) { .ccbt-recent .ccbt-section-head { gap: 8px; } .ccbt-recent .ccbt-section-head h2 { font-size: calc(18px * var(--hs)); } .ccbt-recent-chips { gap: 4px; } .ccbt-recent-chips .ccbt-chip { padding: 0 8px; } } @media (min-width: 900px) and (max-width: 1239px) { .ccbt-recent .ccbt-section-head h2 { font-size: calc(24px * var(--hs)); } .ccbt-recent-chips .ccbt-chip { min-height: 32px; padding: 0 10px; font-size: calc(13px * var(--ts)); } } /* Recent: Type / Date / Speaker dropdown buttons (a real