themselves. */ body .et_pb_row_inner.merch-card{padding:24px 26px} body .merch-card{align-items:stretch;gap:20px} body .merch-card .merch-img{width:44%;min-width:44%;height:auto;min-height:180px;align-self:stretch;flex:none;border-radius:var(--gvid-radius-media-lg);overflow:hidden;background:rgba(255,255,255,.12)} body .merch-card .et_pb_text_inner>div:not(.merch-img){flex:1;min-width:0} body .merch-card .merch-img .img-placeholder{font-size:11px;letter-spacing:.1em;line-height:1.6} body .merch-card h3{margin-top:0} @media (max-width:980px){ /* Divi's responsive row/row_inner resets carry framework !important — match that weight here, nowhere else. */ body .et_pb_row_inner.merch-card,body .merch-card{padding:20px 18px!important} } @media (max-width:640px){ /* card stacks to a column here — image goes full-width banner */ body .merch-card .merch-img{width:100%!important;min-width:0!important;height:150px!important;min-height:150px!important} body .merch-card{gap:14px} } /* ===== Fluid type + small-phone header (UTALK-23, 2026-08-29, Vela) ======== M's loved proportions live at ~520px effective width; real phones are 375-414. Everything below scales with clamp() so 520px keeps EXACTLY the previous fixed sizes (the vw term reaches each old value at ~520) and 375-414 shrinks smoothly instead of wrapping. Desktop/tablet (>640px) rules are untouched. */ @media (max-width:640px){ body .h1-home{font-size:clamp(28px,7.7vw,40px)} body .h1-ep{font-size:clamp(22px,5.8vw,30px)} body .h1-shop{font-size:clamp(25px,6.6vw,34px)} body .h1-community{font-size:clamp(26px,7vw,36px)} body .h1-ep-single{font-size:clamp(20px,5.2vw,27px)} body .h1-wc{font-size:clamp(23px,5.8vw,30px)} body h2.anton{font-size:clamp(18px,4.7vw,24px)} body .eyebrow{font-size:clamp(10px,2.6vw,13px);letter-spacing:clamp(.06em,.4vw,.22em)} body .hero-lede,body .ep-lede,body .community-lede{font-size:clamp(13.5px,2.9vw,15px)} body .lede-muted{font-size:clamp(14px,3.1vw,16px)} body .btn-orange{font-size:clamp(13px,2.9vw,15px);padding:clamp(11px,2.9vw,15px) clamp(18px,5.4vw,28px)} body .btn-outline-dark{font-size:clamp(13px,2.9vw,15px);padding:clamp(10px,2.7vw,14px) clamp(16px,5vw,26px)} body .card-title{font-size:clamp(15px,4vw,17px)} body .card-eyebrow{font-size:clamp(10.5px,2.8vw,12px)} body .video-caption .title{font-size:clamp(13.5px,2.9vw,15px)} body .chip{font-size:clamp(11.5px,3vw,13px);padding:clamp(6px,1.6vw,8px) clamp(11px,3vw,16px)} body .chip.chip-sub{font-size:clamp(10.5px,2.8vw,12px)} body .product-body h3{font-size:clamp(14.5px,3.9vw,16.5px)} /* header: logo+wordmark left, LIVE pill right on ONE row; 5-item nav on ONE unwrapped row beneath — sizes scale so 375px fits cleanly */ body .wordmark{font-size:clamp(15px,4vw,20px)} body .logo-img{width:clamp(34px,9.6vw,44px);height:clamp(34px,9.6vw,44px)} body .live-pill{font-size:clamp(9.5px,2.6vw,12.5px);padding:clamp(5px,1.5vw,8px) clamp(9px,2.9vw,16px);gap:6px;letter-spacing:.05em} body .nav{font-size:clamp(11px,3.1vw,13px);gap:clamp(7px,2.4vw,16px);letter-spacing:.045em;flex-wrap:nowrap;white-space:nowrap} /* a touch less vertical section padding on small screens */ body .section{padding-top:clamp(24px,7vw,32px)} body .section.section-pad-b{padding-bottom:clamp(24px,7vw,32px)} } @media (max-width:430px){ body .eyebrow{letter-spacing:.1em} body .header{gap:8px;row-gap:10px} body .logo-link{gap:8px} body .wordmark{letter-spacing:.02em} body .nav{letter-spacing:.03em} body .live-pill .live-dot{width:7px;height:7px} } /* ===== single-episode watermark legibility (UTALK-25) ===================== The sitewide body::before watermark (opacity .45) sat under the EPISODE RECAP body copy; soften it on episode singles so recap/transcript text is clearly readable while the texture stays. */ body.utalk-ep-single::before{opacity:.16} /* ===== SHOP grid density refinement (UTALK-27, 2026-08-29, Vela) =========== M feedback: phone cards rendered oversized/scroll-heavy. Two real causes: (1) Woo's smallscreen stylesheet (`ul.products[class*=columns-] li.product` -> width:48%; float:left; margin-bottom:2.992em) out-specified the UTALK-18 li reset, so cards floated at half a 1fr track with a ~48px phantom bottom margin — fixed at the UTALK-18 block by matching [class*=columns-] in the reset selector. (2) 640px collapsed .products-grid to 1-up. Now: phone = 2-up compact, tablet(<=900) = 2-up, desktop = 4-up. Footer type/leading tightened so the white band sits snug; image stays 1:1. Shop-page watermark eased. */ body .product-card .product-body{padding:13px 14px 14px} body .product-card .product-body h3{font-size:var(--gvid-text-ui-lg);line-height:1.25;margin:0 0 5px} body .product-card .product-meta{gap:2px 8px} body .product-card .product-drop{font-size:10.5px;letter-spacing:.1em;line-height:1.5} body .product-card .product-price{font-size:12.5px;line-height:1.5} body .product-card .product-cta{padding:0 14px 14px} @media (max-width:640px){ body .products-grid{grid-template-columns:repeat(2,1fr);gap:10px} body .product-card{border-radius:var(--gvid-radius-card-sm)} body .product-card .product-body{padding:10px 11px 11px} body .product-card .product-body h3{font-size:clamp(12.5px,3.6vw,14px);margin:0 0 4px} body .product-card .product-drop{font-size:clamp(9px,2.5vw,9.5px);letter-spacing:.07em} body .product-card .product-price{font-size:clamp(11px,3vw,11.5px)} body .product-card .img-placeholder{font-size:clamp(9.5px,2.7vw,11px);letter-spacing:.06em;gap:4px} body .product-card .img-placeholder .ico{font-size:16px} body .product-card .product-cta{padding:0 11px 11px} body .product-card .product-cta .button{font-size:var(--gvid-text-eyebrow-sm);padding:9px 14px} } /* the tiled watermark reads a touch loud under the cream cards on /shop */ body.woocommerce-shop::before{opacity:.3} /* ===== Platform brand marks on CTAs (UTALK-28) ============================ Single source: utalk-icons.php (utalk_platform_icon() + [utalk_ico]) — the same currentColor SVGs the WHERE TO LISTEN pills established. .has-ico turns just the buttons that carry a mark into inline-flex so the icon sits left of the label, vertically centered, without touching plain buttons. */ body .has-ico{display:inline-flex;align-items:center;gap:8px} /* ===== THE LATEST breathing room (UTALK-30, 2026-08-29, Vela) ============= M feedback: the rundown hub's heading / filter chips / card grid stack reads crowded. Measured causes (headless, 390 + 1280): - .filter-row renders as a Divi ROW on /rundown/ — the divi-reset's row normalizer (".et_pb_row:not(.wrap):not(.ticker-track){margin:0 !important}", spec 0,3,0) out-specifies the design's 26px margin-bottom, so the CARDS start flush under the chips at every width. - .section-head's 26px margin-bottom rides the COLUMN there; Divi's own responsive stylesheet zeroes stacked-column margins below 980px, so the CHIPS sit flush under the heading on phones (desktop kept 26). Fix: carry the stack rhythm as PADDING on the design-classed element — neither reset fights padding at this specificity, and padding never margin-collapses — fluid via clamp() like the gutter/fluid-type system. /episodes/ has .filter-row as a column (heading+chips share it): same rule gives the archive the same chips->grid seam, consistent. */ body .et_pb_section .section-head{margin-bottom:0!important;padding-bottom:clamp(20px,2.9vw,32px)} body .et_pb_section .filter-row{margin-bottom:0!important;padding-bottom:clamp(22px,3.2vw,36px)} /* hub section top: 52px baseline -> 64px desktop, fluid down to phones (beats the <=640 body .section clamp at 0,3,1 via :has() specificity) */ body .et_pb_section.section:has(.rundown-grid-row){padding-top:clamp(30px,5vw,64px)} /* ===== HOMEPAGE HERO THEME — auto light/dark (UTALK-32, 2026-08-30, Vela; reworked UTALK-46, 2026-08-31, Vela for the Theme Builder GLOBAL HEADER) === Approved handoff "Hero Background Options": 2c (day, deep green) = DEFAULT + prefers-color-scheme:light; 2a (night, near-black + orange glow) overrides inside @media (prefers-color-scheme: dark). Pure CSS — no JS, both themes ship so there is no flash of wrong theme. UTALK-46 structure: the header now renders from the ONE Theme Builder Menu layout — Divi's header slot (header.et-l--header) — a SIBLING band above the .home-hero section — no longer inside it. To keep the hero gradient one continuous surface behind header + hero: - the home page's TB header band goes transparent (body.home scope) and sits at z-index:2 (above the gradient), while - .home-hero paints the gradient on an ::before that extends UP by --utalk-header-h (the header band's rendered height) behind the header. If the header's height ever changes (padding/logo size), update --utalk-header-h below — a too-small value shows a white strip at the very top of the home page; too-large only stretches the gradient slightly. ticker-below-hero (2026-09-07, Vela, UTALK-77): the ticker band moved OUT of the header again — it now sits BELOW each page's hero (rendered by utalk_ticker_band(), utalk-ticker.php), and the TB layout #767 (now titled "Menu") is back to the menu band alone — so the values below return to the pre-ticker measurements (78 / 133 / 110 measured headless at 1280/768/360 + the original slack). UTALK-80 (2026-09-07, Vela): the menu band stays WRAPPED (133.4px measured) all the way up to 1179px — unwrap lands between 1150 and 1180 headless — so the 141px tier now covers max-width:1179px, not 900px (86px tier was 47px short there = white strip). The 640px tier rises 119px->180px: with fonts display=optional (UTALK-96) first visits keep FALLBACK metrics, and the fallback-font header wraps taller at 360-520px (173.0px max measured, fonts blocked) — 180 covers both states; over-cover only stretches the gradient (benign, per note above). Header re-theme rules are scoped body.home .et-l--header (the header left .home-hero, so the old .home-hero .header selectors can't reach it). */ :root{--utalk-header-h:86px} @media (max-width:1179px){:root{--utalk-header-h:141px}} @media (max-width:640px){:root{--utalk-header-h:180px}} /* ---- global-header band on the home page: transparent window onto the hero gradient, above it in paint order ---------------------------- */ body.home .et-l--header{z-index:2} body.home .et-l--header .et_pb_section.dark-band{background:transparent} /* ---- LIGHT / DAY (2c) — default --------------------------------------- */ body .home-hero{position:relative;background:transparent} body .home-hero::before{content:"";position:absolute;left:0;right:0;bottom:0; top:calc(-1 * var(--utalk-header-h));z-index:-1;background: radial-gradient(1000px 600px at 75% 34%,rgba(52,130,86,.45),rgba(52,130,86,0) 60%), radial-gradient(900px 520px at 6% 112%,rgba(234,90,30,.20),rgba(234,90,30,0) 55%), linear-gradient(160deg,#17452F 0%,#103425 55%,#0C281C 100%)} body.home .et-l--header .header{border-bottom-color:rgba(255,255,255,.10)} body.home .et-l--header .nav a{color:#D3DDD4} body.home .et-l--header .nav a.active{color:#F4A261} body .home-hero .eyebrow{color:#F4A261} body.home .et-l--header .wordmark .accent{color:#F4A261} body.home .et-l--header .logo-img{box-shadow:0 0 0 1px rgba(255,255,255,.2)} body.home .et-l--header .live-pill:not(.is-live){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)} body .home-hero .hero-lede{color:#B8C6BA} body .home-hero .btn-outline-dark{border-color:rgba(255,255,255,.4);color:#fff} body .home-hero .btn-outline-dark:not(.has-ico){border-color:rgba(255,255,255,.28)} body .home-hero .video-card{box-shadow:0 0 80px rgba(20,60,40,.60),0 24px 60px rgba(0,0,0,.45)} body .home-hero .video-caption .date{color:#93A695} /* ---- DARK / NIGHT (2a) ------------------------------------------------- */ @media (prefers-color-scheme: dark){ body .home-hero::before{background: radial-gradient(1100px 660px at 78% 36%,rgba(234,90,30,.40),rgba(234,90,30,0) 60%), radial-gradient(900px 380px at 30% -12%,rgba(244,241,234,.09),rgba(244,241,234,0) 60%), radial-gradient(700px 460px at 4% 112%,rgba(29,77,51,.30),rgba(29,77,51,0) 60%) #110E0A} body.home .et-l--header .header{border-bottom-color:rgba(255,255,255,.08)} body.home .et-l--header .nav a{color:#D8D2C8} body.home .et-l--header .nav a.active{color:var(--gcid-accent-2)} body .home-hero .eyebrow{color:var(--gcid-accent-2)} body.home .et-l--header .wordmark .accent{color:var(--gcid-accent-2)} body.home .et-l--header .logo-img{box-shadow:none} body.home .et-l--header .live-pill:not(.is-live){background:#1D4D33;border-color:#1D4D33} body .home-hero .hero-lede{color:#C0B9AE} body .home-hero .btn-orange{box-shadow:0 0 28px rgba(234,90,30,.45)} body .home-hero .btn-outline-dark{border-color:rgba(255,255,255,.35);color:#fff} body .home-hero .btn-outline-dark:not(.has-ico){border-color:rgba(255,255,255,.2)} body .home-hero .video-card{box-shadow:0 0 120px rgba(234,90,30,.50),0 24px 60px rgba(0,0,0,.55)} body .home-hero .video-caption .date{color:#8A8378} } /* ---- Stacked layout (<=900px): recenter the thumbnail glow ------------- */ @media (max-width:900px){ body .home-hero::before{background: radial-gradient(1000px 600px at 50% 55%,rgba(52,130,86,.45),rgba(52,130,86,0) 60%), radial-gradient(900px 520px at 6% 112%,rgba(234,90,30,.20),rgba(234,90,30,0) 55%), linear-gradient(160deg,#17452F 0%,#103425 55%,#0C281C 100%)} } @media (max-width:900px) and (prefers-color-scheme: dark){ body .home-hero::before{background: radial-gradient(1100px 660px at 50% 55%,rgba(234,90,30,.40),rgba(234,90,30,0) 60%), radial-gradient(900px 380px at 30% -12%,rgba(244,241,234,.09),rgba(244,241,234,0) 60%), radial-gradient(700px 460px at 4% 112%,rgba(29,77,51,.30),rgba(29,77,51,0) 60%) #110E0A} } /* ---- Hero LIVE badge (UTALK-22, 2026-09-01, Vela) — overlays .video-thumb when the channel is broadcasting live. --gcid-live is a single fixed red (not a light/dark pair), so no extra media-query variants are needed — it reads on both the day (deep green) and night (near-black) hero gradient above without touching that gradient's own rules. */ body .home-hero .hero-live-badge{position:absolute;top:12px;left:12px;z-index:2; display:flex;align-items:center;gap:7px;background:var(--gcid-live);color:#fff; font-weight:800;font-size:12px;letter-spacing:.08em;padding:6px 12px; border-radius:var(--gvid-radius-pill);box-shadow:0 4px 14px rgba(0,0,0,.35); pointer-events:none} body .home-hero .hero-live-badge .live-dot{width:7px;height:7px;border-radius:50%; background:#fff;animation:utalkLivePulse 1.6s ease-in-out infinite} @keyframes utalkLivePulse{0%,100%{opacity:1}50%{opacity:.35}} @media (prefers-reduced-motion: reduce){ body .home-hero .hero-live-badge .live-dot{animation:none} } /* --- single product v2 (UTALK-18, Vela 2026-08-31) --------------------------- Woo's legacy layout CSS floats div.images/div.summary at 48% INSIDE our grid columns -> quarter-width page. Neutralize the floats, then dress the variations form (size select, variation price, qty+CTA row), gallery thumbs, and the pre-selection disabled CTA. */ body .wc-product div.product div.images,body .wc-product div.product div.summary{width:100%;float:none;margin:0} body .wc-product .utalk-product .product{gap:36px var(--gvid-space-hero-gap)} body .wc-product .woocommerce-product-gallery .flex-viewport{background:var(--gcid-fill-product)} body .wc-product .woocommerce-product-gallery img{width:100%;height:auto;display:block} body .wc-product .flex-control-thumbs{list-style:none;display:flex;gap:10px;margin:0;padding:12px} body .wc-product .flex-control-thumbs li{margin:0;width:84px} body .wc-product .flex-control-thumbs img{border:2px solid transparent;border-radius:var(--gvid-radius-media);cursor:pointer;opacity:.55;transition:opacity .15s} body .wc-product .flex-control-thumbs img.flex-active,body .wc-product .flex-control-thumbs img:hover{opacity:1;border-color:var(--gcid-accent-2)} body .wc-product form.cart.variations_form{display:block} body .wc-product table.variations{width:100%;border-collapse:collapse;margin:0 0 4px} body .wc-product table.variations th.label{text-align:left;padding:4px 14px 10px 0;font-size:var(--gvid-text-eyebrow);font-weight:800;letter-spacing:var(--gvid-tracking-eyebrow-sm);text-transform:uppercase;color:var(--gcid-text-muted);vertical-align:middle;white-space:nowrap} body .wc-product table.variations td.value{padding:0 0 10px;width:100%} body .wc-product table.variations select{width:100%;max-width:320px;padding:12px 14px;border:1.5px solid var(--gcid-border-chip);border-radius:var(--gvid-radius-input);font-size:var(--gvid-text-ui-lg);font-family:var(--gvid-font-body),system-ui,sans-serif;background:var(--gcid-bg-surface);color:var(--gcid-text-primary)} body .wc-product table.variations select:focus-visible{outline:3px solid var(--gcid-accent-2);outline-offset:2px} body .wc-product .reset_variations{display:inline-block;margin-top:6px;color:var(--gcid-text-muted);font-size:var(--gvid-text-caption);font-weight:700;text-decoration:underline} body .wc-product .woocommerce-variation{margin:0 0 12px;min-height:0} body .wc-product .woocommerce-variation-price .price{color:var(--gcid-accent-1);font-weight:800;font-size:22px;font-family:var(--gvid-font-body),system-ui,sans-serif} body .wc-product .woocommerce-variation-availability p{margin:4px 0 0;color:var(--gcid-text-muted);font-size:var(--gvid-text-caption-lg)} body .wc-product .woocommerce-variation-add-to-cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap} body .wc-product .single_add_to_cart_button.disabled,body .wc-product .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed} body .wc-product .single_add_to_cart_button:focus-visible{outline:3px solid var(--gcid-accent-1);outline-offset:2px} body .wc-product .wc-lineup-band-head{margin-bottom:var(--gvid-space-head-gap)} @media (max-width:640px){ body .wc-product table.variations select{max-width:none} body .wc-product .woocommerce-variation-add-to-cart .single_add_to_cart_button{flex:1} } /* Woo 11 wraps gallery+summary in div.clearfix — promote its children into the .product grid so the 2-col layout actually applies (UTALK-18) */ body .wc-product .utalk-product .product>.clearfix{display:contents} /* variation price: outgun Divi woo accent (.woocommerce div.product span.price) */ body .wc-product .woocommerce-variation-price span.price,body .wc-product .woocommerce-variation-price span.price .amount{color:var(--gcid-accent-1)} /* ============================================================ UTALK-45 — Rundown hub masthead (branded hub header, Vela 2026-08-31) Title lockup (accent dot) + one-line description + vertical index panel filling the hero's right column. Every value rides the Divi 5 Design Variables (single source) — no hardcoded hexes. */ /* a11y: .email-input base sets outline:none which also killed the FOCUS ring (equal specificity, later in file). Restore a visible ring on keyboard focus - fixes every signup form sitewide. */ body .email-input:focus-visible{outline:2px solid var(--gcid-accent-2);outline-offset:2px} body .rundown-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gvid-space-hero-gap);align-items:center;padding:48px 0 56px} body .anton .accent-dot{color:var(--gcid-accent-2)} body .rundown-index{border:1px solid var(--gcid-border-emphasis);border-radius:var(--gvid-radius-card);background:var(--gcid-fill-dark);padding:20px 26px 8px} body .rundown-index .idx-head{font-size:var(--gvid-text-eyebrow-sm);font-weight:800;letter-spacing:var(--gvid-tracking-eyebrow-sm);color:var(--gcid-text-muted-inverse);border-bottom:1px solid var(--gcid-border-rule);padding-bottom:12px} body .rundown-index ol{list-style:none;margin:0;padding:0} body .rundown-index li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--gcid-border-rule)} body .rundown-index li:last-child{border-bottom:0} body .rundown-index .idx-num{color:var(--gcid-accent-2);font-weight:800;font-size:var(--gvid-text-caption)} body .rundown-index .idx-label{font-family:var(--gvid-font-display),sans-serif;font-size:var(--gvid-text-h3-sm);letter-spacing:.03em;color:var(--gcid-text-inverse)} body .rundown-index .idx-sub{grid-column:2;color:var(--gcid-text-muted-inverse);font-size:var(--gvid-text-caption);line-height:1.4} @media (max-width:900px){body .rundown-hero{grid-template-columns:1fr;padding:40px 0 44px}} @media (max-width:640px){body .rundown-hero{padding:32px 0 36px}body .rundown-index{padding:16px 20px 4px}body .rundown-index .idx-label{font-size:var(--gvid-text-ui-lg)}} /* UTALK-43: single recap article featured-image hero (fill-if-empty; own-YT-thumb or generated brand card). */ body .rundown-article-hero{margin:0 0 28px;border-radius:var(--gvid-radius-card);overflow:hidden;border:1px solid var(--gcid-border-subtle);background:var(--gcid-fill-placeholder)} body .rundown-article-hero-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} @media (max-width:640px){body .rundown-article-hero{margin:0 0 20px;border-radius:var(--gvid-radius-card-sm)}} /* ============================================================ UTALK-56 — pill-chip filter options (M-AUTHORIZED CUSTOM CSS, 2026-09-01). Native Divi 5.11.1 Post Filter radio lists render vertical full-width rows with radio glyphs, no design group and no checked-state option — M authorized this isolated block so the Episodes Show/Topic filters render as filled wrapping pill chips matching the home "THE LATEST" .chip look. Selectors mirror Divi's own (.et_pb_post_filter ...>...) to out-specify stock rules. REVERT: delete this block down to END UTALK-56 (page 5 filter items back to type:select completes the full revert). Tokens only — light+dark via vars. */ body .et_pb_post_filter .et_pb_post_filter__item-options-list{display:flex;flex-wrap:wrap;gap:10px} body .et_pb_post_filter .et_pb_post_filter__item-options-list>.et_pb_post_filter__item-option--radio{display:inline-flex;width:auto;margin:0} body .et_pb_post_filter .et_pb_post_filter__item-options-list>.et_pb_post_filter__item-option--radio>label{flex:0 0 auto;min-width:0;display:inline-block;border:1.5px solid var(--gcid-border-chip);border-radius:var(--gvid-radius-pill);padding:8px 16px;font-weight:700;font-size:var(--gvid-text-caption);color:var(--gcid-text-muted);cursor:pointer;margin:0;transition:border-color .15s,background .15s} body .et_pb_post_filter .et_pb_post_filter__item-control[type=radio]+label i{display:none} body .et_pb_post_filter .et_pb_post_filter__item-options-list>.et_pb_post_filter__item-option--radio>label:hover{border-color:var(--gcid-accent-1)} body .et_pb_post_filter .et_pb_post_filter__item-control-radio[type=radio]{display:inline-block;position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none} body .et_pb_post_filter .et_pb_post_filter__item-control-radio:checked+label{background:var(--gcid-accent-1);border-color:var(--gcid-accent-1);color:var(--gcid-text-on-accent)} body .et_pb_post_filter .et_pb_post_filter__item-control-radio:focus-visible+label{outline:2px solid var(--gcid-accent-2);outline-offset:2px} /* END UTALK-56 pill-chip block */ /* ===== SITE-WIDE NIGHT/DAY HERO STANDARD (UTALK-63, 2026-09-01, Vela) ===== M: HOME (+ EPISODES) = the reference standard; every other page's hero band was a FLAT PLAIN BLACK .dark-band that never responded to the OS scheme. This block promotes the approved HOMEPAGE hero treatment (UTALK-32 handoff "Hero Background Options": 2c day deep-green DEFAULT, 2a night near-black + orange glow inside @media prefers-color-scheme:dark) to a GENERIC .hero-band class. Pages/templates opt in by carrying `hero-band` on their first (hero) section — set natively in the Divi builder's CSS Class field, same mechanism as the existing dark-band/section classes. The home page keeps its own body.home/.home-hero rules above, untouched. Structure mirrors UTALK-46: the TB Menu band goes transparent and the hero paints one continuous gradient surface on an ::before extended UP by --utalk-header-h behind it. Header re-theme is scoped with :has() (already used elsewhere in this sheet) so it only fires on pages that opted in. */ /* ---- header band becomes a transparent window onto the hero gradient ---- */ body:has(.hero-band) .et-l--header{z-index:2} body:has(.hero-band) .et-l--header .et_pb_section.dark-band{background:transparent} /* ---- LIGHT / DAY (2c) — default ---------------------------------------- */ body .hero-band,body .discord-band{position:relative;background:transparent} body .hero-band::before,body .discord-band::before{content:"";position:absolute;left:0;right:0;bottom:0; top:calc(-1 * var(--utalk-header-h));z-index:-1;background: radial-gradient(1000px 600px at 75% 34%,rgba(52,130,86,.45),rgba(52,130,86,0) 60%), radial-gradient(900px 520px at 6% 112%,rgba(234,90,30,.20),rgba(234,90,30,0) 55%), linear-gradient(160deg,#17452F 0%,#103425 55%,#0C281C 100%)} body:has(.hero-band) .et-l--header .header{border-bottom-color:rgba(255,255,255,.10)} body:has(.hero-band) .et-l--header .nav a{color:#D3DDD4} body:has(.hero-band) .et-l--header .nav a.active{color:#F4A261} body:has(.hero-band) .et-l--header .wordmark .accent{color:#F4A261} body:has(.hero-band) .et-l--header .logo-img{box-shadow:0 0 0 1px rgba(255,255,255,.2)} body:has(.hero-band) .et-l--header .live-pill:not(.is-live){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)} body .hero-band .eyebrow,body .discord-band .eyebrow{color:#F4A261} body .hero-band .hero-lede,body .hero-band .ep-lede,body .hero-band .community-lede,body .hero-band .lede-muted,body .discord-band .discord-lede{color:#B8C6BA} body .hero-band .btn-outline-dark{border-color:rgba(255,255,255,.4);color:#fff} body .hero-band .btn-outline-dark:not(.has-ico){border-color:rgba(255,255,255,.28)} body .hero-band .video-card{box-shadow:0 0 80px rgba(20,60,40,.60),0 24px 60px rgba(0,0,0,.45)} body .hero-band .video-caption .date{color:#93A695} /* ---- DARK / NIGHT (2a) -------------------------------------------------- */ @media (prefers-color-scheme: dark){ body .hero-band::before,body .discord-band::before{background: radial-gradient(1100px 660px at 78% 36%,rgba(234,90,30,.40),rgba(234,90,30,0) 60%), radial-gradient(900px 380px at 30% -12%,rgba(244,241,234,.09),rgba(244,241,234,0) 60%), radial-gradient(700px 460px at 4% 112%,rgba(29,77,51,.30),rgba(29,77,51,0) 60%) #110E0A} body:has(.hero-band) .et-l--header .header{border-bottom-color:rgba(255,255,255,.08)} body:has(.hero-band) .et-l--header .nav a{color:#D8D2C8} body:has(.hero-band) .et-l--header .nav a.active{color:var(--gcid-accent-2)} body:has(.hero-band) .et-l--header .wordmark .accent{color:var(--gcid-accent-2)} body:has(.hero-band) .et-l--header .logo-img{box-shadow:none} body:has(.hero-band) .et-l--header .live-pill:not(.is-live){background:#1D4D33;border-color:#1D4D33} body .hero-band .eyebrow,body .discord-band .eyebrow{color:var(--gcid-accent-2)} body .hero-band .hero-lede,body .hero-band .ep-lede,body .hero-band .community-lede,body .hero-band .lede-muted,body .discord-band .discord-lede{color:#C0B9AE} body .hero-band .btn-orange{box-shadow:0 0 28px rgba(234,90,30,.45)} body .hero-band .btn-outline-dark{border-color:rgba(255,255,255,.35);color:#fff} body .hero-band .btn-outline-dark:not(.has-ico){border-color:rgba(255,255,255,.2)} body .hero-band .video-card{box-shadow:0 0 120px rgba(234,90,30,.50),0 24px 60px rgba(0,0,0,.55)} body .hero-band .video-caption .date{color:#8A8378} } /* UTALK-111c (2026-09-27, Vela): the Discord band (.discord-band, Community page) shares the hero surfaces above (light 2c / dark 2a) so it always matches the header; its ::before is clipped to its own box — no --utalk-header-h extension. */ body .discord-band::before{top:0} /* ---- Stacked layout (<=900px): recenter the glow, mirror home ----------- */ @media (max-width:900px){ body .hero-band::before,body .discord-band::before{background: radial-gradient(1000px 600px at 50% 55%,rgba(52,130,86,.45),rgba(52,130,86,0) 60%), radial-gradient(900px 520px at 6% 112%,rgba(234,90,30,.20),rgba(234,90,30,0) 55%), linear-gradient(160deg,#17452F 0%,#103425 55%,#0C281C 100%)} } @media (max-width:900px) and (prefers-color-scheme: dark){ body .hero-band::before,body .discord-band::before{background: radial-gradient(1100px 660px at 50% 55%,rgba(234,90,30,.40),rgba(234,90,30,0) 60%), radial-gradient(900px 380px at 30% -12%,rgba(244,241,234,.09),rgba(244,241,234,0) 60%), radial-gradient(700px 460px at 4% 112%,rgba(29,77,51,.30),rgba(29,77,51,0) 60%) #110E0A} } /* ===== TB-template pages: kill Divi's #main-content WHITE (UTALK-63) ===== Theme Builder-rendered singles (Rundown articles/episode posts, product, 404, crew) sit inside Divi's #main-content, which Divi paints #fff — so those pages rendered stark WHITE instead of the standard cream --gcid-bg-light the body (and every reference page) uses. Let the body surface through. */ body #main-content{background-color:transparent} /* UTALK-63 a11y: .link-green (accent-1 deep green) is unreadable on the day-green hero gradient — inside a hero band, links take the hero accent orange instead (matches the eyebrow); night keeps the same accent via the Design Variable. */ body .hero-band .link-green{color:#F4A261} @media (prefers-color-scheme: dark){body .hero-band .link-green{color:var(--gcid-accent-2)}} /* ===== UTALK-63 mop-up (2026-09-02, Vela): WooCommerce product tabs ===== The earlier .wc-product tab rules (above) lose to WooCommerce core's .woocommerce div.product .woocommerce-tabs selectors (higher specificity), so the tab strip still rendered near-default (gray boxes, full-width hairline, curved ::before/::after corner pseudos). Re-state the standard chip/pill + surface-card treatment at winning specificity (body.single-product #page-container ... — Divi theme rules carry the #page-container ID, so the override needs it too) and neutralize Woo/Divi decorations (gray ul background, wrapper box border). The anchor props carry !important ONLY because Divi's generated per-page CSS (et-divi-dynamic-tb-*.css) sets padding/color on these anchors with !important — a non-important rule can never win that; same precedent as the woo-notice !important overrides above. Tokens only — behaves identically day/night like every other content card. */ body.single-product #page-container .wc-product .woocommerce-tabs{border:none;background:transparent;padding:0} body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;overflow:visible;background:transparent;border:none;border-radius:0} body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs::before,body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs::after,body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li::before,body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li::after,body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li a::before,body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li a::after{display:none;content:none} body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li{float:none;margin:0;padding:0;background:none!important;border:none!important;border-radius:0;box-shadow:none;display:block} body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li a{display:inline-block;background:transparent!important;border:1.5px solid var(--gcid-border-chip)!important;border-radius:var(--gvid-radius-pill);padding:9px 18px!important;font-weight:700!important;font-size:var(--gvid-text-caption-lg)!important;color:var(--gcid-text-muted)!important;text-shadow:none} body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li a:hover{color:var(--gcid-text-primary)!important;border-color:var(--gcid-text-primary)!important;opacity:1} body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li.active{background:none;border:none} body.single-product #page-container .wc-product .woocommerce-tabs ul.tabs li.active a{background:var(--gcid-accent-1)!important;border-color:var(--gcid-accent-1)!important;color:var(--gcid-text-on-accent)!important} body.single-product #page-container .wc-product .woocommerce-tabs .panel{background:var(--gcid-bg-surface);border:1px solid var(--gcid-border-subtle);border-radius:var(--gvid-radius-card);padding:22px 26px;margin:14px 0 0;font-size:var(--gvid-text-ui-lg);line-height:1.6;box-shadow:none} body.single-product #page-container .wc-product .woocommerce-tabs .panel h2{font-family:var(--gvid-font-display),sans-serif;font-weight:400;font-size:22px;letter-spacing:.02em;margin:0 0 10px;color:var(--gcid-text-primary)} @media (max-width:640px){body.single-product #page-container .wc-product .woocommerce-tabs .panel{padding:18px 16px}} /* Rundown native-loop filter (Vela 2026-09-02, UTALK-63): anchor chips use aria-current; loop card eyebrow ~ shortcode-card treatment; native no-results styled as designed empty state */ body a.chip{color:var(--gcid-text-muted);text-decoration:none} body .chip[aria-current="true"]{background:var(--gcid-accent-1);color:var(--gcid-text-on-accent);border-color:var(--gcid-accent-1)} body .rundown-grid-row .card-eyebrow{text-transform:uppercase} body .cards-grid .card .entry{padding:32px 24px;text-align:center;color:var(--gcid-text-muted)} body .cards-grid .card .entry .not-found-title{font-size:var(--gvid-text-h3-sm);margin:0 0 8px;letter-spacing:.02em} body .cards-grid .card .entry p{margin:0;font-size:var(--gvid-text-ui-lg)} body .cards-grid .card:has(.entry){grid-column:1/-1;border-style:dashed;box-shadow:none;background:var(--gcid-bg-surface)} body .archive-more .et_pb_posts_nav{display:flex;gap:14px;justify-content:center} body .archive-more .et_pb_posts_nav a{border:1.5px solid var(--gcid-text-primary);border-radius:var(--gvid-radius-pill);padding:12px 26px;font-weight:700;font-size:var(--gvid-text-ui);color:var(--gcid-text-primary);text-decoration:none} body .archive-more .et_pb_posts_nav.et_pb_posts_nav a{color:var(--gcid-text-primary)} body .archive-more .et_pb_posts_nav{--gcid-primary-color:var(--gcid-text-primary)} /* ===== Event-single hero photo (ticker-global branch, 2026-09-07, Vela) ===== utalk-events.php renders the event's FEATURED IMAGE (when set) as a banner at the top of the .dark-band hero on /events/ singles; events without one keep the text-only hero unchanged. Tokens only — no hardcoded values. */ body .event-hero-photo{padding-top:36px} body .event-hero-photo img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;object-position:center 30%;border-radius:var(--gvid-radius-card-lg);border:1px solid var(--gcid-border-emphasis)} @media (max-width:640px){body .event-hero-photo{padding-top:20px}body .event-hero-photo img{max-height:260px}} /* ===== Merch drops Phase 1 (UTALK-89, 2026-09-07, Vela) ===== Scarcity chrome + notify affordance on THE LINEUP cards (utalk-shop.php). Tokens only — extends the existing shop skin, no new palette values. - .product-flag over the card media: X LEFT (orange urgency) / SOLD OUT (dark) - .drop-countdown in the tease CTA slot (tabular digits, script.js ticks it) - .product-notify -> #drop-signup (the [utalk_signup source=merch-drops] block) */ body .product-flag{position:absolute;top:10px;left:10px;z-index:1;font-size:var(--gvid-text-eyebrow-sm);font-weight:800;letter-spacing:.1em;padding:5px 10px;border-radius:var(--gvid-radius-badge)} body .product-flag--low{background:var(--gcid-accent-2);color:var(--gcid-text-on-accent)} body .product-flag--out{background:var(--gcid-overlay-badge);color:var(--gcid-text-on-accent)} body .product-card.is-soldout .product-img img,body .product-card.is-soldout .img-placeholder{opacity:.55;filter:grayscale(.4)} body .product-cta--tease{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap} body .drop-countdown{font-variant-numeric:tabular-nums;color:var(--gcid-text-meta);font-size:var(--gvid-text-caption);font-weight:800;letter-spacing:.06em} body .drop-countdown.is-live{color:var(--gcid-accent-1)} body .product-notify{color:var(--gcid-accent-1);font-weight:800;font-size:var(--gvid-text-caption);letter-spacing:.06em;white-space:nowrap} body .product-notify:focus-visible{outline:3px solid var(--gcid-accent-2);outline-offset:2px;border-radius:var(--gvid-radius-badge)} body #drop-signup{scroll-margin-top:calc(var(--utalk-header-h) + 16px)} @media (max-width:640px){body .product-flag{top:7px;left:7px;font-size:9px;padding:4px 8px}body .drop-countdown,body .product-notify{font-size:clamp(10px,2.8vw,11px)}} /* ===== Coming soon — full-viewport standalone shell (UTALK-98 redesign, Vela 2026-09-09) ===== Page 1477 only (section class .utalk-coming-soon + body.page-id-1477 guards). Centered, max-width composition on a richer layered gradient. DATELESS by default: the go-live group (#utalk-cs-golive: "WE GO LIVE" + date line + segment-card countdown) ships hidden and is turned on by utalk-coming-soon.php when the single wp_option `utalk_golive_ts` is set (empty = generic coming soon). Light-orange #FFC08A is the small-text accent (4.8:1+ on the mid gradient — #F4A261 measures 3.8–4.4:1 there, under AA for sub-18px text). */ body .et_pb_section.utalk-coming-soon{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;padding:48px 0;text-align:center;overflow:hidden} body .utalk-coming-soon::before{top:0;background: radial-gradient(1050px 620px at 50% -12%,rgba(52,130,86,.50),rgba(52,130,86,0) 62%), radial-gradient(860px 520px at 50% 116%,rgba(234,90,30,.26),rgba(234,90,30,0) 58%), radial-gradient(1500px 1000px at 50% 46%,rgba(0,0,0,0) 52%,rgba(5,14,10,.60) 100%), linear-gradient(168deg,#17452F 0%,#0F3323 52%,#0A2418 100%)} body .utalk-coming-soon .utalk-cs-row{width:100%;max-width:760px;margin:0 auto} body .utalk-coming-soon .utalk-cs-logo{width:136px} body .utalk-coming-soon .utalk-cs-logo img{border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.10)} body .utalk-coming-soon .utalk-cs-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 16px;color:#FFC08A;font-size:13px;font-weight:700;letter-spacing:.32em} body .utalk-coming-soon .utalk-cs-eyebrow::before, body .utalk-coming-soon .utalk-cs-eyebrow::after{content:"";height:1px;width:64px;flex:0 0 auto} body .utalk-coming-soon .utalk-cs-eyebrow::before{background:linear-gradient(90deg,rgba(255,192,138,0),rgba(255,192,138,.55))} body .utalk-coming-soon .utalk-cs-eyebrow::after{background:linear-gradient(90deg,rgba(255,192,138,.55),rgba(255,192,138,0))} body .utalk-coming-soon h1.utalk-cs-h1{margin:0 0 20px;font-size:clamp(42px,7.4vw,78px);line-height:.96;letter-spacing:.015em;color:var(--gcid-text-inverse);text-wrap:balance} body .utalk-coming-soon .utalk-cs-h1 .accent-dot{color:var(--gcid-accent-2)} body .utalk-coming-soon .utalk-cs-lede{max-width:46ch;margin:0 auto;font-size:clamp(15.5px,2.1vw,18px);line-height:1.7;color:#C6D2C8} /* go-live group — dormant until utalk_golive_ts is set (see mu-plugin) */ body .utalk-coming-soon .utalk-cs-golive{margin-top:40px} body .utalk-coming-soon .utalk-cs-golive-label{display:block;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.26em;color:#FFC08A} body .utalk-coming-soon .utalk-cs-golive-date{margin:0 0 18px;font-size:clamp(15px,2vw,17px);font-weight:700;letter-spacing:.02em;color:var(--gcid-text-inverse)} body .utalk-cs-count{display:flex;justify-content:center;align-items:stretch;gap:clamp(8px,1.6vw,14px)} body .utalk-cs-count .cs-seg{display:flex;flex-direction:column;gap:7px;min-width:clamp(64px,10vw,92px);padding:18px 8px 14px;background:rgba(7,17,12,.50);border:1px solid rgba(255,255,255,.10);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.25)} body .utalk-cs-count .cs-num{font-family:var(--gvid-font-display),sans-serif;font-size:clamp(30px,5.4vw,46px);line-height:1;color:var(--gcid-text-inverse);font-variant-numeric:tabular-nums} body .utalk-cs-count .cs-lab{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FFC08A} body .utalk-cs-count .cs-sep{align-self:center;padding-bottom:14px;color:rgba(255,255,255,.30);font-size:clamp(18px,3vw,26px);font-weight:700;line-height:1} /* signup */ body .utalk-coming-soon .utalk-cs-form-label{display:block;margin:44px 0 14px;font-size:12px;font-weight:700;letter-spacing:.26em;color:#FFC08A} body .utalk-coming-soon .email-row{justify-content:center;max-width:500px;margin:0 auto} body .utalk-coming-soon .utalk-cs-privacy{margin:16px auto 0;font-size:13px;color:#C6D2C8} body .utalk-coming-soon .utalk-cs-privacy .link-green{font-size:13px} /* leak guard: nothing but the coming-soon section may paint on this page */ body.page-id-1477 .ticker,body.page-id-1477 #main-footer,body.page-id-1477 .et-l--footer,body.page-id-1477 .et-l--header{display:none} body.page-id-1477 #page-container,body.page-id-1477 #main-content{background:#0A2418} /* motion-safe entrance only */ @media (prefers-reduced-motion:no-preference){ body .utalk-coming-soon .utalk-cs-row{animation:utalkCsIn .7s cubic-bezier(.2,.7,.3,1) both} } @keyframes utalkCsIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media (max-width:640px){ body .et_pb_section.utalk-coming-soon{padding:36px 0} body .utalk-coming-soon .utalk-cs-logo{width:108px} body .utalk-coming-soon .utalk-cs-eyebrow{gap:12px;letter-spacing:.22em} body .utalk-coming-soon .utalk-cs-eyebrow::before, body .utalk-coming-soon .utalk-cs-eyebrow::after{width:36px} body .utalk-coming-soon .utalk-cs-form-label{margin-top:36px} body .utalk-cs-count .cs-sep{display:none} } /* v76: center The Rundown Take block on episode pages (heading+body); episode pages are excluded from the .et_pb_column fit-content centering at line ~455, so the recap measure hugged left. UTALK, 2026-09-25 */ body .ep-recap-take{max-width:var(--gvid-size-container-narrow);margin-left:auto;margin-right:auto} /* ===== v78: hero autoplay "Tap for sound" pill (UTALK-115, 2026-09-30, Vela) ===== The home hero auto-swaps to a MUTED YouTube iframe on load (section 9 of utalk-episodes.php); this pill sits bottom-left of the video, lifted above YouTube's own control bar so its mute/volume button stays reachable, and is removed on tap. Brand green + white via the UTALK-63 night/day variables (--gcid-accent-1 / --gcid-text-on-accent), orange focus ring like every other control. Real