/* ===================================================================== RELEVANT custom additions (assets/player.css) — loaded on every page 1. Reject Apathy section header (Justice category archive) 2. Sticky podcast player bar (#rlv-player) 3. Podcast episode page (.rlv-episode) 4. Homepage podcast slider tweaks Dark mode is body.thb-dark-mode-on ; light mode is the default. ===================================================================== */ :root { --rlv-accent: #dbba74; --rlv-red: #e7312c; --rlv-bar-h: 76px; } /* ---------- 1. Reject Apathy header --------------------------------- */ .category-justice .archive-title.search-title { padding-top: 36px !important; padding-bottom: 30px !important; } .category-justice .archive-title h1 { display: block; width: min(420px, 84vw); aspect-ratio: 1606 / 298; margin: 0 0 20px; position: relative; left: 50%; transform: translateX(-50%); font-size: 0; line-height: 0; color: transparent; overflow: hidden; background: url("/wp-content/uploads/2026/09/reject-apathy-horizontal-black@2x.png") center / contain no-repeat; } .thb-dark-mode-on.category-justice .archive-title h1 { background-image: url("/wp-content/uploads/2026/09/reject-apathy-horizontal-white@2x.png"); } /* 2026-10-08: centering lives in section 8 (auto margins in a full-width column). This rule used to add left:50% + translateX(-50%) on top of that, which pushed the chips up to 150px right of center on desktop. Do not position this row here. */ .category-justice .archive-title .archive-sub-categories { gap: 10px; margin-top: 4px; } .category-justice .archive-title .archive-sub-categories a { margin: 0; white-space: nowrap; } /* ---------- 2. Sticky player bar ------------------------------------ */ body.rlv-player-open { padding-bottom: var(--rlv-bar-h); } body.rlv-player-open .thb-scroll-top, body.rlv-player-open .scroll-to-top { bottom: calc(var(--rlv-bar-h) + 16px); } .rlv-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; height: var(--rlv-bar-h); background: #ffffff; color: #111; border-top: 1px solid rgba(0,0,0,.12); box-shadow: 0 -8px 30px rgba(0,0,0,.18); font-family: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; } .rlv-player[hidden] { display: none; } .thb-dark-mode-on .rlv-player { background: #161616; color: #fff; border-top-color: rgba(255,255,255,.12); box-shadow: 0 -8px 30px rgba(0,0,0,.6); } .rlv-player__inner { max-width: 1290px; height: 100%; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(180px, 2fr) auto; grid-gap: 18px; align-items: center; } .rlv-player__art { width: 52px; height: 52px; border-radius: 4px; object-fit: cover; background: rgba(0,0,0,.08); display: block; } .rlv-player__art[hidden] { display: none; } .rlv-player__meta { min-width: 0; line-height: 1.25; } .rlv-player__title { display: block; font-weight: 700; font-size: 14px; color: inherit !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .rlv-player__title:hover { color: var(--rlv-accent) !important; } .rlv-player__series { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--rlv-accent); font-weight: 600; margin-top: 3px; } .rlv-player__controls { display: flex; align-items: center; gap: 8px; } .rlv-btn { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; transition: background .15s, transform .15s; } .rlv-btn svg { width: 22px; height: 22px; display: block; } .rlv-btn:hover { background: rgba(0,0,0,.08); } .thb-dark-mode-on .rlv-btn:hover { background: rgba(255,255,255,.12); } .rlv-btn:focus-visible { outline: 2px solid var(--rlv-accent); outline-offset: 2px; } .rlv-toggle { width: 48px; height: 48px; background: #111; color: #fff; } .rlv-toggle svg { width: 26px; height: 26px; } .rlv-toggle:hover { background: #000; transform: scale(1.04); } .thb-dark-mode-on .rlv-toggle { background: #fff; color: #111; } .thb-dark-mode-on .rlv-toggle:hover { background: var(--rlv-accent); } .rlv-skip { position: relative; } .rlv-skip small { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-46%); font-size: 8px; font-weight: 700; text-align: center; line-height: 1; pointer-events: none; } .rlv-skip svg { width: 24px; height: 24px; } .rlv-player__progress { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-gap: 12px; align-items: center; font-size: 11px; font-variant-numeric: tabular-nums; opacity: .9; } .rlv-seek-wrap { position: relative; height: 18px; display: flex; align-items: center; } .rlv-seek-track, .rlv-buffer { position: absolute; left: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 2px; pointer-events: none; } .rlv-seek-track { right: 0; background: rgba(0,0,0,.14); } .thb-dark-mode-on .rlv-seek-track { background: rgba(255,255,255,.18); } .rlv-buffer { width: 0; background: rgba(0,0,0,.22); transition: width .3s; } .thb-dark-mode-on .rlv-buffer { background: rgba(255,255,255,.32); } .rlv-seek { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; width: 100%; height: 18px; margin: 0; padding: 0; background: transparent; cursor: pointer; } .rlv-seek:focus { outline: none; } .rlv-seek::-webkit-slider-runnable-track { height: 4px; background: transparent; } .rlv-seek::-moz-range-track { height: 4px; background: transparent; } .rlv-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--rlv-accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .rlv-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--rlv-accent); border: 2px solid #fff; } .rlv-seek::-moz-range-progress { height: 4px; background: var(--rlv-accent); border-radius: 2px; } .rlv-seek-fill { position: absolute; left: 0; top: 50%; height: 4px; transform: translateY(-50%); width: 0; background: var(--rlv-accent); border-radius: 2px; pointer-events: none; } .rlv-close { width: 32px; height: 32px; opacity: .6; } .rlv-close:hover { opacity: 1; } .rlv-close svg { width: 18px; height: 18px; } .rlv-player.is-buffering .rlv-toggle { animation: rlv-pulse 1s ease-in-out infinite; } @keyframes rlv-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } @media (max-width: 767px) { :root { --rlv-bar-h: 116px; } .rlv-player__inner { grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "art meta close" "progress progress progress"; grid-row-gap: 6px; grid-column-gap: 12px; padding: 10px 14px 8px; align-content: center; } .rlv-player__art { grid-area: art; width: 44px; height: 44px; } .rlv-player__meta { grid-area: meta; } .rlv-player__controls { grid-area: close; } .rlv-close { grid-area: close; justify-self: end; display: none; } .rlv-player__progress { grid-area: progress; } .rlv-skip { display: none; } .rlv-toggle { width: 42px; height: 42px; } } /* ---------- 3. Episode page ---------------------------------------- */ .single-podcast .rlv-episode { padding-top: 10px; } .rlv-episode__hero { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); grid-gap: 48px; align-items: center; padding: 10px 0 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(0,0,0,.1); } .thb-dark-mode-on .rlv-episode__hero { border-bottom-color: rgba(255,255,255,.12); } .rlv-episode__art { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #222; box-shadow: 0 20px 50px rgba(0,0,0,.35); } .rlv-episode__art img { width: 100%; height: 100%; object-fit: cover; display: block; } .rlv-episode__art .rlv-episode__play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.92); color: #111; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0,0,0,.45); transition: transform .15s, background .15s; } .rlv-episode__art .rlv-episode__play:hover { transform: scale(1.06); background: #fff; } .rlv-episode__art .rlv-episode__play svg { width: 36px; height: 36px; margin-left: 4px; } .rlv-episode__art .rlv-episode__play.is-playing svg { margin-left: 0; } .rlv-episode__series { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rlv-accent) !important; margin-bottom: 14px; } .rlv-episode__title, .single-podcast h1.rlv-episode__title { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; font-weight: 700; margin: 0 0 16px; text-transform: none !important; letter-spacing: -0.015em !important; word-spacing: 0 !important; } .rlv-episode__meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 26px; } .rlv-episode__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 26px; } .rlv-btn-primary { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 10px; background: #111; color: #fff !important; border: 0; border-radius: 999px; cursor: pointer; padding: 14px 26px 14px 20px; font-family: "Oswald", "Barlow", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; transition: background .15s, transform .15s; } .rlv-btn-primary svg { width: 18px; height: 18px; } .rlv-btn-primary:hover { background: var(--rlv-accent); color: #111 !important; transform: translateY(-1px); } .thb-dark-mode-on .rlv-btn-primary { background: #fff; color: #111 !important; } .thb-dark-mode-on .rlv-btn-primary:hover { background: var(--rlv-accent); } .rlv-episode__subscribe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rlv-episode__subscribe > span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-right: 4px; } .rlv-episode__subscribe a { display: inline-block; line-height: 0; opacity: .95; } .rlv-episode__subscribe a:hover { opacity: 1; transform: translateY(-1px); } .rlv-episode__subscribe img { height: 32px; width: auto; border-radius: 5px; display: block; } .rlv-episode__subscribe .rlv-rss { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid currentColor; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1; color: inherit !important; opacity: .8; } .rlv-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rlv-share > span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-right: 6px; } .rlv-share a, .rlv-share button { appearance: none; -webkit-appearance: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: transparent; color: inherit !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s, border-color .15s; } .thb-dark-mode-on .rlv-share a, .thb-dark-mode-on .rlv-share button { border-color: rgba(255,255,255,.2); } .rlv-share a:hover, .rlv-share button:hover { background: var(--rlv-accent); border-color: var(--rlv-accent); color: #111 !important; } .rlv-share svg { width: 16px; height: 16px; } .rlv-share .rlv-copied { font-size: 11px; opacity: .7; } .rlv-episode__content { margin-bottom: 40px; } .rlv-episode__content p::first-letter { font-size: inherit; float: none; margin: 0; padding: 0; line-height: inherit; font-weight: inherit; } .rlv-episode__content h2, .rlv-episode__content h3 { margin-top: 1.4em; } .rlv-episode__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 0 40px; border-top: 1px solid rgba(0,0,0,.1); } .thb-dark-mode-on .rlv-episode__bottom { border-top-color: rgba(255,255,255,.12); } .single-podcast .previous-episodes .heading h4 { text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin: 10px 0 30px; } @media (max-width: 767px) { .rlv-episode__hero { grid-template-columns: 1fr; grid-gap: 26px; text-align: center; padding-bottom: 28px; } .rlv-episode__art { max-width: 300px; margin: 0 auto; } .rlv-episode__meta, .rlv-episode__actions, .rlv-episode__subscribe, .rlv-share { justify-content: center; } } /* ---------- 4. Homepage podcast slider ------------------------------ */ .podcast-slide .episode-box .episode-left .bg { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: rgba(0,0,0,.2); box-shadow: 0 14px 40px rgba(0,0,0,.3); } .podcast-slide .episode-box .episode-left .bg img { width: 100%; height: 100%; object-fit: cover; } .podcast-slide .episode-box .episode-left .buttons { cursor: pointer; } .podcast-slide .play-btn.is-playing a span::after { opacity: .5; border-width: 10px; } /* ---------- 5. Episode cards (podcast network + show pages) --------- */ .rlv-episodes { padding: 10px 0 40px; } .rlv-episodes__heading { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin: 0 0 24px; text-align: left; } .rlv-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-gap: 26px; align-items: start; padding: 26px 0; border-top: 1px solid rgba(0,0,0,.1); } .thb-dark-mode-on .rlv-card { border-top-color: rgba(255,255,255,.12); } .rlv-card:last-child { border-bottom: 1px solid rgba(0,0,0,.1); } .thb-dark-mode-on .rlv-card:last-child { border-bottom-color: rgba(255,255,255,.12); } .rlv-card__art { display: block; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #222; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .rlv-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; } .rlv-card__series { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rlv-accent) !important; margin-bottom: 8px; } .rlv-card__title { font-size: 22px; line-height: 1.2; margin: 0 0 8px; text-transform: none !important; letter-spacing: -0.01em !important; } .rlv-card__title a { color: inherit !important; } .rlv-card__title a:hover { color: var(--rlv-accent) !important; } .rlv-card__meta { display: flex; gap: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; margin-bottom: 12px; } .rlv-card__desc { font-size: 15px; line-height: 1.55; margin: 0 0 16px; opacity: .85; } .rlv-card__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .rlv-btn-sm { padding: 10px 20px 10px 14px; font-size: 12px; } .rlv-btn-sm svg { width: 16px; height: 16px; } .rlv-card__more { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: inherit !important; opacity: .75; } .rlv-card__more:hover { opacity: 1; color: var(--rlv-accent) !important; } @media (max-width: 640px) { .rlv-card { grid-template-columns: 96px minmax(0,1fr); grid-gap: 16px; } .rlv-card__title { font-size: 18px; } .rlv-card__desc { display: none; } } /* Show (series) page header */ .rlv-show { padding: 30px 0 10px; } .rlv-show__title { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; margin: 0 0 22px; text-transform: none !important; letter-spacing: -0.015em !important; } .rlv-show__about { margin-top: 30px; font-size: 16px; line-height: 1.6; } .rlv-show__about p { margin-bottom: 1em; } /* ---------- 6. "Latest Episode" widget (right rail + footer) -------- */ .rlv-latest { max-width: 340px; } .rlv-latest__art { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #222; box-shadow: 0 12px 34px rgba(0,0,0,.3); margin-bottom: 14px; } .rlv-latest__art > a { display: block; width: 100%; height: 100%; } .rlv-latest__art img { width: 100%; height: 100%; object-fit: cover; display: block; } .rlv-latest__art .rlv-latest__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; background: transparent; color: #fff; border: 3px solid #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(0,0,0,.5); text-shadow: 0 0 15px #000; transition: transform .15s, background .15s; } .rlv-latest__art .rlv-latest__play svg { filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); } .rlv-latest__art .rlv-latest__play:hover { transform: scale(1.06); background: rgba(255,255,255,.18); } .rlv-latest__art .rlv-latest__play svg { width: 30px; height: 30px; margin-left: 3px; } .rlv-latest__art .rlv-latest__play.is-playing svg { margin-left: 0; } .rlv-latest__show { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rlv-accent); margin-bottom: 6px; } .rlv-latest__title { font-size: 17px; line-height: 1.3; margin: 0 0 6px; text-transform: none !important; letter-spacing: -0.01em !important; } .rlv-latest__title a { color: inherit !important; } .rlv-latest__title a:hover { color: var(--rlv-accent) !important; } .rlv-latest__meta { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; } .sidebar .widget_rlv_latest_episode { margin-bottom: 40px; } /* footer variant */ .footer .widget_rlv_latest_episode .rlv-latest, footer .widget_rlv_latest_episode .rlv-latest { max-width: 260px; } .footer .widget_rlv_latest_episode .rlv-latest__title, footer .widget_rlv_latest_episode .rlv-latest__title { font-size: 15px; } /* footer 5th column */ @media (min-width: 1024px) { #footer .footer-row { display: flex; flex-wrap: wrap; align-items: flex-start; } #footer .footer-row > .rlv-footer-episode { margin-left: auto; width: 300px; flex: 0 0 300px; } } /* compact footer version: small square thumb on the left, text on the right — keeps footer height unchanged */ #footer .rlv-footer-episode .rlv-latest { max-width: 300px; display: grid; grid-template-columns: 96px minmax(0,1fr); grid-column-gap: 14px; align-items: center; } #footer .rlv-footer-episode .rlv-latest__art { grid-row: 1 / span 3; margin: 0; box-shadow: 0 6px 18px rgba(0,0,0,.3); } #footer .rlv-footer-episode .rlv-latest__art .rlv-latest__play { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-width: 2px; } #footer .rlv-footer-episode .rlv-latest__art .rlv-latest__play svg { width: 16px; height: 16px; margin-left: 2px; } #footer .rlv-footer-episode .rlv-latest__show { margin-bottom: 4px; font-size: 9px; } #footer .rlv-footer-episode .rlv-latest__title { font-size: 13px; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #footer .rlv-footer-episode .rlv-latest__meta { font-size: 9px; } /* ---------- 7. Apple Podcasts follow CTAs ---------------------------- */ .rlv-apple-follow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: inherit !important; text-decoration: none; opacity: .85; white-space: nowrap; } .rlv-apple-follow svg { width: 16px; height: 16px; flex: 0 0 16px; } .rlv-apple-follow:hover { opacity: 1; color: var(--rlv-accent) !important; } .rlv-player__follow { padding: 8px 12px; border: 1px solid rgba(0,0,0,.18); border-radius: 999px; } .thb-dark-mode-on .rlv-player__follow { border-color: rgba(255,255,255,.22); } .rlv-player__follow:hover { border-color: var(--rlv-accent); } .rlv-player__follow[hidden] { display: none; } .rlv-player__inner { grid-template-columns: auto minmax(0, 1fr) auto minmax(180px, 2fr) auto auto; } .rlv-latest__follow { margin-top: 10px; } #footer .rlv-footer-episode .rlv-latest__follow { display: none; } .rlv-nudge { position: absolute; left: 0; right: 0; bottom: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 44px 10px 20px; background: var(--rlv-accent); color: #111; font-size: 13px; font-weight: 600; box-shadow: 0 -6px 20px rgba(0,0,0,.2); animation: rlv-nudge-in .35s ease-out; } .rlv-nudge[hidden] { display: none; } @keyframes rlv-nudge-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } } .rlv-nudge__btn { background: #111; color: #fff !important; border-radius: 999px; padding: 8px 16px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: 1; } .rlv-nudge__btn:hover { background: #000; color: #fff !important; } .rlv-nudge__close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: #111; font-size: 22px; line-height: 1; width: 30px; height: 30px; cursor: pointer; opacity: .7; } .rlv-nudge__close:hover { opacity: 1; } @media (max-width: 767px) { .rlv-player__inner { grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "art meta close" "progress progress progress"; } .rlv-player__follow { display: none; } .rlv-nudge { font-size: 12px; padding: 10px 40px 10px 14px; gap: 8px; } } /* ---------- 8. Archive / section headers: fix theme defaults site-wide ---- Theme options apply letter-spacing:-0.2em to every h1 at >=1024px, which squashes category/tag/search titles ("JUSTICE", "LIFE"). The title column is also only 5/12 wide so sub-category chips wrap into a vertical stack. */ @media (min-width: 1024px) { .archive-title h1, .search-title h1, .page-title h1 { letter-spacing: -0.02em !important; } } .search-title .row.align-center > .columns { flex: 0 0 100%; max-width: 100%; } .search-title h1 { margin-bottom: 18px; font-weight: 700; } .search-title .archive-sub-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; margin: 0 auto 10px; } .search-title .archive-sub-categories a { margin: 0; } .search-title.archive-title { padding-top: 40px; padding-bottom: 30px; } /* 8b. Section tagline (the category description under the title/logo) — 2026-10-08 Was 14px upright and competed with the logo. One size down and italic. Balanced wrap, plus side padding on phones, so a one-sentence tagline never leaves a single word alone on its second line. */ body.archive .archive-title p { font-size: 13px; font-style: italic; line-height: 1.55; text-wrap: balance; } @media (max-width: 767px) { body.archive .archive-title p { padding-left: 8%; padding-right: 8%; } } /* Reject Apathy: no tagline on phones (Cameron, 2026-10-08 — screen space). Logo then chips. The text stays in the HTML. Scoped to this section on purpose: the other taglines (Faith + Work, Quarterlife, Wellness) carry a sponsor credit and stay visible. */ @media (max-width: 767px) { .category-justice .archive-title p { display: none; } } /* ------------------------------------------------------------------ 9. Ad containers (2026-09-28) — empty slots filled by NextMillennium. They collapse to nothing when unfilled so no blank gaps appear. ------------------------------------------------------------------ */ .rlv-ad { display:block; text-align:center; margin:0 auto; clear:both; } .rlv-ad:empty { margin:0; padding:0; height:0; } .rlv-ad--rect { max-width:100%; } .c0 .rlv-ad--rect, .c1 .rlv-ad--rect { float:none; } .c0:has(.rlv-ad:empty), .c1:has(.rlv-ad:empty) { padding:0 !important; } .rlv-ad--sidebar-lower { margin-top:24px; } .rlv-ad--sidebar-lower:empty { margin-top:0; } /* ------------------------------------------------------------------ 10. Legacy sub-category chips hidden from section headers (2026-09-28) Life: only Career & Money / Relationships / Leadership / College / Wellness. Current: Science is not in the nav. Categories still exist and still work. ------------------------------------------------------------------ */ .archive-sub-categories a[href*="/college/graduate/"], .archive-sub-categories a[href*="/college/non-traditional/"], .archive-sub-categories a[href*="/college/seminary/"], .archive-sub-categories a[href*="/college/undergrad-relevantu28/"], .archive-sub-categories a[href*="/life5/faithandwork/"], .archive-sub-categories a[href*="/life5/new-you/"], .archive-sub-categories a[href*="/life5/quarterlife/"], .archive-sub-categories a[href*="/wellness/mentalhealth/"], .archive-sub-categories a[href*="/current/science/"] { display:none !important; } /* ------------------------------------------------------------------ 11. Cross-promo blocks (2026-09-28): .rlv-more (article grids), .rlv-promo-row (landing pages), archive description under section titles ------------------------------------------------------------------ */ .rlv-more { margin:48px 0 24px; padding-top:28px; border-top:1px solid rgba(128,128,128,.25); } .rlv-more__head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; } .rlv-more__title { margin:0; font-size:22px; font-weight:800; letter-spacing:-.01em; } .rlv-more__all { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; opacity:.8; } .rlv-more__all:hover { opacity:1; } .rlv-more__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } @media (max-width:1023px){ .rlv-more__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } } .rlv-more__item { min-width:0; } .rlv-more__thumb { display:block; aspect-ratio:3/2; overflow:hidden; border-radius:4px; background:rgba(128,128,128,.15); margin-bottom:10px; } .rlv-more__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .rlv-more__item:hover .rlv-more__thumb img { transform:scale(1.04); } .rlv-more__cat { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.65; margin-bottom:4px; } .rlv-more__h { margin:0; font-size:17px; line-height:1.3; font-weight:700; } .rlv-more__h a { color:inherit; } .post-detail .rlv-more { margin-top:32px; } .rlv-promo-row { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin:56px auto 24px; padding:36px 0 0; border-top:1px solid rgba(128,128,128,.25); max-width:1080px; } @media (max-width:767px){ .rlv-promo-row { grid-template-columns:1fr; gap:32px; } } .rlv-promo-row__pod .rlv-latest { max-width:360px; } .rlv-promo-row__news p { margin:8px 0 16px; opacity:.8; } .rlv-promo-row__news .mailster-form { max-width:420px; } .archive-title .archive-description, .archive-title .taxonomy-description { max-width:620px; margin:-6px auto 18px; font-size:16px; line-height:1.5; opacity:.8; } .archive-title .archive-description p, .archive-title .taxonomy-description p { margin:0; } /* Ad slot spacing (media-kit sizes: 1200x300 billboard, 300x100 mobile, 728x90 leaderboard) 2026-09-28 */ .rlv-billboard-slot { display:block; margin:10px auto 0; } .rlv-billboard-slot:has(.rlv-ad:empty) { margin:0; } .rlv-ad--billboard { max-width:1200px; } .rlv-ad--mobile-top { max-width:300px; } .rlv-ad--leaderboard, .rlv-ad--footer { max-width:728px; } .rlv-footer-slot { display:block; margin:20px auto 30px; } .rlv-footer-slot:has(.rlv-ad:empty) { margin:0; } /* ------------------------------------------------------------------ 12. Article rhythm (2026-09-28): breathing room between headings and embeds. The theme zeroes heading top margins and empty

s collapse, so a subhead landed 8px above the next Instagram/X embed. ------------------------------------------------------------------ */ .post-content > h2, .post-content > h3, .post-content > h4 { margin-top:44px; margin-bottom:18px; } .post-content > h2:first-child, .post-content > h3:first-child { margin-top:0; } .post-content > .instagram-media, .post-content > .twitter-tweet, .post-content > .tiktok-embed, .post-content > iframe, .post-content > figure, .post-content > .wp-block-embed, .post-content > blockquote { margin-bottom:28px; } .post-content > p:empty { display:none; } /* ------------------------------------------------------------------ 13. Article header polish (2026-09-28) - Sticky "Now Reading" header: logo 30% smaller (60px -> 42px) - Section tag in RELEVANT gold on every article template - Tag and byline sit an equal distance from the headline; byline dropped lower ------------------------------------------------------------------ */ header.header.fixed .logolink img.logoimg { height:30px !important; width:auto !important; } /* 30px (was 42) 2026-09-28: sticky bar is wayfinding, matches mobile header */ .post-detail .post-category, .post-detail .post-category a { color:#dbba74 !important; } .post-detail .post-category { margin-bottom:10px !important; } /* the headline box carries ~10px of internal leading, so 10px above reads equal to 22px below */ .post-detail .post-title.entry-header { margin-bottom:22px !important; } .post-detail .thb-post-title-bottom { margin-top:0 !important; } @media (max-width:767px){ .post-detail .post-category { margin-bottom:16px !important; } .post-detail .post-title.entry-header { margin-bottom:16px !important; } } /* ------------------------------------------------------------------ 14. Bookmark button in the article share bar (2026-09-28) The plugin's hidden label/spinner spans were pushing the icon off-centre, its border only drew on three sides in a lighter grey than the other circles, and the icon was a flat white PNG. Now: same ring as the other buttons, icon centred and tinted RELEVANT gold via a mask. ------------------------------------------------------------------ */ .thb-social-top-buttons .cbxwpbkmarktrig { display:flex !important; align-items:center !important; justify-content:center !important; width:44px; height:44px; padding:0 !important; border:1px solid rgba(255,255,255,.15) !important; border-radius:50% !important; } body:not(.thb-dark-mode-on) .thb-social-top-buttons .cbxwpbkmarktrig { border-color:rgba(0,0,0,.15) !important; } .thb-social-top-buttons .cbxwpbkmarktrig .cbxwpbkmarktrig-icon, .thb-social-top-buttons .cbxwpbkmarktrig .cbxwpbkmarktrig-label, .thb-social-top-buttons .cbxwpbkmarktrig .ld { display:none !important; } .thb-social-top-buttons .cbxwpbkmarktrig::before { content:""; display:block; width:13px; height:15px; margin:0; background-color:#dbba74 !important; background-image:none !important; -webkit-mask:url("/wp-content/themes/theissue-child/images/bookmark_before_2x.png") center / contain no-repeat; mask:url("/wp-content/themes/theissue-child/images/bookmark_before_2x.png") center / contain no-repeat; } .thb-social-top-buttons .cbxwpbkmarktrig.cbxwpbkmarktrig-button-remove::before, .thb-social-top-buttons .cbxwpbkmarkwrap.bookmarked .cbxwpbkmarktrig::before { background-color:#fff !important; } /* ------------------------------------------------------------------ 15. Share bar icons (2026-09-28): X, Threads, Instagram as inline SVG masks (the theme's icon font predates all three). Bookmark button removed. ------------------------------------------------------------------ */ .rlv-icon { display:inline-block; width:15px; height:15px; background-color:currentColor; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; vertical-align:middle; } .rlv-icon-x { -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z%22%2F%3E%3C%2Fsvg%3E"); } .rlv-icon-threads { -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.186%2024h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35%2018.44%201.5%2015.586%201.472%2012.01v-.017c.03-3.579.879-6.43%202.525-8.482C5.845%201.205%208.6.024%2012.18%200h.014c2.746.02%205.043.725%206.826%202.098%201.677%201.29%202.858%203.13%203.509%205.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54%202.717C4.307%206.504%203.616%208.914%203.589%2012c.027%203.086.718%205.496%202.057%207.164%201.43%201.783%203.631%202.698%206.54%202.717%202.623-.02%204.358-.631%205.8-2.045%201.647-1.613%201.618-3.593%201.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192%201.352-.622%202.446-1.284%203.272-.886%201.102-2.14%201.704-3.73%201.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285%201.33-3.082.88-.76%202.119-1.207%203.583-1.291a13.853%2013.853%200%200%201%203.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844%200-1.992.232-2.721%201.32L7.734%207.847c.98-1.454%202.568-2.256%204.478-2.256h.044c3.194.02%205.097%201.975%205.287%205.388.108.046.216.094.321.142%201.49.7%202.58%201.761%203.154%203.07.797%201.82.87%204.79-1.548%207.158-1.85%201.81-4.094%202.628-7.277%202.65Zm1.003-11.69c-.242%200-.487.007-.739.021-1.836.103-2.98.946-2.916%202.143.067%201.256%201.452%201.839%202.784%201.767%201.224-.065%202.818-.543%203.086-3.71a10.5%2010.5%200%200%200-2.215-.221z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12.186%2024h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35%2018.44%201.5%2015.586%201.472%2012.01v-.017c.03-3.579.879-6.43%202.525-8.482C5.845%201.205%208.6.024%2012.18%200h.014c2.746.02%205.043.725%206.826%202.098%201.677%201.29%202.858%203.13%203.509%205.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54%202.717C4.307%206.504%203.616%208.914%203.589%2012c.027%203.086.718%205.496%202.057%207.164%201.43%201.783%203.631%202.698%206.54%202.717%202.623-.02%204.358-.631%205.8-2.045%201.647-1.613%201.618-3.593%201.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192%201.352-.622%202.446-1.284%203.272-.886%201.102-2.14%201.704-3.73%201.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285%201.33-3.082.88-.76%202.119-1.207%203.583-1.291a13.853%2013.853%200%200%201%203.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844%200-1.992.232-2.721%201.32L7.734%207.847c.98-1.454%202.568-2.256%204.478-2.256h.044c3.194.02%205.097%201.975%205.287%205.388.108.046.216.094.321.142%201.49.7%202.58%201.761%203.154%203.07.797%201.82.87%204.79-1.548%207.158-1.85%201.81-4.094%202.628-7.277%202.65Zm1.003-11.69c-.242%200-.487.007-.739.021-1.836.103-2.98.946-2.916%202.143.067%201.256%201.452%201.839%202.784%201.767%201.224-.065%202.818-.543%203.086-3.71a10.5%2010.5%200%200%200-2.215-.221z%22%2F%3E%3C%2Fsvg%3E"); width:16px; height:16px; } .rlv-icon-instagram { -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.163c3.204%200%203.584.012%204.85.07%203.252.148%204.771%201.691%204.919%204.919.058%201.265.069%201.645.069%204.849%200%203.205-.012%203.584-.069%204.849-.149%203.225-1.664%204.771-4.919%204.919-1.266.058-1.644.07-4.85.07-3.204%200-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849%200-3.204.013-3.583.07-4.849.149-3.227%201.664-4.771%204.919-4.919%201.266-.057%201.645-.069%204.849-.069zm0-2.163C8.741%200%208.333.014%207.053.072%202.695.272.273%202.69.073%207.052.014%208.333%200%208.741%200%2012c0%203.259.014%203.668.072%204.948.2%204.358%202.618%206.78%206.98%206.98C8.333%2023.986%208.741%2024%2012%2024c3.259%200%203.668-.014%204.948-.072%204.354-.2%206.782-2.618%206.979-6.98.059-1.28.073-1.689.073-4.948%200-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014%2015.259%200%2012%200zm0%205.838a6.162%206.162%200%201%200%200%2012.324%206.162%206.162%200%200%200%200-12.324zM12%2016a4%204%200%201%201%200-8%204%204%200%200%201%200%208zm6.406-11.845a1.44%201.44%200%201%200%200%202.881%201.44%201.44%200%200%200%200-2.881z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.163c3.204%200%203.584.012%204.85.07%203.252.148%204.771%201.691%204.919%204.919.058%201.265.069%201.645.069%204.849%200%203.205-.012%203.584-.069%204.849-.149%203.225-1.664%204.771-4.919%204.919-1.266.058-1.644.07-4.85.07-3.204%200-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849%200-3.204.013-3.583.07-4.849.149-3.227%201.664-4.771%204.919-4.919%201.266-.057%201.645-.069%204.849-.069zm0-2.163C8.741%200%208.333.014%207.053.072%202.695.272.273%202.69.073%207.052.014%208.333%200%208.741%200%2012c0%203.259.014%203.668.072%204.948.2%204.358%202.618%206.78%206.98%206.98C8.333%2023.986%208.741%2024%2012%2024c3.259%200%203.668-.014%204.948-.072%204.354-.2%206.782-2.618%206.979-6.98.059-1.28.073-1.689.073-4.948%200-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014%2015.259%200%2012%200zm0%205.838a6.162%206.162%200%201%200%200%2012.324%206.162%206.162%200%200%200%200-12.324zM12%2016a4%204%200%201%201%200-8%204%204%200%200%201%200%208zm6.406-11.845a1.44%201.44%200%201%200%200%202.881%201.44%201.44%200%200%200%200-2.881z%22%2F%3E%3C%2Fsvg%3E"); width:16px; height:16px; } .thb-social-top-buttons .social-x, .thb-social-top-buttons .social-threads, .thb-social-bottom .social-x, .thb-social-bottom .social-threads { color:#fff; } body:not(.thb-dark-mode-on) .social-x, body:not(.thb-dark-mode-on) .social-threads { color:#111; } .social-instagram { color:#e1306c; } .rlv-share-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:#111; color:#fff; padding:12px 18px; border-radius:999px; font-size:14px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.35); opacity:0; transition:opacity .25s, transform .25s; z-index:99999; pointer-events:none; } .rlv-share-toast.is-on { opacity:1; transform:translateX(-50%) translateY(0); } /* ------------------------------------------------------------------ 16. Twitter bird -> X logo everywhere the theme's icon font draws it (header social row, footer, mobile menu, author profiles). 2026-09-28 ------------------------------------------------------------------ */ .thb-icon-twitter::before { content:"" !important; display:inline-block; width:1em; height:1em; background-color:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; vertical-align:-0.1em; } /* ------------------------------------------------------------------ 17. Threads profile icon in the theme social rows (header / footer / mobile menu). Link is injected by rlv_threads_profile_links(). 2026-09-28 ------------------------------------------------------------------ */ .thb-icon-threads::before { content:"" !important; display:inline-block; width:1em; height:1em; background-color:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192%20192%22%3E%3Cpath%20d%3D%22M141.5%2088.9c-.8-.4-1.6-.8-2.5-1.1-1.4-26.6-16-41.8-40.4-42h-.3c-14.6%200-26.8%206.2-34.3%2017.6l13.4%209.2c5.6-8.5%2014.4-10.3%2020.9-10.3h.2c8.1.1%2014.2%202.4%2018.1%207%202.9%203.3%204.8%207.9%205.7%2013.7-7.2-1.2-15-1.6-23.3-1.1-23.4%201.3-38.5%2015-37.5%2034%20.5%209.6%205.3%2017.9%2013.5%2023.3%206.9%204.6%2015.8%206.8%2025.1%206.3%2012.2-.7%2021.8-5.3%2028.5-13.8%205.1-6.5%208.3-14.8%209.7-25.3%205.8%203.5%2010.1%208.1%2012.5%2013.7%204.1%209.4%204.3%2024.9-8.4%2037.6-11.1%2011.1-24.5%2015.9-44.7%2016.1-22.4-.2-39.4-7.4-50.4-21.4-10.3-13.1-15.7-32.1-15.9-56.4.2-24.3%205.6-43.3%2015.9-56.4%2011-14%2028-21.2%2050.4-21.4%2022.6.2%2039.8%207.4%2051.3%2021.5%205.6%206.9%209.8%2015.6%2012.6%2025.7l15.7-4.2c-3.4-12.5-8.7-23.3-15.9-32.2C167%2015.8%20144.9%206.3%20115.5%206.1h-.1C86.1%206.3%2063.5%2016.2%2048.2%2035.5%2034.6%2052.7%2027.6%2076.6%2027.4%2096.5v.1c.2%2019.9%207.2%2043.8%2020.8%2061%2015.3%2019.3%2037.9%2029.2%2067.2%2029.4h.1c26.1-.2%2044.4-7%2059.6-22.2%2016.7-16.7%2016.2-37.6%2010.7-50.5-4-9.2-11.5-16.7-21.7-21.7zM103.5%20128c-10.3.6-20.9-4-21.5-13.9-.4-7.3%205.2-15.5%2022.1-16.5%201.9-.1%203.8-.2%205.7-.2%206.1%200%2011.8.6%2017%201.7-1.9%2024.2-13.3%2028.1-23.3%2028.9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192%20192%22%3E%3Cpath%20d%3D%22M141.5%2088.9c-.8-.4-1.6-.8-2.5-1.1-1.4-26.6-16-41.8-40.4-42h-.3c-14.6%200-26.8%206.2-34.3%2017.6l13.4%209.2c5.6-8.5%2014.4-10.3%2020.9-10.3h.2c8.1.1%2014.2%202.4%2018.1%207%202.9%203.3%204.8%207.9%205.7%2013.7-7.2-1.2-15-1.6-23.3-1.1-23.4%201.3-38.5%2015-37.5%2034%20.5%209.6%205.3%2017.9%2013.5%2023.3%206.9%204.6%2015.8%206.8%2025.1%206.3%2012.2-.7%2021.8-5.3%2028.5-13.8%205.1-6.5%208.3-14.8%209.7-25.3%205.8%203.5%2010.1%208.1%2012.5%2013.7%204.1%209.4%204.3%2024.9-8.4%2037.6-11.1%2011.1-24.5%2015.9-44.7%2016.1-22.4-.2-39.4-7.4-50.4-21.4-10.3-13.1-15.7-32.1-15.9-56.4.2-24.3%205.6-43.3%2015.9-56.4%2011-14%2028-21.2%2050.4-21.4%2022.6.2%2039.8%207.4%2051.3%2021.5%205.6%206.9%209.8%2015.6%2012.6%2025.7l15.7-4.2c-3.4-12.5-8.7-23.3-15.9-32.2C167%2015.8%20144.9%206.3%20115.5%206.1h-.1C86.1%206.3%2063.5%2016.2%2048.2%2035.5%2034.6%2052.7%2027.6%2076.6%2027.4%2096.5v.1c.2%2019.9%207.2%2043.8%2020.8%2061%2015.3%2019.3%2037.9%2029.2%2067.2%2029.4h.1c26.1-.2%2044.4-7%2059.6-22.2%2016.7-16.7%2016.2-37.6%2010.7-50.5-4-9.2-11.5-16.7-21.7-21.7zM103.5%20128c-10.3.6-20.9-4-21.5-13.9-.4-7.3%205.2-15.5%2022.1-16.5%201.9-.1%203.8-.2%205.7-.2%206.1%200%2011.8.6%2017%201.7-1.9%2024.2-13.3%2028.1-23.3%2028.9z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; vertical-align:-0.12em; } .thb-social-links-container .social-link-threads:hover .thb-icon-threads::before { background-color:currentColor; } /* ------------------------------------------------------------------ 18. Share bars. (a) Sticky/side circles (.thb-social-top.style2 and .thb-social-fixed): every glyph neutral — the theme painted Facebook brand-blue while the rest inherited white. (b) Filled bottom buttons (.thb-social-footer): brand colors for the replaced networks. 2026-09-28 ------------------------------------------------------------------ */ .thb-social-top.style2 .social-button-holder .social, .thb-social-fixed .social-button-holder .social { color:inherit !important; } .thb-social-top.style2 .social-button-holder .social:hover, .thb-social-fixed .social-button-holder .social:hover { color:#fff !important; } .thb-social-footer .ps-social-share.social-x, .thb-social-footer .ps-social-share.social-twitter { background-color:#0f1419 !important; } .thb-social-footer .ps-social-share.social-threads { background-color:#101010 !important; } .thb-social-footer .ps-social-share.social-instagram { background-color:#d62976 !important; } /* ------------------------------------------------------------------ 19. Mobile headline. Theme drops the article H1 to 26px but loosens line-height to 1.2 (desktop is 65px / 0.9), which reads airy on phones. Larger type, tight leading, same 4-line height. 2026-09-28 ------------------------------------------------------------------ */ @media (max-width: 767px) { .post-detail .post-title.entry-header h1.entry-title { font-size:30px !important; line-height:1.05 !important; letter-spacing:-0.01em; } } /* ------------------------------------------------------------------ 20. Mobile home page. 90%+ of traffic is phones. Headline sizes brought up to major-site norms, empty page-builder rows collapsed, section spacing tightened. 2026-09-28 ------------------------------------------------------------------ */ /* empty page-builder rows / columns (no elements inside) take up 100px each on the home page: collapse them */ .no-vc > .wpb_row:not(:has(.wpb_wrapper > *)) { display:none !important; } .wpb_text_column:not(:has(.wpb_wrapper > *)) { display:none !important; margin:0 !important; } .wpb_widgetised_column .widget:last-child { margin-bottom:0 !important; } @media (max-width:767px){ .home .vc_empty_space { display:none !important; } .home .sidebar.wpb_column:not(:has(.widget)) { display:none !important; } } @media (max-width:767px){ .home .non-VC-page { padding-top:20px !important; padding-bottom:12px !important; } .home .no-vc .wpb_row { padding-top:28px !important; padding-bottom:16px !important; } .home .sidebar.wpb_column { margin-bottom:0 !important; } .post.style13 .post-title h4, .post.style13 .post-title h4 a { font-size:22px !important; line-height:1.18 !important; letter-spacing:-0.01em; } .post.style1 .post-title h5, .post.style1 .post-title h5 a { font-size:19px !important; line-height:1.22 !important; } .post-inner-content .post-title h3, .post-inner-content .post-title h3 a { font-size:30px !important; line-height:1.12 !important; letter-spacing:-0.01em; } .thumbnail-style4 .post-title h6, .thumbnail-style4 .post-title h6 a { font-size:16px !important; line-height:1.25 !important; } .thb-widget-title { margin-bottom:14px !important; } } @media (max-width:767px){ .home .no-vc > .wpb_row:not(:has(.wpb_wrapper > *:not(.vc_empty_space))) { display:none !important; } .home .vc_section { padding-top:16px !important; padding-bottom:0 !important; margin-bottom:24px !important; } .home .footer { padding-top:32px !important; } .home .thb-post-grid .post:last-child { margin-bottom:12px !important; } } /* ------------------------------------------------------------------ 21. Mobile home page CONTENT ORDER (Cameron, 2026-09-28): newest first. Desktop order untouched; flex order only under 768px. ------------------------------------------------------------------ */ @media (max-width:767px){ /* Content order on phones: The Latest -> latest episode -> newsletter -> issue -> trending -> editor picks -> podcast video -> featured grid -> Features -> sections */ .home .no-vc { display:flex !important; flex-direction:column; } .home .no-vc > * { order:10; } .home .no-vc > .wpb_row:nth-child(3) { order:1; } .home .no-vc > .vc_section { order:2; } .home .no-vc > .vc_custom_1673469930504 { order:3; } .home .wpb_widgetised_column { display:flex !important; flex-direction:column; } .home .wpb_widgetised_column > * { order:10; } .home .wpb_widgetised_column > .widget_rlv_latest_episode { order:1; } .home .wpb_widgetised_column > .widget_mailster_signup { order:2; } .home .wpb_widgetised_column > .widget_media_image { order:3; } .home .wpb_widgetised_column > .thb_widget_posts { order:4; } .home .wpb_widgetised_column > .thb-fixed { order:5; position:static !important; } } /* ------------------------------------------------------------------ 22. Mobile home page: features vs. slices (Cameron, 2026-09-28). Two newest featured cards lead (big overlay headline, "Featured" eyebrow) -> The Latest as a compact feed (108px thumb left, 17px headline) -> episode / newsletter / issue / trending / picks -> podcast video -> "More Features" (rest of the featured block) -> Features -> Current (also feed rows) -> sections. Under 768px only. ------------------------------------------------------------------ */ @media (max-width:767px){ /* --- split the featured block: first two cards lead the page, the rest return after the feed --- */ .home .no-vc > .vc_custom_1673469930504, .home .no-vc > .vc_custom_1673469930504 > .wpb_column, .home .no-vc > .vc_custom_1673469930504 > .wpb_column > .vc_column-inner, .home .no-vc > .vc_custom_1673469930504 > .wpb_column > .vc_column-inner > .wpb_wrapper, .home .no-vc .vc_custom_1673469930504 .thb-post-grid-style10 { display:contents !important; } .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns { order:0; width:100%; padding:0; } .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:nth-child(3), .home .vc_custom_1673469930504 .thb-post-grid-style1-left { order:4; } .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:first-child { margin-top:22px; } .home .vc_custom_1673469930504 .thb-post-grid-style1-left { width:100%; } /* eyebrows so the scroll reads as different content types */ .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:first-child::before, .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:nth-child(3)::before { content:"Featured"; display:block; text-align:center; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:#dbba74; font-weight:700; margin:0 0 12px; } .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:nth-child(3)::before { content:"More Features"; margin-top:8px; } /* feature cards: big overlay headline */ .home .post.style13 .post-title h4, .home .post.style13 .post-title h4 a { font-size:25px !important; line-height:1.12 !important; } .home .post.style13 { margin-bottom:22px !important; } /* The Latest: compact feed rows (thumb left, text right) */ .home .thb-post-grid-style2 .post.style3 { margin-bottom:0 !important; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.10); } .thb-dark-mode-off.home .thb-post-grid-style2 .post.style3, .home.light .thb-post-grid-style2 .post.style3 { border-color:rgba(0,0,0,0.10); } .home .thb-post-grid-style2 .post.style3 > .row { display:flex !important; flex-direction:row !important; align-items:flex-start; flex-wrap:nowrap !important; gap:14px; } .home .thb-post-grid-style2 .post.style3 > .row > .medium-5 { flex:0 0 108px; width:108px !important; max-width:108px; padding:0 !important; } .home .thb-post-grid-style2 .post.style3 > .row > .medium-7 { flex:1 1 0 !important; min-width:0; width:auto !important; max-width:none !important; padding:0 !important; } .home .thb-post-grid-style2 .post.style3 figure.post-gallery { margin:0 !important; } .home .thb-post-grid-style2 .post.style3 figure img { width:108px !important; height:108px !important; object-fit:cover; display:block; } .home .thb-post-grid-style2 .post.style3 .post-inner-content { padding:0 !important; text-align:left !important; } .home .thb-post-grid-style2 .post.style3 .post-category { margin-bottom:4px !important; font-size:11px !important; } .home .thb-post-grid-style2 .post.style3 .post-title { margin-bottom:6px !important; } .home .thb-post-grid-style2 .post.style3 .post-title h3, .home .thb-post-grid-style2 .post.style3 .post-title h3 a { font-size:17px !important; line-height:1.25 !important; letter-spacing:0 !important; } .home .thb-post-grid-style2 .post.style3 .thb-post-bottom { font-size:11px !important; margin:0 !important; } .home .thb-post-grid-style2 .post.style3 .post-excerpt { display:none !important; } .home .thb-post-grid-style2 { margin-bottom:18px !important; } } /* ------------------------------------------------------------------ 23. End-of-article share buttons: one even row of five (theme wrapped them 4+1 at fixed widths). Dark buttons get a hairline so they read on the black template; icons only on narrow phones. 2026-09-28 ------------------------------------------------------------------ */ .thb-social-footer .thb-social-footer-buttons { display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; width:100%; } .thb-social-footer .social-button-holder { width:auto !important; margin:0 !important; min-width:0; } .thb-social-footer .social-button-holder .ps-social-share { width:100% !important; height:46px; margin:0 !important; justify-content:center; box-sizing:border-box; border:1px solid transparent; } .thb-social-footer .ps-social-share.social-x, .thb-social-footer .ps-social-share.social-twitter, .thb-social-footer .ps-social-share.social-threads { border-color:rgba(255,255,255,0.22) !important; } .thb-social-footer .ps-social-share.social-email { background-color:#3a3a3a !important; } .thb-dark-mode-off .thb-social-footer .ps-social-share.social-x, .thb-dark-mode-off .thb-social-footer .ps-social-share.social-threads { border-color:transparent !important; } @media (max-width:600px) { .thb-social-footer .thb-social-footer-buttons { gap:6px; } .thb-social-footer .social-button-holder .ps-social-share .thb-social-text, .thb-social-footer .social-button-holder .ps-social-share span:not(.thb-social-icon) { display:none !important; } .thb-social-footer .social-button-holder .ps-social-share .thb-social-icon { margin:0 !important; } } /* 23b. Four matching buttons (Cameron): email dropped from the bottom bar (still in the side bar); one neutral outlined style that matches the side circles; brand color only on hover. */ .thb-social-footer .thb-social-footer-buttons { grid-template-columns:repeat(4, minmax(0,1fr)); } .thb-social-footer .social-button-holder:has(.social-email) { display:none !important; } .thb-social-footer .social-button-holder .ps-social-share { background-color:transparent !important; border:1px solid rgba(255,255,255,0.28) !important; color:#fff !important; transition:background-color .15s, border-color .15s; } .thb-social-footer .social-button-holder .ps-social-share .rlv-icon { background-color:#fff; } .thb-social-footer .social-button-holder .ps-social-share:hover { border-color:transparent !important; } .thb-social-footer .ps-social-share.social-facebook:hover { background-color:#3b5998 !important; } .thb-social-footer .ps-social-share.social-x:hover, .thb-social-footer .ps-social-share.social-twitter:hover { background-color:#0f1419 !important; border-color:rgba(255,255,255,0.5) !important; } .thb-social-footer .ps-social-share.social-threads:hover { background-color:#101010 !important; border-color:rgba(255,255,255,0.5) !important; } .thb-social-footer .ps-social-share.social-instagram:hover { background-color:#d62976 !important; } .thb-dark-mode-off .thb-social-footer .social-button-holder .ps-social-share { border-color:rgba(0,0,0,0.35) !important; color:#111 !important; } .thb-dark-mode-off .thb-social-footer .social-button-holder .ps-social-share .rlv-icon { background-color:#111; } .thb-dark-mode-off .thb-social-footer .social-button-holder .ps-social-share:hover { color:#fff !important; } .thb-dark-mode-off .thb-social-footer .social-button-holder .ps-social-share:hover .rlv-icon { background-color:#fff; } @media (max-width:600px) { .thb-social-footer .social-button-holder .ps-social-share .thb-social-text { display:inline !important; } .thb-social-footer .social-button-holder .ps-social-share { font-size:10px; } } /* ------------------------------------------------------------------ 24. "More in {Section}" now sits at the bottom of the article column (thb_article_end) so the column fills out beside the sidebar. 2x2 there on desktop; 2-up on tablets; 1-up on phones. 2026-09-28 ------------------------------------------------------------------ */ .rlv-more-inline .rlv-more { margin:40px 0 8px; } .rlv-more-inline .rlv-more__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .rlv-more-inline .rlv-more__h { font-size:17px; line-height:1.25; } @media (max-width:600px){ .rlv-more-inline .rlv-more__grid { grid-template-columns:1fr; gap:20px; } .rlv-more-inline .rlv-more__thumb { aspect-ratio:16/9; } } /* ------------------------------------------------------------------ 25. Mobile article typography brought to industry norms (NYT / Rolling Stone / Complex phone sites): body 18px/1.6, 18px gutters, 22px paragraph gap, H1 32px, byline 14px, meta 12px, H2 22px, H3 20px, real pull-quote style (21px italic, gold rule), captions 13px; home feed headlines 18px. Under 768px only. 2026-09-28 ------------------------------------------------------------------ */ @media (max-width:767px){ /* article body */ .post-content { padding-left:3px; padding-right:3px; } .post-content p, .post-content li { font-size:18px !important; line-height:1.6 !important; } .post-content p { margin-bottom:22px !important; } .post-content li { margin-bottom:8px; } .post-content h2 { font-size:22px !important; line-height:1.3 !important; font-weight:700 !important; margin:36px 0 14px !important; } .post-content h3 { font-size:20px !important; line-height:1.3 !important; font-weight:700 !important; margin:30px 0 12px !important; } .post-content blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed) { font-size:21px !important; line-height:1.45 !important; font-style:italic; margin:28px 0 !important; padding:2px 0 2px 18px !important; border-left:3px solid #dbba74; } .post-content blockquote:not(.instagram-media):not(.twitter-tweet):not(.tiktok-embed) p { font-size:21px !important; line-height:1.45 !important; margin-bottom:10px !important; } .post-content figcaption, .post-content .wp-caption-text { font-size:13px !important; line-height:1.45 !important; opacity:.72; margin-top:8px; } /* headline block */ .post-detail .post-title.entry-header h1.entry-title { font-size:32px !important; line-height:1.05 !important; } .post-detail .post-category, .post-detail .post-category a { font-size:12px !important; letter-spacing:.08em; } .post-detail .post-author, .post-detail .thb-post-bottom .post-author, .post-detail .post-author a { font-size:14px !important; line-height:1.3 !important; } .post-detail .thb-post-bottom .post-date, .post-detail .thb-post-bottom .post-read { font-size:12px !important; line-height:1.4 !important; } /* home feed rows */ .home .thb-post-grid-style2 .post.style3 .post-title h3, .home .thb-post-grid-style2 .post.style3 .post-title h3 a { font-size:18px !important; line-height:1.25 !important; } } /* ------------------------------------------------------------------ 26. Mobile fixes from Cameron's phone check (2026-09-28): (a) ad units were right-shifted: the network serves 320-wide mobile units into a 300px-capped box, and fixed-width block children ignore text-align. Let the box breathe and center every child by margin. (b) the big podcast video block duplicated the Latest Episode widget two scrolls later — hide the big block on phones. ------------------------------------------------------------------ */ .rlv-ad > *, .rlv-ad iframe, .rlv-ad ins, .rlv-ad div, .rlv-ad img { margin-left:auto !important; margin-right:auto !important; } .rlv-ad > div, .rlv-ad > ins { display:block !important; } .rlv-ad iframe { display:block; } [id^="powerad"], [class*="powerad"], [id^="nm-"], [class^="nm-"], .rlv-billboard-slot { text-align:center; } [id^="powerad"] > *, [id^="nm-"] > * { margin-left:auto !important; margin-right:auto !important; } @media (max-width:767px){ .rlv-ad--mobile-top, .rlv-ad--billboard, .rlv-ad--leaderboard, .rlv-ad--footer, .rlv-ad--rect { max-width:100% !important; width:auto; overflow:visible; } .rlv-billboard-slot { margin:10px 0 0 !important; width:100%; } .home .no-vc > .vc_section { display:none !important; } } /* ------------------------------------------------------------------ 27. Mobile home page — visual sweep fixes (2026-09-28). Repeated Trending/Editor's Picks column in the Current block, R+ Exclusives, and the untitled bottom list hidden on phones; feature-card gradient for legible meta; "Don't Miss" eyebrow; section chips wrap; section mini-cards (2-up, 163px, 6-line centered headlines) become feed rows. ------------------------------------------------------------------ */ @media (max-width:767px){ /* Current section repeated Trending + Editor's Picks in a second column (10 items already shown above) */ .home .no-vc > .wpb_row > .wpb_column.medium-4:has(.wpb_widgetised_column) { display:none !important; } /* RELEVANT+ Exclusives widget (dated 2024-25 items) off the phone home page */ .home #thb_posts_widget-23 { display:none !important; } /* feature-card overlay: legible date/read-time over busy photos */ /* (figure is position:absolute in the theme — do not touch its positioning) */ .home .post.style13 figure.post-gallery::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.38) 50%, rgba(0,0,0,.18) 100%); pointer-events:none; } .home .post.style13 .post-inner-content { position:relative; z-index:2; } /* "More Features" read as a duplicate of the Features section title right below it */ .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:nth-child(3)::before { content:"Don\2019t Miss"; } } @media (max-width:767px){ /* section sub-category chips: wrap instead of clipping at the right edge */ .home .thb-categorylinks { display:flex !important; flex-wrap:wrap; justify-content:center; gap:8px; } .home .thb-categorylinks a { margin:0 !important; } /* section blocks (Faith/Life/Culture/…): the 2-up mini cards were 163px wide with 6-line centered headlines. Make them feed rows (thumb left) like The Latest; keep the lead card big. */ .home .thb-blockgrid-style2 .columns.small-6 { width:100% !important; flex:0 0 100% !important; max-width:100% !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 { display:grid !important; grid-template-columns:108px minmax(0,1fr); column-gap:14px; align-items:start; align-content:start; text-align:left !important; margin-bottom:0 !important; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.10); } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 > * { grid-column:2; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 > figure, .home .thb-blockgrid-style2 .columns.small-6 .post.style1 > .post-gallery { grid-column:1 !important; grid-row:1 / span 6; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 > .post-category { margin-bottom:4px !important; font-size:11px !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 > .post-title { margin-bottom:6px !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 > .thb-post-bottom { font-size:11px !important; margin:0 !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 > .thb-post-bottom ul, .home .thb-blockgrid-style2 .columns.small-6 .post.style1 > .thb-post-bottom li { display:inline; } .thb-dark-mode-off.home .thb-blockgrid-style2 .columns.small-6 .post.style1 { border-color:rgba(0,0,0,0.10); } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 figure.post-gallery, .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-gallery { flex:0 0 108px; width:108px !important; margin:0 !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-gallery img { width:108px !important; height:108px !important; object-fit:cover; display:block; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-inner-content { flex:1 1 0; min-width:0; text-align:left !important; padding:0 !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-category { margin-bottom:4px !important; font-size:11px !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-title { margin-bottom:6px !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-title h5, .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-title h5 a { font-size:17px !important; line-height:1.25 !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .thb-post-bottom { font-size:11px !important; margin:0 !important; } .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-excerpt { display:none !important; } } @media (max-width:767px){ /* legacy sub-category chips that are not in the site nav */ .home .thb-categorylinks a[href*="quarterlife"], .home .thb-categorylinks a[href*="mental"], .home .thb-categorylinks a[href*="wellness"], .home .thb-categorylinks a[href*="science"] { display:none !important; } } @media (max-width:767px){ /* untitled bottom list of 10 older stories w/ excerpts (~6000px, mostly repeats) */ .home .no-vc > .vc_custom_1546883194736 { display:none !important; } } /* ------------------------------------------------------------------ 28. Mobile home page top (Cameron's phone screenshot, 2026-09-28): header first (flex order on #wrapper) so injected ad units land under the logo bar, not above it; subscribe/login strip centered + charcoal; dead band removed; no "Featured"/"Don't Miss" labels (layout is the cue, a hairline marks the second group); feature cards become image- top / text-below with left-aligned 24px headline (contrast-proof). ------------------------------------------------------------------ */ @media (max-width:767px){ /* --- top of page: header first, then whatever the ad network injects, then content --- */ #wrapper { display:flex; flex-direction:column; } #wrapper > * { order:0; } #wrapper > .mobile-header-holder { order:-3; } #wrapper > .top-head { order:-2; } /* subscribe / login strip: slim, quiet, right-aligned pills instead of two chunky gold blocks */ .top-head { padding:0 !important; } .top-head ul { display:flex !important; justify-content:center !important; align-items:center; gap:8px; padding:8px 15px 10px !important; margin:0 !important; } .top-head li { margin:0 !important; } .top-head .yellow-btn { font-size:10.5px !important; letter-spacing:.1em; padding:8px 14px !important; line-height:1 !important; border-radius:2px; background:#222 !important; color:#cfcfcf !important; border:1px solid #2e2e2e; } .thb-dark-mode-off .top-head .yellow-btn { background:#efefef !important; color:#222 !important; border-color:#e3e3e3; } /* dead band under the logo bar */ .home .non-VC-page { padding-top:0 !important; } .home .no-vc > .wpb_row:first-child { padding-top:0 !important; } .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:first-child { margin-top:10px !important; } /* no labels above stories — layout is the cue */ .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:first-child::before, .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:nth-child(3)::before { display:none !important; content:none !important; } .home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:nth-child(3) { margin-top:8px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); } /* feature cards: image on top, text below (contrast-proof, the NYT/Complex pattern) */ .home .post.style13 { display:block !important; height:auto !important; min-height:0 !important; margin-bottom:26px !important; } .home .post.style13 figure.post-gallery { position:relative !important; inset:auto !important; height:auto !important; } .home .post.style13 figure.post-gallery::after { display:none !important; } .home .post.style13 figure.post-gallery img { width:100% !important; height:auto !important; aspect-ratio:3/2; object-fit:cover; opacity:1 !important; display:block; } .home .post.style13 .post-inner-content { position:static !important; display:block !important; height:auto !important; min-height:0 !important; padding:12px 0 0 !important; text-align:left !important; } .home .post.style13 .post-inner-content > div { text-align:left !important; } .home .post.style13 .post-category { margin:0 0 6px !important; } .home .post.style13 .post-title { margin:0 0 6px !important; } .home .post.style13 .post-title h4, .home .post.style13 .post-title h4 a { font-size:24px !important; line-height:1.12 !important; } .home .post.style13 .thb-post-bottom { font-size:11px !important; opacity:.8; margin:0 !important; } .home .post.style13 .thb-post-bottom ul, .home .post.style13 .thb-post-bottom li { display:inline; } } /* ------------------------------------------------------------------ 29. Ad-network (NextMillennium / powerad.ai) units on phones. 2026-09-28 Their wrappers are div.pa-global-class.pa-pl-.pa-pl-. (a) auto-inserted units land inside feed rows (next to the thumb) and spill right: make the wrapper full-bleed + centered wherever it lands. (b) the in-page video player gets pinned with inline position:fixed when scrolled past (the floating overlay): keep it in place instead. ------------------------------------------------------------------ */ .pa-global-class { text-align:center; } .pa-global-class > * { margin-left:auto !important; margin-right:auto !important; } @media (max-width:767px){ .pa-global-class { flex:0 0 100% !important; grid-column:1 / -1 !important; width:100vw !important; max-width:100vw !important; position:relative; left:50%; transform:translateX(-50%); margin:14px 0 !important; text-align:center; overflow:hidden; } .home .thb-post-grid-style2 .post.style3 > .row { flex-wrap:wrap !important; } .pa-global-class[style*="position: fixed"], .pa-global-class[style*="position:fixed"], div[class*="pa-pl-"][style*="fixed"] { position:relative !important; top:auto !important; bottom:auto !important; left:50% !important; right:auto !important; width:100vw !important; max-width:100vw !important; height:auto !important; max-height:none !important; box-shadow:none !important; z-index:1 !important; } } /* ------------------------------------------------------------------ 30. NM in-feed units, take two (2026-09-28). Their wrapper (.pa-global-class > .pa-unit-global at a fixed 320px) is inserted INSIDE the feed row's text column, so the 100vw/translate trick in section 29 centered it on the column, not the screen. Now the row is a grid, the text column dissolves, and the unit gets its own full-width centered line under the row. ------------------------------------------------------------------ */ @media (max-width:767px){ /* NM in-feed units land INSIDE the feed row's text column (~270px, right of the thumb) — let them escape: row becomes a grid, the text column dissolves (display:contents), the unit takes its own full-width line. */ .home .thb-post-grid-style2 .post.style3 > .row { display:grid !important; grid-template-columns:108px minmax(0,1fr) !important; column-gap:14px; align-items:start; } .home .thb-post-grid-style2 .post.style3 > .row > .medium-5 { grid-column:1; grid-row:1; width:108px !important; max-width:108px !important; flex:none !important; padding:0 !important; } .home .thb-post-grid-style2 .post.style3 > .row > .medium-7 { display:contents !important; } .home .thb-post-grid-style2 .post.style3 .post-inner-content { grid-column:2; grid-row:1; min-width:0; } .post .pa-global-class { grid-column:1 / -1 !important; width:100% !important; max-width:100% !important; left:auto !important; transform:none !important; margin:14px 0 0 !important; } .pa-global-class .pa-unit-global { max-width:100% !important; } } /* ------------------------------------------------------------------ 31. NM in-feed units, take three (2026-09-28). The unit is inserted inside .post-inner-content (the category/title/meta block), one level deeper than section 30 assumed. That block now dissolves too; the thumb spans the text rows; the unit takes grid row 7 full-width. Verified with a stand-in 320px unit in the phone frame. ------------------------------------------------------------------ */ @media (max-width:767px){ /* the unit is inserted inside .post-inner-content (category/title/meta block) — dissolve that too */ .home .thb-post-grid-style2 .post.style3 > .row { grid-template-rows:auto auto auto minmax(0,1fr) 0 0 auto !important; row-gap:0 !important; column-gap:14px !important; } .home .thb-post-grid-style2 .post.style3 > .row > .medium-5 { grid-row:1 / span 4 !important; } .home .thb-post-grid-style2 .post.style3 .post-inner-content { display:contents !important; } .home .thb-post-grid-style2 .post.style3 .post-inner-content > * { grid-column:2; min-width:0; } .home .thb-post-grid-style2 .post.style3 .post-inner-content > .post-category { margin-bottom:4px !important; } .home .thb-post-grid-style2 .post.style3 .post-inner-content > .post-title { margin-bottom:6px !important; } .home .thb-post-grid-style2 .post.style3 .post-inner-content > .thb-post-bottom { margin:0 !important; } .home .thb-post-grid-style2 .post.style3 .pa-global-class, .home .thb-post-grid-style2 .post.style3 .post-inner-content > .pa-global-class { grid-column:1 / -1 !important; grid-row:7 !important; width:100% !important; max-width:100% !important; margin:14px 0 0 !important; left:auto !important; transform:none !important; } } /* ------------------------------------------------------------------ 32. Mobile home page: ONE card system (Cameron, 2026-09-28). Two headline sizes only — big card 24px/1.12 (photo top, text below, left-aligned, gold category) and feed row 18px/1.25. The theme's style7/8/11 cards and the style1 leads (which ran 17–30px, centered, one with text over the photo) are mapped onto the big card. In-feed ad wrapper margins evened. ------------------------------------------------------------------ */ @media (max-width:767px){ /* ===== ONE card system on phones: BIG CARD (photo on top, text below, left-aligned, 24px) and FEED ROW (108px thumb, 18px). Every theme card style is mapped to one of the two. ===== */ /* -- big cards: the overlay styles become photo-top/text-below like style13 -- */ .home .post.style11, .home .post.style8, .home .post.style7, .home .thb-post-grid-style1-left .post.style1, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 { display:block !important; height:auto !important; min-height:0 !important; margin-bottom:26px !important; text-align:left !important; } .home .post.style11 figure.post-gallery { position:relative !important; inset:auto !important; height:auto !important; } .home .post.style11 figure.post-gallery::after, .home .post.style8 figure.post-gallery::after { display:none !important; } .home .post.style11 figure.post-gallery img, .home .post.style8 figure.post-gallery img, .home .post.style7 figure.post-gallery img, .home .thb-post-grid-style1-left .post.style1 figure.post-gallery img, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 figure.post-gallery img { width:100% !important; height:auto !important; aspect-ratio:3/2; object-fit:cover; opacity:1 !important; display:block; } .home .post.style11 .post-inner-content, .home .post.style8 .post-inner-content { position:static !important; display:block !important; height:auto !important; min-height:0 !important; padding:12px 0 0 !important; text-align:left !important; background:none !important; } .home .post.style11 .post-inner-content > div, .home .post.style8 .post-inner-content > div { text-align:left !important; } .home .post.style7 .post-title, .home .post.style7 .thb-post-bottom, .home .thb-post-grid-style1-left .post.style1 > *, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 > * { text-align:left !important; } .home .post.style7 figure.post-gallery, .home .thb-post-grid-style1-left .post.style1 figure.post-gallery, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 figure.post-gallery { margin:0 0 12px !important; } .home .post.style7 .post-category, .home .post.style8 .post-category, .home .post.style11 .post-category, .home .thb-post-grid-style1-left .post.style1 .post-category, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 .post-category { position:static !important; transform:none !important; margin:0 0 6px !important; padding:0 !important; background:none !important; display:block; text-align:left !important; } .home .post .post-category, .home .post .post-category a { color:#dbba74 !important; font-size:12px !important; letter-spacing:.08em; } /* -- the ONE big-card headline -- */ .home .post.style13 .post-title h4, .home .post.style13 .post-title h4 a, .home .post.style11 .post-title h3, .home .post.style11 .post-title h3 a, .home .post.style8 .post-title h3, .home .post.style8 .post-title h3 a, .home .post.style7 .post-title h5, .home .post.style7 .post-title h5 a, .home .thb-post-grid-style1-left .post.style1 .post-title h5, .home .thb-post-grid-style1-left .post.style1 .post-title h5 a, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 .post-title h5, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 .post-title h5 a { font-size:24px !important; line-height:1.12 !important; letter-spacing:-0.01em !important; text-align:left !important; } .home .post.style13 .post-title, .home .post.style11 .post-title, .home .post.style8 .post-title, .home .post.style7 .post-title, .home .thb-post-grid-style1-left .post.style1 .post-title, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 .post-title { margin:0 0 6px !important; } .home .post.style11 .thb-post-bottom, .home .post.style8 .thb-post-bottom, .home .post.style7 .thb-post-bottom, .home .thb-post-grid-style1-left .post.style1 .thb-post-bottom, .home .thb-blockgrid-style2 .columns.large-6 .post.style1 .thb-post-bottom { font-size:11px !important; opacity:.8; margin:0 !important; text-align:left !important; } .home .thb-post-bottom ul, .home .thb-post-bottom li { display:inline; } /* -- the ONE feed-row headline -- */ .home .thb-post-grid-style2 .post.style3 .post-title h3, .home .thb-post-grid-style2 .post.style3 .post-title h3 a, .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-title h5, .home .thb-blockgrid-style2 .columns.small-6 .post.style1 .post-title h5 a { font-size:18px !important; line-height:1.25 !important; } /* -- in-feed ad spacing: even above and below -- */ .home .thb-post-grid-style2 .post.style3 .pa-global-class { margin:6px 0 -2px !important; } .pa-global-class.pa-ad-heading::before { opacity:.55 !important; } } /* ========================================================================== 33. Mobile audit fixes (frame-by-frame pass vs Complex / RS / NYT) ========================================================================== */ @media (max-width: 767px) { /* dead space after the sidebar stack (Editor's Picks) before the feature cards */ .home .sidebar.wpb_column .vc_column-inner { margin-bottom:0 !important; } .home .sidebar.wpb_column, .home .thb-post-grid-style10 > .columns { border:0 !important; } /* tighter, consistent section breaks */ .home .no-vc > .wpb_row { padding-top:20px !important; padding-bottom:8px !important; } .home .no-vc > .wpb_row.vc_custom_1546883194736 { margin-top:0 !important; } /* (Oct 5) the homepage issue promo (#media_image-69) is shown on phones again: it is now the current cover, not the 2020 PNG that rendered as a black box */ /* section lead cards: kill the text inset so every headline shares one left edge */ .home .post.center-contents .post-title, .home .post.style1.center-contents .post-title, .home .post.style11 .post-title, .home .post.style13 .post-title { padding-left:0 !important; padding-right:0 !important; text-align:left !important; } /* mixed grids (rows + big cards interleaved): big cards first, then the rows */ .home .thb-post-grid-style2 { display:flex !important; flex-direction:column !important; } .home .thb-post-grid-style2 > .post.style11 { order:-1 !important; } .home .thb-post-grid-style2 > .post.style11 + .post.style3 { border-top:0 !important; } /* end-of-article "More in": 2x2 on phones instead of four full-width cards */ .rlv-more__grid { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:16px 14px !important; } .rlv-more__item .rlv-more__h { font-size:15px !important; line-height:1.25 !important; margin:4px 0 0 !important; } .rlv-more__item .rlv-more__cat { font-size:11px !important; } } /* 33b. Dead space under every home section: theme gives .wpb_wrapper height:100% of a stretched column */ @media (max-width: 767px) { .home .no-vc .wpb_wrapper { height:auto !important; min-height:0 !important; } .home .no-vc .vc_column-inner { margin-top:0 !important; margin-bottom:0 !important; } .home .no-vc .thb_title { margin-bottom:18px !important; } /* article: theme "Related Posts" block — 12 cards is a wall; keep 4, tidy the header */ aside.related-posts > center { display:none !important; } aside.related-posts .related-posts-title { font-size:18px !important; margin:0 0 14px !important; } aside.related-posts .row > .columns:nth-child(n+5) { display:none !important; } } /* 33c. Footer newsletter: the email field was a 125px transparent underline — make it a real field */ @media (max-width: 767px) { .widget_mailster_signup .mailster-email-wrapper { width:100% !important; margin:0 0 10px !important; } .widget_mailster_signup input.mailster-email { display:block !important; width:100% !important; height:46px !important; box-sizing:border-box !important; background:#1c1c1c !important; border:1px solid #3d3d3d !important; border-radius:2px !important; color:#fff !important; padding:0 14px !important; font-size:15px !important; } .widget_mailster_signup input.mailster-email::placeholder { color:#8a8a8a !important; } .widget_mailster_signup .mailster-submit-wrapper, .widget_mailster_signup input.submit-button { width:100% !important; margin:0 !important; } /* even section breaks: no stray top margins on home rows */ .home .no-vc > .wpb_row { margin-top:0 !important; } } /* 34. Section chips need air before the first card; section-top ad slots get margins only when filled */ @media (max-width: 767px) { .home .thb-categorylinks { margin-bottom:20px !important; } .home .thb-categorylinks + .thb-post-grid, .home .thb-categorylinks + .thb-blockgrid, .home .thb-categorylinks + .row { margin-top:0 !important; } .home .wpb_wrapper > .pa-global-class:has(iframe, img, video, ins) { margin:4px 0 22px !important; } .home .wpb_wrapper > .pa-global-class:not(:has(iframe, img, video, ins)) { margin:0 !important; } } /* 35. Unfilled ad slots collapse (class set by rlv_collapse_empty_ads in functions.php) */ .pa-global-class.rlv-ad-empty { height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; } .pa-global-class.rlv-ad-empty > .pa-unit-global { height:0 !important; min-height:0 !important; } .pa-global-class.rlv-ad-empty::before { display:none !important; } /* 36. Section-top ad: even air above and below (NM adds 15px margins + a 25px ADVERTISEMENT label inside the unit) */ @media (max-width: 767px) { .home .wpb_wrapper > .pa-global-class:not(.rlv-ad-empty) { margin:0 auto 18px !important; } .home .wpb_wrapper > .pa-global-class.pa-ad-heading::before { line-height:22px !important; height:22px !important; } .home .wpb_wrapper > .pa-global-class:has(iframe, img, video, ins) { margin:0 auto 18px !important; } } /* 37. No transform on ad containers (NM parallax creatives use position:fixed; a transformed ancestor breaks them) + no Scroll To Top on phones */ @media (max-width: 767px) { .pa-global-class { width:100% !important; max-width:100% !important; left:auto !important; transform:none !important; } #scroll_to_top { display:none !important; } } /* 38. Pin fixed-position creatives (NM parallax + floating video) inside their own unit on phones; even ad margins */ @media (max-width: 767px) { .pa-global-class:not(.pa-pl-stickyBottom):not(.pa-pl-stickyTop) .pa-unit-global [style*="position: fixed"], .pa-global-class:not(.pa-pl-stickyBottom):not(.pa-pl-stickyTop) .pa-unit-global [style*="position:fixed"] { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important; transform:none !important; max-height:none !important; margin:0 !important; } .pa-global-class:not(.pa-pl-stickyBottom):not(.pa-pl-stickyTop) .pa-unit-global { overflow:hidden !important; } /* in-card ads: the 25px ADVERTISEMENT label already sits above the creative, so no extra top margin; match below */ .home .post:not(.style3) .pa-global-class { margin:0 0 14px !important; } .home .thb-post-grid-style2 .post.style3 .pa-global-class { margin:0 0 4px !important; } } /* 39. Feature cards: real air between stories on phones (date belongs to the story above it) */ @media (max-width: 767px) { .home .thb-post-grid-style10 .post.style13 { margin-bottom:30px !important; } .home .thb-post-grid-style10 > .columns { margin-top:0 !important; } .home .post.style13 .thb-post-bottom, .home .post.style13 .post-meta { margin-top:6px !important; } } /* 40. Newsletter widgets: breathing room between the intro copy and the email field (all placements) */ .widget_mailster_signup .mailster-widget-text-before { margin:0 0 16px !important; line-height:1.5 !important; } .widget_mailster_signup .thb-widget-title { margin-bottom:10px !important; } .widget_mailster_signup .mailster-form { margin-top:0 !important; } /* 41. Mobile menu: the theme prints the "Secondary Menu" location (assigned the same Main menu) under the main list */ #mobile-menu .thb-secondary-menu { display:none !important; } #mobile-menu .mobile-menu-top { padding-bottom:10px !important; } /* 42. Watch on YouTube (video podcast playlist) next to the Apple follow links */ .rlv-player__watch { margin-left:8px; } .rlv-latest__watch { margin-left:14px; } .rlv-latest__follow + .rlv-latest__follow { margin-left:14px; } .rlv-watch svg { width:16px; height:16px; margin-right:6px; vertical-align:-3px; } .rlv-player__watch svg, .rlv-latest__watch svg { width:16px; height:16px; } @media (max-width: 767px) { .rlv-latest__watch { margin-left:0; display:block; margin-top:6px; } .rlv-player__watch { display:none; } } /* 43. YouTube link typography = Apple link typography; newsletter email field always as wide as its button */ .rlv-latest__watch, .rlv-player__watch, .rlv-watch { display:inline-flex !important; align-items:center !important; gap:6px !important; font-weight:700 !important; letter-spacing:.04em !important; text-decoration:none !important; } .rlv-latest__watch svg, .rlv-player__watch svg { width:16px; height:16px; flex:0 0 16px; margin:0; } .rlv-latest__watch { margin-left:18px; } .mailster-form .mailster-email-wrapper, .mailster-form .mailster-wrapper.mailster-email-wrapper { width:100% !important; margin:0 0 10px !important; } .mailster-form input.mailster-email { display:block !important; width:100% !important; box-sizing:border-box !important; } .mailster-form .mailster-submit-wrapper, .mailster-form input.submit-button { width:100% !important; margin:0 !important; box-sizing:border-box !important; } /* 43b. Footer compact episode block: no follow/watch links (the footer's own social row covers it) */ .rlv-footer-episode .rlv-latest__watch, .rlv-footer-episode .rlv-latest__follow { display:none !important; } /* 44. Play overlay on cover art: transparent ring (faces are centered on every cover) — matches the widget */ .rlv-episode__art .rlv-episode__play, .podcast-slide .play-btn, .rlv-card__play { background: rgba(255,255,255,.10) !important; color: #fff !important; border: 3px solid #fff !important; box-shadow: 0 4px 18px rgba(0,0,0,.35) !important; } .rlv-episode__art .rlv-episode__play svg, .podcast-slide .play-btn svg, .rlv-card__play svg { filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); } .rlv-episode__art .rlv-episode__play:hover, .podcast-slide .play-btn:hover, .rlv-card__play:hover { background: rgba(255,255,255,.26) !important; } /* 45. No sticky-bottom ad on any screen size (Cameron, Sept 30 2026): reader experience over ~$100/mo of network fill */ .pa-global-class.pa-pl-stickyBottom, .pa-global-class.pa-pl-stickyTop { display:none !important; height:0 !important; } /* 46. Current page: the old RELEVANT DAILY band was removed (Oct 2026); the row after it had 12vh of top padding that now reads as a dead gap. */ .page-id-257 .vc_custom_1550139631440 { padding-top: 34px !important; } @media (max-width: 767px) { .page-id-257 .vc_custom_1550139631440 { padding-top: 22px !important; } } /* ==== 47. Article header: byline + date centered on centered layouts; category / byline / date type hierarchy (Oct 4) ==== */ .post-detail.post-detail-style2 .thb-post-title-bottom .author-and-date, .post-detail.post-detail-style5 .thb-post-title-bottom .author-and-date, .post-detail.post-detail-style7 .thb-post-title-bottom .author-and-date, .post-detail.post-detail-style10 .thb-post-title-bottom .author-and-date, .post-detail.post-detail-style11 .thb-post-title-bottom .author-and-date, .post-detail .post-split-title-container .thb-post-title-bottom .author-and-date{align-items:center!important;text-align:center!important} .post-detail .post-detail-category, .post-detail .post-detail-category a{font-size:12px!important;line-height:1!important;letter-spacing:.12em!important} .post-detail .thb-post-title-bottom .post-author, .post-detail .thb-post-title-bottom .post-author em, .post-detail .thb-post-title-bottom .post-author a{font-size:13px!important;line-height:1.2!important;letter-spacing:.05em!important} .post-detail .thb-post-title-bottom .author-and-date .post-author{margin-bottom:6px!important} .post-detail .thb-post-title-bottom .thb-post-date{font-size:11px!important;line-height:1.2!important;letter-spacing:.05em!important;opacity:.75} @media (max-width:767px){ .post-detail .post-detail-category, .post-detail .post-detail-category a{font-size:13px!important} .post-detail .thb-post-title-bottom .post-author, .post-detail .thb-post-title-bottom .post-author em, .post-detail .thb-post-title-bottom .post-author a{font-size:15px!important;line-height:1.25!important} .post-detail .thb-post-title-bottom .thb-post-date{font-size:12px!important} } /* ==== 48. Centered feature layout (style5): tighter headline line spacing (Oct 5) ==== */ @media (min-width:1024px){.post-detail.post-detail-style5 .post-title.entry-header h1.entry-title{line-height:.86!important}} @media (max-width:767px){.post-detail.post-detail-style5 .post-title.entry-header h1.entry-title{line-height:1!important}} /* 47. Oct 6: podcast link rows, home podcast slider, widget title lock */ /* 47a. Latest Episode widget: Apple + YouTube links share one style, stacked, left-aligned */ .rlv-latest a.rlv-latest__follow.rlv-latest__follow { width:100%; margin:10px 0 0 !important; font-family:degular,-apple-system,BlinkMacSystemFont,Roboto,sans-serif !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase; line-height:1.2; opacity:1; gap:8px !important; align-items:center; } .rlv-latest a.rlv-latest__follow.rlv-latest__follow + a.rlv-latest__follow { margin:9px 0 0 !important; } .rlv-latest .rlv-latest__follow svg { width:16px; height:16px; flex:0 0 16px; margin:0; } /* 47b. Home podcast slider: the ring belongs to the inner circle only (no square box on the wrapper) */ .podcast-slide .play-btn { border:0 !important; background:none !important; box-shadow:none !important; } .podcast-slide .play-btn a span { background:rgba(255,255,255,.10); } /* 47c. Home podcast slider: keep each slide's cover shadow inside its own slide (the next slide's shadow was bleeding in on the right) */ .podcast-slide .slick-slide { overflow:hidden; } /* 47d. Sidebar module headers: lock the format here so it no longer depends on theme-option CSS */ .sidebar .widget .thb-widget-title, .wpb_widgetised_column .widget .thb-widget-title { font-family:degular,-apple-system,BlinkMacSystemFont,Roboto,sans-serif !important; font-size:18px !important; font-weight:700 !important; text-transform:uppercase !important; line-height:1; } /* ---------- 48. Main nav dropdowns + nav row fit (2026-10-08) ---------------- Every content section of the main nav now opens the same dropdown: tab list on the left, four story thumbnails on the right. Markup: inc/wp3menu.php. a) Light/Dark button moved to the far right of the nav row (Cameron), after the trending and search icons, so the nav's neighbor is a small icon and not the pill. Done with flex order; the markup is untouched. b) Eight arrows instead of five made the centered nav 46px wider. The gaps now flex with the window: 25px from 1293px up, down to 14px at 1194px. Below that the nav is no longer pinned to the page center; it sits between the menu button and the icons with 10-14px gaps, so nothing overlaps down to 1024px. (Before this, the nav overlapped the Light button at every width under 1262px.) 1068 and 938 are the window width minus the fixed parts: side padding, the 150px icon cluster and the labels themselves (627px). Re-measure if a top-level item is added, removed or renamed. c) Podcast episodes keep their square cover art. */ @media (min-width: 1024px) { .header.style1 .full-menu > .thb-full-menu > li + li { margin-left: clamp(14px, calc((100vw - 1068px) / 9), 25px); } .header.style1 .secondary-area > .thb-light-toggle { order: 3; margin-left: 20px; } .header.style1 .secondary-area .thb-trending-holder .thb-full-menu li.menu-item-has-children > a { padding-left: 0; } } @media (min-width: 1024px) and (max-width: 1193px) { .header.style1 .thb-navbar .full-menu { position: relative; top: auto; left: auto; transform: none; } .header.style1 .full-menu > .thb-full-menu > li + li { margin-left: clamp(10px, calc((100vw - 938px) / 9), 14px); } } .thb-full-menu .rlv-mega-episode .post-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* ========================================================================== 49. Light mode + the Light / Dark button (Oct 9 2026) The button in the nav (and its copy in the phone menu) is each reader's own choice, saved in their browser by the small script functions.php prints right after ("Light / Dark button" block). Dark stays the default. Everything below except the last three blocks applies ONLY when a reader has picked light (body has no .thb-dark-mode-on), so the dark site is untouched. The gold accent is unreadable as text on white, so text uses --rlv-gold-ink in light mode. Panels that stay dark in light mode, and cards whose text sits on a photo, set the ink back to the bright gold. ========================================================================== */ body:not(.thb-dark-mode-on) { --rlv-gold-ink: #86600c; } body:not(.thb-dark-mode-on) #mobile-menu, body:not(.thb-dark-mode-on) .rlv-ih, body:not(.thb-dark-mode-on) .rlv-issue-box, body:not(.thb-dark-mode-on) .rlv-signup:not(.rlv-signup--footer), body:not(.thb-dark-mode-on) .subfooter, body:not(.thb-dark-mode-on) .post-detail .post-over-title-container, body:not(.thb-dark-mode-on) .post:not(.post-detail).featured-style, body:not(.thb-dark-mode-on) .post:not(.post-detail).post-white-title, body:not(.thb-dark-mode-on) .post:not(.post-detail).white-post-content { --rlv-gold-ink: #dbba74; } /* gold text -> gold ink (same selectors the theme and the sections above use) */ :where(body:not(.thb-dark-mode-on)) a:hover { color: var(--rlv-gold-ink); } body:not(.thb-dark-mode-on) .post:not(.post-white-title):not(.featured-style):not(.white-post-content) .post-category a, body:not(.thb-dark-mode-on).home .post:not(.post-white-title):not(.featured-style):not(.white-post-content) .post-category, body:not(.thb-dark-mode-on) .post-detail .post-category, body:not(.thb-dark-mode-on) .post-detail .post-category a, body:not(.thb-dark-mode-on).thb-dropcap-on .post-detail .post-content > p:first-of-type::first-letter, body:not(.thb-dark-mode-on).thb-dropcap-on .post-detail .post-content > .row:first-of-type .columns:first-of-type .wpb_text_column:first-of-type .wpb_wrapper > p:first-of-type::first-letter, body:not(.thb-dark-mode-on) .rlv-episode__series, body:not(.thb-dark-mode-on) .rlv-card__series, body:not(.thb-dark-mode-on) .rlv-player__title:hover, body:not(.thb-dark-mode-on) .rlv-card__title a:hover, body:not(.thb-dark-mode-on) .rlv-card__more:hover, body:not(.thb-dark-mode-on) .rlv-latest__title a:hover, body:not(.thb-dark-mode-on) .rlv-apple-follow:hover { color: var(--rlv-gold-ink) !important; } body:not(.thb-dark-mode-on) .thb-full-menu.thb-standard > li.current-menu-item:not(.has-hash) > a, body:not(.thb-dark-mode-on).thb-dropdown-color-dark .thb-full-menu .sub-menu li a:hover, body:not(.thb-dark-mode-on) .post .thb-read-more:hover, body:not(.thb-dark-mode-on) .post:not(.white-post-content) .thb-post-bottom.sponsored-bottom ul li, body:not(.thb-dark-mode-on) .post:not(.white-post-content) .thb-post-bottom .post-share:hover, body:not(.thb-dark-mode-on) .search-title h1 strong, body:not(.thb-dark-mode-on) .thb-author-page-meta a:hover, body:not(.thb-dark-mode-on) .thb-article-sponsors .sponsored-by, body:not(.thb-dark-mode-on) .post-detail .thb-executive-summary li::before, body:not(.thb-dark-mode-on) .thb-readmore p a, body:not(.thb-dark-mode-on) .rlv-player__series, body:not(.thb-dark-mode-on) .rlv-latest__show { color: var(--rlv-gold-ink); } /* phones, home page: the home-page rules above move these cards' text from on top of the photo to under it, where it was still white. Dark text there in light mode. */ @media (max-width: 767px) { body:not(.thb-dark-mode-on).home .post.featured-style:is(.style13, .style11, .style8) { color: #111; --rlv-gold-ink: #86600c; } body:not(.thb-dark-mode-on).home .post.featured-style:is(.style13, .style11, .style8) a:not(.post-social-share):not(.btn):not(.button) { color: #111; } body:not(.thb-dark-mode-on).home .post.featured-style:is(.style13, .style11, .style8) .thb-post-bottom ul li { color: rgba(10, 10, 10, .7); } body:not(.thb-dark-mode-on).home .post.featured-style:is(.style13, .style11, .style8) .post-category, body:not(.thb-dark-mode-on).home .post.featured-style:is(.style13, .style11, .style8) .post-category a { color: var(--rlv-gold-ink) !important; } } /* gold artwork that is an image, not text: the "GET RELEVANT+" promo beside the logo and the R+ page banners */ body:not(.thb-dark-mode-on) .thb_header_left img, body:not(.thb-dark-mode-on) img[src*="sidebarheader.png"], body:not(.thb-dark-mode-on) img[src*="R-Top-Bar-Update.png"] { filter: brightness(.62) saturate(1.25); } /* grey labels that were tuned for a dark page */ body:not(.thb-dark-mode-on).single-podcast .previous-episodes .heading h4 { opacity: 1; color: #5a5a5a; } /* hairlines and icons that were white-on-dark */ @media (max-width: 767px) { body:not(.thb-dark-mode-on).home .vc_custom_1673469930504 .thb-post-grid-style10 > .columns:nth-child(3) { border-top-color: rgba(0, 0, 0, .1); } } body:not(.thb-dark-mode-on) .thb-social-top-buttons .cbxwpbkmarktrig.cbxwpbkmarktrig-button-remove::before, body:not(.thb-dark-mode-on) .thb-social-top-buttons .cbxwpbkmarkwrap.bookmarked .cbxwpbkmarktrig::before { background-color: #111 !important; } /* footer: it stays light grey in light mode, so its text and the newsletter form go dark */ body:not(.thb-dark-mode-on) footer#footer.footer, body:not(.thb-dark-mode-on) footer#footer.footer p, body:not(.thb-dark-mode-on) footer#footer.footer .widget, body:not(.thb-dark-mode-on) footer#footer.footer .widget .thb-widget-title, body:not(.thb-dark-mode-on) footer#footer .small-12 p, body:not(.thb-dark-mode-on) footer#footer .small-12 a, body:not(.thb-dark-mode-on) footer#footer .small-12 div { color: #5a5a5a; } body:not(.thb-dark-mode-on) footer#footer.footer .widget a { color: #5a5a5a !important; } body:not(.thb-dark-mode-on) footer#footer .rlv-latest__meta { opacity: 1; } body:not(.thb-dark-mode-on) footer#footer.footer .widget a:hover { color: #111 !important; } body:not(.thb-dark-mode-on) #footer .rlv-signup--footer { --g: #86600c; } body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .rlv-signup__head, body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .rlv-signup__done { color: #111 !important; } body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .rlv-signup__sub { color: #4f4f4f !important; } body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .rlv-signup__note { color: #5a5a5a !important; } body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .mailster-form input.mailster-email { color: #111 !important; background: #fff !important; border: 1px solid #b9b9b9 !important; } body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .mailster-form input.mailster-email::placeholder { color: #6b6b6b; } body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .mailster-form input.submit-button { color: #fff !important; background: #111 !important; } body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .mailster-form input.submit-button:hover, body:not(.thb-dark-mode-on) #footer .rlv-signup--footer .mailster-form input.submit-button:focus-visible { background: #86600c !important; } /* the button itself: its copy in the phone menu sits on the dark panel in both modes */ #mobile-menu .thb-light-toggle.rlv-mobile-toggle { height: 40px; margin: 18px 0 8px; padding: 0 12px 0 18px; font-size: 12px; letter-spacing: .06em; color: #fff; border-color: rgba(255, 255, 255, .25); } .thb-light-toggle:focus-visible { outline: 2px solid #dbba74; outline-offset: 2px; } /* pages that are built light only (Advertise) have no choice to offer */ .rlv-force-light .thb-light-toggle { display: none !important; } /* dark mode: the trending arrow beside the search icon was black on black */ .thb-dark-mode-on .header .secondary-area .thb-trending-icon path { fill: #fff; } /* ========================================================================== 50. Story cards keep their section tag when an ad lands inside them (Oct 9 2026) The ad network (PowerAd, .pa-global-class) drops some of its units inside story cards, under the date. Cards in styles 4, 5 and 6 (the bordered cards on the issue page, among others) stack their text in a COLUMN. The phone rule in the ads sections above that makes an ad take a full ROW (flex: 0 0 100%) meant "as tall as the whole text area" inside those cards, so the ad box, even an empty one, squeezed the section tag above the headline down to nothing. The gold MAGAZINE tag went missing on whichever cards got an ad on that page load, in dark and light mode alike. Now the ad box is only as tall as its ad, the card grows to hold it, and the tag can no longer be squeezed. ========================================================================== */ .post:is(.style4, .style5, .style5-white, .style6) .post-inner-content > .post-category { flex-shrink: 0; } .post:is(.style4, .style5, .style5-white, .style6) .post-inner-content > .pa-global-class { flex: 0 0 auto !important; } /* ========================================================================== 51. "Read More Slices" under The Latest on the home page (Oct 9 2026) Markup and behavior: functions.php, "home page browsing" block. A tap adds five more stories to the feed in place; after three taps the same button reads "See All Slices" and goes to the Slices page. An outlined button, so it reads as "keep browsing" and does not compete with the solid white buttons (Sign Up, Read Issue 118). Same type as those: Degular 700, 13px, .08em caps, 48px tall. Full width on phones. ========================================================================== */ .rlv-feedmore { clear: both; margin: 0 0 50px; text-align: center; } .rlv-feedmore__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 280px; height: 48px; padding: 0 28px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 3px; background: transparent; color: #fff; font-family: degular, system-ui, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; } .rlv-feedmore__btn:hover, .rlv-feedmore__btn:focus-visible { background: #fff; border-color: #fff; color: #111 !important; } .rlv-feedmore__btn:focus-visible { outline: 2px solid #dbba74; outline-offset: 3px; } .rlv-feedmore__icon { flex: 0 0 auto; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .rlv-feedmore--all .rlv-feedmore__icon { margin: 0 0 0 -3px; transform: rotate(-45deg); } .rlv-feedmore__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rlv-feedmore__row { animation: rlv-feedmore-in .4s ease both; } @keyframes rlv-feedmore-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rlv-feedmore__row { animation: none; } } @media (max-width: 767px) { .rlv-feedmore { margin: 22px 0 34px; } .rlv-feedmore__btn { display: flex; width: 100%; min-width: 0; } } body:not(.thb-dark-mode-on) .rlv-feedmore__btn { border-color: rgba(0, 0, 0, .3); color: #111; } body:not(.thb-dark-mode-on) .rlv-feedmore__btn:hover, body:not(.thb-dark-mode-on) .rlv-feedmore__btn:focus-visible { background: #111; border-color: #111; color: #fff !important; } body:not(.thb-dark-mode-on) .rlv-feedmore__btn:focus-visible { outline-color: #86600c; } /* 52. Keep playing while the reader browses (Oct 15 2026). Once the player is open, pages of this site open in a full-window frame (#rlv-frame) above the player bar, so the episode never stops. player.js "Keep playing while the reader browses"; functions.php rlv_persist_frame_script(). */ #rlv-frame { display: none; position: fixed; top: 0; left: 0; z-index: 99990; width: 100%; height: calc(100% - var(--rlv-bar-h)); height: calc(100dvh - var(--rlv-bar-h)); margin: 0; padding: 0; border: 0; background: transparent; visibility: hidden; } html.rlv-frame-loading #rlv-frame, html.rlv-framed #rlv-frame { display: block; } html.rlv-framed #rlv-frame { visibility: visible; } html.rlv-framed body:not(.rlv-player-open) #rlv-frame { height: 100%; height: 100dvh; } html.rlv-framed, html.rlv-framed body { height: 100% !important; overflow: hidden !important; } html.rlv-framed { margin-top: 0 !important; } html.rlv-framed body { margin: 0 !important; padding: 0 !important; } html.rlv-framed body > *:not(#rlv-player):not(#rlv-frame):not(#rlv-frame-load) { display: none !important; } #rlv-frame-load { display: none; position: fixed; top: 0; left: 0; z-index: 100001; width: 100%; height: 3px; overflow: hidden; pointer-events: none; } html.rlv-frame-loading #rlv-frame-load, html.rlv-frame-busy #rlv-frame-load { display: block; } #rlv-frame-load::before { content: ""; position: absolute; top: 0; left: 0; width: 35%; height: 100%; background: var(--rlv-accent, #dbba74); animation: rlv-frame-load 1.1s ease-in-out infinite; } @keyframes rlv-frame-load { from { transform: translateX(-100%); } to { transform: translateX(290%); } } html.rlv-in-frame #rlv-player { display: none !important; } html.rlv-in-frame body.rlv-player-open { padding-bottom: 0; } /* 52b. Player bar fixes found while testing (Oct 15 2026). The "Watch on YouTube" link (Sept 28) took the close button's grid cell, which pushed the close button below the screen on desktop and tablet; on tablet widths it also squeezed the episode title to nothing; and on phones a later !important rule (section 47) un-hid that link inside the bar, where it was meant to stay hidden. */ @media (min-width: 1200px) { .rlv-player__inner { grid-template-columns: auto minmax(0, 1fr) auto minmax(180px, 2fr) auto auto auto; } } @media (min-width: 768px) and (max-width: 1199px) { .rlv-player__inner { grid-template-columns: 52px minmax(100px, 1fr) auto minmax(100px, 2fr) auto auto; } .rlv-player .rlv-player__watch { display: none !important; } } @media (max-width: 767px) { .rlv-player .rlv-player__watch { display: none !important; } }