/* Theme Name: GeneratePress Child Theme URI: https://generatepress.com Description: Default GeneratePress child theme Author: Tom Usborne Author URI: https://tomusborne.com Template: generatepress Version: 0.1 */ body.page-id-14 .entry-header { display: none; } /* ========================================================= HEADER - FIGMA 1440PX DESKTOP ========================================================= */ .site-header { width: 100%; background: #ffffff; } .site-header .inside-header { width: 100%; max-width: 1440px !important; margin: 0 auto !important; /* Figma: 60px left + right */ padding: 20px 60px !important; box-sizing: border-box; display: flex !important; align-items: center !important; } /* ========================================================= LOGO ========================================================= */ .site-header .site-logo { flex: 0 0 auto; margin: 0 !important; } .site-header .site-logo img, .site-header .header-image { width: 126px !important; height: 125px !important; display: block; object-fit: contain; } /* ========================================================= MAIN NAVIGATION ========================================================= */ .site-header #site-navigation { margin-left: auto !important; background: transparent !important; } .site-header #site-navigation .inside-navigation { padding: 0 !important; max-width: none !important; } /* Menu */ .site-header .main-nav > ul { display: flex !important; align-items: center !important; gap: 0; margin: 0 !important; } /* ========================================================= NORMAL MENU LINKS ========================================================= */ .site-header .main-navigation .main-nav ul li a { font-family: "Outfit", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; color: #1E2B33; padding: 18px 22px !important; background: transparent !important; transition: opacity .2s ease; } .site-header .main-navigation .main-nav ul li a:hover { opacity: .7; } /* Active Podcast item */ .site-header .main-navigation .main-nav ul li.current-menu-item > a, .site-header .main-navigation .main-nav ul li.current_page_item > a { font-weight: 700 !important; color: #1E2B33 !important; } /* ========================================================= GET IN TOUCH BUTTON Menu item ID = 109 ========================================================= */ .site-header #menu-item-109 { margin-left: 28px !important; } .site-header #menu-item-109 > a { font-family: "Outfit", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; color: #ffffff !important; background: #FF4F45 !important; padding: 16px 25px !important; border-radius: 999px !important; display: flex !important; align-items: center; justify-content: center; white-space: nowrap; transition: transform .2s ease, opacity .2s ease; } .site-header #menu-item-109 > a:hover { color: #ffffff !important; background: #FF4F45 !important; opacity: .9; transform: translateY(-1px); } /* ========================================================= REMOVE GENERATEPRESS DEFAULT NAV COLORS ========================================================= */ .site-header .main-navigation, .site-header .main-navigation ul ul { background: transparent; } .site-header .main-navigation .main-nav ul li[class*="current-menu-"] > a { background: transparent !important; } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1440px) { .site-header .inside-header { width: 1440px !important; max-width: 1440px !important; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) { .site-header .inside-header { padding-left: 35px !important; padding-right: 35px !important; } .site-header .main-navigation .main-nav ul li a { font-size: 15px !important; padding-left: 14px !important; padding-right: 14px !important; } .site-header #menu-item-109 { margin-left: 14px !important; } } /* ========================================================= MOBILE / TABLET ========================================================= */ @media (max-width: 768px) { .site-header .inside-header { min-height: 90px; padding: 12px 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } .site-header .site-logo img, .site-header .header-image { width: 70px !important; height: auto !important; } .site-header .mobile-menu-control-wrapper { margin-left: auto; } .site-header .menu-toggle { padding: 10px !important; background: transparent !important; color: #1E2B33 !important; font-size: 24px; } .site-header #site-navigation.toggled { width: 100%; } .site-header #site-navigation.toggled .main-nav > ul { display: block !important; width: 100%; padding: 15px 0; } .site-header #site-navigation.toggled .main-nav ul li a { padding: 14px 20px !important; } .site-header #menu-item-109 { margin: 10px 20px 5px !important; } .site-header #menu-item-109 > a { width: fit-content; padding: 14px 22px !important; } } /* ========================================================= HEADER NAVIGATION - FIGMA MATCH ========================================================= */ @media (min-width: 769px) { /* 1440px header frame */ .site-header .inside-header { max-width: 1440px !important; width: 100% !important; margin: 0 auto !important; padding-left: 60px !important; padding-right: 60px !important; position: relative !important; } /* Navigation covers header so menu can sit exactly center */ .site-header #site-navigation { position: absolute !important; left: 60px !important; right: 60px !important; top: 0 !important; bottom: 0 !important; display: flex !important; align-items: center !important; margin: 0 !important; background: transparent !important; } .site-header #site-navigation .inside-navigation, .site-header #site-navigation .main-nav { width: 100% !important; } /* Center navigation links */ .site-header #site-navigation .main-nav > ul { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 50px !important; position: relative !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== NORMAL / NON-ACTIVE LINKS Outfit 400 / 20px / 100% ===================================================== */ .site-header .main-navigation .main-nav > ul > li:not(#menu-item-109) > a { font-family: "Outfit", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 20px !important; line-height: 100% !important; letter-spacing: 0 !important; color: #1E2B33; padding: 0 !important; margin: 0 !important; background: transparent !important; white-space: nowrap !important; } /* ===================================================== ACTIVE LINK Outfit 700 / 20px / 100% ===================================================== */ .site-header .main-navigation .main-nav > ul > li.current-menu-item:not(#menu-item-109) > a, .site-header .main-navigation .main-nav > ul > li.current_page_item:not(#menu-item-109) > a, .site-header .main-navigation .main-nav > ul > li.current-menu-ancestor:not(#menu-item-109) > a { font-family: "Outfit", sans-serif !important; font-weight: 700 !important; font-style: normal !important; font-size: 20px !important; line-height: 100% !important; letter-spacing: 0 !important; color: #1E2B33; background: transparent !important; } /* Podcast page currently menu item #104 hai. Aapke HTML mein iska href="#" hai, isliye WordPress automatically current-menu-item nahi laga raha. */ body.page-id-14 .site-header #menu-item-104 > a { font-family: "Outfit", sans-serif !important; font-weight: 700 !important; font-style: normal !important; font-size: 20px !important; line-height: 100% !important; letter-spacing: 0 !important; color: #1E2B33 !important; } /* ===================================================== GET IN TOUCH Menu center calculation ka part nahi banega. Right end par rahega. ===================================================== */ .site-header #menu-item-109 { position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* Logo navigation ke neeche na aaye */ .site-header .site-logo { position: relative !important; z-index: 10 !important; } } /* ========================================================= PODCAST HERO - SAME 1440PX WIDTH AS HEADER ========================================================= */ /* Main page frame */ body.page-id-14 #page.grid-container { width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } /* Remove GeneratePress content restriction */ body.page-id-14 .site-content, body.page-id-14 #primary, body.page-id-14 .site-main, body.page-id-14 .inside-article, body.page-id-14 .entry-content { width: 100% !important; max-width: none !important; } /* Remove default GeneratePress spacing */ body.page-id-14 .site-content, body.page-id-14 .inside-article { padding-left: 0 !important; padding-right: 0 !important; } /* ========================================================= OUTER HERO ========================================================= */ body.page-id-14 .podcast-hero { width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } /* Gutenberg is-layout-constrained wrapper fix */ body.page-id-14 .podcast-hero > .wp-block-group__inner-container { width: 100% !important; max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } /* ========================================================= INNER FIGMA CONTENT 1440 - 60 - 60 = 1320px ========================================================= */ body.page-id-14 .podcast-hero-columns { width: calc(100% - 120px) !important; max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; display: grid !important; grid-template-columns: 700px 586px !important; column-gap: 34px !important; align-items: start !important; } /* Gutenberg column defaults reset */ body.page-id-14 .podcast-hero-columns > .wp-block-column { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; flex-basis: auto !important; } /* Left */ body.page-id-14 .podcast-hero-content { width: 700px !important; max-width: 700px !important; } /* Right */ body.page-id-14 .podcast-hero-media { width: 586px !important; max-width: 586px !important; } /* Image */ body.page-id-14 .podcast-hero-image, body.page-id-14 .podcast-hero-image img { width: 586px !important; max-width: 586px !important; } /* ========================================================= RESPONSIVE - DON'T OVERFLOW ON SMALLER SCREENS ========================================================= */ @media (max-width: 1439px) { body.page-id-14 .podcast-hero-columns { width: calc(100% - 80px) !important; grid-template-columns: minmax(0, 700px) minmax(0, 586px) !important; gap: 30px !important; } body.page-id-14 .podcast-hero-content, body.page-id-14 .podcast-hero-media { width: 100% !important; max-width: 100% !important; } body.page-id-14 .podcast-hero-image, body.page-id-14 .podcast-hero-image img { width: 100% !important; max-width: 100% !important; } } /* ========================================= PODCAST PAGE BACKGROUND + TOP GAP FIX ========================================= */ body.page-id-14, body.page-id-14 #page, body.page-id-14 .site-content, body.page-id-14 #primary, body.page-id-14 .content-area, body.page-id-14 .site-main, body.page-id-14 .inside-article, body.page-id-14 .entry-content, body.page-id-14 .podcast-hero { background: #ffffff !important; } /* Remove unnecessary top spacing */ body.page-id-14 .site-content { padding-top: 0 !important; margin-top: 0 !important; } body.page-id-14 .inside-article { padding-top: 0 !important; margin-top: 0 !important; } body.page-id-14 .entry-content { margin-top: 0 !important; padding-top: 0 !important; } /* Hero top gap remove */ body.page-id-14 .podcast-hero, body.page-id-14 .podcast-hero > .wp-block-group__inner-container, body.page-id-14 .podcast-hero-columns { margin-top: 0 !important; } /* If previous CSS has top padding on hero columns */ body.page-id-14 .podcast-hero-columns { padding-top: 0 !important; } /* Left column also remove top padding */ body.page-id-14 .podcast-hero-content { padding-top: 0 !important; } /* ========================================= PODCAST HERO LEFT CONTENT - CENTER + SPACING ========================================= */ body.page-id-14 .podcast-hero-content { min-height: 514px; /* right image ke equal */ display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; box-sizing: border-box; padding: 32px 0 !important; margin: 0 !important; } /* Title breathing space */ body.page-id-14 .podcast-hero-title { margin: 0 0 22px !important; } /* Description spacing */ body.page-id-14 .podcast-hero-description { margin: 0 0 30px !important; } /* Host row spacing */ body.page-id-14 .podcast-hosts { margin: 0 0 30px !important; display: flex !important; align-items: center !important; } /* Separator */ body.page-id-14 .podcast-hero-divider { width: 100% !important; margin: 0 0 30px !important; border: 0 !important; border-top: 1px solid #1E2B3345 !important; } /* Stats */ body.page-id-14 .podcast-stats { width: 100% !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 36px !important; margin: 0 !important; } /* Each stat */ body.page-id-14 .podcast-stat { flex: 1 1 0 !important; margin: 0 !important; padding: 0 !important; } /* Prevent Gutenberg unwanted bottom gaps */ body.page-id-14 .podcast-hero-content > *:last-child { margin-bottom: 0 !important; } /* ========================================= PODCAST HOST IMAGES - FIGMA STYLE ========================================= */ .podcast-hosts { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0 !important; } /* Both host images */ .podcast-hosts .podcast-host-image { width: 47px !important; height: 47px !important; min-width: 47px !important; margin: 0 !important; padding: 0 !important; position: relative; flex: 0 0 47px !important; } /* Actual image */ .podcast-hosts .podcast-host-image img { width: 47px !important; height: 47px !important; display: block !important; object-fit: cover !important; object-position: center !important; border-radius: 50% !important; margin: 0 !important; padding: 0 !important; } /* First image */ .podcast-hosts .podcast-host-image:nth-child(1) { z-index: 2; } /* Second image overlaps first */ .podcast-hosts .podcast-host-image:nth-child(2) { margin-left: -8px !important; z-index: 3; } /* Text spacing after avatars */ .podcast-hosts .podcast-host-text { margin: 0 0 0 14px !important; } body.page-id-14 .podcast-stats { width: 100% !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 40px !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .podcast-stat { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* ========================================================= LATEST EPISODE SECTION Full bleed background WITHOUT horizontal scrollbar ========================================================= */ body.page-id-14 .latest-episode-section { position: relative !important; width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; background: #D7EFE8 !important; /* * Extend only the background to viewport edges. * Section itself stays inside 1440px layout. */ box-shadow: 0 0 0 100vmax #D7EFE8 !important; clip-path: inset(0 -100vmax) !important; box-sizing: border-box !important; } /* ========================================================= INNER CONTENT 1440 frame with 60px side gutters ========================================================= */ body.page-id-14 .latest-episode-section > .wp-block-group__inner-container { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 60px !important; box-sizing: border-box !important; } /* Gutenberg constrained layout remove */ body.page-id-14 .latest-episode-section > .wp-block-group__inner-container.is-layout-constrained { max-width: 1440px !important; } /* Every direct section item gets full usable width */ body.page-id-14 .latest-episode-section > .wp-block-group__inner-container > * { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Query loop must not create overflow */ body.page-id-14 .latest-episode-section .wp-block-query, body.page-id-14 .latest-episode-section .wp-block-post-template, body.page-id-14 .latest-episode-section .latest-episode-layout { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Flex children must be allowed to shrink */ body.page-id-14 .latest-episode-layout > .wp-block-column { min-width: 0 !important; } /* Safety - page should never create horizontal scrollbar */ html, body.page-id-14 { overflow-x: clip !important; } /* ========================================================= LATEST EPISODE SECTION Figma frame: 1440px Background: #D7EFE8 ========================================================= */ body.page-id-14 .latest-episode-section { position: relative !important; width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; background: #D7EFE8 !important; /* * Background edge-to-edge without changing * actual 1440px content width. */ box-shadow: 0 0 0 100vmax #D7EFE8 !important; clip-path: inset(0 -100vmax) !important; box-sizing: border-box !important; } /* Main 1440px wrapper */ body.page-id-14 .latest-episode-section > .wp-block-group__inner-container { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; /* 1440 frame -> 60px gutters -> 1320px usable */ padding: 60px 60px 70px !important; box-sizing: border-box !important; } /* Remove Gutenberg constrained layout limitation */ body.page-id-14 .latest-episode-section > .wp-block-group__inner-container > * { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= LATEST EPISODE INNER ========================================================= */ body.page-id-14 .latest-episode-inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .latest-episode-inner > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= FILTER ROW ========================================================= */ body.page-id-14 .episode-filter-row { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 50px !important; padding: 0 !important; } /* ========================================================= FILTER WHITE CAPSULE Figma: 666 x 70 ========================================================= */ body.page-id-14 .episode-filter-buttons { width: 666px !important; max-width: 100% !important; min-height: 70px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 30px !important; background: #FFFFFF !important; border-top: 1px solid #E5E7EB !important; border-bottom: 1px solid #E5E7EB !important; border-radius: 73px !important; padding: 8px 12px !important; margin: 0 auto !important; box-sizing: border-box !important; } /* Gutenberg button reset */ body.page-id-14 .episode-filter-buttons .wp-block-button { margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; } /* ========================================================= FILTER TYPOGRAPHY ========================================================= */ body.page-id-14 .episode-filter-buttons .wp-block-button__link { font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-style: normal !important; line-height: 100% !important; letter-spacing: 0 !important; color: #1E2B33 !important; background: transparent !important; border: 0 !important; border-radius: 50px !important; padding: 15px 0 !important; margin: 0 !important; white-space: nowrap !important; box-shadow: none !important; text-decoration: none !important; transition: color 0.2s ease, background-color 0.2s ease; } /* ========================================================= ACTIVE FILTER - ALL EPISODES ========================================================= */ body.page-id-14 .episode-filter-buttons .wp-block-button:first-child .wp-block-button__link { background: #FF4F45 !important; color: #FFFFFF !important; font-weight: 500 !important; padding-left: 22px !important; padding-right: 22px !important; } /* Other buttons hover */ body.page-id-14 .episode-filter-buttons .wp-block-button:not(:first-child) .wp-block-button__link:hover { color: #FF4F45 !important; } /* ========================================================= HEADING WRAPPER ========================================================= */ body.page-id-14 .latest-heading-wrap { width: 100% !important; max-width: none !important; margin: 0 0 45px !important; padding: 0 !important; } body.page-id-14 .latest-heading-wrap > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= LATEST EPISODE + DATE ROW ========================================================= */ body.page-id-14 .latest-heading-row { width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= "LATEST EPISODE" ========================================================= */ body.page-id-14 .latest-heading-title { font-family: "Outfit", sans-serif !important; font-size: 40px !important; font-weight: 700 !important; font-style: normal !important; line-height: 100% !important; letter-spacing: 0 !important; color: #1E2B33 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= RELEASE DATE ========================================================= */ body.page-id-14 .latest-heading-date { font-family: "Outfit", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 100% !important; letter-spacing: 0 !important; color: #1E2B33 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* ========================================================= QUERY LOOP BASE RESET Styling next step mein karenge ========================================================= */ body.page-id-14 .latest-episode-query { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .latest-episode-query .wp-block-query { width: 100% !important; max-width: none !important; } body.page-id-14 .latest-episode-query .wp-block-query .wp-block-post-template { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { body.page-id-14 .latest-episode-section > .wp-block-group__inner-container { padding: 50px 40px 60px !important; } body.page-id-14 .episode-filter-buttons { width: auto !important; gap: 20px !important; padding-left: 14px !important; padding-right: 14px !important; } body.page-id-14 .episode-filter-buttons .wp-block-button__link { font-size: 13px !important; } body.page-id-14 .latest-heading-title { font-size: 34px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body.page-id-14 .latest-episode-section > .wp-block-group__inner-container { padding: 40px 20px 50px !important; } /* Filter */ body.page-id-14 .episode-filter-row { margin-bottom: 35px !important; } body.page-id-14 .episode-filter-buttons { width: 100% !important; min-height: auto !important; flex-wrap: wrap !important; gap: 8px 14px !important; border-radius: 24px !important; padding: 10px !important; } body.page-id-14 .episode-filter-buttons .wp-block-button__link { font-size: 13px !important; padding: 11px 4px !important; } body.page-id-14 .episode-filter-buttons .wp-block-button:first-child .wp-block-button__link { padding-left: 18px !important; padding-right: 18px !important; } /* Heading / date */ body.page-id-14 .latest-heading-wrap { margin-bottom: 32px !important; } body.page-id-14 .latest-heading-row { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 10px !important; } body.page-id-14 .latest-heading-title { font-size: 30px !important; } body.page-id-14 .latest-heading-date { font-size: 14px !important; } } /* */ /* ========================================================= LATEST EPISODE QUERY LOOP ========================================================= */ body.page-id-14 .latest-episode-query, body.page-id-14 .latest-episode-query .wp-block-post-template, body.page-id-14 .latest-episode-query .wp-block-post { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ========================================================= 2 COLUMN LAYOUT ========================================================= */ body.page-id-14 .latest-episode-layout { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 586px) minmax(0, 1fr) !important; column-gap: 80px !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* Gutenberg column reset */ body.page-id-14 .latest-episode-layout > .wp-block-column { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; flex-basis: auto !important; } /* ========================================================= LEFT FEATURED IMAGE ========================================================= */ body.page-id-14 .latest-episode-image-col { width: 586px !important; max-width: 100% !important; } /* Figure */ body.page-id-14 .latest-episode-image { width: 586px !important; max-width: 100% !important; height: 514px !important; margin: 0 !important; overflow: hidden !important; border-radius: 8px !important; } /* Actual image */ body.page-id-14 .latest-episode-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; } /* ========================================================= RIGHT CONTENT ========================================================= */ body.page-id-14 .latest-episode-content { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= CATEGORY ========================================================= */ body.page-id-14 .latest-episode-category { margin: 0 0 18px !important; padding: 0 !important; } body.page-id-14 .latest-episode-category a { font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; font-style: normal !important; line-height: 100% !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: #FF4F45 !important; text-decoration: none !important; margin: 0 !important; } /* ========================================================= EPISODE TITLE ========================================================= */ body.page-id-14 .latest-episode-title { width: 100% !important; margin: 0 0 22px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 34px !important; font-weight: 700 !important; font-style: normal !important; line-height: 105% !important; letter-spacing: 0 !important; } body.page-id-14 .latest-episode-title a { color: #1E2B33 !important; text-decoration: none !important; } /* ========================================================= EXCERPT ========================================================= */ body.page-id-14 .latest-episode-excerpt { width: 100% !important; margin: 0 0 28px !important; padding: 0 !important; } body.page-id-14 .latest-episode-excerpt .wp-block-post-excerpt .wp-block-post-excerpt__excerpt { font-family: "Outfit", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 135% !important; letter-spacing: 0 !important; color: #1E2B33 !important; margin: 0 !important; } /* ========================================================= AUDIO WRAPPER ========================================================= */ body.page-id-14 .latest-audio-player { width: 100% !important; max-width: none !important; margin: 0 0 28px !important; padding: 0 !important; background: transparent !important; } body.page-id-14 .latest-audio-player > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Native player temporary styling */ body.page-id-14 .podcast-dynamic-audio { width: 100% !important; background: #FFFFFF !important; border-radius: 8px !important; padding: 22px 20px !important; box-sizing: border-box !important; } body.page-id-14 .podcast-dynamic-audio audio { width: 100% !important; display: block !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { body.page-id-14 .latest-episode-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 45px !important; } body.page-id-14 .latest-episode-image-col, body.page-id-14 .latest-episode-image { width: 100% !important; } body.page-id-14 .latest-episode-image { height: 460px !important; } body.page-id-14 .latest-episode-title { font-size: 30px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body.page-id-14 .latest-episode-layout { display: grid !important; grid-template-columns: 1fr !important; row-gap: 32px !important; } body.page-id-14 .latest-episode-image { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; } body.page-id-14 .latest-episode-content { width: 100% !important; } body.page-id-14 .latest-episode-category { margin-bottom: 12px !important; } body.page-id-14 .latest-episode-title { font-size: 27px !important; margin-bottom: 18px !important; } body.page-id-14 .latest-episode-excerpt .wp-block-post-excerpt__excerpt { font-size: 15px !important; } body.page-id-14 .podcast-dynamic-audio { padding: 16px !important; } } /* ========================================================= TGF CUSTOM AUDIO PLAYER DIRECT SELECTORS - NO PARENT DEPENDENCY ========================================================= */ /* CARD */ .tgf-audio-player { width: 100% !important; max-width: 100% !important; display: block !important; background: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 26px 28px 22px !important; margin: 0 !important; box-sizing: border-box !important; font-family: "Outfit", sans-serif !important; color: #1E2B33 !important; } /* Native audio hidden */ .tgf-audio-player > audio.tgf-audio { display: none !important; } /* ========================================================= TOP ROW ========================================================= */ .tgf-audio-player .tgf-player-main { width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 20px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================= PLAY BUTTON ========================================================= */ .tgf-audio-player button.tgf-play { all: unset !important; width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; flex: 0 0 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #FF4F45 !important; border: none !important; border-radius: 50% !important; box-sizing: border-box !important; cursor: pointer !important; } /* Hide text triangle */ .tgf-audio-player .tgf-play-symbol { display: block !important; width: 0 !important; height: 0 !important; font-size: 0 !important; margin: 0 !important; padding: 0 !important; } /* CSS triangle */ .tgf-audio-player .tgf-play-symbol::before { content: "" !important; display: block !important; width: 0 !important; height: 0 !important; border-top: 7px solid transparent !important; border-bottom: 7px solid transparent !important; border-left: 11px solid #ffffff !important; margin-left: 3px !important; } /* Hover */ .tgf-audio-player button.tgf-play:hover { background: #FF4F45 !important; opacity: .92 !important; } /* ========================================================= PLAYER RIGHT CONTENT ========================================================= */ .tgf-audio-player .tgf-player-info { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; } /* ========================================================= EPISODE META ========================================================= */ .tgf-audio-player .tgf-player-meta { width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding: 0 !important; margin: 0 0 13px !important; white-space: nowrap !important; } .tgf-audio-player .tgf-player-meta strong { display: inline-block !important; padding: 0 !important; margin: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: 0 !important; color: #1E2B33 !important; } .tgf-audio-player .tgf-player-meta > span { display: inline-block !important; padding: 0 !important; margin: 0 !important; font-size: 9px !important; line-height: 1 !important; color: #1E2B33 !important; } /* ========================================================= PROGRESS BAR ========================================================= */ .tgf-audio-player .tgf-progress { position: relative !important; display: block !important; width: 100% !important; height: 4px !important; min-height: 4px !important; background: #D8DEE3 !important; border: none !important; border-radius: 30px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; cursor: pointer !important; box-sizing: border-box !important; } .tgf-audio-player .tgf-progress-fill { position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; width: 0%; height: 100% !important; background: #FF4F45 !important; border-radius: 30px !important; padding: 0 !important; margin: 0 !important; } /* Give a small visible red start initially */ .tgf-audio-player .tgf-progress-fill:empty { min-width: 0; } /* ========================================================= TIME ========================================================= */ .tgf-audio-player .tgf-times { width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 0 !important; margin: 9px 0 0 !important; } .tgf-audio-player .tgf-times span { display: inline-block !important; padding: 0 !important; margin: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1 !important; color: #1E2B33 !important; } .tgf-audio-player .tgf-duration { color: #FF4F45 !important; } /* ========================================================= BOTTOM DIVIDER/TEXT ========================================================= */ .tgf-audio-player .tgf-player-footer { display: block !important; width: 100% !important; padding: 18px 0 0 !important; margin: 21px 0 0 !important; border: none !important; border-top: 1px solid #E5E7EB !important; box-sizing: border-box !important; font-family: "Outfit", sans-serif !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: #1E2B33 !important; text-transform: uppercase !important; } /* ========================================================= PLAYER WRAPPER SPACING ========================================================= */ .latest-audio-player { width: 100% !important; max-width: none !important; margin: 28px 0 24px !important; padding: 0 !important; } .latest-audio-player > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= PAUSE STATE ========================================================= */ .tgf-audio-player button.tgf-play.is-playing .tgf-play-symbol::before { width: 13px !important; height: 16px !important; border: 0 !important; margin: 0 !important; background: linear-gradient( to right, #ffffff 0, #ffffff 4px, transparent 4px, transparent 9px, #ffffff 9px, #ffffff 13px ) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgf-audio-player { padding: 18px !important; } .tgf-audio-player .tgf-player-main { gap: 14px !important; } .tgf-audio-player button.tgf-play { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; flex-basis: 48px !important; } .tgf-audio-player .tgf-player-meta strong { font-size: 10px !important; } .tgf-audio-player .tgf-player-meta { gap: 5px !important; } .tgf-audio-player .tgf-player-footer { font-size: 9px !important; } } /* ========================================================= FINAL PLAYER ALIGNMENT / SPACING PATCH KEEP THIS AT THE VERY END OF CSS ========================================================= */ /* --------------------------------------------------------- PLAYER CARD BREATHING SPACE --------------------------------------------------------- */ .tgf-audio-player { padding: 28px 30px 24px !important; } /* --------------------------------------------------------- MAIN AUDIO ROW --------------------------------------------------------- */ .tgf-audio-player .tgf-player-main { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 22px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= PLAY BUTTON RESET PREVIOUS PSEUDO ICON ========================================================= */ .tgf-audio-player button.tgf-play { all: unset !important; box-sizing: border-box !important; width: 58px !important; height: 58px !important; min-width: 58px !important; min-height: 58px !important; flex: 0 0 58px !important; display: grid !important; place-items: center !important; align-self: center !important; margin: 0 !important; padding: 0 !important; background: #FF4F45 !important; border: 0 !important; border-radius: 50% !important; cursor: pointer !important; } /* Disable old CSS triangle */ .tgf-audio-player .tgf-play-symbol::before, .tgf-audio-player .tgf-play-symbol::after { content: none !important; display: none !important; } /* Use actual ▶ character again */ .tgf-audio-player .tgf-play-symbol { position: static !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-family: Arial, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important; color: #FFFFFF !important; /* * Optical correction: * triangle naturally looks slightly left. */ transform: translateX(2px) !important; } /* Button hover */ .tgf-audio-player button.tgf-play:hover, .tgf-audio-player button.tgf-play:focus { background: #FF4F45 !important; color: #FFFFFF !important; } /* ========================================================= PLAYER INFORMATION ========================================================= */ .tgf-audio-player .tgf-player-info { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } /* Meta */ .tgf-audio-player .tgf-player-meta { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; margin: 0 0 13px !important; padding: 0 !important; } /* Progress */ .tgf-audio-player .tgf-progress { width: 100% !important; height: 4px !important; margin: 0 !important; background: #D8DEE3 !important; border-radius: 100px !important; } /* Times */ .tgf-audio-player .tgf-times { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 10px 0 0 !important; padding: 0 !important; } /* ========================================================= PLAYER FOOTER ========================================================= */ .tgf-audio-player .tgf-player-footer { width: 100% !important; margin: 22px 0 0 !important; padding: 18px 0 0 !important; border-top: 1px solid #E5E7EB !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .tgf-audio-player { padding: 20px !important; } .tgf-audio-player .tgf-player-main { gap: 15px !important; } .tgf-audio-player button.tgf-play { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; flex-basis: 50px !important; } } /* ========================================================= EPISODE FILTER PILL - FINAL ALIGNMENT FIX ========================================================= */ /* Outer row */ body.page-id-14 .episode-filter-row { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 50px !important; padding: 0 !important; } /* White pill */ body.page-id-14 .episode-filter-row > .episode-filter-buttons { width: 666px !important; max-width: 100% !important; min-height: 70px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; /* IMPORTANT */ justify-content: space-between !important; gap: 0 !important; background: #FFFFFF !important; border: 1px solid #E5E7EB !important; border-left: 0 !important; border-right: 0 !important; border-radius: 73px !important; /* equal left/right breathing */ padding: 8px 14px !important; margin: 0 auto !important; box-sizing: border-box !important; } /* Individual button reset */ body.page-id-14 .episode-filter-buttons > .wp-block-button { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* Normal button links */ body.page-id-14 .episode-filter-buttons > .wp-block-button > .wp-block-button__link { width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 14px 8px !important; background: transparent !important; border: 0 !important; border-radius: 50px !important; font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: 0 !important; color: #1E2B33 !important; white-space: nowrap !important; box-shadow: none !important; } /* ACTIVE - All episodes */ body.page-id-14 .episode-filter-buttons > .wp-block-button:first-child > .wp-block-button__link { background: #FF4F45 !important; color: #FFFFFF !important; font-weight: 500 !important; padding: 14px 22px !important; } /* Hover */ body.page-id-14 .episode-filter-buttons > .wp-block-button:not(:first-child) > .wp-block-button__link:hover { color: #FF4F45 !important; } /* Episode card bottom meta row */ .episode-card-meta { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; } /* Gutenberg shortcode wrappers */ .episode-card-meta .wp-block-shortcode { margin: 0 !important; padding: 0 !important; } /* EP 001 */ .episode-meta-number { display: block; font-family: "Outfit", sans-serif; font-size: 14px; font-weight: 700; line-height: 100%; color: #1E2B33; } /* 48 min */ .episode-meta-duration { display: block; font-family: "Outfit", sans-serif; font-size: 14px; font-weight: 700; line-height: 100%; color: #FF4F45; text-align: right; } /* ========================================================= ALL EPISODES SECTION COMPLETE STANDALONE CSS FIGMA FRAME: 1440PX INNER CONTENT: 1320PX ========================================================= */ /* Prevent horizontal overflow */ body.page-id-14 { overflow-x: hidden; } /* ========================================================= OUTER SECTION ========================================================= */ body.page-id-14 .all-episodes-section { position: relative !important; width: 100vw !important; max-width: none !important; left: 50% !important; margin-left: -50vw !important; margin-right: 0 !important; padding: 64px 0 96px !important; background: #ffffff !important; box-sizing: border-box !important; } /* Remove Gutenberg outer width restriction */ body.page-id-14 .all-episodes-section > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= MAIN 1440PX CONTAINER 60PX LEFT + RIGHT ACTUAL CONTENT = 1320PX ========================================================= */ body.page-id-14 .all-episodes-inner { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding-left: 60px !important; padding-right: 60px !important; box-sizing: border-box !important; } body.page-id-14 .all-episodes-inner > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Remove Gutenberg constrained child width */ body.page-id-14 .all-episodes-inner > .wp-block-group__inner-container > * { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= SECTION HEADING ========================================================= */ body.page-id-14 .all-episodes-heading { width: 100% !important; margin: 0 0 48px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 48px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: 0 !important; color: #1E2B33 !important; } /* ========================================================= QUERY LOOP ========================================================= */ body.page-id-14 .all-episodes-query { width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; margin-block-start: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-14 .all-episodes-query > * { margin-top: 0 !important; margin-block-start: 0 !important; } /* ========================================================= POST TEMPLATE / 3 COLUMN GRID ========================================================= */ body.page-id-14 .all-episodes-grid, body.page-id-14 ul.all-episodes-grid, body.page-id-14 .wp-block-post-template.all-episodes-grid { width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 32px !important; row-gap: 24px !important; align-items: stretch !important; margin: 0 !important; margin-block-start: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* Each query post */ body.page-id-14 .all-episodes-grid > li { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= EPISODE CARD ========================================================= */ body.page-id-14 .episode-card { width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: hidden !important; box-sizing: border-box !important; } /* Gutenberg Group inner wrapper */ body.page-id-14 .episode-card > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; height: 100% !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Remove constrained child alignment */ body.page-id-14 .episode-card > .wp-block-group__inner-container > * { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= FEATURED IMAGE ========================================================= */ body.page-id-14 .episode-card-image { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; overflow: hidden !important; } body.page-id-14 .episode-card-image a { display: block !important; width: 100% !important; height: 100% !important; } body.page-id-14 .episode-card-image img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= CARD CONTENT ========================================================= */ body.page-id-14 .episode-card-content { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; background: #D7EFE8 !important; box-sizing: border-box !important; } /* Actual content wrapper */ body.page-id-14 .episode-card-content > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; min-height: 175px !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 24px 24px 14px 24px !important; background: #D7EFE8 !important; box-sizing: border-box !important; } /* Reset Gutenberg widths inside content */ body.page-id-14 .episode-card-content > .wp-block-group__inner-container > * { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================= CATEGORY ========================================================= */ body.page-id-14 .episode-card-category { margin: 0 0 16px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: #FF4F45 !important; } body.page-id-14 .episode-card-category a { color: #FF4F45 !important; font: inherit !important; text-decoration: none !important; } /* ========================================================= CARD TITLE ========================================================= */ body.page-id-14 .episode-card-title { margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: #1E2B33 !important; } body.page-id-14 .episode-card-title a { color: #1E2B33 !important; font: inherit !important; text-decoration: none !important; } body.page-id-14 .episode-card-title a:hover { color: #1E2B33 !important; } /* ========================================================= DIVIDER ========================================================= */ body.page-id-14 .episode-card-divider { width: 100% !important; max-width: none !important; margin: 24px 0 14px !important; padding: 0 !important; border: 0 !important; border-top: 1px solid rgba(30, 43, 51, 0.18) !important; opacity: 1 !important; } /* ========================================================= META ROW ========================================================= */ body.page-id-14 .episode-card-meta { width: 100% !important; max-width: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; margin-top: auto !important; margin-bottom: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Row inner wrapper */ body.page-id-14 .episode-card-meta > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; } /* Shortcode wrappers */ body.page-id-14 .episode-card-number, body.page-id-14 .episode-card-duration, body.page-id-14 .episode-card-meta .wp-block-shortcode { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .episode-card-number { margin-right: auto !important; } body.page-id-14 .episode-card-duration { margin-left: auto !important; text-align: right !important; } /* ========================================================= EPISODE NUMBER ========================================================= */ body.page-id-14 .episode-meta-number { display: block !important; margin: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; color: #1E2B33 !important; } /* ========================================================= EPISODE DURATION ========================================================= */ body.page-id-14 .episode-meta-duration { display: block !important; margin: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; text-align: right !important; color: #FF4F45 !important; } /* ========================================================= PAGINATION ========================================================= */ body.page-id-14 .episode-pagination { width: 100% !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 64px 0 0 !important; padding: 0 !important; } body.page-id-14 .episode-pagination .wp-block-query-pagination-numbers { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .episode-pagination a, body.page-id-14 .episode-pagination .page-numbers { min-width: 42px !important; height: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 12px !important; background: #D7EFE8 !important; border: 1px solid rgba(30, 43, 51, 0.15) !important; border-radius: 2px !important; box-sizing: border-box !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1 !important; color: #1E2B33 !important; text-decoration: none !important; } /* Current pagination */ body.page-id-14 .episode-pagination .page-numbers.current { background: #FF4F45 !important; border-color: #FF4F45 !important; color: #ffffff !important; } /* ========================================================= NO RESULTS ========================================================= */ body.page-id-14 .episode-no-results { width: 100% !important; margin: 40px 0 0 !important; padding: 40px 20px !important; text-align: center !important; box-sizing: border-box !important; } /* ========================================================= REMOVE UNWANTED GUTENBERG SPACING ========================================================= */ body.page-id-14 .all-episodes-section .is-layout-flow > * { margin-block-start: 0 !important; } body.page-id-14 .all-episodes-query.wp-block-query, body.page-id-14 .all-episodes-grid.wp-block-post-template { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { body.page-id-14 .all-episodes-section { padding: 56px 0 76px !important; } body.page-id-14 .all-episodes-inner { padding-left: 32px !important; padding-right: 32px !important; } body.page-id-14 .all-episodes-heading { margin-bottom: 40px !important; font-size: 42px !important; } body.page-id-14 .all-episodes-grid, body.page-id-14 ul.all-episodes-grid, body.page-id-14 .wp-block-post-template.all-episodes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body.page-id-14 .all-episodes-section { padding: 44px 0 60px !important; } body.page-id-14 .all-episodes-inner { padding-left: 20px !important; padding-right: 20px !important; } body.page-id-14 .all-episodes-heading { margin-bottom: 32px !important; font-size: 36px !important; } body.page-id-14 .all-episodes-grid, body.page-id-14 ul.all-episodes-grid, body.page-id-14 .wp-block-post-template.all-episodes-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 24px !important; } body.page-id-14 .episode-card-content > .wp-block-group__inner-container { min-height: 165px !important; padding: 20px 20px 12px !important; } body.page-id-14 .episode-card-title { font-size: 18px !important; } body.page-id-14 .episode-pagination { margin-top: 48px !important; flex-wrap: wrap !important; } } /* Footer */ /* ========================================================= THE GYMNASTICS FILES COMPLETE GLOBAL FOOTER CSS GeneratePress Free - 5 Footer Widgets ========================================================= */ /* ========================================================= 1. GLOBAL FOOTER ========================================================= */ .site-footer { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #1f1f1f !important; font-family: "Outfit", sans-serif !important; box-sizing: border-box !important; } .site-footer .footer-widgets { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #1f1f1f !important; color: #ffffff !important; box-sizing: border-box !important; } /* ========================================================= 2. 1440PX FOOTER CONTAINER ========================================================= */ .site-footer .footer-widgets-container { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 68px 60px 58px !important; box-sizing: border-box !important; } /* ========================================================= 3. MAIN GRID ========================================================= */ .site-footer .inside-footer-widgets { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.8fr) minmax(0, 0.95fr) minmax(0, 0.85fr) !important; grid-template-areas: "follow follow follow follow" "brand site podcast articles" !important; column-gap: 72px !important; row-gap: 54px !important; align-items: start !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Kill GeneratePress default widget column widths */ .site-footer .inside-footer-widgets > div { width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; clear: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Grid positions */ .site-footer .footer-widget-1 { grid-area: follow !important; } .site-footer .footer-widget-2 { grid-area: brand !important; } .site-footer .footer-widget-3 { grid-area: site !important; } .site-footer .footer-widget-4 { grid-area: podcast !important; } .site-footer .footer-widget-5 { grid-area: articles !important; } /* ========================================================= 4. GENERAL WIDGET RESET ========================================================= */ .site-footer .widget { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-sizing: border-box !important; } .site-footer .widget + .widget { margin-top: 0 !important; } /* ========================================================= 5. FOLLOW US - WIDGET 1 ========================================================= */ .site-footer .footer-widget-1 { width: 100% !important; margin: 0 !important; /* * Important: * Gives breathing room below icons BEFORE divider. */ padding: 0 0 48px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; box-sizing: border-box !important; } /* Hide WordPress-generated widget title */ .site-footer .footer-widget-1 > .widget > .widget-title { display: none !important; } .site-footer .tgf-follow-widget { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; text-align: center !important; box-sizing: border-box !important; } /* Follow us heading */ .site-footer .tgf-follow-title { margin: 0 0 12px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 38px !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: 0 !important; color: #ffffff !important; } /* Follow subtitle */ .site-footer .tgf-follow-text { max-width: 650px !important; margin: 0 0 32px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; color: rgba(255, 255, 255, 0.88) !important; text-align: center !important; } /* Follow icons */ .site-footer .tgf-follow-icons { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; } .site-footer .tgf-follow-icons a { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-decoration: none !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } .site-footer .tgf-follow-icons img { display: block !important; width: 28px !important; height: 28px !important; max-width: none !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } .site-footer .tgf-follow-icons a:hover { transform: translateY(-2px); opacity: 0.8; } /* ========================================================= 6. BRAND - WIDGET 2 ========================================================= */ .site-footer .footer-widget-2 > .widget > .widget-title { display: none !important; } .site-footer .tgf-footer-brand-widget { width: 100% !important; max-width: 430px !important; margin: 0 !important; padding: 0 !important; } /* Logo */ .site-footer .tgf-footer-brand-logo { margin: 0 0 38px !important; padding: 0 !important; } .site-footer .tgf-footer-brand-logo a { display: inline-block !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .site-footer .tgf-footer-brand-logo img { display: block !important; width: 110px !important; height: 110px !important; max-width: none !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } /* Description */ .site-footer .tgf-footer-brand-description { width: 100% !important; max-width: 430px !important; margin: 0 0 38px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.48 !important; letter-spacing: 0 !important; color: #ffffff !important; } /* Podcast platform icons */ .site-footer .tgf-footer-brand-icons { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; } .site-footer .tgf-footer-brand-icons a { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-decoration: none !important; } .site-footer .tgf-footer-brand-icons img { display: block !important; width: 40px !important; height: 40px !important; max-width: none !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 7. MENU COLUMN TITLES ========================================================= */ .site-footer .footer-widget-3 .widget-title, .site-footer .footer-widget-4 .widget-title, .site-footer .footer-widget-5 .widget-title { margin: 0 0 28px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: #ffffff !important; } /* ========================================================= 8. FOOTER MENUS ========================================================= */ .site-footer .widget_nav_menu ul, .site-footer .widget_nav_menu ul.menu { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .site-footer .widget_nav_menu li, .site-footer .widget_nav_menu ul.menu > li { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; } .site-footer .widget_nav_menu a, .site-footer .widget_nav_menu ul.menu > li > a { display: inline-block !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.35 !important; color: rgba(255, 255, 255, 0.94) !important; text-decoration: none !important; transition: color 0.2s ease, transform 0.2s ease !important; } .site-footer .widget_nav_menu a:hover { color: #ff5149 !important; transform: translateX(3px); } /* ========================================================= 9. COPYRIGHT / LEGAL BOTTOM BAR ========================================================= */ .site-footer .site-info { width: 100% !important; max-width: none !important; /* * No extra margin-top. * Previous CSS was creating too much dead space here. */ margin: 0 !important; padding: 0 !important; background: #1f1f1f !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; box-sizing: border-box !important; } .site-footer .inside-site-info { width: 100% !important; max-width: 1440px !important; min-height: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; margin: 0 auto !important; padding: 24px 60px !important; box-sizing: border-box !important; } /* Copyright */ .site-footer .copyright-bar { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; color: #ffffff !important; text-align: left !important; } /* ========================================================= 10. PRIVACY / TERMS ========================================================= */ .site-footer .footer-bar { width: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; padding: 0 !important; } .site-footer .footer-bar .widget { width: auto !important; margin: 0 !important; padding: 0 !important; } .site-footer .footer-bar .widget-title { display: none !important; } .site-footer .footer-bar .widget_nav_menu ul.menu { width: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } .site-footer .footer-bar .widget_nav_menu ul.menu > li { width: auto !important; display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } .site-footer .footer-bar .widget_nav_menu ul.menu > li + li::before { content: "/" !important; display: inline-block !important; margin: 0 8px !important; color: rgba(255, 255, 255, 0.75) !important; } .site-footer .footer-bar .widget_nav_menu ul.menu > li > a { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.2 !important; color: #ffffff !important; text-decoration: none !important; white-space: nowrap !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .site-footer .footer-widgets-container { padding: 56px 40px 50px !important; } .site-footer .inside-footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "follow follow" "brand brand" "site podcast" "articles articles" !important; column-gap: 50px !important; row-gap: 46px !important; } .site-footer .footer-widget-1 { padding-bottom: 42px !important; } .site-footer .tgf-follow-title { font-size: 34px !important; } .site-footer .tgf-footer-brand-widget { max-width: 500px !important; } .site-footer .inside-site-info { max-width: none !important; padding: 22px 40px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .site-footer .footer-widgets-container { padding: 48px 24px 42px !important; } .site-footer .inside-footer-widgets { grid-template-columns: 1fr !important; grid-template-areas: "follow" "brand" "site" "podcast" "articles" !important; column-gap: 0 !important; row-gap: 40px !important; } /* FOLLOW */ .site-footer .footer-widget-1 { padding-bottom: 36px !important; } .site-footer .tgf-follow-title { margin-bottom: 10px !important; font-size: 30px !important; } .site-footer .tgf-follow-text { max-width: 340px !important; margin-bottom: 26px !important; font-size: 13px !important; } .site-footer .tgf-follow-icons { gap: 17px !important; } .site-footer .tgf-follow-icons a, .site-footer .tgf-follow-icons img { width: 26px !important; height: 26px !important; } .site-footer .tgf-follow-icons a { flex-basis: 26px !important; } /* BRAND */ .site-footer .tgf-footer-brand-widget { max-width: 100% !important; } .site-footer .tgf-footer-brand-logo { margin-bottom: 28px !important; } .site-footer .tgf-footer-brand-logo img { width: 100px !important; height: 100px !important; } .site-footer .tgf-footer-brand-description { max-width: 390px !important; margin-bottom: 28px !important; font-size: 16px !important; line-height: 1.5 !important; } /* MENU */ .site-footer .footer-widget-3 .widget-title, .site-footer .footer-widget-4 .widget-title, .site-footer .footer-widget-5 .widget-title { margin-bottom: 20px !important; font-size: 18px !important; } .site-footer .widget_nav_menu ul.menu { gap: 14px !important; } .site-footer .widget_nav_menu a { font-size: 15px !important; } /* BOTTOM */ .site-footer .inside-site-info { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 20px 24px !important; text-align: center !important; } .site-footer .copyright-bar { width: 100% !important; text-align: center !important; font-size: 12px !important; } .site-footer .footer-bar { width: 100% !important; justify-content: center !important; } .site-footer .footer-bar .widget_nav_menu ul.menu { justify-content: center !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .site-footer .footer-widgets-container { padding: 42px 20px 36px !important; } .site-footer .inside-footer-widgets { row-gap: 36px !important; } } /* ========================================================= FOOTER WIDGET 1 FOLLOW US - COMPLETE SPACING CSS ========================================================= */ /* ========================================================= WIDGET 1 OUTER WRAPPER ========================================================= */ .site-footer #footer-widgets .inside-footer-widgets > .footer-widget-1 { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; float: none !important; clear: both !important; /* * Top breathing space * Bottom breathing space before divider */ padding: 18px 0 54px !important; margin: 0 0 56px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; box-sizing: border-box !important; } /* ========================================================= REMOVE GENERATEPRESS WIDGET DEFAULT SPACING ========================================================= */ .site-footer .footer-widget-1 .widget, .site-footer .footer-widget-1 .widget_custom_html, .site-footer .footer-widget-1 .widget_text, .site-footer .footer-widget-1 .inner-padding { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-sizing: border-box !important; } .site-footer .footer-widget-1 .textwidget, .site-footer .footer-widget-1 .custom-html-widget { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= FOLLOW US CONTENT WRAPPER ========================================================= */ .site-footer .tgf-follow-widget { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; text-align: center !important; box-sizing: border-box !important; } /* ========================================================= FOLLOW US HEADING ========================================================= */ .site-footer .tgf-follow-title { width: 100% !important; margin: 0 0 14px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 38px !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: 0 !important; color: #ffffff !important; text-align: center !important; } /* ========================================================= FOLLOW US DESCRIPTION ========================================================= */ .site-footer .tgf-follow-text { width: 100% !important; max-width: 650px !important; margin: 0 auto 34px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; color: rgba(255, 255, 255, 0.86) !important; text-align: center !important; } /* ========================================================= SOCIAL ICON ROW ========================================================= */ .site-footer .tgf-follow-icons { width: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 20px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* Individual icon */ .site-footer .tgf-follow-icons a { width: 28px !important; height: 28px !important; min-width: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 28px !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-decoration: none !important; box-sizing: border-box !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } .site-footer .tgf-follow-icons img { display: block !important; width: 28px !important; height: 28px !important; max-width: none !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } .site-footer .tgf-follow-icons a:hover { transform: translateY(-2px); opacity: 0.8; } /* ========================================================= IMPORTANT REMOVE EXTRA TOP MARGIN FROM FOLLOW CHILDREN ========================================================= */ .site-footer .footer-widget-1 .tgf-follow-widget > *:first-child { margin-top: 0 !important; } .site-footer .footer-widget-1 .tgf-follow-widget > *:last-child { margin-bottom: 0 !important; } /* ========================================================= DESKTOP - OTHER WIDGETS DON'T ADD THEIR OWN TOP MARGIN ========================================================= */ .site-footer .footer-widget-2, .site-footer .footer-widget-3, .site-footer .footer-widget-4, .site-footer .footer-widget-5 { margin-top: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .site-footer #footer-widgets .inside-footer-widgets > .footer-widget-1 { padding: 12px 0 46px !important; margin-bottom: 46px !important; } .site-footer .tgf-follow-title { margin-bottom: 12px !important; font-size: 34px !important; } .site-footer .tgf-follow-text { max-width: 560px !important; margin-bottom: 30px !important; font-size: 14px !important; } .site-footer .tgf-follow-icons { gap: 18px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .site-footer #footer-widgets .inside-footer-widgets > .footer-widget-1 { padding: 8px 0 38px !important; margin-bottom: 38px !important; } .site-footer .tgf-follow-title { margin-bottom: 10px !important; font-size: 30px !important; } .site-footer .tgf-follow-text { max-width: 340px !important; margin: 0 auto 26px !important; font-size: 13px !important; line-height: 1.5 !important; } .site-footer .tgf-follow-icons { gap: 17px !important; } .site-footer .tgf-follow-icons a { width: 26px !important; height: 26px !important; min-width: 26px !important; flex-basis: 26px !important; } .site-footer .tgf-follow-icons img { width: 26px !important; height: 26px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .site-footer #footer-widgets .inside-footer-widgets > .footer-widget-1 { padding-bottom: 34px !important; margin-bottom: 34px !important; } .site-footer .tgf-follow-title { font-size: 28px !important; } .site-footer .tgf-follow-text { max-width: 300px !important; } } /* ========================================================= THE GYMNASTICS FILES MOBILE HEADER + RIGHT OFF-CANVAS MENU GeneratePress Free ========================================================= */ @media (max-width: 768px) { html, body { overflow-x: hidden !important; } /* ===================================================== 1. MOBILE HEADER ===================================================== */ .site-header { width: 100% !important; height: 90px !important; min-height: 90px !important; margin: 0 !important; padding: 0 !important; background: #D7EFE8 !important; position: relative !important; z-index: 9990 !important; } .site-header .inside-header { width: 100% !important; height: 90px !important; min-height: 90px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 10px 18px !important; box-sizing: border-box !important; } /* ===================================================== 2. LOGO ===================================================== */ .site-header .site-logo { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; position: relative !important; z-index: 2 !important; } .site-header .site-logo a { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .site-header .site-logo img, .site-header .header-image { display: block !important; width: 62px !important; height: 62px !important; max-width: 62px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== 3. GENERATEPRESS NAVIGATION Move navigation into same 90px header row ===================================================== */ #site-navigation, .main-navigation { width: 100% !important; height: 90px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: -90px 0 0 !important; padding: 0 18px !important; background: transparent !important; box-sizing: border-box !important; position: relative !important; z-index: 9995 !important; } /* ===================================================== 4. HAMBURGER BUTTON ===================================================== */ #site-navigation .menu-toggle, .main-navigation .menu-toggle { width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #1E2B33 !important; line-height: 1 !important; position: relative !important; z-index: 10005 !important; } /* * IMPORTANT: * Use GeneratePress' original hamburger. * Do NOT create another hamburger with ::before. */ #site-navigation .menu-toggle .gp-icon, .main-navigation .menu-toggle .gp-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } #site-navigation .menu-toggle svg, .main-navigation .menu-toggle svg { width: 27px !important; height: 27px !important; fill: #1E2B33 !important; } /* Hide Menu text, keep GP icon */ #site-navigation .menu-toggle { font-size: 0 !important; } /* ===================================================== 5. OFF-CANVAS DRAWER ===================================================== */ #site-navigation .main-nav { position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: auto !important; width: min(78vw, 310px) !important; max-width: 310px !important; height: 100dvh !important; min-height: 100dvh !important; display: block !important; margin: 0 !important; padding: 100px 18px 28px !important; background: #D7EFE8 !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; box-shadow: -12px 0 35px rgba(0, 0, 0, 0.14) !important; transform: translateX(110%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: transform 0.35s ease, opacity 0.25s ease, visibility 0.35s ease !important; z-index: 10001 !important; } /* Open drawer */ #site-navigation.toggled .main-nav { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ===================================================== 6. DRAWER LOGO Only ONE drawer logo ===================================================== */ #site-navigation .main-nav::before { content: ""; position: absolute !important; top: 18px !important; left: 18px !important; width: 62px !important; height: 62px !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Logo.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; pointer-events: none !important; } /* * Hide normal header logo while drawer is open. * This removes the duplicate logo. */ body:has(#site-navigation.toggled) .site-header .site-logo { opacity: 0 !important; visibility: hidden !important; } /* ===================================================== 7. CLOSE BUTTON ===================================================== */ #site-navigation.toggled .menu-toggle { position: fixed !important; top: 20px !important; right: 16px !important; width: 42px !important; height: 42px !important; background: transparent !important; z-index: 10010 !important; } /* Hide GeneratePress hamburger when open */ #site-navigation.toggled .menu-toggle .gp-icon { display: none !important; } /* Custom clean X */ #site-navigation.toggled .menu-toggle::before, #site-navigation.toggled .menu-toggle::after { content: ""; position: absolute !important; top: 50% !important; left: 50% !important; width: 23px !important; height: 2px !important; background: #1E2B33 !important; border-radius: 2px !important; transform-origin: center !important; } #site-navigation.toggled .menu-toggle::before { transform: translate(-50%, -50%) rotate(45deg) !important; } #site-navigation.toggled .menu-toggle::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* ===================================================== 8. MAIN MENU ===================================================== */ #site-navigation .main-nav > ul, #site-navigation .main-nav ul.menu { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; list-style: none !important; } #site-navigation .main-nav ul.menu > li { width: 100% !important; display: block !important; float: none !important; clear: both !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid rgba(30, 43, 51, 0.10) !important; box-sizing: border-box !important; } #site-navigation .main-nav ul.menu > li > a { width: 100% !important; min-height: 47px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 13px 2px !important; font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important; color: #1E2B33 !important; background: transparent !important; text-decoration: none !important; box-sizing: border-box !important; } #site-navigation .main-nav ul.menu > li > a:hover { color: #FF5149 !important; background: transparent !important; } /* ===================================================== 9. DROPDOWN ARROWS ===================================================== */ #site-navigation .dropdown-menu-toggle { margin-left: auto !important; padding-left: 10px !important; padding-right: 0 !important; color: #1E2B33 !important; } /* ===================================================== 10. SUBMENUS ===================================================== */ #site-navigation .main-nav ul ul { position: static !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 0 10px 15px !important; background: transparent !important; box-shadow: none !important; left: auto !important; top: auto !important; } #site-navigation .main-nav ul ul li { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } #site-navigation .main-nav ul ul li a { min-height: 34px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 7px 2px !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.35 !important; color: rgba(30, 43, 51, 0.72) !important; background: transparent !important; } /* ===================================================== 11. GET IN TOUCH BUTTON ===================================================== */ #site-navigation .main-nav ul.menu > li:last-child { margin-top: 18px !important; border-bottom: 0 !important; } #site-navigation .main-nav ul.menu > li:last-child > a { width: 100% !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 11px 18px !important; background: #FF5149 !important; color: #ffffff !important; border-radius: 100px !important; font-weight: 600 !important; text-align: center !important; box-sizing: border-box !important; } #site-navigation .main-nav ul.menu > li:last-child > a:hover { background: #1E2B33 !important; color: #ffffff !important; } /* ===================================================== 12. WORDPRESS ADMIN BAR Only affects logged-in mobile preview ===================================================== */ body.admin-bar #site-navigation .main-nav { top: 46px !important; height: calc(100dvh - 46px) !important; min-height: calc(100dvh - 46px) !important; } body.admin-bar #site-navigation.toggled .menu-toggle { top: 64px !important; } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 420px) { #site-navigation .main-nav { width: 80vw !important; max-width: 300px !important; padding: 96px 16px 24px !important; } #site-navigation .main-nav::before { left: 16px !important; width: 58px !important; height: 58px !important; } } } /* ========================================================= MOBILE HEADER - FINAL 2 FIXES 1. Hamburger far right 2. Remove duplicate drawer logo ========================================================= */ @media (max-width: 768px) { /* ----------------------------------------- HAMBURGER EXACT RIGHT SIDE ----------------------------------------- */ #site-navigation, .main-navigation { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; width: auto !important; height: 90px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; padding: 0 18px 0 0 !important; background: transparent !important; z-index: 9995 !important; } #site-navigation .menu-toggle, .main-navigation .menu-toggle { margin: 0 !important; position: relative !important; right: 0 !important; left: auto !important; } /* ----------------------------------------- REMOVE LOGO FROM SLIDE MENU ----------------------------------------- */ #site-navigation .main-nav::before, .main-navigation .main-nav::before { content: none !important; display: none !important; background: none !important; } /* ----------------------------------------- DON'T HIDE NORMAL HEADER LOGO WHEN MENU IS OPEN ----------------------------------------- */ body:has(#site-navigation.toggled) .site-header .site-logo { opacity: 1 !important; visibility: visible !important; } /* ----------------------------------------- DRAWER SPACING AFTER REMOVING LOGO ----------------------------------------- */ #site-navigation .main-nav { padding: 76px 18px 28px !important; } /* ----------------------------------------- CLOSE X - FAR RIGHT ----------------------------------------- */ #site-navigation.toggled .menu-toggle { position: fixed !important; top: 18px !important; right: 18px !important; left: auto !important; margin: 0 !important; z-index: 10010 !important; } /* Logged-in WordPress admin bar */ body.admin-bar #site-navigation.toggled .menu-toggle { top: 64px !important; } } /* ========================================================= MOBILE HAMBURGER GLITCH FIX Add this at the VERY END of your CSS ========================================================= */ @media (max-width: 768px) { /* Hide ALL GeneratePress built-in menu icons */ #site-navigation .menu-toggle .gp-icon, #site-navigation .menu-toggle svg, .main-navigation .menu-toggle .gp-icon, .main-navigation .menu-toggle svg { display: none !important; } /* Clean hamburger button */ #site-navigation .menu-toggle, .main-navigation .menu-toggle { position: relative !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; font-size: 0 !important; overflow: visible !important; } /* Hamburger - middle line */ #site-navigation:not(.toggled) .menu-toggle::before, .main-navigation:not(.toggled) .menu-toggle::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 24px !important; height: 2px !important; background: #1E2B33 !important; border-radius: 10px !important; transform: translate(-50%, -50%) !important; box-shadow: 0 -7px 0 #1E2B33, 0 7px 0 #1E2B33 !important; } /* Make sure no second pseudo element appears when closed */ #site-navigation:not(.toggled) .menu-toggle::after, .main-navigation:not(.toggled) .menu-toggle::after { content: none !important; display: none !important; } /* ===================================================== OPEN STATE - X ===================================================== */ #site-navigation.toggled .menu-toggle::before, #site-navigation.toggled .menu-toggle::after, .main-navigation.toggled .menu-toggle::before, .main-navigation.toggled .menu-toggle::after { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 24px !important; height: 2px !important; background: #1E2B33 !important; border-radius: 10px !important; box-shadow: none !important; transform-origin: center !important; } #site-navigation.toggled .menu-toggle::before, .main-navigation.toggled .menu-toggle::before { transform: translate(-50%, -50%) rotate(45deg) !important; } #site-navigation.toggled .menu-toggle::after, .main-navigation.toggled .menu-toggle::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* Keep hamburger properly at far right */ #site-navigation, .main-navigation { right: 0 !important; left: auto !important; padding-right: 18px !important; } } /* ========================================================= PODCAST HERO - MOBILE HARD RESET PAGE ID 14 ONLY Put this at the VERY END of CSS ========================================================= */ @media screen and (max-width: 781px) { /* ===================================================== OUTER HERO ===================================================== */ body.page-id-14 .podcast-hero, body.page-id-14 .podcast-hero > .wp-block-group__inner-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } body.page-id-14 .podcast-hero { padding: 0 !important; overflow: hidden !important; background: #ffffff !important; } body.page-id-14 .podcast-hero > .wp-block-group__inner-container { padding: 38px 18px 40px !important; } /* ===================================================== MAIN COLUMNS FORCE SINGLE COLUMN ===================================================== */ body.page-id-14 .podcast-hero .podcast-hero-columns { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 34px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* * Critical reset: * old desktop flex-basis / widths */ body.page-id-14 .podcast-hero .podcast-hero-columns > .wp-block-column { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 100% !important; flex-basis: 100% !important; flex-grow: 0 !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-14 .podcast-hero .podcast-hero-content { order: 1 !important; width: 100% !important; max-width: 100% !important; } body.page-id-14 .podcast-hero .podcast-hero-media { order: 2 !important; width: 100% !important; max-width: 100% !important; } /* ===================================================== REMOVE GUTENBERG FLOW SPACING ===================================================== */ body.page-id-14 .podcast-hero .podcast-hero-content > * { margin-block-start: 0 !important; } body.page-id-14 .podcast-hero .podcast-hero-media > * { margin-block-start: 0 !important; } /* ===================================================== TITLE ===================================================== */ body.page-id-14 .podcast-hero .podcast-hero-title { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 17px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 34px !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.6px !important; color: #1E2B33 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* ===================================================== DESCRIPTION ===================================================== */ body.page-id-14 .podcast-hero .podcast-hero-description { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 26px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #1E2B33 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* ===================================================== HOSTS ===================================================== */ body.page-id-14 .podcast-hero .podcast-hosts { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; margin: 0 0 27px !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-14 .podcast-hero .podcast-host-image { width: 44px !important; height: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden !important; } body.page-id-14 .podcast-hero .podcast-host-image + .podcast-host-image { margin-left: -8px !important; } body.page-id-14 .podcast-hero .podcast-host-image img { display: block !important; width: 44px !important; height: 44px !important; max-width: none !important; object-fit: cover !important; border-radius: 50% !important; } body.page-id-14 .podcast-hero .podcast-host-text { width: auto !important; max-width: none !important; min-width: 0 !important; flex: 1 1 0 !important; margin: 0 0 0 13px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #1E2B33 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* ===================================================== DIVIDER ===================================================== */ body.page-id-14 .podcast-hero .podcast-hero-divider { display: block !important; width: 100% !important; max-width: 100% !important; height: 1px !important; margin: 0 0 28px !important; padding: 0 !important; border: 0 !important; background: rgba(30, 43, 51, 0.16) !important; } /* ===================================================== STATS ===================================================== */ body.page-id-14 .podcast-hero .podcast-stats { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 35px !important; row-gap: 21px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-14 .podcast-hero .podcast-stats > .wp-block-column { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; flex-basis: auto !important; margin: 0 !important; padding: 0 !important; } /* Tuesdays full second row */ body.page-id-14 .podcast-hero .podcast-stat:nth-child(3) { grid-column: 1 / -1 !important; } body.page-id-14 .podcast-hero .podcast-stat-value { margin: 0 0 4px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 32px !important; font-weight: 700 !important; line-height: 1 !important; color: #1E2B33 !important; white-space: normal !important; word-break: normal !important; } body.page-id-14 .podcast-hero .podcast-stat-label { margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.35 !important; color: #1E2B33 !important; } /* ===================================================== IMAGE ===================================================== */ body.page-id-14 .podcast-hero .podcast-hero-image { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 12px !important; overflow: hidden !important; line-height: 0 !important; } body.page-id-14 .podcast-hero .podcast-hero-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 586 / 514 !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border-radius: 12px !important; } } /* ========================================================= 393 / SMALL MOBILE ========================================================= */ @media screen and (max-width: 420px) { body.page-id-14 .podcast-hero > .wp-block-group__inner-container { padding: 38px 18px 38px !important; } } /* ========================================================= PODCAST PAGE - MOBILE TOP GAP FINAL FIX Page ID 14 ========================================================= */ @media (max-width: 781px) { /* GeneratePress default page title completely remove */ body.page-id-14 .entry-header { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* GeneratePress article wrapper */ body.page-id-14 .inside-article { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Gutenberg content */ body.page-id-14 .entry-content { margin: 0 !important; margin-top: 0 !important; margin-block-start: 0 !important; padding-top: 0 !important; } /* Hero outer */ body.page-id-14 .podcast-hero { margin: 0 !important; margin-top: 0 !important; margin-block-start: 0 !important; padding: 0 !important; } /* Actual approved breathing space below mobile header */ body.page-id-14 .podcast-hero > .wp-block-group__inner-container { margin: 0 !important; padding: 18px 18px 38px !important; } /* Remove Gutenberg first element spacing */ body.page-id-14 .podcast-hero-columns, body.page-id-14 .podcast-hero-content, body.page-id-14 .podcast-hero-title { margin-top: 0 !important; margin-block-start: 0 !important; padding-top: 0 !important; } }/* ========================================================= PODCAST MOBILE HERO - ABSOLUTE TOP GAP RESET PAGE 14 ONLY ========================================================= */ @media screen and (max-width: 781px) { body.page-id-14 #page, body.page-id-14 #content, body.page-id-14 #primary, body.page-id-14 #main, body.page-id-14 article#post-14, body.page-id-14 article#post-14 .inside-article, body.page-id-14 article#post-14 .entry-content, body.page-id-14 article#post-14 .podcast-hero { margin-top: 0 !important; margin-block-start: 0 !important; padding-top: 0 !important; padding-block-start: 0 !important; } /* Hide GeneratePress page title */ body.page-id-14 article#post-14 .entry-header { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; } /* Kill GeneratePress article padding completely on this page */ body.page-id-14 article#post-14 .inside-article { padding: 0 !important; } /* Kill entry-content spacing */ body.page-id-14 article#post-14 .entry-content { margin: 0 !important; padding: 0 !important; } /* Hero itself */ body.page-id-14 article#post-14 .podcast-hero { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* THIS is now the only top breathing space */ body.page-id-14 article#post-14 .podcast-hero > .wp-block-group__inner-container { margin: 0 !important; padding-top: 16px !important; padding-right: 18px !important; padding-bottom: 38px !important; padding-left: 18px !important; padding-block-start: 16px !important; } /* Reset first Gutenberg column */ body.page-id-14 .podcast-hero-columns, body.page-id-14 .podcast-hero-content, body.page-id-14 .podcast-hero-content > :first-child { margin-top: 0 !important; margin-block-start: 0 !important; padding-top: 0 !important; padding-block-start: 0 !important; } /* Title specifically */ body.page-id-14 .podcast-hero-title { margin-top: 0 !important; margin-block-start: 0 !important; } } /* ========================================================= PODCAST HERO MOBILE STATS -> IMAGE GAP FIX ========================================================= */ @media (max-width: 781px) { /* Main hero column gap */ body.page-id-14 .podcast-hero .podcast-hero-columns { gap: 18px !important; row-gap: 18px !important; } /* Content section should not add bottom spacing */ body.page-id-14 .podcast-hero .podcast-hero-content { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Stats should finish cleanly */ body.page-id-14 .podcast-hero .podcast-stats { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Remove any bottom margin from final stat */ body.page-id-14 .podcast-hero .podcast-stat:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Image column */ body.page-id-14 .podcast-hero .podcast-hero-media { margin-top: 0 !important; margin-block-start: 0 !important; padding-top: 0 !important; width: 100% !important; } /* Gutenberg flow margin removal */ body.page-id-14 .podcast-hero .podcast-hero-media > figure:first-child { margin-top: 0 !important; margin-block-start: 0 !important; } /* Actual image wrapper */ body.page-id-14 .podcast-hero .podcast-hero-image { width: 100% !important; margin: 0 !important; margin-top: 0 !important; margin-block-start: 0 !important; padding: 0 !important; line-height: 0 !important; } body.page-id-14 .podcast-hero .podcast-hero-image img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= PODCAST HERO MOBILE REMOVE EMPTY SPACE ABOVE IMAGE ========================================================= */ @media (max-width: 781px) { /* Main hero columns */ body.page-id-14 .podcast-hero-columns { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; gap: 20px !important; row-gap: 20px !important; margin: 0 !important; padding: 0 !important; align-items: stretch !important; justify-content: flex-start !important; } /* THIS is the important fix */ body.page-id-14 .podcast-hero-content { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-bottom: 0 !important; align-self: auto !important; } /* Stats */ body.page-id-14 .podcast-stats { height: auto !important; min-height: 0 !important; margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-bottom: 0 !important; } body.page-id-14 .podcast-stat { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Media column */ body.page-id-14 .podcast-hero-media { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; margin: 0 !important; margin-top: 0 !important; margin-block-start: 0 !important; padding: 0 !important; padding-top: 0 !important; align-self: auto !important; } /* Image wrapper */ body.page-id-14 .podcast-hero-image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; margin-top: 0 !important; margin-block-start: 0 !important; padding: 0 !important; } body.page-id-14 .podcast-hero-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } } @media (max-width: 781px) { body.page-id-14 .podcast-hero .podcast-hero-title { margin-top: 20px !important; } } /* ========================================================= LATEST EPISODE ACTION BUTTONS CANONICAL / SINGLE SOURCE OF TRUTH Exact HTML: .latest-episode-actions > .wp-block-buttons > .wp-block-button > .wp-block-button__link ========================================================= */ /* Outer wrapper */ body.page-id-14 div.wp-block-group.latest-episode-actions { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 22px 0 0 !important; box-sizing: border-box !important; } /* Inner WordPress Buttons wrapper */ body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Individual button wrappers */ body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons > div.wp-block-button { display: block !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Common button styling */ body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons > div.wp-block-button > a.wp-block-button__link.wp-element-button { display: flex !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 24px !important; box-sizing: border-box !important; border-radius: 999px !important; font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; position: static !important; transform: none !important; } /* Primary CTA */ body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons > div.wp-block-button:first-child > a.wp-block-button__link.wp-element-button { background: #FF4F45 !important; color: #FFFFFF !important; border: 1px solid #FF4F45 !important; } /* Secondary CTA */ body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons > div.wp-block-button:nth-child(2) > a.wp-block-button__link.wp-element-button { background: transparent !important; color: #1E2B33 !important; border: 1px solid #1E2B33 !important; } /* Hover */ body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons > div.wp-block-button:first-child > a.wp-block-button__link.wp-element-button:hover, body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons > div.wp-block-button:nth-child(2) > a.wp-block-button__link.wp-element-button:hover { background: #1E2B33 !important; color: #FFFFFF !important; border-color: #1E2B33 !important; } /* ========================================================= MOBILE - STACK BUTTONS AS BLOCKS ========================================================= */ @media screen and (max-width: 767px) { body.page-id-14 div.wp-block-group.latest-episode-actions { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 18px 0 0 !important; margin: 0 !important; overflow: visible !important; } body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons > div.wp-block-button { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 div.wp-block-group.latest-episode-actions > div.wp-block-buttons > div.wp-block-button > a.wp-block-button__link.wp-element-button { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 18px !important; white-space: normal !important; text-align: center !important; box-sizing: border-box !important; } } /* ========================================================= MOBILE FOOTER LAYOUT FIX THE SITE + PODCAST SIDE BY SIDE ========================================================= */ @media screen and (max-width: 767px) { .site-footer .inside-footer-widgets { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "follow follow" "brand brand" "site podcast" "articles articles" !important; column-gap: 28px !important; row-gap: 38px !important; align-items: start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* FOLLOW US */ .site-footer .footer-widget-1 { grid-area: follow !important; } /* BRAND */ .site-footer .footer-widget-2 { grid-area: brand !important; } /* THE SITE */ .site-footer .footer-widget-3 { grid-area: site !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* PODCAST */ .site-footer .footer-widget-4 { grid-area: podcast !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ARTICLES */ .site-footer .footer-widget-5 { grid-area: articles !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Menu headings */ .site-footer .footer-widget-3 .widget-title, .site-footer .footer-widget-4 .widget-title, .site-footer .footer-widget-5 .widget-title { margin: 0 0 18px !important; font-size: 17px !important; line-height: 1.2 !important; } /* Menu item spacing */ .site-footer .footer-widget-3 .widget_nav_menu ul.menu, .site-footer .footer-widget-4 .widget_nav_menu ul.menu, .site-footer .footer-widget-5 .widget_nav_menu ul.menu { gap: 13px !important; } /* Menu links */ .site-footer .footer-widget-3 .widget_nav_menu a, .site-footer .footer-widget-4 .widget_nav_menu a, .site-footer .footer-widget-5 .widget_nav_menu a { font-size: 14px !important; line-height: 1.35 !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media screen and (max-width: 360px) { .site-footer .inside-footer-widgets { column-gap: 18px !important; } .site-footer .footer-widget-3 .widget_nav_menu a, .site-footer .footer-widget-4 .widget_nav_menu a { font-size: 13px !important; } } /* ========================================================= PODCAST FILTERS - MOBILE CLEAN FIX 2 x 2 layout ========================================================= */ @media screen and (max-width: 767px) { /* Outer filter row */ body.page-id-14 .episode-filter-row { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 24px !important; padding: 0 !important; overflow: visible !important; } /* Individual Gutenberg button */ body.page-id-14 .episode-filter-row > .episode-filter-buttons > .wp-block-button { display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; flex: none !important; box-sizing: border-box !important; } /* Button links */ body.page-id-14 .episode-filter-row > .episode-filter-buttons > .wp-block-button > .wp-block-button__link { display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 10px !important; background: #FFFFFF !important; color: #1E2B33 !important; border: 1px solid #E5E7EB !important; border-radius: 999px !important; box-sizing: border-box !important; font-family: "Outfit", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; overflow: hidden !important; } /* Active - All episodes */ body.page-id-14 .episode-filter-row > .episode-filter-buttons > .wp-block-button:first-child > .wp-block-button__link { background: #FF4F45 !important; color: #FFFFFF !important; border-color: #FF4F45 !important; } } /* Stay In Loop Css */ /* ========================================================= STAY IN THE LOOP FINAL CSS FOR CURRENT PHP STRUCTURE FIGMA MATCH ========================================================= */ /* ========================================================= OUTER WHITE SECTION ========================================================= */ .tgf-loop-section { width: 100%; background: #ffffff; padding: 60px 0 50px; box-sizing: border-box; } /* ========================================================= MAIN BLACK CARD FIGMA: 1320px x approx 473px ========================================================= */ .tgf-loop-card { width: calc(100% - 120px); max-width: 1320px; min-height: 380px; margin: 0 auto; padding: 60px 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.82fr); align-items: center; column-gap: 100px; background: #1e1e1e; border-radius: 20px; box-sizing: border-box; overflow: hidden; } /* ========================================================= LEFT SIDE ========================================================= */ .tgf-loop-content { width: 100%; max-width: 570px; margin: 0; padding: 0; align-self: center; } /* Heading */ .tgf-loop-title { margin: 0 0 18px !important; color: #ffffff !important; font-family: "Outfit", sans-serif !important; font-size: 44px !important; font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: -0.8px !important; } /* Description */ .tgf-loop-description { width: 100%; max-width: 545px; margin: 0 0 28px !important; padding: 0 !important; color: #FFF; font-family: Outfit; font-size: 18px; font-style: normal; font-weight: 400; line-height: 29.25px; /* 162.5% */ } /* ========================================================= BENEFITS ========================================================= */ .tgf-loop-benefits { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 30px; width: 100%; margin: 0 !important; padding: 0 !important; max-width: 340px; } .tgf-loop-benefits span { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Outfit", sans-serif !important; font-size: 10px !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap; } .tgf-loop-benefits b { color: #ffffff; font-size: 11px; font-weight: 500; line-height: 1; } /* ========================================================= RIGHT SIDE ========================================================= */ .tgf-loop-form-column { width: 100%; max-width: 500px; justify-self: end; align-self: center; margin: 0; padding: 0; } /* ========================================================= FORM EMAIL + SUBSCRIBE SAME LINE ========================================================= */ .tgf-loop-form { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 14px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= EMAIL ========================================================= */ .tgf-loop-form input[type="email"] { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 48px !important; margin: 0 !important; padding: 0 20px !important; background: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 999px !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; } .tgf-loop-form input[type="email"]::placeholder { color: #737b82 !important; opacity: 1 !important; } .tgf-loop-form input[type="email"]:focus { border-color: rgba(255, 255, 255, 0.38) !important; } /* ========================================================= SUBSCRIBE BUTTON ========================================================= */ .tgf-loop-form button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 112px !important; height: 48px !important; margin: 0 !important; padding: 0 26px !important; background: #ff5148 !important; color: #ffffff !important; border: 1px solid #ff5148 !important; border-radius: 999px !important; box-shadow: none !important; box-sizing: border-box !important; color: #FFF; text-align: center; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; /* 150% */ white-space: nowrap !important; cursor: pointer !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .tgf-loop-form button[type="submit"]:hover { background: #ffffff !important; color: #1e2b33 !important; border-color: #ffffff !important; } /* ========================================================= PRIVACY ========================================================= */ .tgf-loop-privacy { width: 100%; margin-top: 24px; padding: 0; color: #FFF; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; /* 142.857% */ } .tgf-loop-privacy a { margin-left: 3px; color: #ffffff !important; text-decoration: underline !important; text-underline-offset: 2px; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 1100px) { .tgf-loop-section { padding: 50px 0 42px; } .tgf-loop-card { width: calc(100% - 64px); min-height: 0; padding: 52px 44px; grid-template-columns: 1fr; row-gap: 38px; } .tgf-loop-content { max-width: 620px; } .tgf-loop-form-column { width: 100%; max-width: 620px; justify-self: start; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 767px) { .tgf-loop-section { padding: 34px 18px; } .tgf-loop-card { width: 100%; max-width: 100%; min-height: 0; padding: 34px 22px; grid-template-columns: 1fr; row-gap: 28px; border-radius: 16px; } .tgf-loop-title { margin-bottom: 14px !important; font-size: 31px !important; line-height: 1.08 !important; } .tgf-loop-description { margin-bottom: 22px !important; font-size: 13px !important; line-height: 1.5 !important; } .tgf-loop-benefits { display: grid; grid-template-columns: 1fr; gap: 10px; } .tgf-loop-form-column { width: 100%; max-width: 100%; } /* Stack form only on mobile */ .tgf-loop-form { grid-template-columns: 1fr !important; row-gap: 11px !important; } .tgf-loop-form input[type="email"], .tgf-loop-form button[type="submit"] { width: 100% !important; min-width: 0 !important; height: 46px !important; } .tgf-loop-privacy { margin-top: 11px !important; font-size: 9px !important; } } /* Home Page Css */ /* ========================================================= HOME PAGE HERO PAGE ID 272 ========================================================= */ /* REMOVE GENERATEPRESS DEFAULT PAGE SPACING */ body.page-id-272 #page, body.page-id-272 #content, body.page-id-272 #primary, body.page-id-272 #main, body.page-id-272 .site-main, body.page-id-272 article#post-272, body.page-id-272 article#post-272 .inside-article, body.page-id-272 article#post-272 .entry-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= OUTER HERO ========================================================= */ body.page-id-272 .home-hero { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; box-sizing: border-box !important; } /* Gutenberg outer inner container */ body.page-id-272 .home-hero > .wp-block-group__inner-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= HERO INNER ========================================================= */ body.page-id-272 .home-hero-inner { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 100px 40px 85px !important; box-sizing: border-box !important; } /* Actual Gutenberg inner wrapper */ body.page-id-272 .home-hero-inner > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } /* ========================================================= TITLE ========================================================= */ body.page-id-272 .home-hero-title { width: 100% !important; max-width: 850px !important; margin: 0 0 16px !important; padding: 0 !important; color: #1e2b33 !important; font-family: "Outfit", sans-serif !important; font-size: 64px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -1px !important; text-align: center !important; } /* ========================================================= DESCRIPTION ========================================================= */ body.page-id-272 .home-hero-description { width: 100% !important; max-width: 660px !important; margin: 0 0 26px !important; padding: 0 !important; color: #1e2b33 !important; font-family: "Outfit", sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: center !important; } /* ========================================================= HERO BUTTON OUTER GROUP ========================================================= */ body.page-id-272 .home-hero-actions { display: block !important; width: auto !important; max-width: 100% !important; margin: 0 0 40px !important; padding: 0 !important; } /* Gutenberg Buttons container */ body.page-id-272 .home-hero-actions > .wp-block-buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* Button wrapper */ body.page-id-272 .home-hero-actions .wp-block-button { margin: 0 !important; padding: 0 !important; width: auto !important; } /* Common button */ body.page-id-272 .home-hero-actions .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 22px !important; border-radius: 999px !important; font-family: "Outfit", sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; box-sizing: border-box !important; } /* Subscribe */ body.page-id-272 .home-subscribe-btn .wp-block-button__link { background: #ff5148 !important; color: #ffffff !important; border: 1px solid #ff5148 !important; } /* Latest Episode */ body.page-id-272 .home-latest-btn .wp-block-button__link { background: #ffffff !important; color: #1e2b33 !important; border: 1px solid #1e2b33 !important; } /* ========================================================= LISTEN SECTION WRAPPER ========================================================= */ /* This targets the anonymous Group that contains heading + platform icon group. */ body.page-id-272 .home-hero-inner > .wp-block-group__inner-container > .wp-block-group:not(.home-hero-actions) { width: 100% !important; max-width: 500px !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-hero-inner > .wp-block-group__inner-container > .wp-block-group:not(.home-hero-actions) > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= LISTEN TITLE ========================================================= */ body.page-id-272 h2.home-listen-title { width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; color: #1e2b33 !important; font-family: "Outfit", sans-serif !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; } /* ========================================================= PLATFORM ICONS ========================================================= */ body.page-id-272 .home-platform-icons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } body.page-id-272 .home-platform-icons figure { width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 40px !important; } body.page-id-272 .home-platform-icons figure img { display: block !important; width: 40px !important; height: 40px !important; max-width: none !important; object-fit: contain !important; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 1024px) { body.page-id-272 .home-hero-inner { padding: 75px 30px 65px !important; } body.page-id-272 .home-hero-title { font-size: 44px !important; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 767px) { body.page-id-272 .home-hero-inner { padding: 44px 20px 40px !important; } body.page-id-272 .home-hero-title { max-width: 100% !important; margin-bottom: 13px !important; font-size: 32px !important; line-height: 1.08 !important; letter-spacing: -0.4px !important; } body.page-id-272 .home-hero-description { max-width: 340px !important; margin-bottom: 22px !important; font-size: 19px !important; line-height: 1.5 !important; } body.page-id-272 .home-hero-actions { margin-bottom: 32px !important; } body.page-id-272 .home-hero-actions > .wp-block-buttons { gap: 8px !important; } body.page-id-272 .home-hero-actions .wp-block-button__link { height: 40px !important; min-height: 40px !important; padding: 0 17px !important; font-size: 11px !important; } body.page-id-272 h2.home-listen-title { margin-bottom: 15px !important; font-size: 13px !important; } body.page-id-272 .home-platform-icons { gap: 10px !important; } body.page-id-272 .home-platform-icons figure, body.page-id-272 .home-platform-icons figure img { width: 38px !important; height: 38px !important; } body.page-id-272 .home-platform-icons figure { flex-basis: 38px !important; } } } /* ========================================================= THE GYMNASTICS FILES PODCAST PAGE - COMPLETE FULL WIDTH SYSTEM PAGE ID: 14 ========================================================= */ /* ========================================================= VARIABLES ========================================================= */ :root { --tgf-desktop-gutter: clamp(28px, 2.25vw, 44px); --tgf-tablet-gutter: 28px; --tgf-mobile-gutter: 18px; --tgf-section-gap-desktop: 48px; --tgf-section-gap-tablet: 36px; --tgf-section-gap-mobile: 26px; } /* ========================================================= GLOBAL SAFETY ========================================================= */ html, body { width: 100%; max-width: 100%; overflow-x: clip; } /* ========================================================= 1. HEADER - FULL WIDTH ========================================================= */ .site-header { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } .site-header .inside-header { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================= DESKTOP HEADER ========================================================= */ @media screen and (min-width: 1025px) { .site-header .inside-header { min-height: 100px !important; padding-left: var(--tgf-desktop-gutter) !important; padding-right: var(--tgf-desktop-gutter) !important; display: flex !important; align-items: center !important; position: relative !important; } /* Logo */ .site-header .site-branding, .site-header .site-logo { flex: 0 0 auto !important; margin: 0 !important; position: relative !important; z-index: 5 !important; } .site-header .site-logo img { display: block !important; } /* * Navigation * Your GeneratePress header uses navigation positioning, * so keep it fluid across the full width. */ .site-header #site-navigation { position: absolute !important; left: var(--tgf-desktop-gutter) !important; right: var(--tgf-desktop-gutter) !important; top: 50% !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: translateY(-50%) !important; background: transparent !important; box-sizing: border-box !important; pointer-events: none; } .site-header #site-navigation .inside-navigation { width: 100% !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; pointer-events: auto; } .site-header #site-navigation .main-nav { margin: 0 auto !important; } .site-header #site-navigation ul ul { padding-top: 20px; margin-top: 5px; background-color: white; } #site-navigation .main-nav ul ul li a{ color: #1E2C34 !important; } #site-navigation .main-nav ul ul li a:hover{ color: #ff5148 !important; } /* * If Get In Touch is part of navigation, * this keeps the whole nav properly spread. */ .site-header .main-navigation { max-width: none !important; } } /* ========================================================= TABLET HEADER ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { .site-header .inside-header { width: 100% !important; padding-left: var(--tgf-tablet-gutter) !important; padding-right: var(--tgf-tablet-gutter) !important; box-sizing: border-box !important; } } /* ========================================================= MOBILE HEADER ========================================================= */ @media screen and (max-width: 767px) { .site-header { width: 100% !important; max-width: 100% !important; } .site-header .inside-header { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } /* * Do not use desktop absolute navigation on mobile. */ .site-header #site-navigation { left: auto !important; right: auto !important; width: auto !important; transform: none !important; } } /* ========================================================= 2. GENERATEPRESS PODCAST PAGE WIDTH RESET ========================================================= */ body.page-id-14 #page, body.page-id-14 #page.grid-container, body.page-id-14 #content, body.page-id-14 .site-content, body.page-id-14 #primary, body.page-id-14 .content-area, body.page-id-14 #main, body.page-id-14 .site-main, body.page-id-14 article#post-14, body.page-id-14 article#post-14 .inside-article, body.page-id-14 article#post-14 .entry-content { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } body.page-id-14 .entry-header { display: none !important; } body.page-id-14 .inside-article, body.page-id-14 .entry-content { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= 3. HERO - FULL WIDTH ========================================================= */ body.page-id-14 .podcast-hero { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; box-sizing: border-box !important; } body.page-id-14 .podcast-hero > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } @media screen and (min-width: 1025px) { body.page-id-14 .podcast-hero > .wp-block-group__inner-container { padding-left: var(--tgf-desktop-gutter) !important; padding-right: var(--tgf-desktop-gutter) !important; } body.page-id-14 .podcast-hero-columns { width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important; gap: clamp(30px, 2.7vw, 52px) !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-14 .podcast-hero-content { width: 100% !important; max-width: none !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding-top: 36px !important; padding-bottom: 36px !important; box-sizing: border-box !important; } body.page-id-14 .podcast-hero-media { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .podcast-hero-image { width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; overflow: hidden !important; border-radius: 10px !important; } body.page-id-14 .podcast-hero-image img { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; aspect-ratio: 586 / 514 !important; object-fit: cover !important; object-position: center !important; border-radius: 10px !important; } } /* ========================================================= 4. LATEST EPISODE FULL WIDTH + GAP ABOVE ========================================================= */ body.page-id-14 .latest-episode-section { width: 100% !important; max-width: none !important; margin-top: var(--tgf-section-gap-desktop) !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; padding: 0 !important; background: #d7efe8 !important; box-shadow: none !important; clip-path: none !important; box-sizing: border-box !important; } body.page-id-14 .latest-episode-section > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 62px var(--tgf-desktop-gutter) 72px !important; box-sizing: border-box !important; } /* Inner */ body.page-id-14 .latest-episode-inner, body.page-id-14 .latest-episode-inner > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= FILTER TABS SPACING ========================================================= */ body.page-id-14 .episode-filter-row { width: 100% !important; margin: 0 0 55px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.page-id-14 .episode-filter-row .wp-block-shortcode { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= LATEST HEADING ========================================================= */ body.page-id-14 .latest-heading-wrap { width: 100% !important; margin: 0 0 44px !important; padding: 0 !important; } body.page-id-14 .latest-heading-wrap > .wp-block-group__inner-container { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= LATEST EPISODE TWO COLUMN AREA ========================================================= */ body.page-id-14 .latest-episode-layout { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } @media screen and (min-width: 1025px) { body.page-id-14 .latest-episode-layout { display: grid !important; grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important; gap: clamp(52px, 5vw, 96px) !important; align-items: center !important; } body.page-id-14 .latest-episode-layout > .wp-block-column { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .latest-episode-image-col { width: 100% !important; max-width: none !important; } body.page-id-14 .latest-episode-image { width: 100% !important; max-width: none !important; aspect-ratio: 586 / 514 !important; overflow: hidden !important; border-radius: 10px !important; } body.page-id-14 .latest-episode-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } body.page-id-14 .latest-episode-content { width: 100% !important; max-width: none !important; min-width: 0 !important; } } /* ========================================================= AUDIO PLAYER ========================================================= */ body.page-id-14 .tgf-audio-player, body.page-id-14 .latest-audio-player { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* ========================================================= 5. ALL EPISODES - FULL WIDTH ========================================================= */ body.page-id-14 .all-episodes-section { width: 100% !important; max-width: none !important; left: auto !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; box-sizing: border-box !important; } body.page-id-14 .all-episodes-section > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } @media screen and (min-width: 1025px) { body.page-id-14 .all-episodes-section { padding-top: 72px !important; padding-bottom: 96px !important; } body.page-id-14 .all-episodes-inner { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: var(--tgf-desktop-gutter) !important; padding-right: var(--tgf-desktop-gutter) !important; box-sizing: border-box !important; } body.page-id-14 .all-episodes-inner > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= ALL EPISODES GRID ========================================================= */ body.page-id-14 .all-episodes-query { width: 100% !important; max-width: none !important; } @media screen and (min-width: 1025px) { body.page-id-14 .all-episodes-grid, body.page-id-14 ul.all-episodes-grid, body.page-id-14 .wp-block-post-template.all-episodes-grid { width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 30px clamp(24px, 2.1vw, 40px) !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= 6. STAY IN LOOP FULL WIDTH ========================================================= */ .tgf-loop-section { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } @media screen and (min-width: 1025px) { .tgf-loop-section { padding-left: var(--tgf-desktop-gutter) !important; padding-right: var(--tgf-desktop-gutter) !important; } .tgf-loop-card { width: 100% !important; } } /* ========================================================= THE GYMNASTICS FILES FOOTER - TRUE FLUID FULL WIDTH Works at 100%, 90%, 80% zoom ========================================================= */ /* Entire footer */ .site-footer { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Full-width footer background areas */ .site-footer .footer-widgets, .site-footer .site-info { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* IMPORTANT: GeneratePress normally adds a max-width through .grid-container. Kill that max-width only inside footer. */ .site-footer .grid-container, .site-footer .footer-widgets-container, .site-footer .inside-site-info { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Main footer content spacing */ .site-footer .footer-widgets-container { padding-left: clamp(40px, 4vw, 72px) !important; padding-right: clamp(40px, 4vw, 72px) !important; } /* Widget columns wrapper */ .site-footer .inside-footer-widgets { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Prevent footer columns becoming constrained */ .site-footer .inside-footer-widgets > div { min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; } /* Bottom copyright/footer bar */ .site-footer .inside-site-info { padding-left: clamp(40px, 4vw, 72px) !important; padding-right: clamp(40px, 4vw, 72px) !important; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 1024px) { .site-footer .footer-widgets-container, .site-footer .inside-site-info { width: 100% !important; max-width: none !important; padding-left: 28px !important; padding-right: 28px !important; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 767px) { .site-footer, .site-footer .footer-widgets, .site-footer .footer-widgets-container, .site-footer .inside-footer-widgets, .site-footer .site-info, .site-footer .inside-site-info { width: 100% !important; max-width: none !important; } .site-footer .footer-widgets-container, .site-footer .inside-site-info { padding-left: 18px !important; padding-right: 18px !important; } body.page-id-14 .all-episodes-section { padding-top: 40px !important; padding-bottom: 40px !important; } } /* ========================================================= TGF PODCAST PAGINATION FINAL OVERRIDE PATCH ADD AT VERY END OF STYLE.CSS ========================================================= */ /* ========================================================= PAGINATION WRAPPER Keep controls compact instead of full-width nav ========================================================= */ body.page-id-14 nav.episode-pagination.wp-block-query-pagination { width: fit-content !important; max-width: 100% !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 52px auto 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-sizing: border-box !important; float: none !important; } /* * Query Loop itself is block based. * This centers the fit-content pagination nav. */ body.page-id-14 .all-episodes-query { text-align: center !important; } /* Remove Gutenberg flow spacing around pagination */ body.page-id-14 .all-episodes-query > nav.episode-pagination { margin-block-start: 52px !important; margin-block-end: 0 !important; } /* ========================================================= PREVIOUS BUTTON ========================================================= */ body.page-id-14 .episode-pagination .wp-block-query-pagination-previous, body.page-id-14 .episode-pagination .episode-pagination-prev { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 94px !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 16px !important; background: #D7EFE8 !important; color: #1E2B33 !important; border: 1px solid rgba(30, 43, 51, 0.15) !important; border-radius: 5px !important; box-sizing: border-box !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; } /* ========================================================= NEXT BUTTON ========================================================= */ body.page-id-14 .episode-pagination .wp-block-query-pagination-next, body.page-id-14 .episode-pagination .episode-pagination-next { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 72px !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 16px !important; background: #D7EFE8 !important; color: #1E2B33 !important; border: 1px solid rgba(30, 43, 51, 0.15) !important; border-radius: 5px !important; box-sizing: border-box !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap !important; box-shadow: none !important; } /* ========================================================= PAGE NUMBERS WRAPPER ========================================================= */ body.page-id-14 .episode-pagination .wp-block-query-pagination-numbers, body.page-id-14 .episode-pagination .episode-pagination-numbers { width: auto !important; max-width: none !important; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-sizing: border-box !important; } /* ========================================================= INDIVIDUAL PAGE NUMBER ========================================================= */ body.page-id-14 .episode-pagination .wp-block-query-pagination-numbers .page-numbers { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; background: #D7EFE8 !important; color: #1E2B33 !important; border: 1px solid rgba(30, 43, 51, 0.15) !important; border-radius: 5px !important; box-sizing: border-box !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; } /* ========================================================= CURRENT / ACTIVE PAGE ========================================================= */ body.page-id-14 .episode-pagination .wp-block-query-pagination-numbers .page-numbers.current { background: #FF4F45 !important; color: #FFFFFF !important; border-color: #FF4F45 !important; font-weight: 500 !important; } /* ========================================================= HOVER ========================================================= */ body.page-id-14 .episode-pagination a.page-numbers:hover, body.page-id-14 .episode-pagination .wp-block-query-pagination-previous:hover, body.page-id-14 .episode-pagination .wp-block-query-pagination-next:hover { background: #1E2B33 !important; color: #FFFFFF !important; border-color: #1E2B33 !important; } /* Current page should remain coral on hover/state */ body.page-id-14 .episode-pagination .page-numbers.current:hover { background: #FF4F45 !important; color: #FFFFFF !important; border-color: #FF4F45 !important; } /* ========================================================= DOTS ========================================================= */ body.page-id-14 .episode-pagination .page-numbers.dots { width: 24px !important; min-width: 24px !important; max-width: 24px !important; flex-basis: 24px !important; background: transparent !important; border: 0 !important; color: #1E2B33 !important; } /* ========================================================= REMOVE GENERAL OLD LINK RULE INTERFERENCE ========================================================= */ body.page-id-14 .episode-pagination a { text-decoration: none !important; box-shadow: none !important; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 1024px) { body.page-id-14 nav.episode-pagination.wp-block-query-pagination { margin-top: 44px !important; } body.page-id-14 .all-episodes-query > nav.episode-pagination { margin-block-start: 44px !important; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 767px) { body.page-id-14 nav.episode-pagination.wp-block-query-pagination { width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; margin: 36px auto 0 !important; } body.page-id-14 .all-episodes-query > nav.episode-pagination { margin-block-start: 36px !important; } body.page-id-14 .episode-pagination .wp-block-query-pagination-previous, body.page-id-14 .episode-pagination .episode-pagination-prev { min-width: 84px !important; height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 11px !important; } body.page-id-14 .episode-pagination .wp-block-query-pagination-next, body.page-id-14 .episode-pagination .episode-pagination-next { min-width: 62px !important; height: 38px !important; min-height: 38px !important; padding: 0 12px !important; font-size: 11px !important; } body.page-id-14 .episode-pagination .wp-block-query-pagination-numbers .page-numbers { width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; min-height: 38px !important; flex-basis: 38px !important; font-size: 12px !important; } } /* ========================================================= EPISODE CARD TITLE - FORCE LEFT ALIGN ADD AT VERY END OF CSS ========================================================= */ body.page-id-14 .episode-card-title, body.page-id-14 .episode-card-title.wp-block-post-title, body.page-id-14 .episode-card-title a { width: 100% !important; text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Link must behave like normal left-aligned block */ body.page-id-14 .episode-card-title a { display: block !important; color: #1E2B33 !important; text-decoration: none !important; } /* Optional: category bhi left aligned rahe */ body.page-id-14 .episode-card-category, body.page-id-14 .episode-card-category a { text-align: left !important; justify-content: flex-start !important; } /* ========================================================= PODCAST AJAX LOADING STATE ========================================================= */ body.page-id-14 .latest-episode-section { transition: opacity 0.2s ease !important; } body.page-id-14 .latest-episode-section.tgf-is-loading { opacity: 0.55 !important; pointer-events: none !important; cursor: wait !important; } /* ========================================================= TGF FINAL MASTER RESPONSIVE OVERRIDE PODCAST PAGE ID: 14 PURPOSE: - Keep desktop / laptop / tablet sections fluid/full-width - Fix 80% / 90% browser zoom layout breaking - Preserve current visual design - Stack Latest Episode only on mobile - Keep AJAX filter active/hover states correct IMPORTANT: Keep this block at the VERY END of style.css. ========================================================= */ :root { --tgf-fluid-gutter: clamp(24px, 2.4vw, 44px); --tgf-fluid-gap: clamp(34px, 4.6vw, 80px); } /* --------------------------------------------------------- GLOBAL PODCAST PAGE WIDTH SAFETY --------------------------------------------------------- */ body.page-id-14, body.page-id-14 #page, body.page-id-14 #page.grid-container, body.page-id-14 #content, body.page-id-14 .site-content, body.page-id-14 #primary, body.page-id-14 .content-area, body.page-id-14 #main, body.page-id-14 .site-main, body.page-id-14 article#post-14, body.page-id-14 article#post-14 .inside-article, body.page-id-14 article#post-14 .entry-content { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } body.page-id-14 { overflow-x: clip !important; } body.page-id-14 .entry-header { display: none !important; } /* --------------------------------------------------------- HEADER - FLUID/FULL WIDTH ON DESKTOP + LAPTOP --------------------------------------------------------- */ @media screen and (min-width: 769px) { .site-header, .site-header .inside-header { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } .site-header .inside-header { margin: 0 !important; padding-left: var(--tgf-fluid-gutter) !important; padding-right: var(--tgf-fluid-gutter) !important; } .site-header #site-navigation { left: var(--tgf-fluid-gutter) !important; right: var(--tgf-fluid-gutter) !important; width: auto !important; max-width: none !important; } } /* --------------------------------------------------------- PODCAST HERO - FLUID WIDTH --------------------------------------------------------- */ body.page-id-14 .podcast-hero, body.page-id-14 .podcast-hero > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } @media screen and (min-width: 1025px) { body.page-id-14 .podcast-hero > .wp-block-group__inner-container { padding-left: var(--tgf-fluid-gutter) !important; padding-right: var(--tgf-fluid-gutter) !important; } body.page-id-14 .podcast-hero-columns { width: 100% !important; max-width: none !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important; gap: clamp(30px, 3vw, 52px) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-14 .podcast-hero-content, body.page-id-14 .podcast-hero-media { width: 100% !important; max-width: none !important; min-width: 0 !important; } body.page-id-14 .podcast-hero-image, body.page-id-14 .podcast-hero-image img { width: 100% !important; max-width: none !important; } } /* ========================================================= LATEST EPISODE - FINAL FLUID SYSTEM ========================================================= */ body.page-id-14 .latest-episode-section { position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-top: 48px !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; background: #D7EFE8 !important; /* Neutralize old full-bleed hacks */ box-shadow: none !important; clip-path: none !important; left: auto !important; right: auto !important; box-sizing: border-box !important; overflow: visible !important; } /* Main inner area */ body.page-id-14 .latest-episode-section > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 62px var(--tgf-fluid-gutter) 72px !important; box-sizing: border-box !important; } /* Kill Gutenberg constrained widths only inside this section */ body.page-id-14 .latest-episode-section .is-layout-constrained, body.page-id-14 .latest-episode-section .wp-block-group__inner-container.is-layout-constrained, body.page-id-14 .latest-episode-section .is-layout-constrained > :where( :not(.alignleft) :not(.alignright) :not(.alignfull) ) { max-width: none !important; } /* Inner wrappers */ body.page-id-14 .latest-episode-inner, body.page-id-14 .latest-episode-inner > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Every main child uses available width */ body.page-id-14 .latest-episode-inner > .wp-block-group__inner-container > * { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------------------- FILTER ROW --------------------------------------------------------- */ body.page-id-14 .episode-filter-row { width: 100% !important; max-width: none !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 55px !important; padding: 0 !important; box-sizing: border-box !important; } /* AJAX shortcode wrapper, if present */ body.page-id-14 .episode-filter-row .wp-block-shortcode { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } /* Desktop/tablet filter capsule */ body.page-id-14 .episode-filter-buttons { width: min(666px, 100%) !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* --------------------------------------------------------- HEADING + RELEASE DATE --------------------------------------------------------- */ body.page-id-14 .latest-heading-wrap, body.page-id-14 .latest-heading-wrap > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } body.page-id-14 .latest-heading-wrap { margin: 0 0 44px !important; } body.page-id-14 .latest-heading-wrap > .wp-block-group__inner-container { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.page-id-14 .latest-heading-row, body.page-id-14 .latest-heading-wrap .is-layout-flex { width: 100% !important; max-width: none !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-14 .latest-heading-title { flex: 0 1 auto !important; min-width: 0 !important; } body.page-id-14 .latest-heading-date { flex: 0 0 auto !important; margin-left: auto !important; white-space: nowrap !important; } /* --------------------------------------------------------- QUERY LOOP RESET --------------------------------------------------------- */ body.page-id-14 .latest-episode-query, body.page-id-14 .latest-episode-query.wp-block-query, body.page-id-14 .latest-episode-query .wp-block-post-template, body.page-id-14 .latest-episode-query .wp-block-post { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------------------- CRITICAL FIX: Use FR units, NOT 46% + 54% + gap. Percent columns + gap were exceeding 100% and causing the section to break at laptop sizes / browser zoom. --------------------------------------------------------- */ @media screen and (min-width: 1025px) { body.page-id-14 .latest-episode-layout { width: 100% !important; max-width: none !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr) !important; column-gap: var(--tgf-fluid-gap) !important; row-gap: 0 !important; align-items: center !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } } /* --------------------------------------------------------- TABLET / SMALL LAPTOP Keep 2 columns and full available width --------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-width: 1024px) { body.page-id-14 .latest-episode-section { margin-top: 36px !important; } body.page-id-14 .latest-episode-section > .wp-block-group__inner-container { padding: 50px 28px 60px !important; } body.page-id-14 .latest-episode-layout { width: 100% !important; max-width: none !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: clamp(24px, 3.5vw, 38px) !important; row-gap: 0 !important; align-items: center !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.page-id-14 .episode-filter-row { margin-bottom: 42px !important; } body.page-id-14 .latest-heading-wrap { margin-bottom: 34px !important; } } /* --------------------------------------------------------- COLUMN SAFETY --------------------------------------------------------- */ body.page-id-14 .latest-episode-layout > .wp-block-column, body.page-id-14 .latest-episode-image-col, body.page-id-14 .latest-episode-content { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* --------------------------------------------------------- FEATURED IMAGE - FLUID Neutralizes old fixed 586px / 514px sizing --------------------------------------------------------- */ body.page-id-14 .latest-episode-image { width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; aspect-ratio: 586 / 514 !important; margin: 0 !important; overflow: hidden !important; border-radius: 10px !important; box-sizing: border-box !important; } body.page-id-14 .latest-episode-image a { display: block !important; width: 100% !important; height: 100% !important; } body.page-id-14 .latest-episode-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; } /* --------------------------------------------------------- RIGHT CONTENT --------------------------------------------------------- */ body.page-id-14 .latest-episode-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; } body.page-id-14 .latest-episode-title, body.page-id-14 .latest-episode-excerpt, body.page-id-14 .latest-audio-player, body.page-id-14 .tgf-audio-player, body.page-id-14 .latest-episode-actions { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } /* Audio player children must be able to shrink */ body.page-id-14 .tgf-audio-player .tgf-player-info { min-width: 0 !important; } /* ========================================================= MOBILE ONLY - STACK ========================================================= */ @media screen and (max-width: 767px) { body.page-id-14 .latest-episode-section { width: 100% !important; max-width: 100% !important; margin-top: 26px !important; } body.page-id-14 .latest-episode-section > .wp-block-group__inner-container { width: 100% !important; max-width: 100% !important; padding: 38px 18px 50px !important; } body.page-id-14 .latest-episode-layout { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 30px !important; column-gap: 0 !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .latest-episode-image { width: 100% !important; height: auto !important; aspect-ratio: 586 / 514 !important; } body.page-id-14 .latest-heading-row, body.page-id-14 .latest-heading-wrap .is-layout-flex { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 8px !important; } body.page-id-14 .latest-heading-date { margin-left: 0 !important; } body.page-id-14 .episode-filter-row { margin-bottom: 30px !important; } body.page-id-14 .latest-heading-wrap { margin-bottom: 26px !important; } } /* ========================================================= FILTER ACTIVE / HOVER STATE AJAX SAFE - DESKTOP + MOBILE ========================================================= */ /* Inactive */ body.page-id-14 .episode-filter-buttons .wp-block-button:not(.is-active) .wp-block-button__link, body.page-id-14 .episode-filter-buttons .wp-block-button:not(.is-active) .wp-element-button { background: transparent !important; color: #1E2B33 !important; opacity: 1 !important; } /* Active */ body.page-id-14 .episode-filter-buttons .wp-block-button.is-active .wp-block-button__link, body.page-id-14 .episode-filter-buttons .wp-block-button.is-active .wp-element-button { background: #FF5148 !important; color: #FFFFFF !important; border-color: #FF5148 !important; opacity: 1 !important; } /* First tab is NOT permanently active */ body.page-id-14 .episode-filter-buttons .wp-block-button:first-child:not(.is-active) .wp-block-button__link { background: transparent !important; color: #1E2B33 !important; } /* Inactive hover - text stays visible */ body.page-id-14 .episode-filter-buttons .wp-block-button:not(.is-active) .wp-block-button__link:hover, body.page-id-14 .episode-filter-buttons .wp-block-button:not(.is-active) .wp-block-button__link:focus { background: #F1F3F2 !important; color: #1E2B33 !important; } /* Active hover */ body.page-id-14 .episode-filter-buttons .wp-block-button.is-active .wp-block-button__link:hover, body.page-id-14 .episode-filter-buttons .wp-block-button.is-active .wp-block-button__link:focus { background: #FF5148 !important; color: #FFFFFF !important; } /* Mobile 2 x 2 tabs - active state remains AJAX driven */ @media screen and (max-width: 767px) { body.page-id-14 .episode-filter-buttons { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px !important; background: #FFFFFF !important; border-radius: 22px !important; box-sizing: border-box !important; } body.page-id-14 .episode-filter-buttons .wp-block-button { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.page-id-14 .episode-filter-buttons .wp-block-button .wp-block-button__link { width: 100% !important; min-width: 0 !important; min-height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 8px !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important; } body.page-id-14 .episode-filter-buttons .wp-block-button:not(.is-active) .wp-block-button__link { background: #FFFFFF !important; color: #1E2B33 !important; border: 1px solid rgba(30, 43, 51, 0.12) !important; } body.page-id-14 .episode-filter-buttons .wp-block-button.is-active .wp-block-button__link { background: #FF5148 !important; color: #FFFFFF !important; border-color: #FF5148 !important; } body.page-id-14 .episode-filter-buttons .wp-block-button:first-child:not(.is-active) .wp-block-button__link { background: #FFFFFF !important; color: #1E2B33 !important; border: 1px solid rgba(30, 43, 51, 0.12) !important; } } /* ========================================================= ALL EPISODES + STAY IN LOOP WIDTH SAFETY No visual redesign - only prevent constrained overflow ========================================================= */ body.page-id-14 .all-episodes-section, body.page-id-14 .all-episodes-section > .wp-block-group__inner-container, body.page-id-14 .all-episodes-inner, body.page-id-14 .all-episodes-inner > .wp-block-group__inner-container, body.page-id-14 .all-episodes-query { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } @media screen and (min-width: 1025px) { body.page-id-14 .all-episodes-inner { padding-left: var(--tgf-fluid-gutter) !important; padding-right: var(--tgf-fluid-gutter) !important; } .tgf-loop-section { width: 100% !important; max-width: none !important; padding-left: var(--tgf-fluid-gutter) !important; padding-right: var(--tgf-fluid-gutter) !important; box-sizing: border-box !important; } .tgf-loop-card { width: 100% !important; max-width: 1300px !important; margin-left: auto; margin-right: auto; box-sizing: border-box !important; padding-right: 120px; } } /* ========================================================= END TGF FINAL MASTER RESPONSIVE OVERRIDE ========================================================= */ /* Podcast Singal Page CSS */ /* ================================================================ THE GYMNASTICS FILES PODCAST EPISODE DETAIL PAGE FINAL COMPLETE STYLESHEET Template: single-podcast-episode.php IMPORTANT: Remove previous Podcast Detail CSS before adding this stylesheet. ================================================================ */ /* ================================================================ 01. PAGE / GENERATEPRESS FULL WIDTH RESET ================================================================ */ .single-podcast-episode .site-content, .single-podcast-episode #primary, .single-podcast-episode .content-area, .single-podcast-episode .inside-article, .single-podcast-episode article.podcast-episode, .single-podcast-episode .entry-content { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .single-podcast-episode .site.grid-container, .single-podcast-episode .site-content.grid-container { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .single-podcast-episode #right-sidebar, .single-podcast-episode #left-sidebar { display: none !important; } .single-podcast-episode #primary { float: none !important; } .single-podcast-episode .tgf-podcast-detail-page, .single-podcast-episode .tgf-podcast-detail-page * { box-sizing: border-box; } .single-podcast-episode .tgf-podcast-detail-page { width: 100%; overflow: clip; background: #ffffff; color: #1e2b33; } /* ================================================================ 02. MASTER PAGE CONTAINER ================================================================ */ .single-podcast-episode .tgf-podcast-detail-container { width: min(calc(100% - 72px), 1510px) !important; max-width: 1510px !important; margin: 0 auto !important; padding: 36px 0 100px !important; } .single-podcast-episode .tgf-podcast-detail-grid { display: grid !important; grid-template-columns: minmax(0, 2.25fr) minmax(310px, 0.78fr) !important; gap: clamp(42px, 5vw, 82px) !important; align-items: start !important; width: 100% !important; } .single-podcast-episode .tgf-podcast-detail-main, .single-podcast-episode .tgf-podcast-detail-sidebar { min-width: 0 !important; } /* ================================================================ 03. BREADCRUMB ================================================================ */ .single-podcast-episode .tgf-detail-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 25px !important; font-size: 13px; line-height: 1.4; color: #1e2b33; } .single-podcast-episode .tgf-detail-breadcrumb a { color: #1e2b33 !important; text-decoration: none !important; transition: opacity .2s ease; } .single-podcast-episode .tgf-detail-breadcrumb a:hover { opacity: .65; } /* ================================================================ 04. EPISODE HEADER ================================================================ */ .single-podcast-episode .tgf-detail-header { width: 100%; margin: 0 0 26px; } .single-podcast-episode .tgf-detail-title { max-width: 970px; margin: 0 0 16px !important; color: #1e2b33 !important; font-size: clamp(38px, 3.35vw, 59px) !important; line-height: 1.04 !important; font-weight: 700 !important; letter-spacing: -0.035em !important; } .single-podcast-episode .tgf-detail-description { max-width: 900px; margin: 0 0 24px !important; color: #1e2b33; font-size: 20px; line-height: 1.55; font-weight: 400; } .single-podcast-episode .tgf-detail-description p { margin: 0 !important; } /* ================================================================ 05. HOSTS + DATE META ROW ================================================================ */ .single-podcast-episode .tgf-detail-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 14px !important; width: 100%; margin: 0 !important; padding: 0 !important; color: #1e2b33; } .single-podcast-episode .tgf-detail-hosts { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap; } .single-podcast-episode .tgf-detail-host { display: flex; align-items: center; margin: 0 !important; } .single-podcast-episode .tgf-detail-host-link { display: flex !important; align-items: center !important; gap: 10px !important; color: #1e2b33 !important; text-decoration: none !important; } .single-podcast-episode .tgf-detail-host-image { display: block; width: 48px !important; height: 48px !important; min-width: 48px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; object-fit: cover !important; object-position: center !important; } .single-podcast-episode .tgf-detail-host-name { display: block; font-size: 20px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #1e2b33 !important; white-space: nowrap; } .single-podcast-episode .tgf-detail-meta-separator { display: block !important; flex: 0 0 1px; width: 1px !important; height: 53px !important; margin: 0 1px !important; background: rgba(30, 43, 51, .72) !important; } .single-podcast-episode .tgf-detail-published { display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: #1e2b33 !important; font-size: 20px !important; line-height: 1.2 !important; white-space: nowrap; } /* ================================================================ 06. MAIN CORAL PODCAST PLAYER ================================================================ */ .single-podcast-episode .tgf-detail-audio { width: 100% !important; margin: 30px 0 38px !important; padding: 0 !important; } .single-podcast-episode .tgf-episode-player { position: relative !important; display: grid !important; grid-template-columns: 142px minmax(0, 1fr) !important; align-items: stretch !important; gap: 20px !important; width: 100% !important; min-height: 166px !important; margin: 0 !important; padding: 17px !important; background: #fb5046 !important; border: 0 !important; border-radius: 17px !important; box-shadow: none !important; overflow: hidden !important; color: #ffffff !important; } .single-podcast-episode .tgf-player-native-audio { display: none !important; } /* Player image */ .single-podcast-episode .tgf-player-cover { position: relative; width: 142px !important; height: 132px !important; align-self: center !important; margin: 0 !important; border-radius: 15px !important; overflow: hidden !important; z-index: 3; } .single-podcast-episode .tgf-player-cover img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; object-position: center !important; border: 0 !important; border-radius: inherit !important; } /* Player content */ .single-podcast-episode .tgf-player-main { position: relative; display: flex !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; padding: 2px 0 !important; color: #fff !important; z-index: 2; } .single-podcast-episode .tgf-player-category { margin: 0 0 8px !important; color: #ffffff !important; font-size: 12px !important; line-height: 16px !important; font-weight: 400 !important; letter-spacing: .02em !important; text-transform: uppercase !important; } .single-podcast-episode .tgf-player-title { width: 100%; max-width: 920px; margin: 0 0 9px !important; padding: 0 !important; color: #ffffff !important; font-size: clamp(20px, 1.6vw, 27px) !important; line-height: 1.14 !important; font-weight: 700 !important; letter-spacing: -0.025em !important; } .single-podcast-episode .tgf-player-description { max-width: 850px; margin: 0 0 20px !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 400 !important; } /* Bottom player line */ .single-podcast-episode .tgf-player-footer { display: grid !important; grid-template-columns: auto minmax(120px, 1fr) auto auto !important; align-items: center !important; gap: 11px !important; width: 100% !important; margin-top: auto !important; } .single-podcast-episode .tgf-player-current, .single-podcast-episode .tgf-player-duration { position: relative; display: inline-block !important; color: #ffffff !important; font-size: 13px !important; line-height: 1 !important; font-weight: 400 !important; white-space: nowrap; z-index: 8; } .single-podcast-episode .tgf-player-progress-wrap { position: relative; width: 100% !important; min-width: 0 !important; z-index: 8; } /* Range track */ .single-podcast-episode .tgf-player-progress { -webkit-appearance: none !important; appearance: none !important; display: block !important; width: 100% !important; height: 5px !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, .96) !important; border: none !important; border-radius: 999px !important; outline: none !important; cursor: pointer !important; } /* Chrome */ .single-podcast-episode .tgf-player-progress::-webkit-slider-runnable-track { width: 100%; height: 5px; background: rgba(255,255,255,.96); border: none; border-radius: 999px; } .single-podcast-episode .tgf-player-progress::-webkit-slider-thumb { -webkit-appearance: none !important; width: 18px !important; height: 18px !important; margin-top: -6.5px !important; background: #ffffff !important; border: none !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer !important; } /* Firefox */ .single-podcast-episode .tgf-player-progress::-moz-range-track { height: 5px; background: rgba(255,255,255,.96); border: none; border-radius: 999px; } .single-podcast-episode .tgf-player-progress::-moz-range-thumb { width: 18px !important; height: 18px !important; background: #ffffff !important; border: none !important; border-radius: 50% !important; box-shadow: none !important; } /* Player controls */ .single-podcast-episode .tgf-player-controls { position: relative; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; z-index: 10; } .single-podcast-episode .tgf-player-controls button { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: #ffffff !important; cursor: pointer !important; } .single-podcast-episode .tgf-player-skip { width: 30px !important; height: 30px !important; min-width: 30px !important; } .single-podcast-episode .tgf-player-skip img { display: block !important; width: 29px !important; height: 29px !important; margin: 0 !important; object-fit: contain !important; } .single-podcast-episode .tgf-player-speed { width: 30px !important; height: 30px !important; min-width: 30px !important; color: #ffffff !important; font-size: 13px !important; line-height: 30px !important; font-weight: 500 !important; } /* Invisible full-player button. This removes the black square/button currently appearing. */ .single-podcast-episode .tgf-player-hidden-play { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0 !important; opacity: 0 !important; z-index: 1 !important; cursor: pointer !important; } .single-podcast-episode .tgf-player-hidden-play::before, .single-podcast-episode .tgf-player-hidden-play::after { display: none !important; } /* Keep real controls over play surface */ .single-podcast-episode .tgf-player-cover, .single-podcast-episode .tgf-player-category, .single-podcast-episode .tgf-player-title, .single-podcast-episode .tgf-player-description, .single-podcast-episode .tgf-player-footer { position: relative; z-index: 5; } /* ================================================================ 07. EXTERNAL EMBED ================================================================ */ .single-podcast-episode .tgf-external-audio-player { width: 100%; overflow: hidden; border-radius: 16px; } .single-podcast-episode .tgf-external-audio-player iframe { display: block; width: 100% !important; max-width: 100% !important; } /* ================================================================ 08. FEATURED IMAGE ================================================================ */ .single-podcast-episode .tgf-detail-featured-image { width: 100% !important; margin: 0 0 34px !important; padding: 0 !important; border-radius: 14px !important; overflow: hidden !important; } .single-podcast-episode .tgf-detail-featured-image img { display: block !important; width: 100% !important; height: auto !important; max-width: none !important; margin: 0 !important; border-radius: inherit !important; object-fit: cover !important; } /* ================================================================ 09. BODY CONTENT ================================================================ */ .single-podcast-episode .tgf-detail-body-content { max-width: 920px; margin: 0 0 30px !important; color: #1e2b33; font-size: 18px; line-height: 29.25px !important; font-weight: 600; } .single-podcast-episode .tgf-detail-body-content p { margin-top: 0; margin-bottom: 18px; } .single-podcast-episode .tgf-detail-body-content p:last-child { margin-bottom: 0; } /* ================================================================ 10. FEATURED QUOTE ================================================================ */ .single-podcast-episode .tgf-detail-quote { position: relative; width: 100%; margin: 30px 0 46px !important; padding: 4px 0 4px 22px !important; background: transparent !important; border: none !important; border-left: 3px solid #fb5046 !important; } .single-podcast-episode .tgf-detail-quote-text { margin: 0 !important; color: #1e2b33; font-size: 24px !important; line-height: 1.45 !important; font-style: normal !important; font-weight: 600 !important; } .single-podcast-episode .tgf-detail-quote-text p { margin: 0 !important; } .single-podcast-episode .tgf-detail-quote cite { display: block; margin-top: 10px; color: #1e2b33; font-size: 11px; line-height: 1.3; font-style: normal; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; } /* ================================================================ 11. SECTION HEADINGS ================================================================ */ .single-podcast-episode .tgf-key-topics > h2, .single-podcast-episode .tgf-about-guest > h2, .single-podcast-episode .tgf-transcript-section > h2, .single-podcast-episode .tgf-detail-comments h2, .single-podcast-episode .tgf-detail-comments .comment-reply-title { margin: 0 0 22px !important; color: #1e2b33 !important; font-size: clamp(27px, 2vw, 36px) !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -0.025em !important; } /* ================================================================ 12. KEY TOPICS ================================================================ */ .single-podcast-episode .tgf-key-topics { width: 100%; margin: 0 0 52px !important; } .single-podcast-episode .tgf-key-topics-list { width: 100%; border-top: 1px solid rgba(30, 43, 51, .22); } .single-podcast-episode .tgf-key-topic-row { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto !important; align-items: center !important; gap: 14px !important; min-height: 58px; padding: 14px 0 !important; border-bottom: 1px solid rgba(30, 43, 51, .22); } .single-podcast-episode .tgf-key-topic-number { color: #fb5046; font-size: 13px; line-height: 1; font-weight: 600; } .single-podcast-episode .tgf-key-topic-title { color: #1e2b33; font-size: 18px; line-height: 1.4; font-weight: 700; } .single-podcast-episode .tgf-key-topic-time { color: #1e2b33; font-size: 11px; line-height: 1; font-weight: 400; opacity: .65; } /* ================================================================ 13. ABOUT GUEST ================================================================ */ .single-podcast-episode .tgf-about-guest { width: 100%; margin: 0 0 52px !important; } .single-podcast-episode .tgf-guest-card { display: grid !important; grid-template-columns: 150px minmax(0, 1fr) !important; align-items: center !important; gap: 24px !important; width: 100%; padding: 22px !important; background: #d9f1ec !important; border-radius: 14px !important; } .single-podcast-episode .tgf-guest-image-wrap { width: 150px; height: 112px; overflow: hidden; border-radius: 10px; } .single-podcast-episode .tgf-guest-image { display: block; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top !important; margin: 0 !important; } .single-podcast-episode .tgf-guest-content { min-width: 0; } .single-podcast-episode .tgf-guest-content h3 { margin: 0 0 5px !important; color: #1e2b33 !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 600 !important; } .single-podcast-episode .tgf-guest-role { margin: 0 0 13px !important; color: #1e2b33; font-size: 11px; line-height: 1.3; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; opacity: .72; } .single-podcast-episode .tgf-guest-bio { color: #1e2b33; font-size: 18px; line-height: 1.55; } .single-podcast-episode .tgf-guest-bio p { margin: 0 0 8px !important; } .single-podcast-episode .tgf-guest-social-link { display: inline-block; margin-top: 5px; color: #fb5046 !important; font-size: 14px; text-decoration: underline !important; } /* ================================================================ 14. TRANSCRIPT ================================================================ */ .single-podcast-episode .tgf-transcript-section { width: 100%; margin: 0 0 45px !important; } .single-podcast-episode .tgf-transcript-accordion { width: 100%; margin: 0 !important; background: #f4f4f1 !important; border: none !important; border-radius: 8px !important; overflow: hidden; } .single-podcast-episode .tgf-transcript-accordion summary { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; min-height: 62px; padding: 17px 20px !important; color: #1e2b33; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; } .single-podcast-episode .tgf-transcript-accordion summary::-webkit-details-marker { display: none; } .single-podcast-episode .tgf-transcript-duration { color: #fb5046; font-size: 15px; font-weight: 700; white-space: nowrap; } .single-podcast-episode .tgf-transcript-content { padding: 20px !important; background: #ffffff; border: 1px solid rgba(30,43,51,.1); border-top: 0; color: #1e2b33; font-size: 14px; line-height: 1.7; } /* ================================================================ 15. SPONSOR ================================================================ */ .single-podcast-episode .tgf-sponsor-section { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0 0 50px !important; padding: 37px 44px !important; background: #d9f1ec !important; border-radius: 12px !important; text-align: center; } .single-podcast-episode .tgf-sponsor-section h3 { margin: 0 0 7px !important; color: #1e2b33 !important; font-size: 24px !important; line-height: 1.2 !important; font-weight: 600 !important; } .single-podcast-episode .tgf-sponsor-intro { margin: 0 0 18px !important; color: #1e2b33; font-size: 14px; line-height: 1.4; } .single-podcast-episode .tgf-sponsor-logo { display: flex; align-items: center; justify-content: center; margin: 3px auto 18px; } .single-podcast-episode .tgf-sponsor-logo img { display: block; width: auto !important; max-width: 110px !important; max-height: 55px !important; object-fit: contain !important; } .single-podcast-episode .tgf-sponsor-description { max-width: 720px; text-align : left; margin: 0 auto 22px !important; font-weight : 400; color: #1e2b33; font-size: 18px; line-height: 1.55; } .single-podcast-episode .tgf-sponsor-description p { margin: 0 !important; } .single-podcast-episode .tgf-sponsor-link { display: inline-block; color: #fb5046 !important; font-size: 18px; font-weight: 600; text-decoration: none !important; } /* ================================================================ 16. RIGHT SIDEBAR ================================================================ */ .single-podcast-episode .tgf-podcast-detail-sidebar { display: flex !important; flex-direction: column !important; gap: 28px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Subscribe */ .single-podcast-episode .tgf-sidebar-card { width: 100%; } .single-podcast-episode .tgf-subscribe-card { padding: 28px 26px !important; background: #d9f1ec !important; border-radius: 13px !important; } .single-podcast-episode .tgf-subscribe-card h2 { margin: 0 0 12px !important; color: #1e2b33 !important; font-size: 30px !important; line-height: 1.13 !important; font-weight: 700 !important; letter-spacing: -0.025em !important; } .single-podcast-episode .tgf-subscribe-card p { margin: 0 0 23px !important; color: #1e2b33; font-size: 14px; line-height: 1.5; font-weight: 400; } .single-podcast-episode .tgf-sidebar-subscribe-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 51px !important; padding: 12px 20px !important; background: #fb5046 !important; border: none !important; border-radius: 999px !important; color: #ffffff !important; font-size: 16px !important; line-height: 1 !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; transition: transform .2s ease, opacity .2s ease; } .single-podcast-episode .tgf-sidebar-subscribe-btn:hover { color: #ffffff !important; opacity: .92; transform: translateY(-1px); } /* ================================================================ 17. LISTEN THE PODCAST THROUGH ================================================================ */ .single-podcast-episode .tgf-listen-through { width: 100%; margin: 0 !important; padding: 0 !important; } .single-podcast-episode .tgf-listen-through h3 { margin: 0 0 16px !important; color: #1e2b33 !important; font-size: 24px !important; line-height: 1.15 !important; font-weight: 700 !important; } .single-podcast-episode .tgf-listen-option { display: flex !important; align-items: center !important; gap: 17px !important; width: 100% !important; min-height: 76px !important; margin: 0 0 15px !important; padding: 14px 18px !important; background: #d9f1ec !important; border: 0 !important; border-radius: 12px !important; color: #1e2b33 !important; text-decoration: none !important; transition: transform .2s ease; } .single-podcast-episode .tgf-listen-option:hover { color: #1e2b33 !important; transform: translateY(-1px); } .single-podcast-episode .tgf-listen-option img { display: block !important; width: 45px !important; height: 45px !important; min-width: 45px !important; margin: 0 !important; object-fit: contain !important; } .single-podcast-episode .tgf-listen-option span { display: flex; flex-direction: column; gap: 3px; } .single-podcast-episode .tgf-listen-option small { display: block; margin: 0 !important; color: #1e2b33 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 400 !important; letter-spacing: .06em; } .single-podcast-episode .tgf-listen-option strong { display: block; color: #1e2b33 !important; font-size: 16px !important; line-height: 1.15 !important; font-weight: 700 !important; } .single-podcast-episode .tgf-more-listening { width: 100%; margin: 0 !important; padding: 3px 0 0 !important; text-align: center !important; } .single-podcast-episode .tgf-more-listening-title { margin: 0 0 12px !important; color: #1e2b33 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 400 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .single-podcast-episode .tgf-more-listening-links { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; color : #F34E3F; font-size: 14px !important; line-height: 1.2 !important; } .single-podcast-episode .tgf-more-listening-links a, .single-podcast-episode .tgf-listening-placeholder, .single-podcast-episode .tgf-listening-divider { color: #fb5046 !important; text-decoration: none !important; } /* ================================================================ 18. MINT SIDEBAR AUDIO PLAYER ================================================================ */ .single-podcast-episode .tgf-sidebar-player { position: relative; width: 100% !important; margin: 3px 0 0 !important; padding: 22px 22px 24px !important; background: #d9f1ec !important; border-radius: 12px !important; box-shadow: 0 9px 25px rgba(30, 43, 51, .08); color: #1e2b33 !important; } .single-podcast-episode .tgf-sidebar-native-audio { display: none !important; } .single-podcast-episode .tgf-sidebar-player-top { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 9px !important; margin: 0 0 18px !important; color: #1e2b33; font-size: 11px; line-height: 1; letter-spacing: .06em; } .single-podcast-episode .tgf-sidebar-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #1e2b33; border-radius: 50%; color: #ffffff; font-size: 19px; line-height: 1; cursor: pointer; } /* Current episode */ .single-podcast-episode .tgf-sidebar-now-playing { display: grid !important; grid-template-columns: 100px minmax(0, 1fr) !important; align-items: center !important; gap: 17px !important; margin-bottom: 23px !important; } .single-podcast-episode .tgf-sidebar-current-image { width: 100px !important; height: 100px !important; overflow: hidden; border-radius: 13px !important; } .single-podcast-episode .tgf-sidebar-current-image img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; } .single-podcast-episode .tgf-sidebar-current-copy { min-width: 0; } .single-podcast-episode .tgf-sidebar-current-copy h4 { margin: 0 0 6px !important; color: #1e2b33 !important; font-size: 18px !important; line-height: 1.15 !important; font-weight: 600 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .single-podcast-episode .tgf-sidebar-current-title { display: -webkit-box; margin: 0 !important; color: #1e2b33; font-size: 14px; line-height: 1.35; font-weight: 400; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Sidebar controls */ .single-podcast-episode .tgf-sidebar-controls { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 19px !important; width: 100%; margin: 0 0 16px !important; } .single-podcast-episode .tgf-sidebar-controls button { -webkit-appearance: none; appearance: none; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #1e2b33 !important; cursor: pointer !important; } .single-podcast-episode .tgf-sidebar-prev, .single-podcast-episode .tgf-sidebar-next { width: 28px !important; height: 28px !important; } .single-podcast-episode .tgf-sidebar-prev img, .single-podcast-episode .tgf-sidebar-next img { display: block; width: 24px !important; height: 24px !important; margin: 0 !important; object-fit: contain !important; } .single-podcast-episode .tgf-sidebar-speed { width: 33px !important; height: 33px !important; font-size: 15px !important; font-weight: 600 !important; } .single-podcast-episode .tgf-sidebar-main-play { width: 48px !important; height: 48px !important; border-radius: 50% !important; } .single-podcast-episode .tgf-sidebar-main-play img { display: block; width: 48px !important; height: 48px !important; margin: 0 !important; object-fit: contain !important; } /* Sidebar range */ .single-podcast-episode .tgf-sidebar-progress { width: 100%; margin-bottom: 18px; } .single-podcast-episode .tgf-sidebar-progress-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 7px; margin: 0; background: rgba(30, 43, 51, .18); border: 0; border-radius: 999px; outline: none; cursor: pointer; } .single-podcast-episode .tgf-sidebar-progress-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #1e2b33; border: 0; border-radius: 50%; } .single-podcast-episode .tgf-sidebar-progress-range::-moz-range-thumb { width: 18px; height: 18px; background: #1e2b33; border: 0; border-radius: 50%; } .single-podcast-episode .tgf-sidebar-progress-times { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: #1e2b33; font-size: 11px; } /* ================================================================ 19. SIDEBAR TRACK LIST ================================================================ */ .single-podcast-episode .tgf-sidebar-track-list { display: flex; flex-direction: column; width: 100%; margin-top: 8px; } .single-podcast-episode .tgf-sidebar-track { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 28px !important; align-items: center !important; gap: 12px !important; min-height: 72px; padding: 10px 0 !important; border-top: 1px solid rgba(30, 43, 51, .13); } .single-podcast-episode .tgf-sidebar-track-play { -webkit-appearance: none; appearance: none; display: flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer !important; } .single-podcast-episode .tgf-sidebar-track-play img { display: block; width: 46px !important; height: 46px !important; margin: 0 !important; object-fit: contain !important; } .single-podcast-episode .tgf-sidebar-track-info { min-width: 0 !important; } .single-podcast-episode .tgf-sidebar-track-title { margin-bottom: 4px; color: #1e2b33; font-size: 18px; line-height: 1.3; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .single-podcast-episode .tgf-sidebar-track-date { color: #1e2b33; font-size: 14px; line-height: 1.2; opacity: .65; } .single-podcast-episode .tgf-sidebar-track-info-link { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; text-decoration: none; } .single-podcast-episode .tgf-sidebar-track-info-link img { display: block; width: 20px !important; height: 20px !important; margin: 0 !important; object-fit: contain !important; } /* ================================================================ 20. COMMENTS ================================================================ */ .single-podcast-episode .tgf-detail-comments { width: 100%; margin: 46px 0 0 !important; } .single-podcast-episode .tgf-detail-comments .comments-title { margin-bottom: 25px; } .single-podcast-episode .tgf-detail-comments .logged-in-as, .single-podcast-episode .tgf-detail-comments .comment-notes { margin: -12px 0 16px !important; color: #1e2b33; font-size: 14px; line-height: 1.4; } .single-podcast-episode .tgf-detail-comments form { width: 100%; } .single-podcast-episode .tgf-detail-comments p { margin-top: 0; } .single-podcast-episode .tgf-detail-comments label { display: block; margin: 0 0 7px; color: #fb5046; font-size: 11px; line-height: 1; } .single-podcast-episode .tgf-detail-comments textarea, .single-podcast-episode .tgf-detail-comments input[type="text"], .single-podcast-episode .tgf-detail-comments input[type="email"], .single-podcast-episode .tgf-detail-comments input[type="url"] { width: 100% !important; margin: 0 !important; padding: 16px 18px !important; background: #d9f1ec !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; color: #1e2b33 !important; font-family: inherit; font-size: 14px; outline: none !important; } .single-podcast-episode .tgf-detail-comments textarea { min-height: 175px !important; resize: vertical; } .single-podcast-episode .tgf-detail-comments .comment-form-comment { margin-bottom: 16px !important; } /* Guest fields in rows */ .single-podcast-episode .tgf-detail-comments .comment-form-author, .single-podcast-episode .tgf-detail-comments .comment-form-email { display: inline-block; width: calc(50% - 7px); margin-bottom: 14px !important; vertical-align: top; } .single-podcast-episode .tgf-detail-comments .comment-form-author { margin-right: 10px !important; } .single-podcast-episode .tgf-detail-comments .comment-form-url { width: 100%; margin-bottom: 14px !important; } .single-podcast-episode .tgf-detail-comments .form-submit { margin: 10px 0 0 !important; } .single-podcast-episode .tgf-detail-comments input[type="submit"], .single-podcast-episode .tgf-detail-comments .submit { min-height: 45px !important; padding: 12px 25px !important; background: #fb5046 !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; color: #ffffff !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; cursor: pointer; } .single-podcast-episode .tgf-detail-comments input[type="submit"]:hover, .single-podcast-episode .tgf-detail-comments .submit:hover { background: #fb5046 !important; color: #ffffff !important; opacity: .9; } /* ================================================================ 21. LAPTOP — 1180 TO 1400 ================================================================ */ @media (max-width: 1400px) { .single-podcast-episode .tgf-podcast-detail-container { width: min(calc(100% - 56px), 1370px) !important; } .single-podcast-episode .tgf-podcast-detail-grid { grid-template-columns: minmax(0, 2.15fr) minmax(300px, .78fr) !important; gap: 45px !important; } .single-podcast-episode .tgf-detail-title { font-size: clamp(38px, 3.2vw, 52px) !important; } .single-podcast-episode .tgf-episode-player { grid-template-columns: 125px minmax(0,1fr) !important; } .single-podcast-episode .tgf-player-cover { width: 125px !important; height: 122px !important; } .single-podcast-episode .tgf-player-title { font-size: 21px !important; } .single-podcast-episode .tgf-player-description { font-size: 13px !important; } } /* ================================================================ 22. SMALL LAPTOP / TABLET LANDSCAPE ================================================================ */ @media (max-width: 1180px) { .single-podcast-episode .tgf-podcast-detail-container { width: calc(100% - 44px) !important; padding-top: 30px !important; } .single-podcast-episode .tgf-podcast-detail-grid { grid-template-columns: minmax(0, 1.85fr) minmax(280px, .72fr) !important; gap: 32px !important; } .single-podcast-episode .tgf-detail-title { font-size: 42px !important; } .single-podcast-episode .tgf-detail-description { font-size: 15px !important; } .single-podcast-episode .tgf-detail-host-image { width: 40px !important; height: 40px !important; min-width: 40px !important; } .single-podcast-episode .tgf-detail-host-name, .single-podcast-episode .tgf-detail-published { font-size: 13px !important; } .single-podcast-episode .tgf-detail-meta-separator { height: 40px !important; } .single-podcast-episode .tgf-episode-player { grid-template-columns: 105px minmax(0, 1fr) !important; gap: 14px !important; padding: 14px !important; } .single-podcast-episode .tgf-player-cover { width: 105px !important; height: 105px !important; } .single-podcast-episode .tgf-player-category { font-size: 10px !important; margin-bottom: 5px !important; } .single-podcast-episode .tgf-player-title { font-size: 18px !important; margin-bottom: 6px !important; } .single-podcast-episode .tgf-player-description { font-size: 11px !important; margin-bottom: 12px !important; } .single-podcast-episode .tgf-player-footer { gap: 7px !important; } .single-podcast-episode .tgf-player-controls { gap: 6px !important; } .single-podcast-episode .tgf-subscribe-card { padding: 22px !important; } .single-podcast-episode .tgf-subscribe-card h2 { font-size: 23px !important; } .single-podcast-episode .tgf-listen-through h3 { font-size: 19px !important; } } /* ================================================================ 23. TABLET — SIDEBAR MOVES UNDER CONTENT ================================================================ */ @media (max-width: 920px) { .single-podcast-episode .tgf-podcast-detail-container { width: calc(100% - 40px) !important; } .single-podcast-episode .tgf-podcast-detail-grid { display: block !important; } .single-podcast-episode .tgf-podcast-detail-sidebar { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 25px !important; margin-top: 60px !important; } .single-podcast-episode .tgf-sidebar-player { grid-column: 1 / -1; } .single-podcast-episode .tgf-detail-title { max-width: 800px; font-size: clamp(38px, 6vw, 52px) !important; } .single-podcast-episode .tgf-episode-player { grid-template-columns: 135px minmax(0,1fr) !important; } .single-podcast-episode .tgf-player-cover { width: 135px !important; height: 125px !important; } } /* ================================================================ 24. MOBILE ================================================================ */ @media (max-width: 767px) { .single-podcast-episode .tgf-podcast-detail-container { width: calc(100% - 28px) !important; padding: 25px 0 65px !important; } .single-podcast-episode .tgf-detail-breadcrumb { margin-bottom: 18px !important; font-size: 11px; } .single-podcast-episode .tgf-detail-title { margin-bottom: 13px !important; font-size: clamp(31px, 9vw, 41px) !important; line-height: 1.05 !important; } .single-podcast-episode .tgf-detail-description { margin-bottom: 20px !important; font-size: 14px; line-height: 1.5; } /* Hosts */ .single-podcast-episode .tgf-detail-meta { gap: 8px !important; } .single-podcast-episode .tgf-detail-hosts { gap: 8px !important; } .single-podcast-episode .tgf-detail-host-link { gap: 6px !important; } .single-podcast-episode .tgf-detail-host-image { width: 34px !important; height: 34px !important; min-width: 34px !important; } .single-podcast-episode .tgf-detail-host-name { font-size: 11px !important; } .single-podcast-episode .tgf-detail-meta-separator { height: 33px !important; } .single-podcast-episode .tgf-detail-published { font-size: 11px !important; } /* Main player */ .single-podcast-episode .tgf-detail-audio { margin-top: 24px !important; } .single-podcast-episode .tgf-episode-player { grid-template-columns: 88px minmax(0,1fr) !important; gap: 11px !important; min-height: 0 !important; padding: 11px !important; border-radius: 12px !important; } .single-podcast-episode .tgf-player-cover { width: 88px !important; height: 88px !important; border-radius: 9px !important; } .single-podcast-episode .tgf-player-main { justify-content: flex-start !important; } .single-podcast-episode .tgf-player-category { margin-bottom: 4px !important; font-size: 8px !important; } .single-podcast-episode .tgf-player-title { margin-bottom: 4px !important; font-size: 13px !important; line-height: 1.15 !important; } .single-podcast-episode .tgf-player-description { display: none !important; } .single-podcast-episode .tgf-player-footer { grid-template-columns: auto minmax(30px,1fr) auto !important; gap: 5px !important; } .single-podcast-episode .tgf-player-current, .single-podcast-episode .tgf-player-duration { font-size: 9px !important; } .single-podcast-episode .tgf-player-progress { height: 3px !important; } .single-podcast-episode .tgf-player-progress::-webkit-slider-thumb { width: 12px !important; height: 12px !important; margin-top: -4.5px !important; } .single-podcast-episode .tgf-player-controls { grid-column: 1 / -1; justify-content: flex-end !important; gap: 7px !important; margin-top: 3px !important; } .single-podcast-episode .tgf-player-skip, .single-podcast-episode .tgf-player-speed { width: 23px !important; height: 23px !important; min-width: 23px !important; } .single-podcast-episode .tgf-player-skip img { width: 22px !important; height: 22px !important; } .single-podcast-episode .tgf-player-speed { font-size: 10px !important; } /* Image */ .single-podcast-episode .tgf-detail-featured-image { margin-bottom: 27px !important; border-radius: 10px !important; } /* Quote */ .single-podcast-episode .tgf-detail-quote { margin: 25px 0 38px !important; padding-left: 16px !important; } .single-podcast-episode .tgf-detail-quote-text { font-size: 16px !important; } /* Topics */ .single-podcast-episode .tgf-key-topic-row { grid-template-columns: 32px minmax(0,1fr) auto !important; gap: 8px !important; padding: 12px 0 !important; } .single-podcast-episode .tgf-key-topic-title { font-size: 12px; } /* Guest */ .single-podcast-episode .tgf-guest-card { grid-template-columns: 85px minmax(0,1fr) !important; gap: 14px !important; padding: 15px !important; } .single-podcast-episode .tgf-guest-image-wrap { width: 100%; height: 230px; object-position: top; } .single-podcast-episode .tgf-guest-content h3 { font-size: 16px !important; } .single-podcast-episode .tgf-guest-bio { font-size: 18px; } /* Sponsor */ .single-podcast-episode .tgf-sponsor-section { padding: 28px 20px !important; } /* Sidebar */ .single-podcast-episode .tgf-podcast-detail-sidebar { display: flex !important; flex-direction: column !important; gap: 25px !important; margin-top: 50px !important; } .single-podcast-episode .tgf-subscribe-card h2 { font-size: 24px !important; } .single-podcast-episode .tgf-listen-through h3 { font-size: 21px !important; } .single-podcast-episode .tgf-listen-option { min-height: 70px !important; } .single-podcast-episode .tgf-sidebar-now-playing { grid-template-columns: 80px minmax(0,1fr) !important; } .single-podcast-episode .tgf-sidebar-current-image { width: 80px !important; height: 80px !important; } .single-podcast-episode .tgf-sidebar-current-copy h4 { font-size: 16px !important; } .single-podcast-episode .tgf-sidebar-current-title { font-size: 12px; } /* Comments */ .single-podcast-episode .tgf-detail-comments .comment-form-author, .single-podcast-episode .tgf-detail-comments .comment-form-email { display: block; width: 100%; margin-right: 0 !important; margin-bottom: 13px !important; } } /* ================================================================ 25. VERY SMALL MOBILE ================================================================ */ @media (max-width: 430px) { .single-podcast-episode .tgf-podcast-detail-container { width: calc(100% - 22px) !important; } .single-podcast-episode .tgf-detail-title { font-size: 31px !important; } .single-podcast-episode .tgf-detail-hosts { width: 100%; } .single-podcast-episode .tgf-detail-published-separator { display: none !important; } .single-podcast-episode .tgf-detail-published { width: 100%; margin-top: 5px !important; } .single-podcast-episode .tgf-episode-player { grid-template-columns: 75px minmax(0,1fr) !important; } .single-podcast-episode .tgf-player-cover { width: 75px !important; height: 75px !important; } .single-podcast-episode .tgf-player-title { font-size: 12px !important; } .single-podcast-episode .tgf-sidebar-player { padding: 18px 16px 20px !important; } .single-podcast-episode .tgf-sidebar-track { grid-template-columns: 42px minmax(0,1fr) 26px !important; gap: 9px !important; } .single-podcast-episode .tgf-sidebar-track-play, .single-podcast-episode .tgf-sidebar-track-play img { width: 40px !important; height: 40px !important; } } /* ========================================================= PODCAST DETAIL - CONTROL SIZE + X ALIGNMENT FIX Paste at END of existing CSS ========================================================= */ /* ========================================================= 1. SIDEBAR X BUTTON - PERFECT CENTER ========================================================= */ .single-podcast-episode .tgf-sidebar-close { width: 34px !important; height: 34px !important; min-width: 34px !important; flex: 0 0 34px !important; display: grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; background: #1e2b33 !important; border: 0 !important; border-radius: 50% !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important; box-sizing: border-box !important; cursor: pointer; } /* Create properly centered X */ .single-podcast-episode .tgf-sidebar-close::before { content: "×"; display: block; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 23px; font-weight: 300; line-height: 1; transform: translateY(-1px); } /* FOLLOW + X same center line */ .single-podcast-episode .tgf-sidebar-player-top { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; min-height: 34px !important; margin-bottom: 20px !important; } .single-podcast-episode .tgf-sidebar-player-top > span:first-child { display: flex !important; align-items: center !important; height: 34px !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1 !important; } /* ========================================================= 2. MAIN RED PLAYER PREVIOUS / NEXT CONTROLS Reduce oversized icons ========================================================= */ .single-podcast-episode .tgf-player-controls { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 9px !important; } /* Button outer box */ .single-podcast-episode .tgf-player-skip { width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; flex: 0 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* Actual previous / next PNG */ .single-podcast-episode .tgf-player-skip img { display: block !important; width: 19px !important; height: 19px !important; max-width: 19px !important; max-height: 19px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* 1X */ .single-podcast-episode .tgf-player-speed { width: 25px !important; height: 24px !important; min-width: 25px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #ffffff !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; } /* ========================================================= 3. SIDEBAR PREVIOUS / NEXT ICONS Keep sidebar controls compact as well ========================================================= */ .single-podcast-episode .tgf-sidebar-prev, .single-podcast-episode .tgf-sidebar-next { width: 24px !important; height: 24px !important; min-width: 24px !important; flex: 0 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .single-podcast-episode .tgf-sidebar-prev img, .single-podcast-episode .tgf-sidebar-next img { display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* Sidebar control spacing */ .single-podcast-episode .tgf-sidebar-controls { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 13px !important; } /* ========================================================= 4. TABLET ========================================================= */ @media (max-width: 920px) { .single-podcast-episode .tgf-player-skip { width: 22px !important; height: 22px !important; min-width: 22px !important; } .single-podcast-episode .tgf-player-skip img { width: 17px !important; height: 17px !important; } } /* ========================================================= 5. MOBILE ========================================================= */ @media (max-width: 767px) { .single-podcast-episode .tgf-sidebar-close { width: 30px !important; height: 30px !important; min-width: 30px !important; flex-basis: 30px !important; } .single-podcast-episode .tgf-sidebar-close::before { font-size: 20px !important; } .single-podcast-episode .tgf-player-controls { gap: 7px !important; } .single-podcast-episode .tgf-player-skip { width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; flex-basis: 20px !important; } .single-podcast-episode .tgf-player-skip img { width: 15px !important; height: 15px !important; max-width: 15px !important; max-height: 15px !important; } .single-podcast-episode .tgf-player-speed { width: 22px !important; height: 20px !important; min-width: 22px !important; font-size: 10px !important; } } /* ========================================================= TGF PODCAST DETAIL FINAL UI FIX PATCH ========================================================= */ /* ========================================================= BREADCRUMBS ========================================================= */ .single-podcast-episode .tgf-detail-breadcrumb { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 0 24px !important; padding: 0 !important; color: #1e2b33 !important; font-size: 20px !important; line-height: 1.4 !important; font-weight: 400 !important; } .single-podcast-episode .tgf-detail-breadcrumb a, .single-podcast-episode .tgf-detail-breadcrumb > span { margin: 0 !important; padding: 0 !important; color: #1e2b33 !important; font-size: 18px; line-height: inherit !important; font-weight: 400 !important; text-decoration: none !important; } .single-podcast-episode .tgf-detail-breadcrumb a:hover { color: #fb5046 !important; text-decoration: none !important; } .single-podcast-episode .tgf-breadcrumb-separator { display: inline-block !important; margin: 0 1px !important; color: #1e2b33 !important; font-size: 13px !important; line-height: 1 !important; } /* ========================================================= SIDEBAR X true centered X - no text glyph ========================================================= */ .single-podcast-episode .tgf-sidebar-player-top { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 11px !important; min-height: 34px !important; margin: 0 0 20px !important; padding: 0 !important; } .single-podcast-episode .tgf-sidebar-player-top > span { display: flex !important; align-items: center !important; justify-content: center !important; height: 34px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .single-podcast-episode .tgf-sidebar-close { position: relative !important; display: block !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; margin: 0 !important; padding: 0 !important; background: #1e2b33 !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; font-size: 0 !important; line-height: 0 !important; cursor: pointer !important; } /* X line one */ .single-podcast-episode .tgf-sidebar-close::before, .single-podcast-episode .tgf-sidebar-close::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 14px !important; height: 2px !important; margin: 0 !important; background: #ffffff !important; border-radius: 999px !important; transform-origin: center !important; } .single-podcast-episode .tgf-sidebar-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; } .single-podcast-episode .tgf-sidebar-close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* hide old inner content */ .single-podcast-episode .tgf-sidebar-close > span { display: none !important; } /* Player closed */ .single-podcast-episode .tgf-sidebar-player-hidden { display: none !important; } /* ========================================================= SIDEBAR MAIN PLAY / PAUSE ========================================================= */ .single-podcast-episode .tgf-sidebar-main-play { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer !important; } .single-podcast-episode .tgf-sidebar-main-play img { display: block !important; width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* ========================================================= SIDEBAR TRACK PLAY / PAUSE ========================================================= */ .single-podcast-episode .tgf-sidebar-track-play { display: flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; min-width: 46px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer !important; } .single-podcast-episode .tgf-sidebar-track-play img { display: block !important; width: 46px !important; height: 46px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* ========================================================= COMMENT FORM - FIGMA LAYOUT ========================================================= */ .single-podcast-episode .tgf-detail-comments { width: 100% !important; max-width: none !important; margin: 52px 0 0 !important; padding: 0 !important; } .single-podcast-episode .tgf-detail-comments .comment-respond { width: 100% !important; margin: 0 !important; padding: 0 !important; } .single-podcast-episode .tgf-detail-comments .comment-reply-title { margin: 0 0 8px !important; color: #1e2b33 !important; font-size: 40px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -0.025em !important; } /* tiny info line under title */ .single-podcast-episode .tgf-detail-comments .comment-notes, .single-podcast-episode .tgf-detail-comments .logged-in-as { grid-column: 1 / -1 !important; margin: 0 0 20px !important; color: #1e2b33 !important; font-size: 14px !important; line-height: 1.45 !important; opacity: .75; } /* main form grid */ .single-podcast-episode .tgf-detail-comments .comment-form { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 14px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* comment box full width */ .single-podcast-episode .tgf-detail-comments .comment-form-comment { grid-column: 1 / -1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* author left */ .single-podcast-episode .tgf-detail-comments .comment-form-author { grid-column: 1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* email right */ .single-podcast-episode .tgf-detail-comments .comment-form-email { grid-column: 2 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* website full width */ .single-podcast-episode .tgf-detail-comments .comment-form-url { grid-column: 1 / -1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Figma uses placeholder-style labels. Your current form already has placeholders, so external labels can be hidden. */ .single-podcast-episode .tgf-detail-comments .comment-form-comment > label, .single-podcast-episode .tgf-detail-comments .comment-form-author > label, .single-podcast-episode .tgf-detail-comments .comment-form-email > label, .single-podcast-episode .tgf-detail-comments .comment-form-url > label { display: none !important; } /* textarea */ .single-podcast-episode .tgf-detail-comments textarea { display: block !important; width: 100% !important; height: 160px !important; min-height: 160px !important; max-height: 260px !important; margin: 0 !important; padding: 20px !important; background: #d9f1ec !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; outline: none !important; color: #1e2b33 !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.5 !important; resize: vertical !important; } /* Author / email / website pills */ .single-podcast-episode .tgf-detail-comments input[type="text"], .single-podcast-episode .tgf-detail-comments input[type="email"], .single-podcast-episode .tgf-detail-comments input[type="url"] { display: block !important; width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 18px !important; background: #d9f1ec !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; outline: none !important; color: #1e2b33 !important; font-family: inherit !important; font-size: 13px !important; line-height: 48px !important; } /* placeholders */ .single-podcast-episode .tgf-detail-comments input::placeholder, .single-podcast-episode .tgf-detail-comments textarea::placeholder { color: rgba(30, 43, 51, .68) !important; opacity: 1 !important; } /* focus stays clean */ .single-podcast-episode .tgf-detail-comments textarea:focus, .single-podcast-episode .tgf-detail-comments input[type="text"]:focus, .single-podcast-episode .tgf-detail-comments input[type="email"]:focus, .single-podcast-episode .tgf-detail-comments input[type="url"]:focus { outline: 1px solid rgba(30,43,51,.15) !important; outline-offset: 0 !important; } /* Figma does not show WordPress cookies checkbox. Remove it from visual layout. */ .single-podcast-episode .tgf-detail-comments .comment-form-cookies-consent { display: none !important; } /* submit row */ .single-podcast-episode .tgf-detail-comments .form-submit { grid-column: 1 / -1 !important; margin: 2px 0 0 !important; padding: 0 !important; } /* Post Comment */ .single-podcast-episode .tgf-detail-comments .submit, .single-podcast-episode .tgf-detail-comments input[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 126px !important; height: 46px !important; margin: 0 !important; padding: 0 23px !important; background: #fb5046 !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; color: #ffffff !important; font-family: inherit !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; cursor: pointer !important; transition: opacity .2s ease, transform .2s ease !important; } .single-podcast-episode .tgf-detail-comments .submit:hover, .single-podcast-episode .tgf-detail-comments input[type="submit"]:hover { background: #fb5046 !important; color: #ffffff !important; opacity: .9; transform: translateY(-1px); } /* ========================================================= REMOVE RANDOM WP COMMENT SPACING ========================================================= */ .single-podcast-episode .tgf-detail-comments .comment-form > p { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 920px) { .single-podcast-episode .tgf-detail-comments .comment-reply-title { font-size: 30px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .single-podcast-episode .tgf-detail-breadcrumb { gap: 5px !important; margin-bottom: 18px !important; font-size: 11px !important; } .single-podcast-episode .tgf-breadcrumb-separator { font-size: 11px !important; } .single-podcast-episode .tgf-sidebar-close { width: 30px !important; height: 30px !important; min-width: 30px !important; max-width: 30px !important; flex-basis: 30px !important; } .single-podcast-episode .tgf-sidebar-close::before, .single-podcast-episode .tgf-sidebar-close::after { width: 12px !important; height: 2px !important; } .single-podcast-episode .tgf-detail-comments { margin-top: 40px !important; } .single-podcast-episode .tgf-detail-comments .comment-reply-title { font-size: 27px !important; } .single-podcast-episode .tgf-detail-comments .comment-form { grid-template-columns: 1fr !important; row-gap: 12px !important; } .single-podcast-episode .tgf-detail-comments .comment-form-comment, .single-podcast-episode .tgf-detail-comments .comment-form-author, .single-podcast-episode .tgf-detail-comments .comment-form-email, .single-podcast-episode .tgf-detail-comments .comment-form-url, .single-podcast-episode .tgf-detail-comments .form-submit, .single-podcast-episode .tgf-detail-comments .comment-notes, .single-podcast-episode .tgf-detail-comments .logged-in-as { grid-column: 1 !important; } .single-podcast-episode .tgf-detail-comments textarea { height: 145px !important; min-height: 145px !important; padding: 16px !important; } .single-podcast-episode .tgf-detail-comments input[type="text"], .single-podcast-episode .tgf-detail-comments input[type="email"], .single-podcast-episode .tgf-detail-comments input[type="url"] { height: 46px !important; padding: 0 16px !important; line-height: 46px !important; } } /* ========================================================= ORANGE MAIN PLAYER PLAY / PAUSE BUTTON ========================================================= */ .single-podcast-episode .tgf-main-play-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; flex: 0 0 34px !important; margin: 0 8px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; cursor: pointer !important; } .single-podcast-episode .tgf-main-play-toggle img { display: block !important; width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* Orange player footer alignment */ .single-podcast-episode .tgf-player-footer { display: flex !important; align-items: center !important; width: 100% !important; } /* Timeline remains flexible */ .single-podcast-episode .tgf-player-progress-wrap { flex: 1 1 auto !important; min-width: 80px !important; } /* Hidden when sidebar X clicked */ .single-podcast-episode .tgf-sidebar-player-hidden { display: none !important; } /* Mobile */ @media (max-width: 767px) { .single-podcast-episode .tgf-main-play-toggle { width: 30px !important; height: 30px !important; min-width: 30px !important; flex-basis: 30px !important; } .single-podcast-episode .tgf-main-play-toggle img { width: 30px !important; height: 30px !important; max-width: 30px !important; max-height: 30px !important; } } /* ============================================================ THE GYMNASTICS FILES SIDEBAR AUDIO PLAYER - FINAL ROUND BUTTON CSS OLD CSS REMOVED - USE THIS COMPLETE BLOCK ============================================================ */ /* ============================================================ 1. SIDEBAR MAIN CONTROL ROW ============================================================ */ .single-podcast-episode .tgf-sidebar-controls { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 18px !important; width: 100% !important; margin: 22px 0 14px !important; padding: 0 !important; } /* ============================================================ 2. PREVIOUS / NEXT BUTTONS ============================================================ */ .single-podcast-episode .tgf-sidebar-prev, .single-podcast-episode .tgf-sidebar-next { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; } .single-podcast-episode .tgf-sidebar-prev img, .single-podcast-episode .tgf-sidebar-next img { display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* ============================================================ 3. 1X SPEED ============================================================ */ .single-podcast-episode .tgf-sidebar-speed { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #1E2B33 !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1 !important; box-shadow: none !important; } /* ============================================================ 4. MAIN SIDEBAR PLAY BUTTON FORCE PERFECT CIRCLE ============================================================ */ .single-podcast-episode .tgf-sidebar-main-play { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; flex: 0 0 52px !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; background: #1E2B33 !important; border: 0 !important; border-radius: 50% !important; -webkit-border-radius: 50% !important; box-shadow: none !important; outline: none !important; overflow: hidden !important; cursor: pointer !important; line-height: 1 !important; appearance: none !important; -webkit-appearance: none !important; transform: none !important; } /* Important: prevent theme button styles */ .single-podcast-episode button.tgf-sidebar-main-play, .single-podcast-episode button.tgf-sidebar-main-play:hover, .single-podcast-episode button.tgf-sidebar-main-play:focus, .single-podcast-episode button.tgf-sidebar-main-play:active { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; padding: 0 !important; margin: 0 !important; background: #1E2B33 !important; border: none !important; border-radius: 50% !important; box-shadow: none !important; transform: none !important; } /* ============================================================ 5. MAIN PLAY ICON ============================================================ */ .single-podcast-episode .tgf-sidebar-main-play img { position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; object-fit: contain !important; transform: translate(-50%, -50%) !important; box-shadow: none !important; z-index: 2 !important; } /* ============================================================ 6. MAIN PAUSE STATE BLACK CIRCLE + WHITE BARS ============================================================ */ .single-podcast-episode .tgf-sidebar-main-play.is-playing { background: #1E2B33 !important; border-radius: 50% !important; } /* Hide Play PNG */ .single-podcast-episode .tgf-sidebar-main-play.is-playing img { opacity: 0 !important; visibility: hidden !important; } /* Pause bars */ .single-podcast-episode .tgf-sidebar-main-play.is-playing::before, .single-podcast-episode .tgf-sidebar-main-play.is-playing::after { content: "" !important; position: absolute !important; top: 50% !important; display: block !important; width: 5px !important; height: 20px !important; background: #FFFFFF !important; border-radius: 1px !important; transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important; z-index: 10 !important; } /* left pause bar */ .single-podcast-episode .tgf-sidebar-main-play.is-playing::before { left: calc(50% - 7px) !important; } /* right pause bar */ .single-podcast-episode .tgf-sidebar-main-play.is-playing::after { left: calc(50% + 2px) !important; } /* ============================================================ 7. SIDEBAR TRACK ROWS ============================================================ */ .single-podcast-episode .tgf-sidebar-track { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 30px !important; align-items: center !important; column-gap: 14px !important; width: 100% !important; margin: 0 !important; padding: 16px 0 !important; border-top: 1px solid rgba(30, 43, 51, 0.12) !important; } /* ============================================================ 8. SMALL TRACK PLAY BUTTON PERFECT ROUND ============================================================ */ .single-podcast-episode .tgf-sidebar-track-play { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; flex: 0 0 48px !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; background: #1E2B33 !important; border: 0 !important; border-radius: 50% !important; -webkit-border-radius: 50% !important; box-shadow: none !important; outline: none !important; overflow: hidden !important; cursor: pointer !important; appearance: none !important; -webkit-appearance: none !important; } /* prevent theme override */ .single-podcast-episode button.tgf-sidebar-track-play, .single-podcast-episode button.tgf-sidebar-track-play:hover, .single-podcast-episode button.tgf-sidebar-track-play:focus, .single-podcast-episode button.tgf-sidebar-track-play:active { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; padding: 0 !important; background: #1E2B33 !important; border: none !important; border-radius: 50% !important; box-shadow: none !important; } /* ============================================================ 9. TRACK PLAY IMAGE ============================================================ */ .single-podcast-episode .tgf-sidebar-track-play img { position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; object-fit: contain !important; transform: translate(-50%, -50%) !important; z-index: 2 !important; } /* ============================================================ 10. TRACK PAUSE STATE ============================================================ */ .single-podcast-episode .tgf-sidebar-track-play.is-playing { background: #1E2B33 !important; border-radius: 50% !important; } .single-podcast-episode .tgf-sidebar-track-play.is-playing img { opacity: 0 !important; visibility: hidden !important; } /* pause bars */ .single-podcast-episode .tgf-sidebar-track-play.is-playing::before, .single-podcast-episode .tgf-sidebar-track-play.is-playing::after { content: "" !important; position: absolute !important; top: 50% !important; display: block !important; width: 4px !important; height: 18px !important; background: #FFFFFF !important; border-radius: 1px !important; transform: translateY(-50%) !important; z-index: 10 !important; } .single-podcast-episode .tgf-sidebar-track-play.is-playing::before { left: calc(50% - 6px) !important; } .single-podcast-episode .tgf-sidebar-track-play.is-playing::after { left: calc(50% + 2px) !important; } /* ============================================================ 11. TRACK CONTENT ============================================================ */ .single-podcast-episode .tgf-sidebar-track-info { min-width: 0 !important; } .single-podcast-episode .tgf-sidebar-track-title { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .single-podcast-episode .tgf-sidebar-track-info-link { display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; } .single-podcast-episode .tgf-sidebar-track-info-link img { display: block !important; width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; margin: 0 !important; } /* ============================================================ 12. HOVER - KEEP ROUND ============================================================ */ .single-podcast-episode .tgf-sidebar-main-play:hover, .single-podcast-episode .tgf-sidebar-main-play:focus, .single-podcast-episode .tgf-sidebar-main-play:active, .single-podcast-episode .tgf-sidebar-track-play:hover, .single-podcast-episode .tgf-sidebar-track-play:focus, .single-podcast-episode .tgf-sidebar-track-play:active { background: #1E2B33 !important; border-radius: 50% !important; transform: none !important; box-shadow: none !important; } /* ========================================================= ORANGE PLAYER - WHITE PAUSE ICON, NO BACKGROUND ========================================================= */ .single-podcast-episode .tgf-main-play-toggle, .single-podcast-episode .tgf-main-play-toggle:hover, .single-podcast-episode .tgf-main-play-toggle:focus, .single-podcast-episode .tgf-main-play-toggle:active, .single-podcast-episode .tgf-main-play-toggle.is-playing { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; max-width: 24px !important; max-height: 24px !important; margin: 0 2px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; transform: none !important; overflow: visible !important; cursor: pointer !important; } /* PLAY IMAGE */ .single-podcast-episode .tgf-main-play-toggle img { display: block !important; width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; background: transparent !important; transform: none !important; opacity: 1 !important; visibility: visible !important; image-rendering: auto !important; } /* Playing state: hide play PNG */ .single-podcast-episode .tgf-main-play-toggle.is-playing img { opacity: 0 !important; visibility: hidden !important; } /* WHITE PAUSE BARS */ .single-podcast-episode .tgf-main-play-toggle.is-playing::before, .single-podcast-episode .tgf-main-play-toggle.is-playing::after { content: "" !important; position: absolute !important; top: 50% !important; display: block !important; width: 3px !important; height: 14px !important; background: #ffffff !important; border-radius: 1px !important; transform: translateY(-50%) !important; z-index: 20 !important; } /* Left pause bar */ .single-podcast-episode .tgf-main-play-toggle.is-playing::before { left: calc(50% - 5px) !important; } /* Right pause bar */ .single-podcast-episode .tgf-main-play-toggle.is-playing::after { left: calc(50% + 2px) !important; } /* ============================================================ FINAL PATCH MOVE PLAY / PAUSE BETWEEN PREVIOUS & NEXT 0:00 — PROGRESS — 0:42 — PREV — PLAY — NEXT — 1X ============================================================ */ /* Main footer */ .single-podcast-episode .tgf-player-footer { display: flex !important; align-items: center !important; width: 100% !important; gap: 10px !important; } /* Controls wrapper ko flatten karo */ .single-podcast-episode .tgf-player-controls { display: contents !important; } /* Current time */ .single-podcast-episode .tgf-player-current { order: 1 !important; flex: 0 0 auto !important; } /* Progress */ .single-podcast-episode .tgf-player-progress-wrap { order: 2 !important; flex: 1 1 auto !important; width: auto !important; min-width: 100px !important; } /* Duration */ .single-podcast-episode .tgf-player-duration { order: 3 !important; flex: 0 0 auto !important; } /* ============================================================ PREVIOUS ============================================================ */ .single-podcast-episode .tgf-player-controls > :nth-child(1) { order: 4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ============================================================ PLAY / PAUSE EXACT CENTER BETWEEN PREVIOUS + NEXT ============================================================ */ .single-podcast-episode .tgf-main-play-toggle, .single-podcast-episode button.tgf-main-play-toggle, .single-podcast-episode .tgf-main-play-toggle:hover, .single-podcast-episode .tgf-main-play-toggle:focus, .single-podcast-episode .tgf-main-play-toggle:active, .single-podcast-episode .tgf-main-play-toggle.is-playing { order: 5 !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; flex: 0 0 22px !important; margin: 0 2px !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; overflow: visible !important; line-height: 1 !important; } /* Play image */ .single-podcast-episode .tgf-main-play-toggle img { position: static !important; display: block !important; width: 19px !important; height: 19px !important; min-width: 19px !important; min-height: 19px !important; max-width: 19px !important; max-height: 19px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; transform: none !important; background: transparent !important; border: 0 !important; image-rendering: auto !important; } /* Hide image while playing */ .single-podcast-episode .tgf-main-play-toggle.is-playing img { opacity: 0 !important; visibility: hidden !important; } /* White pause bars */ .single-podcast-episode .tgf-main-play-toggle.is-playing::before, .single-podcast-episode .tgf-main-play-toggle.is-playing::after { content: "" !important; position: absolute !important; top: 50% !important; display: block !important; width: 3px !important; height: 13px !important; background: #ffffff !important; border-radius: 1px !important; transform: translateY(-50%) !important; z-index: 20 !important; } .single-podcast-episode .tgf-main-play-toggle.is-playing::before { left: calc(50% - 5px) !important; } .single-podcast-episode .tgf-main-play-toggle.is-playing::after { left: calc(50% + 2px) !important; } /* ============================================================ NEXT ============================================================ */ .single-podcast-episode .tgf-player-controls > :nth-child(2) { order: 6 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Previous / Next icons */ .single-podcast-episode .tgf-player-controls > :nth-child(1) img, .single-podcast-episode .tgf-player-controls > :nth-child(2) img { display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; transform: none !important; } /* ============================================================ 1X ============================================================ */ .single-podcast-episode .tgf-player-speed, .single-podcast-episode .tgf-player-controls > :nth-child(3) { order: 7 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: 22px !important; margin: 0 0 0 2px !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; box-shadow: none !important; } /* ============================================================ TGF PODCAST DETAIL GLOBAL FONT PATCH - OUTFIT Paste at the VERY END of style.css ============================================================ */ .single-podcast-episode, .single-podcast-episode *, .single-podcast-episode button, .single-podcast-episode input, .single-podcast-episode textarea, .single-podcast-episode select, .single-podcast-episode option { font-family: "Outfit", sans-serif !important; } /* WordPress / GeneratePress elements */ .single-podcast-episode h1, .single-podcast-episode h2, .single-podcast-episode h3, .single-podcast-episode h4, .single-podcast-episode h5, .single-podcast-episode h6, .single-podcast-episode p, .single-podcast-episode a, .single-podcast-episode span, .single-podcast-episode div, .single-podcast-episode li, .single-podcast-episode label, .single-podcast-episode strong, .single-podcast-episode small { font-family: "Outfit", sans-serif !important; } /* Podcast player */ .single-podcast-episode .tgf-episode-player, .single-podcast-episode .tgf-episode-player *, .single-podcast-episode .tgf-player-current, .single-podcast-episode .tgf-player-duration, .single-podcast-episode .tgf-player-speed, .single-podcast-episode .tgf-player-category, .single-podcast-episode .tgf-player-title, .single-podcast-episode .tgf-player-description { font-family: "Outfit", sans-serif !important; } /* Sidebar player */ .single-podcast-episode .tgf-sidebar-player, .single-podcast-episode .tgf-sidebar-player *, .single-podcast-episode .tgf-sidebar-track-title, .single-podcast-episode .tgf-sidebar-track-date, .single-podcast-episode .tgf-sidebar-speed { font-family: "Outfit", sans-serif !important; } /* Hosts / meta */ .single-podcast-episode .tgf-hosts, .single-podcast-episode .tgf-hosts *, .single-podcast-episode .tgf-podcast-meta, .single-podcast-episode .tgf-podcast-meta * { font-family: "Outfit", sans-serif !important; } /* Breadcrumb */ .single-podcast-episode .tgf-breadcrumb, .single-podcast-episode .tgf-breadcrumb * { font-family: "Outfit", sans-serif !important; } /* Key topics / guest / transcript / sponsor */ .single-podcast-episode .tgf-key-topics, .single-podcast-episode .tgf-key-topics *, .single-podcast-episode .tgf-guest, .single-podcast-episode .tgf-guest *, .single-podcast-episode .tgf-transcript, .single-podcast-episode .tgf-transcript *, .single-podcast-episode .tgf-sponsor, .single-podcast-episode .tgf-sponsor * { font-family: "Outfit", sans-serif !important; } /* Comment form */ .single-podcast-episode .comment-respond, .single-podcast-episode .comment-respond *, .single-podcast-episode .comment-form, .single-podcast-episode .comment-form *, .single-podcast-episode .comment-form input, .single-podcast-episode .comment-form textarea, .single-podcast-episode .comment-form button, .single-podcast-episode .comment-form .submit { font-family: "Outfit", sans-serif !important; } /* ============================================================ SIDEBAR PLAYER REMOVE WHITE/SILVER RING FROM PLAY BUTTONS PURE BLACK CIRCLE + WHITE ICON ============================================================ */ /* MAIN SIDEBAR PLAY BUTTON + LIST PLAY BUTTONS */ .single-podcast-episode .tgf-sidebar-main-play, .single-podcast-episode .tgf-sidebar-track-play, .single-podcast-episode .tgf-sidebar-main-play:hover, .single-podcast-episode .tgf-sidebar-main-play:focus, .single-podcast-episode .tgf-sidebar-main-play:active, .single-podcast-episode .tgf-sidebar-track-play:hover, .single-podcast-episode .tgf-sidebar-track-play:focus, .single-podcast-episode .tgf-sidebar-track-play:active { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #1E2B33 !important; border: 0 !important; outline: 0 !important; border-radius: 50% !important; box-shadow: none !important; padding: 0 !important; overflow: hidden !important; transform: none !important; appearance: none !important; -webkit-appearance: none !important; } /* Main sidebar button size */ .single-podcast-episode .tgf-sidebar-main-play { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; flex: 0 0 48px !important; } /* Episode list button size */ .single-podcast-episode .tgf-sidebar-track-play { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; flex: 0 0 44px !important; } /* ============================================================ HIDE OLD PNG This removes the white/silver border built into the image ============================================================ */ .single-podcast-episode .tgf-sidebar-main-play img, .single-podcast-episode .tgf-sidebar-track-play img { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* ============================================================ CLEAN WHITE PLAY TRIANGLE ============================================================ */ .single-podcast-episode .tgf-sidebar-main-play:not(.is-playing)::before, .single-podcast-episode .tgf-sidebar-track-play:not(.is-playing)::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; border-top: 7px solid transparent !important; border-bottom: 7px solid transparent !important; border-left: 11px solid #ffffff !important; transform: translate(-38%, -50%) !important; z-index: 5 !important; } /* Slightly smaller icon for list items */ .single-podcast-episode .tgf-sidebar-track-play:not(.is-playing)::before { border-top-width: 6px !important; border-bottom-width: 6px !important; border-left-width: 10px !important; } /* Remove any old pseudo-element */ .single-podcast-episode .tgf-sidebar-main-play:not(.is-playing)::after, .single-podcast-episode .tgf-sidebar-track-play:not(.is-playing)::after { content: none !important; display: none !important; } /* ============================================================ PLAYING STATE PURE BLACK CIRCLE + WHITE PAUSE BARS ============================================================ */ .single-podcast-episode .tgf-sidebar-main-play.is-playing, .single-podcast-episode .tgf-sidebar-track-play.is-playing { background: #1E2B33 !important; border: 0 !important; box-shadow: none !important; } /* Pause bars */ .single-podcast-episode .tgf-sidebar-main-play.is-playing::before, .single-podcast-episode .tgf-sidebar-main-play.is-playing::after, .single-podcast-episode .tgf-sidebar-track-play.is-playing::before, .single-podcast-episode .tgf-sidebar-track-play.is-playing::after { content: "" !important; position: absolute !important; top: 50% !important; display: block !important; background: #ffffff !important; border: 0 !important; border-radius: 1px !important; transform: translateY(-50%) !important; z-index: 5 !important; } /* MAIN PLAYER pause bars */ .single-podcast-episode .tgf-sidebar-main-play.is-playing::before, .single-podcast-episode .tgf-sidebar-main-play.is-playing::after { width: 4px !important; height: 17px !important; } .single-podcast-episode .tgf-sidebar-main-play.is-playing::before { left: calc(50% - 6px) !important; } .single-podcast-episode .tgf-sidebar-main-play.is-playing::after { left: calc(50% + 2px) !important; } /* LIST ITEM pause bars */ .single-podcast-episode .tgf-sidebar-track-play.is-playing::before, .single-podcast-episode .tgf-sidebar-track-play.is-playing::after { width: 3px !important; height: 15px !important; } .single-podcast-episode .tgf-sidebar-track-play.is-playing::before { left: calc(50% - 5px) !important; } .single-podcast-episode .tgf-sidebar-track-play.is-playing::after { left: calc(50% + 2px) !important; } /* ============================================================ PODCAST DETAIL - MOBILE TYPOGRAPHY PATCH CLEAN / PROFESSIONAL / OUTFIT Desktop & tablet untouched ============================================================ */ @media (max-width: 767px) { /* Global font */ body.single-podcast-episode, body.single-podcast-episode * { font-family: "Outfit", sans-serif !important; } /* ======================================================== BREADCRUMB ======================================================== */ .single-podcast-episode .tgf-breadcrumb, .single-podcast-episode .tgf-breadcrumb *, .single-podcast-episode .tgf-breadcrumbs, .single-podcast-episode .tgf-breadcrumbs * { font-size: 11px !important; line-height: 1.4 !important; font-weight: 400 !important; } /* ======================================================== MAIN TITLE ======================================================== */ .single-podcast-episode h1, .single-podcast-episode .tgf-episode-title { font-size: 28px !important; line-height: 1.08 !important; font-weight: 700 !important; letter-spacing: -0.5px !important; margin-bottom: 12px !important; } /* Intro text */ .single-podcast-episode .tgf-episode-intro, .single-podcast-episode .tgf-short-description { font-size: 13.5px !important; line-height: 1.55 !important; font-weight: 400 !important; } /* ======================================================== HOSTS / DATE ======================================================== */ .single-podcast-episode .tgf-host-name, .single-podcast-episode .tgf-podcast-meta, .single-podcast-episode .tgf-episode-hosts { font-size: 12.5px !important; line-height: 1.3 !important; } /* ======================================================== ORANGE PLAYER ======================================================== */ .single-podcast-episode .tgf-player-category { font-size: 9px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: 0.2px !important; } .single-podcast-episode .tgf-player-title { font-size: 15.5px !important; line-height: 1.25 !important; font-weight: 600 !important; } .single-podcast-episode .tgf-player-description { font-size: 10.5px !important; line-height: 1.45 !important; font-weight: 400 !important; } .single-podcast-episode .tgf-player-current, .single-podcast-episode .tgf-player-duration, .single-podcast-episode .tgf-player-speed { font-size: 10px !important; line-height: 1 !important; font-weight: 500 !important; } /* ======================================================== ARTICLE BODY ======================================================== */ .single-podcast-episode .tgf-episode-body, .single-podcast-episode .tgf-article-content, .single-podcast-episode .entry-content { font-size: 13px !important; line-height: 1.6 !important; } .single-podcast-episode .tgf-episode-body p, .single-podcast-episode .tgf-article-content p, .single-podcast-episode .entry-content p { font-size: 18px !important; line-height: 1.6 !important; margin-bottom: 15px !important; } .single-podcast-episode .tgf-quote-source, .single-podcast-episode blockquote cite { font-size: 16px !important; line-height: 1.4 !important; } /* ======================================================== SECTION TITLES ======================================================== */ .single-podcast-episode .tgf-key-topics h2, .single-podcast-episode .tgf-guest h2, .single-podcast-episode .tgf-transcript h2, .single-podcast-episode .tgf-sponsor h2, .single-podcast-episode .comment-reply-title, .single-podcast-episode .tgf-comment-section h2 { font-size: 22px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.25px !important; } /* ======================================================== KEY TOPICS ======================================================== */ .single-podcast-episode .tgf-topic-number { font-size: 10.5px !important; font-weight: 600 !important; } .single-podcast-episode .tgf-topic-title { font-size: 11.5px !important; line-height: 1.4 !important; font-weight: 500 !important; } .single-podcast-episode .tgf-topic-time { font-size: 9px !important; line-height: 1.3 !important; } /* ======================================================== GUEST CARD ======================================================== */ .single-podcast-episode .tgf-guest-name { font-size: 14px !important; line-height: 1.25 !important; font-weight: 600 !important; } .single-podcast-episode .tgf-guest-role { font-size: 8.5px !important; line-height: 1.35 !important; font-weight: 500 !important; } .single-podcast-episode .tgf-guest-bio { font-size: 18px !important; line-height: 1.5 !important; } .single-podcast-episode .tgf-guest-card a { font-size: 10px !important; } /* ======================================================== TRANSCRIPT ======================================================== */ .single-podcast-episode .tgf-transcript-link, .single-podcast-episode .tgf-transcript-button { font-size: 10.5px !important; line-height: 1.3 !important; font-weight: 500 !important; } /* ======================================================== SPONSOR ======================================================== */ .single-podcast-episode .tgf-sponsor-title, .single-podcast-episode .tgf-sponsor h2 { font-size: 17px !important; line-height: 1.25 !important; font-weight: 600 !important; } .single-podcast-episode .tgf-sponsor p { font-size: 10.5px !important; line-height: 1.55 !important; } .single-podcast-episode .tgf-sponsor a { font-size: 10.5px !important; font-weight: 500 !important; } /* ======================================================== COMMENT FORM ======================================================== */ .single-podcast-episode .comment-respond, .single-podcast-episode .comment-respond p { font-size: 10.5px !important; line-height: 1.5 !important; } .single-podcast-episode .comment-form textarea, .single-podcast-episode .comment-form input { font-size: 11px !important; line-height: 1.4 !important; } .single-podcast-episode .comment-form .submit { font-size: 11px !important; font-weight: 600 !important; } /* ======================================================== NEWSLETTER ======================================================== */ .single-podcast-episode .tgf-subscribe-card h2, .single-podcast-episode .tgf-newsletter-card h2 { font-size: 20px !important; line-height: 1.2 !important; font-weight: 600 !important; } .single-podcast-episode .tgf-subscribe-card p, .single-podcast-episode .tgf-newsletter-card p { font-size: 10.5px !important; line-height: 1.5 !important; } .single-podcast-episode .tgf-subscribe-card a, .single-podcast-episode .tgf-newsletter-card a { font-size: 11px !important; font-weight: 600 !important; } /* ======================================================== LISTEN THROUGH ======================================================== */ .single-podcast-episode .tgf-platforms h2, .single-podcast-episode .tgf-listen-platforms h2 { font-size: 19px !important; line-height: 1.2 !important; font-weight: 700 !important; } .single-podcast-episode .tgf-platform-small { font-size: 8px !important; line-height: 1.2 !important; } .single-podcast-episode .tgf-platform-name { font-size: 12px !important; line-height: 1.25 !important; font-weight: 600 !important; } .single-podcast-episode .tgf-more-listening { font-size: 10px !important; line-height: 1.5 !important; } /* ======================================================== SIDEBAR PLAYER ======================================================== */ .single-podcast-episode .tgf-sidebar-current-title { font-size: 14px !important; line-height: 1.3 !important; font-weight: 600 !important; } .single-podcast-episode .tgf-sidebar-current-description { font-size: 10.5px !important; line-height: 1.4 !important; } .single-podcast-episode .tgf-sidebar-track-title { font-size: 10.5px !important; line-height: 1.35 !important; font-weight: 500 !important; } .single-podcast-episode .tgf-sidebar-track-date { font-size: 9px !important; line-height: 1.3 !important; } .single-podcast-episode .tgf-sidebar-speed { font-size: 11px !important; font-weight: 500 !important; } } /* ========================================================= PODCAST DETAIL - MOBILE GUEST CARD PATCH Image on top + enhanced text inside box ========================================================= */ @media (max-width: 767px) { .single-podcast-episode .tgf-guest-card, .single-podcast-episode .tgf-about-guest-card, .single-podcast-episode .tgf-guest-box { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 18px 16px !important; border-radius: 16px !important; background: #DDF0EC !important; } /* image wrapper top */ .single-podcast-episode .tgf-guest-card-image, .single-podcast-episode .tgf-guest-image, .single-podcast-episode .tgf-guest-thumb, .single-podcast-episode .tgf-about-guest-card .tgf-guest-image, .single-podcast-episode .tgf-guest-box .tgf-guest-image { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin: 0 !important; order: 1 !important; } .single-podcast-episode .tgf-guest-card-image img, .single-podcast-episode .tgf-guest-image img, .single-podcast-episode .tgf-guest-thumb img, .single-podcast-episode .tgf-about-guest-card .tgf-guest-image img, .single-podcast-episode .tgf-guest-box .tgf-guest-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: 170px !important; object-fit: cover !important; object-position: top !important; border-radius: 12px !important; } /* content below image */ .single-podcast-episode .tgf-guest-card-content, .single-podcast-episode .tgf-guest-content, .single-podcast-episode .tgf-about-guest-card .tgf-guest-content, .single-podcast-episode .tgf-guest-box .tgf-guest-content { width: 100% !important; max-width: 100% !important; order: 2 !important; margin: 0 !important; } /* name */ .single-podcast-episode .tgf-guest-name, .single-podcast-episode .tgf-about-guest-card h3, .single-podcast-episode .tgf-guest-box h3 { font-family: "Outfit", sans-serif !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #1E2B33 !important; margin: 0 0 6px !important; } /* designation / meta */ .single-podcast-episode .tgf-guest-role, .single-podcast-episode .tgf-guest-meta, .single-podcast-episode .tgf-about-guest-card .tgf-meta, .single-podcast-episode .tgf-guest-box .tgf-meta { display: block !important; font-family: "Outfit", sans-serif !important; font-size: 10px !important; line-height: 1.45 !important; font-weight: 500 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; color: rgba(30, 43, 51, 0.75) !important; margin: 0 0 10px !important; } /* paragraph */ .single-podcast-episode .tgf-guest-bio, .single-podcast-episode .tgf-about-guest-card p, .single-podcast-episode .tgf-guest-box p { font-family: "Outfit", sans-serif !important; font-size: 18px !important; line-height: 1.65 !important; font-weight: 400 !important; color: #1E2B33 !important; margin: 0 0 12px !important; } /* instagram / link */ .single-podcast-episode .tgf-guest-card a, .single-podcast-episode .tgf-guest-content a, .single-podcast-episode .tgf-about-guest-card a, .single-podcast-episode .tgf-guest-box a { font-family: "Outfit", sans-serif !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 500 !important; color: #FF5A4E !important; text-decoration: underline !important; } /* section heading */ .single-podcast-episode .tgf-guest-section h2, .single-podcast-episode .tgf-about-guest h2, .single-podcast-episode .tgf-guest-wrapper h2 { font-family: "Outfit", sans-serif !important; font-size: 24px !important; line-height: 1.15 !important; font-weight: 700 !important; color: #1E2B33 !important; margin-bottom: 16px !important; } } /* ========================================================= CONTENT AFTER QUOTE ========================================================= */ .single-podcast-episode .tgf-after-quote-content { width: 100%; margin: 18px 0 30px; font-family: "Outfit", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.6; color: #1E2B33; } .single-podcast-episode .tgf-after-quote-content p { margin: 0; } /* MOBILE */ @media (max-width: 767px) { .single-podcast-episode .tgf-after-quote-content { margin: 16px 0 26px; font-size: 13.5px; line-height: 1.6; } } /* ========================================================= TRANSCRIPT SUMMARY TEXT - FIGMA MATCH ========================================================= */ .single-podcast-episode .tgf-transcript-accordion summary > span:first-child { font-family: "Outfit", sans-serif !important; font-size: 17px !important; font-weight: 500 !important; line-height: 27.63px !important; letter-spacing: 0 !important; color: #0D1218 !important; } /* Toast Css */ /* ========================================================= AJAX COMMENT TOAST ========================================================= */ .single-podcast-episode .tgf-ajax-comment-toast { position: fixed; left: 50%; bottom: 28px; z-index: 999999; display: flex; align-items: center; gap: 14px; width: min(440px, calc(100vw - 32px)); min-height: 76px; padding: 14px 48px 14px 16px; background: #d8f1ec; border: 1px solid rgba(30, 43, 51, 0.08); border-radius: 14px; box-shadow: 0 14px 40px rgba(30, 43, 51, 0.16), 0 4px 12px rgba(30, 43, 51, 0.07); font-family: "Outfit", sans-serif; opacity: 0; visibility: hidden; transform: translate(-50%, 28px); pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease; } .single-podcast-episode .tgf-ajax-comment-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } /* Success icon */ .single-podcast-episode .tgf-ajax-comment-toast-icon { position: relative; flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #1e2b33; border-radius: 50%; } .single-podcast-episode .tgf-ajax-comment-toast-icon span { display: block; width: 14px; height: 8px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-45deg) translateY(-1px); } /* Error state */ .single-podcast-episode .tgf-ajax-comment-toast.is-error { background: #fff0ef; } .single-podcast-episode .tgf-ajax-comment-toast.is-error .tgf-ajax-comment-toast-icon { background: #ff5148; } .single-podcast-episode .tgf-ajax-comment-toast.is-error .tgf-ajax-comment-toast-icon span { width: 14px; height: 2px; border: 0; background: #ffffff; transform: rotate(45deg); } .single-podcast-episode .tgf-ajax-comment-toast.is-error .tgf-ajax-comment-toast-icon span::after { position: absolute; width: 14px; height: 2px; background: #ffffff; content: ""; transform: rotate(90deg); } /* Text */ .single-podcast-episode .tgf-ajax-comment-toast-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .single-podcast-episode .tgf-ajax-comment-toast-title { color: #1e2b33; font-family: "Outfit", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; } .single-podcast-episode .tgf-ajax-comment-toast-message { color: #59666d; font-family: "Outfit", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; } /* Close button */ .single-podcast-episode .tgf-ajax-comment-toast-close { position: absolute; top: 50%; right: 13px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: translateY(-50%); cursor: pointer; } .single-podcast-episode .tgf-ajax-comment-toast-close > span { position: relative; width: 14px; height: 2px; background: #1e2b33; transform: rotate(45deg); } .single-podcast-episode .tgf-ajax-comment-toast-close > span::after { position: absolute; left: 0; top: 0; width: 14px; height: 2px; background: #1e2b33; content: ""; transform: rotate(90deg); } /* Posting state */ .single-podcast-episode #commentform [type="submit"]:disabled { opacity: 0.65; cursor: wait; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .single-podcast-episode .tgf-ajax-comment-toast { left: 16px; right: 16px; bottom: 18px; width: auto; min-height: 70px; padding: 12px 44px 12px 13px; border-radius: 12px; transform: translateY(28px); } .single-podcast-episode .tgf-ajax-comment-toast.is-visible { transform: translateY(0); } .single-podcast-episode .tgf-ajax-comment-toast-icon { flex: 0 0 36px; width: 36px; height: 36px; } .single-podcast-episode .tgf-ajax-comment-toast-title { font-size: 15px; } .single-podcast-episode .tgf-ajax-comment-toast-message { font-size: 13px; } } /* ========================================================= COMMENT FORM PLACEHOLDER COLOR ========================================================= */ .single-podcast-episode .tgf-detail-comments textarea::placeholder, .single-podcast-episode .tgf-detail-comments input::placeholder { color: #F34E3F !important; opacity: 1 !important; font-family: "Outfit", sans-serif !important; font-weight: 400 !important; } /* Safari / older browser support */ .single-podcast-episode .tgf-detail-comments textarea::-webkit-input-placeholder, .single-podcast-episode .tgf-detail-comments input::-webkit-input-placeholder { color: #F34E3F !important; opacity: 1 !important; } .single-podcast-episode .tgf-detail-comments textarea::-moz-placeholder, .single-podcast-episode .tgf-detail-comments input::-moz-placeholder { color: #F34E3F !important; opacity: 1 !important; } /* ========================================================= PODCAST DETAIL - RESPONSIVE FULL WIDTH ALIGNMENT FIX Desktop / Laptop / Tablet ========================================================= */ .single-podcast-episode .tgf-podcast-detail-page { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Main page container */ .single-podcast-episode .tgf-podcast-detail-container { width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(28px, 3vw, 52px) !important; padding-right: clamp(28px, 3vw, 52px) !important; box-sizing: border-box !important; } /* Main content + sidebar grid */ .single-podcast-episode .tgf-podcast-detail-grid { width: 100% !important; max-width: none !important; margin: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 390px) !important; column-gap: clamp(38px, 4vw, 72px) !important; align-items: start !important; box-sizing: border-box !important; } /* Prevent main column from forcing the layout wider */ .single-podcast-episode .tgf-podcast-detail-main { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* Sidebar keeps a sensible width */ .single-podcast-episode .tgf-podcast-detail-sidebar { width: 100% !important; max-width: 390px !important; min-width: 0 !important; margin: 0 !important; justify-self: end !important; box-sizing: border-box !important; } /* All major content blocks stay inside the available column */ .single-podcast-episode .tgf-detail-header, .single-podcast-episode .tgf-detail-audio, .single-podcast-episode .tgf-detail-featured-image, .single-podcast-episode .tgf-detail-body-content, .single-podcast-episode .tgf-detail-quote, .single-podcast-episode .tgf-after-quote-content, .single-podcast-episode .tgf-key-topics, .single-podcast-episode .tgf-about-guest, .single-podcast-episode .tgf-transcript-section, .single-podcast-episode .tgf-sponsor-section, .single-podcast-episode .tgf-detail-comments { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* Featured image must scale with the column */ .single-podcast-episode .tgf-detail-featured-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; } /* ========================================================= SMALL / MEDIUM LAPTOPS 1024px - 1399px ========================================================= */ @media (min-width: 1024px) and (max-width: 1399px) { .single-podcast-episode .tgf-podcast-detail-container { padding-left: 30px !important; padding-right: 30px !important; } .single-podcast-episode .tgf-podcast-detail-grid { grid-template-columns: minmax(0, 1fr) 320px !important; column-gap: 34px !important; } .single-podcast-episode .tgf-podcast-detail-sidebar { max-width: 320px !important; } } /* ========================================================= TABLET / VERY SMALL LAPTOP Keep two columns while there is enough space ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .single-podcast-episode .tgf-podcast-detail-container { padding-left: 24px !important; padding-right: 24px !important; } .single-podcast-episode .tgf-podcast-detail-grid { grid-template-columns: minmax(0, 1fr) 280px !important; column-gap: 26px !important; } .single-podcast-episode .tgf-podcast-detail-sidebar { max-width: 280px !important; } } /* ========================================================= MOBILE ONLY ========================================================= */ @media (max-width: 767px) { .single-podcast-episode .tgf-podcast-detail-container { width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; } .single-podcast-episode .tgf-podcast-detail-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 30px !important; column-gap: 0 !important; } .single-podcast-episode .tgf-podcast-detail-main, .single-podcast-episode .tgf-podcast-detail-sidebar { width: 100% !important; max-width: none !important; justify-self: stretch !important; } } /* ========================================================= PODCAST DETAIL - RESPONSIVE TYPOGRAPHY ENHANCEMENT Font Family: Outfit ========================================================= */ .single-podcast-episode .tgf-podcast-detail-page, .single-podcast-episode .tgf-podcast-detail-page * { font-family: "Outfit", sans-serif; } /* ========================================================= BREADCRUMBS ========================================================= */ .single-podcast-episode .tgf-detail-breadcrumb { font-size: clamp(15px, 0.95vw, 17px) !important; font-weight: 400 !important; line-height: 1.5 !important; } /* ========================================================= MAIN EPISODE TITLE ========================================================= */ .single-podcast-episode .tgf-detail-title { font-size: clamp(42px, 3.35vw, 58px) !important; font-weight: 700 !important; line-height: 1.03 !important; letter-spacing: -0.025em !important; } /* ========================================================= INTRO DESCRIPTION ========================================================= */ .single-podcast-episode .tgf-detail-description { font-size: clamp(17px, 1.15vw, 20px) !important; font-weight: 400 !important; line-height: 1.55 !important; } .single-podcast-episode .tgf-detail-description p { font-size: 18px ; line-height: inherit; } /* ========================================================= HOSTS + PUBLISHED DATE ========================================================= */ .single-podcast-episode .tgf-detail-host-name, .single-podcast-episode .tgf-detail-published { font-size: clamp(16px, 1vw, 18px) !important; line-height: 1.4 !important; } /* ========================================================= ORANGE PLAYER ========================================================= */ .single-podcast-episode .tgf-player-category { font-size: clamp(12px, 0.8vw, 14px) !important; font-weight: 600 !important; } .single-podcast-episode .tgf-player-title { font-size: clamp(20px, 1.45vw, 25px) !important; font-weight: 700 !important; line-height: 1.2 !important; } .single-podcast-episode .tgf-player-description { font-size: clamp(14px, 0.95vw, 17px) !important; line-height: 1.45 !important; } .single-podcast-episode .tgf-player-current, .single-podcast-episode .tgf-player-duration, .single-podcast-episode .tgf-player-speed { font-size: clamp(13px, 0.85vw, 15px) !important; } /* ========================================================= ARTICLE BODY ========================================================= */ .single-podcast-episode .tgf-detail-body-content, .single-podcast-episode .tgf-after-quote-content { font-size: clamp(17px, 1.05vw, 19px) !important; font-weight: 400 !important; line-height: 1.65 !important; } .single-podcast-episode .tgf-detail-body-content p, .single-podcast-episode .tgf-after-quote-content p { font-size: 18px ; line-height: inherit ; } /* ========================================================= FEATURED QUOTE ========================================================= */ .single-podcast-episode .tgf-detail-quote-text { font-size: clamp(19px, 1.35vw, 23px) !important; font-weight: 600 !important; line-height: 1.45 !important; } .single-podcast-episode .tgf-detail-quote cite { font-size: 16px !important; line-height: 1.4 !important; } /* ========================================================= SECTION HEADINGS ========================================================= */ .single-podcast-episode .tgf-key-topics > h2, .single-podcast-episode .tgf-about-guest > h2, .single-podcast-episode .tgf-transcript-section > h2, .single-podcast-episode .tgf-detail-comments .comment-reply-title { font-size: clamp(30px, 2.25vw, 42px) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; } /* ========================================================= KEY TOPICS ========================================================= */ .single-podcast-episode .tgf-key-topic-number { font-size: clamp(13px, 0.8vw, 15px) !important; font-weight: 600 !important; } .single-podcast-episode .tgf-key-topic-title { font-size: clamp(15px, 1vw, 18px) !important; font-weight: 600 !important; line-height: 1.4 !important; } .single-podcast-episode .tgf-key-topic-time { font-size: clamp(13px, 0.8vw, 15px) !important; } /* ========================================================= GUEST CARD ========================================================= */ .single-podcast-episode .tgf-guest-content h3 { font-size: clamp(19px, 1.25vw, 22px) !important; font-weight: 600 !important; } .single-podcast-episode .tgf-guest-role { font-size: clamp(12px, 0.8vw, 14px) !important; } .single-podcast-episode .tgf-guest-bio { font-size: 18px !important; line-height: 1.55 !important; } .single-podcast-episode .tgf-guest-social-link { font-size: clamp(14px, 0.9vw, 16px) !important; } /* ========================================================= TRANSCRIPT ========================================================= */ .single-podcast-episode .tgf-transcript-accordion summary > span:first-child { font-size: 17px !important; font-weight: 500 !important; line-height: 27.63px !important; } .single-podcast-episode .tgf-transcript-duration { font-size: 17px !important; font-weight: 600 !important; } /* ========================================================= SPONSOR ========================================================= */ .single-podcast-episode .tgf-sponsor-section h3 { font-size: clamp(25px, 1.8vw, 32px) !important; font-weight: 700 !important; } .single-podcast-episode .tgf-sponsor-intro { font-size: clamp(14px, 0.9vw, 16px) !important; } .single-podcast-episode .tgf-sponsor-description { font-size: clamp(16px, 1vw, 18px) !important; line-height: 1.6 !important; } .single-podcast-episode .tgf-sponsor-link { font-size: clamp(15px, 0.95vw, 17px) !important; font-weight: 600 !important; } /* ========================================================= SIDEBAR ========================================================= */ .single-podcast-episode .tgf-subscribe-card h2 { font-size: clamp(25px, 1.7vw, 31px) !important; font-weight: 700 !important; line-height: 1.15 !important; } .single-podcast-episode .tgf-subscribe-card p { font-size: clamp(14px, 0.9vw, 16px) !important; line-height: 1.55 !important; } .single-podcast-episode .tgf-sidebar-subscribe-btn { font-size: clamp(14px, 0.9vw, 16px) !important; font-weight: 600 !important; } .single-podcast-episode .tgf-listen-through > h3 { font-size: clamp(23px, 1.55vw, 28px) !important; font-weight: 700 !important; line-height: 1.2 !important; } .single-podcast-episode .tgf-listen-option small { font-size: 12px !important; } .single-podcast-episode .tgf-listen-option strong { font-size: clamp(16px, 1vw, 18px) !important; } .single-podcast-episode .tgf-more-listening-title { font-size: clamp(12px, 0.8vw, 14px) !important; } .single-podcast-episode .tgf-more-listening-links { font-size: clamp(14px, 0.9vw, 16px) !important; } /* ========================================================= SIDEBAR PLAYER ========================================================= */ .single-podcast-episode .tgf-sidebar-current-copy h4 { font-size: clamp(18px, 1.15vw, 21px) !important; font-weight: 700 !important; } .single-podcast-episode .tgf-sidebar-current-title { font-size: clamp(14px, 0.9vw, 16px) !important; line-height: 1.4 !important; } .single-podcast-episode .tgf-sidebar-track-title { font-size: clamp(14px, 0.9vw, 16px) !important; font-weight: 500 !important; } .single-podcast-episode .tgf-sidebar-track-date { font-size: 13px !important; } /* ========================================================= COMMENT FORM ========================================================= */ .single-podcast-episode .tgf-detail-comments .comment-notes { font-size: clamp(14px, 0.9vw, 16px) !important; } .single-podcast-episode .tgf-detail-comments textarea, .single-podcast-episode .tgf-detail-comments input { font-size: clamp(15px, 0.95vw, 17px) !important; font-family: "Outfit", sans-serif !important; } .single-podcast-episode .tgf-detail-comments textarea::placeholder, .single-podcast-episode .tgf-detail-comments input::placeholder { font-size: 18px ; color: #F34E3F !important; opacity: 1 !important; } /* ========================================================= SMALL LAPTOPS ========================================================= */ @media (min-width: 1024px) and (max-width: 1399px) { .single-podcast-episode .tgf-detail-title { font-size: 42px !important; } .single-podcast-episode .tgf-detail-description { font-size: 17px !important; } .single-podcast-episode .tgf-player-title { font-size: 20px !important; } .single-podcast-episode .tgf-detail-body-content, .single-podcast-episode .tgf-after-quote-content { font-size: 17px !important; } .single-podcast-episode .tgf-key-topics > h2, .single-podcast-episode .tgf-about-guest > h2, .single-podcast-episode .tgf-transcript-section > h2, .single-podcast-episode .tgf-detail-comments .comment-reply-title { font-size: 32px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .single-podcast-episode .tgf-detail-breadcrumb { font-size: 13px !important; } .single-podcast-episode .tgf-detail-title { font-size: 32px !important; line-height: 1.07 !important; } .single-podcast-episode .tgf-detail-description { font-size: 16px !important; line-height: 1.5 !important; } .single-podcast-episode .tgf-detail-host-name, .single-podcast-episode .tgf-detail-published { font-size: 14px !important; } .single-podcast-episode .tgf-player-category { font-size: 11px !important; } .single-podcast-episode .tgf-player-title { font-size: 18px !important; line-height: 1.25 !important; } .single-podcast-episode .tgf-player-description { font-size: 13px !important; } .single-podcast-episode .tgf-detail-body-content, .single-podcast-episode .tgf-after-quote-content { font-size: 18px !important; line-height: 1.6 !important; } .single-podcast-episode .tgf-detail-quote-text { font-size: 18px !important; } .single-podcast-episode .tgf-key-topics > h2, .single-podcast-episode .tgf-about-guest > h2, .single-podcast-episode .tgf-transcript-section > h2, .single-podcast-episode .tgf-detail-comments .comment-reply-title { font-size: 27px !important; } .single-podcast-episode .tgf-key-topic-title { font-size: 14px !important; } .single-podcast-episode .tgf-guest-content h3 { font-size: 18px !important; } .single-podcast-episode .tgf-guest-bio { font-size: 18px !important; } .single-podcast-episode .tgf-subscribe-card h2 { font-size: 24px !important; } .single-podcast-episode .tgf-subscribe-card p { font-size: 14px !important; } .single-podcast-episode .tgf-listen-through > h3 { font-size: 22px !important; } } /* ========================================================= PODCAST AUDIO PLAYER - MOBILE RESPONSIVE FIX Figma aligned mobile layout ========================================================= */ @media (max-width: 767px) { /* Main audio section */ .single-podcast-episode .tgf-detail-audio { width: 100% !important; max-width: 100% !important; margin: 24px 0 30px !important; padding: 0 !important; box-sizing: border-box !important; } /* ===================================================== PLAYER CARD ===================================================== */ .single-podcast-episode .tgf-episode-player { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 16px !important; margin: 0 !important; gap: 14px !important; background: #F34E3F !important; border-radius: 14px !important; overflow: hidden !important; box-sizing: border-box !important; } /* ===================================================== COVER IMAGE - TOP ===================================================== */ .single-podcast-episode .tgf-player-cover { position: relative !important; width: 104px !important; height: 104px !important; min-width: 104px !important; max-width: 104px !important; margin: 0 auto 2px !important; flex: 0 0 auto !important; border-radius: 11px !important; overflow: hidden !important; } .single-podcast-episode .tgf-player-cover img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; border-radius: inherit !important; } /* ===================================================== PLAYER CONTENT ===================================================== */ .single-podcast-episode .tgf-player-main { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Category */ .single-podcast-episode .tgf-player-category { display: block !important; margin: 0 0 6px !important; font-family: "Outfit", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.3 !important; text-transform: uppercase !important; color: #ffffff !important; } /* Episode title */ .single-podcast-episode .tgf-player-title { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 7px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.22 !important; letter-spacing: -0.01em !important; color: #ffffff !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* Description */ .single-podcast-episode .tgf-player-description { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 14px !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.45 !important; color: #ffffff !important; overflow-wrap: anywhere !important; } /* ===================================================== PLAYER FOOTER Row 1: 0:00 ---- Progress ---- 0:42 Row 2: Previous Play Next 1X ===================================================== */ .single-podcast-episode .tgf-player-footer { position: relative !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto auto !important; grid-template-areas: "current progress progress progress duration" ". prev play next speed" !important; align-items: center !important; column-gap: 9px !important; row-gap: 11px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Current time */ .single-podcast-episode .tgf-player-current { grid-area: current !important; margin: 0 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; color: #ffffff !important; white-space: nowrap !important; } /* Duration */ .single-podcast-episode .tgf-player-duration { grid-area: duration !important; margin: 0 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1 !important; color: #ffffff !important; white-space: nowrap !important; } /* ===================================================== PROGRESS ===================================================== */ .single-podcast-episode .tgf-player-progress-wrap { grid-area: progress !important; display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .single-podcast-episode .tgf-player-progress { -webkit-appearance: none !important; appearance: none !important; display: block !important; width: 100% !important; min-width: 0 !important; height: 4px !important; margin: 0 !important; padding: 0 !important; background: rgba(255, 255, 255, 0.55) !important; border: 0 !important; border-radius: 20px !important; outline: none !important; } .single-podcast-episode .tgf-player-progress::-webkit-slider-thumb { -webkit-appearance: none !important; width: 14px !important; height: 14px !important; background: #ffffff !important; border: 0 !important; border-radius: 50% !important; cursor: pointer !important; } .single-podcast-episode .tgf-player-progress::-moz-range-thumb { width: 14px !important; height: 14px !important; background: #ffffff !important; border: 0 !important; border-radius: 50% !important; cursor: pointer !important; } /* ===================================================== BREAK THE INNER CONTROLS INTO THE PARENT GRID This allows: Previous → Play → Next → 1X ===================================================== */ .single-podcast-episode .tgf-player-controls { display: contents !important; } /* Previous */ .single-podcast-episode .tgf-player-controls .tgf-player-skip:first-of-type { grid-area: prev !important; } /* Next */ .single-podcast-episode .tgf-player-controls .tgf-player-skip:nth-of-type(2) { grid-area: next !important; } /* Playback speed */ .single-podcast-episode .tgf-player-speed { grid-area: speed !important; } /* ===================================================== MAIN PLAY / PAUSE BUTTON ===================================================== */ .single-podcast-episode .tgf-main-play-toggle { grid-area: play !important; position: static !important; inset: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; cursor: pointer !important; } .single-podcast-episode .tgf-main-play-toggle img, .single-podcast-episode .tgf-main-play-icon { display: block !important; width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; transform: none !important; image-rendering: auto !important; } /* ===================================================== PREVIOUS / NEXT ===================================================== */ .single-podcast-episode .tgf-player-skip { display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer !important; } .single-podcast-episode .tgf-player-skip img { display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== SPEED ===================================================== */ .single-podcast-episode .tgf-player-speed { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; color: #ffffff !important; } /* Native audio should never take layout space */ .single-podcast-episode .tgf-player-native-audio { display: none !important; } } /* ========================================================= EXTRA SMALL PHONES 320px - 374px ========================================================= */ @media (max-width: 374px) { .single-podcast-episode .tgf-episode-player { padding: 14px !important; gap: 12px !important; } .single-podcast-episode .tgf-player-cover { width: 94px !important; height: 94px !important; min-width: 94px !important; max-width: 94px !important; } .single-podcast-episode .tgf-player-title { font-size: 17px !important; } .single-podcast-episode .tgf-player-description { font-size: 12.5px !important; } .single-podcast-episode .tgf-player-footer { column-gap: 7px !important; } .single-podcast-episode .tgf-main-play-toggle { width: 24px !important; height: 24px !important; min-width: 24px !important; } .single-podcast-episode .tgf-main-play-toggle img, .single-podcast-episode .tgf-main-play-icon { width: 20px !important; height: 20px !important; } } /* ========================================================= MOBILE AUDIO PLAYER - SINGLE ROW CONTROLS FIX ========================================================= */ @media (max-width: 767px) { .single-podcast-episode .tgf-player-footer { display: grid !important; grid-template-columns: auto minmax(45px, 1fr) auto 22px 24px 22px auto !important; grid-template-rows: 28px !important; align-items: center !important; column-gap: 6px !important; row-gap: 0 !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* Remove the previous two-row layout */ .single-podcast-episode .tgf-player-current { grid-area: unset !important; grid-column: 1 !important; grid-row: 1 !important; } .single-podcast-episode .tgf-player-progress-wrap { grid-area: unset !important; grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; } .single-podcast-episode .tgf-player-duration { grid-area: unset !important; grid-column: 3 !important; grid-row: 1 !important; } /* * Allow Previous / Next / Speed buttons to participate * directly inside the parent grid. */ .single-podcast-episode .tgf-player-controls { display: contents !important; } /* Previous button */ .single-podcast-episode .tgf-player-controls .tgf-player-skip:first-of-type { grid-area: unset !important; grid-column: 4 !important; grid-row: 1 !important; } /* Main Play / Pause button */ .single-podcast-episode .tgf-main-play-toggle { grid-area: unset !important; grid-column: 5 !important; grid-row: 1 !important; position: static !important; inset: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; } .single-podcast-episode .tgf-main-play-toggle img, .single-podcast-episode .tgf-main-play-icon { display: block !important; width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; min-height: 22px !important; max-height: 22px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* Next button */ .single-podcast-episode .tgf-player-controls .tgf-player-skip:nth-of-type(2) { grid-area: unset !important; grid-column: 6 !important; grid-row: 1 !important; } /* Speed */ .single-podcast-episode .tgf-player-speed { grid-area: unset !important; grid-column: 7 !important; grid-row: 1 !important; width: auto !important; min-width: 20px !important; margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1 !important; } /* Previous / Next button sizing */ .single-podcast-episode .tgf-player-skip { display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .single-podcast-episode .tgf-player-skip img { display: block !important; width: 17px !important; height: 17px !important; max-width: 17px !important; max-height: 17px !important; object-fit: contain !important; } /* Times */ .single-podcast-episode .tgf-player-current, .single-podcast-episode .tgf-player-duration { font-size: 11px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; color: #ffffff !important; } } /* ========================================================= 320PX EXTRA SMALL DEVICES ========================================================= */ @media (max-width: 359px) { .single-podcast-episode .tgf-player-footer { grid-template-columns: auto minmax(38px, 1fr) auto 19px 22px 19px auto !important; column-gap: 4px !important; } .single-podcast-episode .tgf-main-play-toggle { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; } .single-podcast-episode .tgf-main-play-toggle img, .single-podcast-episode .tgf-main-play-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; min-height: 20px !important; max-height: 20px !important; } .single-podcast-episode .tgf-player-skip { width: 19px !important; height: 19px !important; min-width: 19px !important; } .single-podcast-episode .tgf-player-skip img { width: 15px !important; height: 15px !important; max-width: 15px !important; max-height: 15px !important; } .single-podcast-episode .tgf-player-current, .single-podcast-episode .tgf-player-duration, .single-podcast-episode .tgf-player-speed { font-size: 10px !important; } } /* ========================================================= PODCAST DETAIL - FINAL DESKTOP ALIGNMENT Full width + Header aligned + Larger column gap ========================================================= */ @media (min-width: 1024px) { /* ----------------------------------------------------- OUTER CONTAINER Same visual left/right line as header logo/button ----------------------------------------------------- */ .single-podcast-episode .tgf-podcast-detail-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box !important; } /* ----------------------------------------------------- MAIN CONTENT + SIDEBAR ----------------------------------------------------- */ .single-podcast-episode .tgf-podcast-detail-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 390px !important; /* Bigger center gap */ column-gap: clamp(110px, 7.5vw, 150px) !important; align-items: start !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ----------------------------------------------------- MAIN COLUMN ----------------------------------------------------- */ .single-podcast-episode .tgf-podcast-detail-main { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Keep every main section on the same left/right line */ .single-podcast-episode .tgf-detail-breadcrumb, .single-podcast-episode .tgf-detail-header, .single-podcast-episode .tgf-detail-audio, .single-podcast-episode .tgf-detail-featured-image, .single-podcast-episode .tgf-detail-body-content, .single-podcast-episode .tgf-detail-quote, .single-podcast-episode .tgf-after-quote-content, .single-podcast-episode .tgf-key-topics, .single-podcast-episode .tgf-about-guest, .single-podcast-episode .tgf-transcript-section, .single-podcast-episode .tgf-sponsor-section, .single-podcast-episode .tgf-detail-comments { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ----------------------------------------------------- ORANGE PLAYER ----------------------------------------------------- */ .single-podcast-episode .tgf-detail-audio, .single-podcast-episode .tgf-episode-player { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* ----------------------------------------------------- FEATURED IMAGE Same width as orange player Height remains 410px ----------------------------------------------------- */ .single-podcast-episode .tgf-detail-featured-image { display: block !important; width: 100% !important; max-width: none !important; height: 410px !important; margin-left: 0 !important; margin-right: 0 !important; overflow: hidden !important; border-radius: 12px !important; box-sizing: border-box !important; } .single-podcast-episode .tgf-detail-featured-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; border-radius: inherit !important; } /* ----------------------------------------------------- SIDEBAR Right edge aligns with header CTA ----------------------------------------------------- */ .single-podcast-episode .tgf-podcast-detail-sidebar { width: 390px !important; max-width: 390px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; justify-self: end !important; box-sizing: border-box !important; } .single-podcast-episode .tgf-subscribe-card, .single-podcast-episode .tgf-listen-through, .single-podcast-episode .tgf-sidebar-player { width: 100% !important; max-width: 390px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* ========================================================= SMALL LAPTOPS Keep full width but reduce gap safely ========================================================= */ @media (min-width: 1024px) and (max-width: 1399px) { .single-podcast-episode .tgf-podcast-detail-container { padding-left: 32px !important; padding-right: 32px !important; } .single-podcast-episode .tgf-podcast-detail-grid { grid-template-columns: minmax(0, 1fr) 340px !important; column-gap: 70px !important; } .single-podcast-episode .tgf-podcast-detail-sidebar { width: 340px !important; max-width: 340px !important; } .single-podcast-episode .tgf-subscribe-card, .single-podcast-episode .tgf-listen-through, .single-podcast-episode .tgf-sidebar-player { max-width: 340px !important; } /* Keep image proportional if main column becomes narrower */ .single-podcast-episode .tgf-detail-featured-image { height: auto !important; aspect-ratio: 713 / 410 !important; } } /* ========================================================= MOBILE / TABLET Do not disturb existing mobile design ========================================================= */ @media (max-width: 1023px) { .single-podcast-episode .tgf-podcast-detail-container { width: 100% !important; max-width: none !important; padding-left: 16px !important; padding-right: 16px !important; } .single-podcast-episode .tgf-podcast-detail-grid { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; } .single-podcast-episode .tgf-podcast-detail-main, .single-podcast-episode .tgf-podcast-detail-sidebar { width: 100% !important; max-width: none !important; } } /* ========================================================= PODCAST DETAIL FEATURED IMAGE FIGMA RATIO: 713 x 410 Scoped only to Podcast Episode detail page ========================================================= */ .single-podcast-episode .tgf-detail-featured-image { display: block !important; width: 100% !important; max-width: 100% !important; /* Exact Figma proportion */ aspect-ratio: 713 / 410 !important; height: auto !important; margin: 38px 0 32px !important; padding: 0 !important; overflow: hidden !important; border-radius: 12px !important; background: transparent !important; box-sizing: border-box !important; } .single-podcast-episode .tgf-detail-featured-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; /* * Fills the exact Figma frame. * If the uploaded image itself has the correct landscape ratio, * nothing important will be cropped. */ object-fit: cover !important; object-position: center center !important; border-radius: inherit !important; } /* ========================================================= MOBILE FIGMA: 358 x 226.23 ========================================================= */ @media (max-width: 767px) { .single-podcast-episode .tgf-detail-featured-image { width: 100% !important; max-width: 358px !important; aspect-ratio: 358 / 226.23 !important; height: auto !important; margin: 28px auto 26px !important; border-radius: 10px !important; } .single-podcast-episode .tgf-detail-featured-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } } /* Listing Image */ /* ========================================================= PODCAST LISTING CLEAN RESPONSIVE CARD GRID ========================================================= */ .all-episodes-query { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 40px !important; box-sizing: border-box !important; } /* ========================================================= GRID ========================================================= */ .all-episodes-query .all-episodes-grid { display: grid !important; /* Desktop: 3 equal 350px cards */ grid-template-columns: repeat(3, 350px) !important; column-gap: 36px !important; row-gap: 44px !important; gap: 44px 36px !important; justify-content: center !important; justify-items: stretch !important; align-items: start !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } /* Remove Gutenberg flow spacing */ .all-episodes-query .all-episodes-grid > li { width: 350px !important; max-width: 350px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= COMPLETE CARD ========================================================= */ .all-episodes-query .episode-card { display: block !important; width: 100% !important; max-width: 350px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: hidden !important; box-sizing: border-box !important; } /* * IMPORTANT: * Gutenberg adds an inner constrained wrapper. * Reset it so it doesn't create strange widths/margins. */ .all-episodes-query .episode-card > .wp-block-group__inner-container { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= FEATURED IMAGE - EXACT 350 x 350 ========================================================= */ .all-episodes-query .episode-card-image { display: block !important; width: 350px !important; max-width: 100% !important; height: 350px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .all-episodes-query .episode-card-image > a { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .all-episodes-query .episode-card-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; border: 0 !important; box-sizing: border-box !important; } /* ========================================================= CARD CONTENT ========================================================= */ .all-episodes-query .episode-card-content { width: 100% !important; max-width: 350px !important; margin: 0 !important; padding: 24px 24px 18px !important; background: #d9f1ec !important; box-sizing: border-box !important; } /* * Reset Gutenberg constrained wrapper inside content. */ .all-episodes-query .episode-card-content > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= CATEGORY ========================================================= */ .all-episodes-query .episode-card-category { margin: 0 0 14px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; text-transform: uppercase !important; } .all-episodes-query .episode-card-category a { color: #f34e3f !important; text-decoration: none !important; } /* ========================================================= TITLE ========================================================= */ .all-episodes-query .episode-card-title { min-height: 58px !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #1e2b33 !important; } /* ========================================================= DIVIDER ========================================================= */ .all-episodes-query .episode-card-divider { width: 100% !important; margin: 22px 0 18px !important; border: 0 !important; border-top: 1px solid rgba(30, 43, 51, 0.25) !important; background: transparent !important; } /* ========================================================= META ========================================================= */ .all-episodes-query .episode-card-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 16px !important; } .all-episodes-query .episode-meta-number, .all-episodes-query .episode-meta-duration { font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; } .all-episodes-query .episode-meta-number { color: #1e2b33 !important; } .all-episodes-query .episode-meta-duration { color: #f34e3f !important; } /* ========================================================= PAGINATION ========================================================= */ .all-episodes-query .episode-pagination { display: flex !important; align-items: center !important; justify-content: center !important; gap: 20px !important; width: 100% !important; margin: 50px 0 0 !important; padding: 0 !important; } .all-episodes-query .episode-pagination-numbers { display: flex !important; align-items: center !important; gap: 10px !important; } /* ========================================================= MEDIUM DESKTOP / TABLET LANDSCAPE 2 COLUMN ========================================================= */ @media (max-width: 1199px) { .all-episodes-query { padding-left: 28px !important; padding-right: 28px !important; } .all-episodes-query .all-episodes-grid { grid-template-columns: repeat(2, 350px) !important; gap: 38px 32px !important; justify-content: center !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .all-episodes-query { padding-left: 16px !important; padding-right: 16px !important; } .all-episodes-query .all-episodes-grid { grid-template-columns: minmax(0, 350px) !important; gap: 30px !important; justify-content: center !important; } .all-episodes-query .all-episodes-grid > li, .all-episodes-query .episode-card { width: 100% !important; max-width: 350px !important; } .all-episodes-query .episode-card-image { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; } .all-episodes-query .episode-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .all-episodes-query .episode-card-content { width: 100% !important; max-width: none !important; padding: 22px 20px 18px !important; } .all-episodes-query .episode-card-title { min-height: 0 !important; font-size: 19px !important; } } /* ========================================================= PODCAST - CONTENT AFTER QUOTE ========================================================= */ .single-podcast-episode .tgf-after-quote-content { margin: 38px 0 42px; padding: 0; font-family: "Outfit", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.65; color: #1e2b33; } .single-podcast-episode .tgf-after-quote-content p { margin: 0 0 18px; } .single-podcast-episode .tgf-after-quote-content p:last-child { margin-bottom: 0; } .single-podcast-episode .tgf-after-quote-content a { color: #f34e3f; text-decoration: underline; } .single-podcast-episode .tgf-after-quote-content strong { font-weight: 700; } .single-podcast-episode .tgf-after-quote-content ul, .single-podcast-episode .tgf-after-quote-content ol { margin: 18px 0; padding-left: 28px; } /* ========================================================= GENERATEPRESS MOBILE MENU - FINAL FIX Uses the original right-side toggle position. No layout/alignment overrides. ========================================================= */ @media (max-width: 768px) { /* ----------------------------------------------------- 1. Hide the duplicate toggle inside the drawer ----------------------------------------------------- */ #site-navigation > .inside-navigation > button.menu-toggle { display: none !important; } /* ----------------------------------------------------- 2. Stacking only. Both elements are flex items, so z-index works without changing their position or alignment. ----------------------------------------------------- */ #mobile-menu-control-wrapper { z-index: 10002 !important; overflow: visible !important; } #site-navigation { z-index: 10001 !important; } /* ----------------------------------------------------- 3. The REAL right-side GeneratePress button position:relative does NOT move the button. It only gives the X a positioning reference. ----------------------------------------------------- */ #mobile-menu-control-wrapper > .menu-toggle, #mobile-menu-control-wrapper .menu-toggle { position: relative !important; z-index: 2 !important; overflow: visible !important; } /* ----------------------------------------------------- 4. OPEN STATE: Hide only the hamburger graphic. Button itself stays exactly where GeneratePress put it. ----------------------------------------------------- */ #mobile-menu-control-wrapper.toggled .menu-toggle .gp-icon { opacity: 0 !important; visibility: hidden !important; } /* ----------------------------------------------------- 5. Draw the X in the exact center of that same button ----------------------------------------------------- */ #mobile-menu-control-wrapper.toggled .menu-toggle::before, #mobile-menu-control-wrapper.toggled .menu-toggle::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 22px !important; height: 2px !important; margin: 0 !important; padding: 0 !important; background: #1e2b33 !important; border: 0 !important; border-radius: 2px !important; transform-origin: center center !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; z-index: 999 !important; } #mobile-menu-control-wrapper.toggled .menu-toggle::before { transform: translate(-50%, -50%) rotate(45deg) !important; } #mobile-menu-control-wrapper.toggled .menu-toggle::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* ----------------------------------------------------- 6. Make sure the real button stays clickable above drawer ----------------------------------------------------- */ #mobile-menu-control-wrapper.toggled .menu-toggle { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } } /* ========================================================= THE GYMNASTICS FILES HOME - LATEST EPISODES CLEAN CONSOLIDATED FIGMA VERSION PAGE ID: 272 ========================================================= */ body.page-id-272 .home-latest-episodes { --tgf-dark: #1e2b33; --tgf-red: #f34e3f; --tgf-mint: #d8efea; --home-gutter: 40px; --home-max-width: 1560px; position: relative !important; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; background: var(--tgf-mint) !important; box-sizing: border-box !important; overflow: hidden !important; } body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container { width: calc(100% - (var(--home-gutter) * 2)) !important; max-width: var(--home-max-width) !important; margin: 0 auto !important; padding: 60px 0 66px !important; box-sizing: border-box !important; } /* Section header */ body.page-id-272 .home-latest-section-header, body.page-id-272 .home-latest-section-header > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-latest-section-header { margin-bottom: 34px !important; } body.page-id-272 .home-latest-header-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-latest-title { margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 48px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; color: var(--tgf-dark) !important; } /* All Episodes button */ body.page-id-272 .home-all-episodes-btn { width: auto !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-all-episodes-btn .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 44px !important; padding: 10px 17px 10px 18px !important; background: transparent !important; color: var(--tgf-dark) !important; border: 1px solid var(--tgf-dark) !important; border-radius: 999px !important; font-family: "Outfit", sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important; text-decoration: none !important; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important; } body.page-id-272 .home-all-episodes-btn .wp-block-button__link::after { content: "" !important; display: block !important; flex: 0 0 17px !important; width: 17px !important; height: 17px !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Button-Icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; opacity: 1 !important; visibility: visible !important; filter: none !important; transform: translateX(0) !important; transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease !important; } body.page-id-272 .home-all-episodes-btn .wp-block-button__link:hover, body.page-id-272 .home-all-episodes-btn .wp-block-button__link:focus-visible { background: var(--tgf-dark) !important; color: #ffffff !important; border-color: var(--tgf-dark) !important; transform: translateY(-2px) !important; } body.page-id-272 .home-all-episodes-btn .wp-block-button__link:hover::after, body.page-id-272 .home-all-episodes-btn .wp-block-button__link:focus-visible::after { content: "" !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Button-Icon.png") !important; opacity: 1 !important; visibility: visible !important; filter: brightness(0) invert(1) !important; transform: translateX(3px) !important; } /* Query loop */ body.page-id-272 .home-latest-episodes-query { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-latest-episodes-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: tgf-episode !important; } body.page-id-272 .home-latest-episodes-grid > li { position: relative !important; display: flex !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; counter-increment: tgf-episode !important; } /* Card */ body.page-id-272 .home-episode-card { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: var(--tgf-dark) !important; border-radius: 8px !important; overflow: hidden !important; box-sizing: border-box !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; will-change: transform; } body.page-id-272 .home-episode-card > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Card hover */ @media (hover: hover) and (pointer: fine) { body.page-id-272 .home-latest-episodes-grid > li:hover .home-episode-card { transform: translateY(-6px) !important; box-shadow: 0 15px 34px rgba(30, 43, 51, 0.13), 0 5px 12px rgba(30, 43, 51, 0.08) !important; } } /* Media */ body.page-id-272 .home-episode-media { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 250px !important; flex: 0 0 250px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.page-id-272 .home-episode-media > .wp-block-group__inner-container, body.page-id-272 .home-episode-image, body.page-id-272 .home-episode-image > a { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-episode-image img { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; border: 0 !important; transition: transform 0.45s ease !important; } @media (hover: hover) and (pointer: fine) { body.page-id-272 .home-latest-episodes-grid > li:hover .home-episode-image img { transform: scale(1.035) !important; } } /* Episode pill */ body.page-id-272 .home-episode-badge { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 10 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: max-content !important; min-height: 24px !important; margin: 0 !important; padding: 5px 10px !important; background: var(--tgf-red) !important; color: #ffffff !important; border: 1px solid #333333 !important; border-radius: 999px !important; box-shadow: none !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 12px !important; white-space: nowrap !important; transition: transform 0.25s ease, background-color 0.25s ease !important; } @media (hover: hover) and (pointer: fine) { body.page-id-272 .home-latest-episodes-grid > li:hover .home-episode-badge { transform: translateY(-1px) !important; } } /* Dark content area */ body.page-id-272 .home-episode-content { position: relative !important; display: block !important; flex: 1 1 auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: var(--tgf-dark) !important; box-sizing: border-box !important; } body.page-id-272 .home-episode-content > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 174px !important; margin: 0 !important; padding: 20px 18px 18px !important; box-sizing: border-box !important; } body.page-id-272 .home-episode-content > .wp-block-group__inner-container > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Category - Figma exact */ body.page-id-272 .home-episode-category, body.page-id-272 .home-episode-category a { font-family: "Outfit", sans-serif !important; font-weight: 700 !important; font-style: normal !important; font-size: 16px !important; line-height: 100% !important; letter-spacing: 0 !important; color: #ffffff !important; text-decoration: none !important; } body.page-id-272 .home-episode-category { width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; } /* Episode title - Figma exact */ body.page-id-272 .home-episode-card-title, body.page-id-272 .home-episode-card-title a { font-family: "Outfit", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size: 15px !important; line-height: 1.5em !important; letter-spacing: 0 !important; color: #ffffff !important; text-decoration: none !important; } body.page-id-272 .home-episode-card-title { width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } /* Short description */ body.page-id-272 .home-episode-description { width: 100% !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.86) !important; } body.page-id-272 .home-episode-description .wp-block-post-excerpt__excerpt { margin: 0 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } body.page-id-272 .home-episode-description .wp-block-post-excerpt__more-text { display: none !important; } /* Divider */ body.page-id-272 .home-episode-divider { width: 100% !important; max-width: none !important; margin: 16px 0 13px !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.18) !important; background: transparent !important; } /* Footer/meta */ body.page-id-272 .home-episode-footer { width: 100% !important; max-width: none !important; margin: auto 0 0 !important; padding: 0 !important; } body.page-id-272 .home-episode-footer > .wp-block-group__inner-container { display: flex !important; align-items: center !important; width: 100% !important; max-width: none !important; min-height: 22px !important; margin: 0 !important; padding: 0 82px 0 0 !important; box-sizing: border-box !important; } body.page-id-272 .home-episode-meta, body.page-id-272 .home-episode-meta > .wp-block-group__inner-container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-episode-meta .is-layout-flex, body.page-id-272 .home-episode-meta .wp-block-group-is-layout-flex { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* Date - Figma exact */ body.page-id-272 .home-episode-date, body.page-id-272 .home-episode-date time { width: auto !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-weight: 500 !important; font-style: normal !important; font-size: 12px !important; line-height: 12px !important; letter-spacing: 0 !important; color: #ffffff !important; vertical-align: middle !important; white-space: nowrap !important; } /* Enhanced separator */ body.page-id-272 .home-episode-meta-separator { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 7px !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 12px !important; letter-spacing: 0 !important; color: var(--tgf-red) !important; vertical-align: middle !important; white-space: nowrap !important; transform: translateY(-1px) !important; } /* Duration - Figma exact */ body.page-id-272 .home-episode-duration { width: auto !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-weight: 500 !important; font-style: normal !important; font-size: 12px !important; line-height: 12px !important; letter-spacing: 0 !important; color: #ffffff !important; vertical-align: middle !important; white-space: nowrap !important; } /* Listen link */ body.page-id-272 .home-episode-listen { position: absolute !important; right: 18px !important; bottom: 18px !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; width: auto !important; max-width: max-content !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; color: var(--tgf-red) !important; white-space: nowrap !important; cursor: pointer !important; transition: opacity 0.25s ease, transform 0.25s ease !important; } body.page-id-272 .home-episode-listen::before { content: "" !important; display: block !important; width: 14px !important; height: 14px !important; flex: 0 0 14px !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Play-icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; opacity: 1 !important; visibility: visible !important; transition: transform 0.25s ease, opacity 0.25s ease !important; } body.page-id-272 .home-episode-listen a, body.page-id-272 .home-episode-listen a:hover, body.page-id-272 .home-episode-listen a:focus { color: var(--tgf-red) !important; text-decoration: none !important; } @media (hover: hover) and (pointer: fine) { body.page-id-272 .home-episode-listen:hover { opacity: 0.86 !important; transform: translateX(2px) !important; } body.page-id-272 .home-episode-listen:hover::before { opacity: 1 !important; visibility: visible !important; transform: scale(1.12) !important; } } /* Tablet */ @media (max-width: 1100px) { body.page-id-272 .home-latest-episodes { --home-gutter: 28px; } body.page-id-272 .home-latest-episodes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } body.page-id-272 .home-episode-media { height: 280px !important; flex-basis: 280px !important; } } /* Mobile */ @media (max-width: 767px) { body.page-id-272 .home-latest-episodes { --home-gutter: 16px; } body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container { padding: 42px 0 48px !important; } body.page-id-272 .home-latest-section-header { margin-bottom: 24px !important; } body.page-id-272 .home-latest-header-row { gap: 16px !important; } body.page-id-272 .home-latest-title { font-size: 28px !important; } body.page-id-272 .home-all-episodes-btn .wp-block-button__link { gap: 7px !important; min-height: 38px !important; padding: 8px 12px 8px 14px !important; font-size: 12px !important; } body.page-id-272 .home-all-episodes-btn .wp-block-button__link::after { width: 15px !important; height: 15px !important; flex-basis: 15px !important; } body.page-id-272 .home-latest-episodes-grid { grid-template-columns: 1fr !important; gap: 20px !important; } body.page-id-272 .home-episode-media { height: auto !important; flex-basis: auto !important; aspect-ratio: 16 / 10 !important; } body.page-id-272 .home-episode-content > .wp-block-group__inner-container { min-height: 176px !important; padding: 20px 18px 18px !important; } body.page-id-272 .home-episode-category { margin-bottom: 9px !important; } body.page-id-272 .home-episode-card-title { margin-bottom: 11px !important; } body.page-id-272 .home-episode-divider { margin: 17px 0 14px !important; } body.page-id-272 .home-episode-footer > .wp-block-group__inner-container { padding-right: 78px !important; } body.page-id-272 .home-episode-meta-separator { font-size: 17px !important; } body.page-id-272 .home-episode-listen { right: 18px !important; bottom: 18px !important; font-size: 11.5px !important; } body.page-id-272 .home-episode-listen::before { width: 13px !important; height: 13px !important; flex-basis: 13px !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { body.page-id-272 .home-episode-card, body.page-id-272 .home-episode-image img, body.page-id-272 .home-episode-badge, body.page-id-272 .home-episode-listen, body.page-id-272 .home-episode-listen::before, body.page-id-272 .home-all-episodes-btn .wp-block-button__link, body.page-id-272 .home-all-episodes-btn .wp-block-button__link::after { transition: none !important; transform: none !important; } } /* ========================================================= HOME EPISODE CARD - REMOVE UNUSED DESCRIPTION SPACE ========================================================= */ body.page-id-272 .home-episode-description { display: none !important; } body.page-id-272 .home-episode-content > .wp-block-group__inner-container { min-height: 142px !important; padding: 18px !important; } body.page-id-272 .home-episode-card-title { margin-bottom: 0 !important; } body.page-id-272 .home-episode-divider { margin: 14px 0 12px !important; } @media (max-width: 767px) { body.page-id-272 .home-episode-content > .wp-block-group__inner-container { min-height: 142px !important; padding: 18px !important; } body.page-id-272 .home-episode-card-title { margin-bottom: 0 !important; } body.page-id-272 .home-episode-divider { margin: 14px 0 12px !important; } } /* ========================================================= EPISODE META DATE • DURATION - PERFECT ALIGNMENT ========================================================= */ /* Main meta row */ .home-episode-meta .wp-block-group-is-layout-flex, .home-episode-meta .is-layout-flex, .home-episode-meta .is-nowrap { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 9px !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Date */ .home-episode-date, .home-episode-date time { display: inline-flex !important; align-items: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; font-style: normal !important; line-height: 12px !important; letter-spacing: 0 !important; color: #FFFFFF !important; white-space: nowrap !important; } /* ========================================================= RED SEPARATOR DOT Do not use text bullet - create exact circle ========================================================= */ .home-episode-meta-separator { display: block !important; flex: 0 0 6px !important; width: 6px !important; height: 6px !important; min-width: 6px !important; min-height: 6px !important; margin: 0 !important; padding: 0 !important; background: #F34E3F !important; border: 0 !important; border-radius: 50% !important; font-size: 0 !important; line-height: 0 !important; align-self: center !important; } /* Remove any manually-added dot character */ .home-episode-meta-separator::before, .home-episode-meta-separator::after { content: none !important; } /* Duration */ .home-episode-duration { display: inline-flex !important; align-items: center !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; font-style: normal !important; line-height: 12px !important; letter-spacing: 0 !important; color: #FFFFFF !important; white-space: nowrap !important; } /* ========================================================= HOME - LATEST EPISODES TRUE FULL WIDTH / FLUID DESKTOP LAYOUT Stable at 100%, 90%, 80% browser zoom ========================================================= */ /* ========================================================= 1. FULL-BLEED SECTION ========================================================= */ body.page-id-272 .home-latest-episodes { position: relative !important; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; box-sizing: border-box !important; background: #DDF3EF !important; } /* ========================================================= 2. INNER CONTENT Full fluid width - NO max-width restriction ========================================================= */ body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: clamp(36px, 4vw, 64px) !important; padding-right: clamp(36px, 4vw, 64px) !important; box-sizing: border-box !important; } /* ========================================================= 3. SECTION HEADER ========================================================= */ body.page-id-272 .home-latest-section-header { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Heading + All Episodes same row */ body.page-id-272 .home-latest-section-header > .wp-block-group__inner-container, body.page-id-272 .home-latest-section-header .wp-block-group-is-layout-flex { width: 100% !important; max-width: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; } /* ========================================================= 4. QUERY LOOP ========================================================= */ body.page-id-272 .home-latest-episodes-query { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ========================================================= 5. FOUR-CARD GRID ========================================================= */ body.page-id-272 .home-latest-episodes-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: clamp(14px, 1.3vw, 22px) !important; row-gap: 22px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; align-items: stretch !important; box-sizing: border-box !important; } /* Each Query Loop item */ body.page-id-272 .home-latest-episodes-grid > li { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= 6. CARDS FILL THEIR GRID COLUMN ========================================================= */ body.page-id-272 .home-episode-card, body.page-id-272 .home-episode-card > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } /* Media + content always match card width */ body.page-id-272 .home-episode-media, body.page-id-272 .home-episode-content, body.page-id-272 .home-episode-footer { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; } /* ========================================================= 7. FEATURED IMAGE Preserve existing professional crop/proportion ========================================================= */ body.page-id-272 .home-episode-image { width: 100% !important; max-width: none !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } body.page-id-272 .home-episode-image a { display: block !important; width: 100% !important; height: 100% !important; } body.page-id-272 .home-episode-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 8. DESKTOP / LARGE DESKTOP 80% / 90% zoom remains fluid ========================================================= */ @media screen and (min-width: 1201px) { body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; padding-left: clamp(40px, 4vw, 72px) !important; padding-right: clamp(40px, 4vw, 72px) !important; } body.page-id-272 .home-latest-episodes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* ========================================================= 9. TABLET ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1100px) { body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container { padding-left: 28px !important; padding-right: 28px !important; } body.page-id-272 .home-latest-episodes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } } /* ========================================================= 10. MOBILE ========================================================= */ @media screen and (max-width: 767px) { body.page-id-272 .home-latest-episodes { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container { width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; } body.page-id-272 .home-latest-episodes-grid { grid-template-columns: 1fr !important; gap: 18px !important; } body.page-id-272 .home-latest-section-header > .wp-block-group__inner-container { gap: 16px !important; } } /* Latest Articals */ /* ========================================================= HOME - LATEST ARTICLES CLEAN FINAL CSS Structure: .home-latest-articles-wrap └── .home-latest-articles ├── .home-articles-section-header └── Query Loop ========================================================= */ /* ========================================================= 1. OUTER WRAPPER RESET This fixes the HUGE empty space above the section ========================================================= */ body.page-id-272 .home-latest-articles-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; } body.page-id-272 .home-latest-articles-wrap > .wp-block-group__inner-container { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Kill Gutenberg automatic block gaps */ body.page-id-272 .home-latest-articles-wrap > .wp-block-group__inner-container > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ========================================================= 2. MAIN ARTICLES SECTION TRUE FULL WIDTH ========================================================= */ body.page-id-272 .home-latest-articles { --article-dark: #1E2B33; --article-mint: #D8EFEA; --article-border: #C8DDD8; position: relative !important; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; background: #ffffff !important; box-sizing: border-box !important; } body.page-id-272 .home-latest-articles > .wp-block-group__inner-container { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; /* * Figma-style breathing space */ padding: 64px clamp(40px, 3.5vw, 64px) 72px !important; box-sizing: border-box !important; } /* ========================================================= 3. SECTION HEADER ========================================================= */ body.page-id-272 .home-articles-section-header, body.page-id-272 .home-articles-section-header > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* * Proper breathing space between * heading/button and cards */ body.page-id-272 .home-articles-section-header { margin-bottom: 40px !important; } /* Actual Gutenberg Row */ body.page-id-272 .home-articles-section-header > .wp-block-group__inner-container > .wp-block-group.is-layout-flex { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 24px !important; } /* ========================================================= 4. LATEST ARTICLES HEADING ========================================================= */ body.page-id-272 .home-articles-heading { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 36px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: 0 !important; color: #1E2B33 !important; white-space: nowrap !important; } /* ========================================================= 5. ALL ARTICLES BUTTON ========================================================= */ body.page-id-272 .home-all-articles-btn { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-all-articles-btn .wp-block-button { margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-all-articles-btn .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 44px !important; padding: 10px 17px 10px 18px !important; background: transparent !important; color: var(--tgf-dark) !important; border: 1px solid var(--tgf-dark) !important; border-radius: 999px !important; font-family: "Outfit", sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important; text-decoration: none !important; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important; border: 1px solid #1E2B33 !important; border-radius: 999px !important; } /* Button icon */ body.page-id-272 .home-all-articles-btn .wp-block-button__link::after { content: "" !important; display: block !important; width: 16px !important; height: 16px !important; flex: 0 0 16px !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Button-Icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } body.page-id-272 .home-all-articles-btn .wp-block-button__link:hover { background: #1E2B33 !important; color: #ffffff !important; transform: translateY(-1px) !important; } body.page-id-272 .home-all-articles-btn .wp-block-button__link:hover::after { filter: brightness(0) invert(1) !important; } /* ========================================================= 6. QUERY LOOP ========================================================= */ body.page-id-272 .home-latest-articles > .wp-block-group__inner-container > .wp-block-query { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 7. ARTICLE GRID ========================================================= */ body.page-id-272 .home-latest-articles-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 16px !important; row-gap: 24px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; align-items: stretch !important; } body.page-id-272 .home-latest-articles-grid > li { display: flex !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 8. ARTICLE CARD ========================================================= */ body.page-id-272 .home-article-card { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: var(--article-mint) !important; border: 1px solid var(--article-border) !important; border-radius: 10px !important; overflow: hidden !important; box-sizing: border-box !important; transition: transform .3s ease, box-shadow .3s ease !important; } body.page-id-272 .home-article-card > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 9. ARTICLE MEDIA ========================================================= */ body.page-id-272 .home-article-media, body.page-id-272 .home-article-media > .wp-block-group__inner-container { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 10. FEATURED IMAGE Figma/source size = 320 × 275 ========================================================= */ body.page-id-272 .home-article-image { display: block !important; width: 100% !important; max-width: none !important; aspect-ratio: 320 / 275 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.page-id-272 .home-article-image a { display: block !important; width: 100% !important; height: 100% !important; } body.page-id-272 .home-article-image img { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; transition: transform .4s ease !important; } /* ========================================================= 11. CATEGORY PILL ========================================================= */ body.page-id-272 .home-article-category { position: absolute !important; top: 12px !important; left: 12px !important; z-index: 5 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: calc(100% - 24px) !important; margin: 0 !important; padding: 5px 10px !important; /* Glass / blurred background */ background: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(51, 51, 51, 0.6) !important; border-radius: 999px !important; font-family: "Outfit", sans-serif !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; text-transform: uppercase !important; } body.page-id-272 .home-article-category a { color: #1E2B33 !important; text-decoration: none !important; white-space: nowrap !important; } /* ========================================================= 12. MINT CONTENT AREA ========================================================= */ body.page-id-272 .home-article-content { display: flex !important; flex: 1 1 auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: var(--article-mint) !important; } body.page-id-272 .home-article-content > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 18px 18px 20px !important; background: var(--article-mint) !important; box-sizing: border-box !important; } /* ========================================================= 13. ARTICLE TITLE ========================================================= */ body.page-id-272 .home-article-title { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: #1E2B33 !important; } body.page-id-272 .home-article-title a { color: inherit !important; text-decoration: none !important; } /* ========================================================= 14. CARD HOVER ========================================================= */ body.page-id-272 .home-latest-articles-grid > li:hover .home-article-card { transform: translateY(-5px) !important; box-shadow: 0 15px 32px rgba(30,43,51,.10) !important; } body.page-id-272 .home-latest-articles-grid > li:hover .home-article-image img { transform: scale(1.03) !important; } /* ========================================================= TABLET ========================================================= */ @media screen and (max-width: 1100px) { body.page-id-272 .home-latest-articles > .wp-block-group__inner-container { padding: 54px 28px 60px !important; } body.page-id-272 .home-latest-articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } } /* ========================================================= MOBILE ========================================================= */ @media screen and (max-width: 767px) { body.page-id-272 .home-latest-articles { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.page-id-272 .home-latest-articles > .wp-block-group__inner-container { padding: 40px 18px 46px !important; } body.page-id-272 .home-articles-section-header { margin-bottom: 26px !important; } body.page-id-272 .home-articles-heading { font-size: 28px !important; } body.page-id-272 .home-articles-section-header > .wp-block-group__inner-container > .wp-block-group.is-layout-flex { gap: 15px !important; } body.page-id-272 .home-latest-articles-grid { grid-template-columns: 1fr !important; gap: 20px !important; } } /* ============================================================ HOME PAGE - LATEST EPISODES FINAL MOBILE CSS Page ID: 272 ============================================================ */ @media only screen and (max-width: 767px) { /* ======================================================== 01. FULL-BLEED MINT SECTION ======================================================== */ body.page-id-272 .home-latest-episodes { position: relative !important; width: 100vw !important; max-width: 100vw !important; min-width: 100vw !important; left: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; padding: 0 !important; background: #DDF3EE !important; box-sizing: border-box !important; } /* ======================================================== 02. MAIN INNER CONTAINER IMPORTANT: Header + Query Loop are direct siblings. gap creates guaranteed space between button and cards. ======================================================== */ body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* GUARANTEED GAP BETWEEN HEADER AND CARDS */ gap: 32px !important; margin: 0 !important; padding: 34px 14px 40px !important; box-sizing: border-box !important; } /* Prevent Gutenberg flow spacing fighting our gap */ body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ======================================================== 03. SECTION HEADER ======================================================== */ body.page-id-272 .home-latest-section-header { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-latest-section-header > .wp-block-group__inner-container { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== 04. HEADER ROW Figma: Latest episodes All episodes button ======================================================== */ body.page-id-272 .home-latest-header-row { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== 05. HEADING ======================================================== */ body.page-id-272 .home-latest-title { display: block !important; flex: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; text-align: center !important; color: #1E2B33 !important; white-space: normal !important; } /* ======================================================== 06. BUTTON WRAPPER ======================================================== */ body.page-id-272 .home-latest-header-row .wp-block-buttons { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-all-episodes-btn { display: block !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== 07. ALL EPISODES BUTTON ======================================================== */ body.page-id-272 .home-all-episodes-btn .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 100px !important; min-height: 38px !important; gap: 7px !important; margin: 0 !important; padding: 8px 12px 8px 14px !important; background: transparent !important; border: 1px solid #1E2B33 !important; border-radius: 999px !important; color: #1E2B33 !important; font-family: "Outfit", sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap !important; box-sizing: border-box !important; } /* Button icon */ body.page-id-272 .home-all-episodes-btn .wp-block-button__link::after { content: "" !important; display: block !important; width: 15px !important; height: 15px !important; flex: 0 0 15px !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Button-Icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; transition: transform 0.25s ease !important; } /* ======================================================== 08. QUERY LOOP IMPORTANT: no margin/padding here. 32px gap is controlled by parent. ======================================================== */ body.page-id-272 .home-latest-episodes-query { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== 09. EPISODE GRID ======================================================== */ body.page-id-272 .home-latest-episodes-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-sizing: border-box !important; } body.page-id-272 .home-latest-episodes-grid > li { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== 10. CARD ======================================================== */ body.page-id-272 .home-episode-card { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #1E2B33 !important; border-radius: 8px !important; overflow: hidden !important; box-sizing: border-box !important; } body.page-id-272 .home-episode-card > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== 11. MEDIA ======================================================== */ body.page-id-272 .home-episode-media, body.page-id-272 .home-episode-media > .wp-block-group__inner-container { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== 12. IMAGE ======================================================== */ body.page-id-272 .home-episode-image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.page-id-272 .home-episode-image a { display: block !important; width: 100% !important; height: 100% !important; } body.page-id-272 .home-episode-image img { display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; } /* ======================================================== 13. EPISODE NUMBER PILL ======================================================== */ body.page-id-272 .home-episode-badge { position: absolute !important; top: 10px !important; left: 10px !important; z-index: 10 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: max-content !important; min-height: 22px !important; margin: 0 !important; padding: 5px 9px !important; background: #F34E3F !important; color: #FFFFFF !important; border: 1px solid #333333 !important; border-radius: 999px !important; font-family: "Outfit", sans-serif !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; box-sizing: border-box !important; } /* ======================================================== 14. DARK CONTENT AREA ======================================================== */ body.page-id-272 .home-episode-content { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #1E2B33 !important; box-sizing: border-box !important; } body.page-id-272 .home-episode-content > .wp-block-group__inner-container { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 16px 14px 14px !important; box-sizing: border-box !important; } body.page-id-272 .home-episode-content > .wp-block-group__inner-container > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ======================================================== 15. CATEGORY ======================================================== */ body.page-id-272 .home-episode-category, body.page-id-272 .home-episode-category a { font-family: "Outfit", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; font-style: normal !important; line-height: 100% !important; letter-spacing: 0 !important; color: #FFFFFF !important; text-decoration: none !important; } body.page-id-272 .home-episode-category { width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; } /* ======================================================== 16. TITLE ======================================================== */ body.page-id-272 .home-episode-card-title, body.page-id-272 .home-episode-card-title a { font-family: "Outfit", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.25 !important; letter-spacing: 0 !important; color: #FFFFFF !important; text-decoration: none !important; } body.page-id-272 .home-episode-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== 17. REMOVE DESCRIPTION Home design only contains category + title ======================================================== */ body.page-id-272 .home-episode-description { display: none !important; } /* ======================================================== 18. DIVIDER ======================================================== */ body.page-id-272 .home-episode-divider { display: block !important; width: 100% !important; max-width: 100% !important; margin: 14px 0 12px !important; padding: 0 !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,0.18) !important; } /* ======================================================== 19. FOOTER ======================================================== */ body.page-id-272 .home-episode-footer { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-episode-footer > .wp-block-group__inner-container { display: flex !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-height: 22px !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== 20. META ======================================================== */ body.page-id-272 .home-episode-meta, body.page-id-272 .home-episode-meta > .wp-block-group__inner-container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-episode-meta .is-layout-flex { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: auto !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== 21. DATE + DURATION ======================================================== */ body.page-id-272 .home-episode-date, body.page-id-272 .home-episode-date time, body.page-id-272 .home-episode-duration { font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; font-style: normal !important; line-height: 12px !important; letter-spacing: 0 !important; color: #FFFFFF !important; vertical-align: middle !important; white-space: nowrap !important; } body.page-id-272 .home-episode-date, body.page-id-272 .home-episode-duration { width: auto !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== 22. RED META SEPARATOR ======================================================== */ body.page-id-272 .home-episode-meta-separator { width: auto !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 12px !important; color: #F34E3F !important; vertical-align: middle !important; } /* ======================================================== 23. LISTEN ======================================================== */ body.page-id-272 .home-episode-listen { position: absolute !important; right: 14px !important; bottom: 16px !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; max-width: max-content !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; color: #F34E3F !important; white-space: nowrap !important; } body.page-id-272 .home-episode-listen::before { content: "" !important; display: block !important; width: 13px !important; height: 13px !important; flex: 0 0 13px !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Play-icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } body.page-id-272 .home-episode-listen a { color: #F34E3F !important; text-decoration: none !important; } /* ======================================================== 24. DISABLE DESKTOP HOVER MOVEMENT ON MOBILE ======================================================== */ body.page-id-272 .home-latest-episodes-grid > li:hover .home-episode-card { transform: none !important; } body.page-id-272 .home-latest-episodes-grid > li:hover .home-episode-image img { transform: none !important; } body.page-id-272 .home-latest-episodes-grid > li:hover .home-episode-badge { transform: none !important; } } /* ============================================================ EXTRA SMALL MOBILE ============================================================ */ @media only screen and (max-width: 374px) { body.page-id-272 .home-latest-episodes > .wp-block-group__inner-container { padding-left: 12px !important; padding-right: 12px !important; /* still preserves button-to-card breathing space */ gap: 28px !important; } body.page-id-272 .home-latest-title { font-size: 24px !important; } body.page-id-272 .home-all-episodes-btn .wp-block-button__link { min-height: 36px !important; padding: 7px 11px 7px 12px !important; font-size: 10px !important; } } /* ============================================================ HOME - LATEST ARTICLES MOBILE HEADER - SAME AS LATEST EPISODES ============================================================ */ @media only screen and (max-width: 767px) { /* Header wrapper */ body.page-id-272 .home-articles-section-header, body.page-id-272 .home-articles-section-header > .wp-block-group__inner-container { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== ACTUAL ROW CONTAINING: Latest articles + All articles ======================================================== */ body.page-id-272 .home-articles-section-header > .wp-block-group__inner-container > .wp-block-group.is-layout-flex { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== HEADING ======================================================== */ body.page-id-272 .home-articles-heading { display: block !important; flex: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; text-align: center !important; color: #1E2B33 !important; white-space: normal !important; } /* ======================================================== BUTTONS WRAPPER ======================================================== */ body.page-id-272 .home-articles-section-header .wp-block-buttons { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-all-articles-btn { display: block !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ======================================================== ALL ARTICLES BUTTON ======================================================== */ body.page-id-272 .home-all-articles-btn .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 100px !important; min-height: 38px !important; gap: 7px !important; margin: 0 !important; padding: 8px 12px 8px 14px !important; background: transparent !important; border: 1px solid #1E2B33 !important; border-radius: 999px !important; color: #1E2B33 !important; font-family: "Outfit", sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1 !important; text-decoration: none !important; white-space: nowrap !important; box-sizing: border-box !important; } /* ======================================================== BUTTON ICON ======================================================== */ body.page-id-272 .home-all-articles-btn .wp-block-button__link::after { content: "" !important; display: block !important; width: 15px !important; height: 15px !important; flex: 0 0 15px !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Button-Icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* ======================================================== SPACE BELOW BUTTON BEFORE ARTICLE CARDS ======================================================== */ body.page-id-272 .home-articles-section-header { margin-bottom: 32px !important; } } /* ============================================================ EXTRA SMALL MOBILE ============================================================ */ @media only screen and (max-width: 374px) { body.page-id-272 .home-articles-heading { font-size: 24px !important; } body.page-id-272 .home-all-articles-btn .wp-block-button__link { min-height: 36px !important; padding: 7px 11px 7px 12px !important; font-size: 10px !important; } } /* Meet The Host */ /* ============================================================ THE GYMNASTICS FILES MEET THE HOSTS — FIGMA MATCH PAGE: HOME / ID 272 ============================================================ */ /* ============================================================ 01. FULL WIDTH BACKGROUND ============================================================ */ body.page-id-272 .home-hosts { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #D7EFE8 !important; box-sizing: border-box !important; overflow: hidden !important; } /* ============================================================ 02. FIGMA FRAME 1440px frame 68px + 1304px + 68px ============================================================ */ body.page-id-272 .home-hosts > .wp-block-group__inner-container { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 88px 68px 96px !important; box-sizing: border-box !important; } /* Gutenberg spacing reset */ body.page-id-272 .home-hosts > .wp-block-group__inner-container > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ============================================================ 03. HEADER ============================================================ */ body.page-id-272 .home-hosts-header, body.page-id-272 .home-hosts-header > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ACTUAL DOM: .home-hosts-header > .wp-block-group__inner-container > .wp-block-group.is-layout-flex */ body.page-id-272 .home-hosts-header > .wp-block-group__inner-container > .wp-block-group { display: grid !important; grid-template-columns: 449px 692px !important; column-gap: 163px !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Figma gap before Emma profile */ body.page-id-272 .home-hosts-header { margin-bottom: 64px !important; } /* ============================================================ 04. MEET THE HOSTS TITLE ============================================================ */ body.page-id-272 .home-hosts-heading { margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 42px !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; color: #1E2B33 !important; white-space: nowrap !important; } /* ============================================================ 05. INTRO / MISSION ============================================================ */ body.page-id-272 .home-hosts-intro { width: 100% !important; max-width: 692px !important; margin: 0 !important; padding: 4px 0 4px 30px !important; border-left: 2px solid #F34E3F !important; box-sizing: border-box !important; } body.page-id-272 .home-hosts-intro > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-hosts-intro-text { margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; color: #1e2b33 !important; font-family: "Outfit", sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left !important; } /* ============================================================ 06. HOST CARD RESET ============================================================ */ body.page-id-272 .home-host-card, body.page-id-272 .home-host-card > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Absolutely remove Gutenberg gap between Emma + Arman */ body.page-id-272 .home-host-card + .home-host-card { margin-top: 0 !important; } /* ============================================================ 07. BASE HOST ROW ============================================================ */ body.page-id-272 .home-host-row { display: grid !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; align-items: center !important; box-sizing: border-box !important; } /* ============================================================ 08. EMMA 449 IMAGE + 163 GAP + 692 CONTENT ============================================================ */ body.page-id-272 .home-host-emma .home-host-row { grid-template-columns: 449px 692px !important; column-gap: 163px !important; justify-content: start !important; align-items: center !important; } /* ============================================================ 09. ARMAN 692 CONTENT + 163 GAP + 449 IMAGE ============================================================ */ body.page-id-272 .home-host-arman .home-host-row { grid-template-columns: 692px 449px !important; column-gap: 163px !important; justify-content: start !important; align-items: center !important; } /* IMPORTANT: Figma mein rows basically continuous hain. Previous 40px / 50px / 100px margin nahi. */ body.page-id-272 .home-host-emma { margin-bottom: 0 !important; } /* ============================================================ 10. MEDIA RESET ============================================================ */ body.page-id-272 .home-host-media, body.page-id-272 .home-host-media > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ============================================================ 11. EXACT FIGMA IMAGE SIZE ============================================================ */ body.page-id-272 .home-host-image { display: block !important; width: 449px !important; max-width: 449px !important; height: 512px !important; margin: 0 !important; padding: 0 !important; border-radius: 18px !important; overflow: hidden !important; box-sizing: border-box !important; } body.page-id-272 .home-host-image img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; object-position: center !important; } /* ============================================================ 12. HOST CONTENT ============================================================ */ body.page-id-272 .home-host-content { width: 100% !important; max-width: 692px !important; margin: 0 !important; padding: 0 !important; /* This is the important Figma behavior: content sits vertically in IMAGE CENTER. */ align-self: center !important; } body.page-id-272 .home-host-content > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Remove previous artificial positioning */ body.page-id-272 .home-host-emma .home-host-content, body.page-id-272 .home-host-arman .home-host-content { padding-top: 0 !important; padding-bottom: 0 !important; } /* ============================================================ 13. ROLE ============================================================ */ body.page-id-272 .home-host-role { width: 100% !important; margin: 0 0 14px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; /* Figma = LEFT aligned. "center" means vertically centered beside image, NOT text-align:center. */ text-align: left !important; color: #F34E3F !important; } /* ============================================================ 14. HOST NAME ============================================================ */ body.page-id-272 .home-host-name { width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; text-align: left !important; color: #1E2B33 !important; } /* ============================================================ 15. BIO ============================================================ */ body.page-id-272 .home-host-bio { width: 100% !important; max-width: 692px !important; margin: 0 0 26px !important; padding: 0 !important; color: #1e2b33 !important; font-family: "Outfit", sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left !important; } /* ============================================================ 16. ARTICLE LINK ============================================================ */ body.page-id-272 .home-host-link { width: auto !important; margin: 0 !important; padding: 0 !important; font-family: "Outfit", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: uppercase !important; text-align: left !important; } body.page-id-272 .home-host-link a { display: inline-block !important; padding: 0 0 5px !important; color: #1E2B33 !important; text-decoration: none !important; border-bottom: 1px solid #1E2B33 !important; transition: color 0.2s ease, border-color 0.2s ease !important; } body.page-id-272 .home-host-link a:hover { color: #F34E3F !important; border-color: #F34E3F !important; } /* ============================================================ 17. LAPTOP ============================================================ */ @media only screen and (max-width: 1439px) { body.page-id-272 .home-hosts > .wp-block-group__inner-container { max-width: none !important; padding-left: 48px !important; padding-right: 48px !important; } body.page-id-272 .home-hosts-header > .wp-block-group__inner-container > .wp-block-group { grid-template-columns: minmax(300px, 35%) minmax(0, 1fr) !important; column-gap: 70px !important; } body.page-id-272 .home-host-emma .home-host-row { grid-template-columns: minmax(320px, 38%) minmax(0, 1fr) !important; column-gap: 70px !important; } body.page-id-272 .home-host-arman .home-host-row { grid-template-columns: minmax(0, 1fr) minmax(320px, 38%) !important; column-gap: 70px !important; } body.page-id-272 .home-host-image { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 449 / 512 !important; } } /* ============================================================ 18. TABLET ============================================================ */ @media only screen and (max-width: 960px) { body.page-id-272 .home-hosts > .wp-block-group__inner-container { padding: 58px 30px 64px !important; } body.page-id-272 .home-hosts-header > .wp-block-group__inner-container > .wp-block-group { grid-template-columns: 1fr 1.45fr !important; column-gap: 40px !important; } body.page-id-272 .home-hosts-heading { font-size: 34px !important; white-space: normal !important; } body.page-id-272 .home-host-emma .home-host-row { grid-template-columns: minmax(260px, 38%) minmax(0, 1fr) !important; column-gap: 40px !important; } body.page-id-272 .home-host-arman .home-host-row { grid-template-columns: minmax(0, 1fr) minmax(260px, 38%) !important; column-gap: 40px !important; } body.page-id-272 .home-host-bio { font-size: 19px !important; } } /* ============================================================ 19. MOBILE — FIGMA ============================================================ */ @media only screen and (max-width: 767px) { body.page-id-272 .home-hosts > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; padding: 42px 16px 50px !important; } /* Header stacked */ body.page-id-272 .home-hosts-header > .wp-block-group__inner-container > .wp-block-group { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 22px !important; } body.page-id-272 .home-hosts-header { margin-bottom: 32px !important; } body.page-id-272 .home-hosts-heading { font-size: 30px !important; line-height: 1.05 !important; white-space: normal !important; } body.page-id-272 .home-hosts-intro { width: 100% !important; max-width: none !important; padding: 2px 0 2px 16px !important; } body.page-id-272 .home-hosts-intro-text { font-size: 19px !important; line-height: 1.5 !important; } /* Emma + Arman stacks */ body.page-id-272 .home-host-emma .home-host-row, body.page-id-272 .home-host-arman .home-host-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 18px !important; width: 100% !important; } /* Arman HTML has content first. Figma mobile needs IMAGE first. */ body.page-id-272 .home-host-card .home-host-media { order: 1 !important; width: 100% !important; max-width: none !important; } body.page-id-272 .home-host-card .home-host-content { order: 2 !important; width: 100% !important; max-width: none !important; align-self: stretch !important; } body.page-id-272 .home-host-image { width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 449 / 512 !important; border-radius: 14px !important; } body.page-id-272 .home-host-emma { margin-bottom: 40px !important; } body.page-id-272 .home-host-role { margin-bottom: 8px !important; font-size: 10px !important; } body.page-id-272 .home-host-name { margin-bottom: 13px !important; font-size: 30px !important; } body.page-id-272 .home-host-bio { margin-bottom: 18px !important; font-size: 19px !important; line-height: 1.5 !important; } } /* ============================================================ 20. SMALL MOBILE ============================================================ */ @media only screen and (max-width: 420px) { body.page-id-272 .home-hosts > .wp-block-group__inner-container { padding-left: 14px !important; padding-right: 14px !important; } body.page-id-272 .home-hosts-heading { font-size: 28px !important; } } /* ============================================================ MEET THE HOSTS HEADER ORANGE BOUNDARY TO ORANGE BOUNDARY ============================================================ */ body.page-id-272 .home-hosts-header { width: calc(100% + 136px) !important; max-width: none !important; margin-left: -68px !important; margin-right: -68px !important; margin-bottom: 64px !important; padding: 0 !important; } /* Header inner wrapper */ body.page-id-272 .home-hosts-header > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Actual row */ body.page-id-272 .home-hosts-header > .wp-block-group__inner-container > .wp-block-group { display: grid !important; grid-template-columns: 449px minmax(0, 692px) !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; column-gap: 40px !important; } /* Meet the Hosts exactly left boundary par */ body.page-id-272 .home-hosts-heading { justify-self: start !important; margin-left: 0 !important; margin-right: 0 !important; } /* Mission exactly right boundary par */ body.page-id-272 .home-hosts-intro { justify-self: end !important; width: 100% !important; max-width: 692px !important; margin-left: auto !important; margin-right: 0 !important; } /* ============================================================ MOBILE Desktop negative gutter mobile par use nahi hoga ============================================================ */ @media only screen and (max-width: 767px) { body.page-id-272 .home-hosts-header { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 32px !important; } body.page-id-272 .home-hosts-header > .wp-block-group__inner-container > .wp-block-group { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 22px !important; } body.page-id-272 .home-hosts-intro { width: 100% !important; max-width: none !important; margin: 0 !important; } } /* ============================================================ HOST CARDS - ORANGE LINE TO ORANGE LINE Emma + Arman ============================================================ */ /* Desktop gutter same as Hosts main section */ body.page-id-272 .home-hosts { --hosts-edge-gutter: 68px; } /* Expand BOTH host cards outside the section's inner padding */ body.page-id-272 .home-host-card { width: calc(100% + (var(--hosts-edge-gutter) * 2)) !important; max-width: none !important; margin-left: calc(var(--hosts-edge-gutter) * -1) !important; margin-right: calc(var(--hosts-edge-gutter) * -1) !important; padding: 0 !important; box-sizing: border-box !important; } /* Card inner wrapper */ body.page-id-272 .home-host-card > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ EMMA IMAGE = LEFT EDGE CONTENT = RIGHT EDGE ============================================================ */ body.page-id-272 .home-host-emma .home-host-row { display: grid !important; grid-template-columns: 449px minmax(0, 692px) !important; width: 100% !important; max-width: none !important; justify-content: space-between !important; align-items: center !important; column-gap: 60px !important; margin: 0 !important; padding: 0 !important; } /* Emma image exactly left */ body.page-id-272 .home-host-emma .home-host-media { justify-self: start !important; } /* Emma content exactly right */ body.page-id-272 .home-host-emma .home-host-content { justify-self: end !important; align-self: center !important; width: 100% !important; max-width: 692px !important; } /* ============================================================ ARMAN CONTENT = LEFT EDGE IMAGE = RIGHT EDGE ============================================================ */ body.page-id-272 .home-host-arman .home-host-row { display: grid !important; grid-template-columns: minmax(0, 692px) 449px !important; width: 100% !important; max-width: none !important; justify-content: space-between !important; align-items: center !important; column-gap: 60px !important; margin: 0 !important; padding: 0 !important; } /* Arman content exactly left */ body.page-id-272 .home-host-arman .home-host-content { justify-self: start !important; align-self: center !important; width: 100% !important; max-width: 692px !important; } /* Arman image exactly right */ body.page-id-272 .home-host-arman .home-host-media { justify-self: end !important; display: flex !important; justify-content: flex-end !important; } /* ============================================================ RESPONSIVE GUTTER MATCH ============================================================ */ @media only screen and (max-width: 1439px) { body.page-id-272 .home-hosts { --hosts-edge-gutter: 48px; } } @media only screen and (max-width: 960px) { body.page-id-272 .home-hosts { --hosts-edge-gutter: 30px; } } /* ============================================================ MOBILE Mobile par negative expansion band. ============================================================ */ @media only screen and (max-width: 767px) { body.page-id-272 .home-hosts { --hosts-edge-gutter: 0px; } body.page-id-272 .home-host-card { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.page-id-272 .home-host-emma .home-host-row, body.page-id-272 .home-host-arman .home-host-row { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 18px !important; } body.page-id-272 .home-host-card .home-host-media, body.page-id-272 .home-host-card .home-host-content { width: 100% !important; max-width: none !important; justify-self: auto !important; } } /* ============================================================ HOST CARDS - REDUCE IMAGE / CONTENT CENTER GAP Keep cards edge-to-edge ============================================================ */ /* EMMA: image left, content fills remaining right side */ body.page-id-272 .home-host-emma .home-host-row { grid-template-columns: 449px minmax(0, 1fr) !important; column-gap: 90px !important; justify-content: initial !important; } /* Emma content ko 692px cap se free karo */ body.page-id-272 .home-host-emma .home-host-content { width: 100% !important; max-width: none !important; justify-self: stretch !important; align-self: center !important; } /* ARMAN: content fills left, image right */ body.page-id-272 .home-host-arman .home-host-row { grid-template-columns: minmax(0, 1fr) 449px !important; column-gap: 90px !important; justify-content: initial !important; } /* Arman content ko bhi fixed 692px cap se free karo */ body.page-id-272 .home-host-arman .home-host-content { width: 100% !important; max-width: none !important; justify-self: stretch !important; align-self: center !important; } /* Bio available width properly use kare */ body.page-id-272 .home-host-emma .home-host-bio, body.page-id-272 .home-host-arman .home-host-bio { width: 100% !important; max-width: none !important; } /* ============================================================ MEET THE HOSTS SLIGHT INSET FROM ORANGE PAGE EDGES ============================================================ */ /* Header: orange line se 24px andar */ body.page-id-272 .home-hosts-header { width: calc(100% + 88px) !important; margin-left: -44px !important; margin-right: -44px !important; } /* Emma + Arman cards bhi same alignment */ body.page-id-272 .home-host-card { width: calc(100% + 88px) !important; max-width: none !important; margin-left: -44px !important; margin-right: -44px !important; } /* ============================================================ LAPTOP ============================================================ */ @media only screen and (max-width: 1439px) { body.page-id-272 .home-hosts-header, body.page-id-272 .home-host-card { width: calc(100% + 56px) !important; margin-left: -28px !important; margin-right: -28px !important; } } /* ============================================================ TABLET ============================================================ */ @media only screen and (max-width: 960px) { body.page-id-272 .home-hosts-header, body.page-id-272 .home-host-card { width: calc(100% + 24px) !important; margin-left: -12px !important; margin-right: -12px !important; } } /* ============================================================ MOBILE Normal inner padding maintain karega ============================================================ */ @media only screen and (max-width: 767px) { body.page-id-272 .home-hosts-header, body.page-id-272 .home-host-card { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ============================================================ MEET THE HOSTS — MOBILE FINAL SPACING ============================================================ */ @media only screen and (max-width: 767px) { /* -------------------------------- SECTION -------------------------------- */ body.page-id-272 .home-hosts { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-hosts > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 36px 12px 48px !important; } /* -------------------------------- HEADER -------------------------------- */ body.page-id-272 .home-hosts-header { width: 100% !important; margin: 0 !important; padding: 0 0 28px !important; } body.page-id-272 .home-hosts-header > .wp-block-group__inner-container { width: 100% !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-hosts-header > .wp-block-group__inner-container > .wp-block-group { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 14px !important; } body.page-id-272 .home-hosts-heading { margin: 0 !important; padding: 0 !important; font-size: 28px !important; line-height: 1.08 !important; } body.page-id-272 .home-hosts-intro { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 2px 0 2px 14px !important; } /* -------------------------------- BOTH HOST CARDS -------------------------------- */ body.page-id-272 .home-host-card, body.page-id-272 .home-host-card > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-id-272 .home-host-emma .home-host-row, body.page-id-272 .home-host-arman .home-host-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } /* -------------------------------- IMAGE -------------------------------- */ body.page-id-272 .home-host-card .home-host-media { order: 1 !important; width: 100% !important; max-width: none !important; margin: 0 !important; /* image -> text breathing space */ padding: 0 0 16px !important; } body.page-id-272 .home-host-media > .wp-block-group__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.page-id-272 .home-host-image { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 449 / 512 !important; margin: 0 !important; border-radius: 12px !important; overflow: hidden !important; } body.page-id-272 .home-host-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; } /* -------------------------------- CONTENT -------------------------------- */ body.page-id-272 .home-host-card .home-host-content { order: 2 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; align-self: stretch !important; } body.page-id-272 .home-host-content > .wp-block-group__inner-container { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } /* Role */ body.page-id-272 .home-host-role { width: 100% !important; margin: 0 0 7px !important; padding: 0 !important; font-size: 9px !important; line-height: 1.25 !important; text-align: left !important; } /* Name */ body.page-id-272 .home-host-name { width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; font-size: 30px !important; line-height: 1.15 !important; text-align: left !important; } /* Bio */ body.page-id-272 .home-host-bio { width: 100% !important; max-width: none !important; margin: 0 0 16px !important; padding: 0 !important; font-size: 19px !important; line-height: 1.5 !important; text-align: left !important; } /* Read articles */ body.page-id-272 .home-host-link { width: auto !important; margin: 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 1.2 !important; text-align: left !important; } /* ======================================================== MOST IMPORTANT FIX Emma complete profile -> Arman profile spacing ======================================================== */ body.page-id-272 .home-host-emma { /* padding use ki hai, margin nahi. Gutenberg isko collapse/override nahi karega. */ padding-bottom: 34px !important; margin-bottom: 0 !important; } body.page-id-272 .home-host-arman { padding-top: 0 !important; margin-top: 0 !important; } /* Arman HTML mein content pehle hai, mobile par image first */ body.page-id-272 .home-host-arman .home-host-media { order: 1 !important; } body.page-id-272 .home-host-arman .home-host-content { order: 2 !important; } } /* ========================================================= HOME EPISODE CARD - INLINE LISTEN BUTTON Keeps the existing .home-episode-listen design. ========================================================= */ body.page-id-272 .home-episode-listen-wrap { display: contents !important; } body.page-id-272 button.home-episode-listen { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; font-family: "Outfit", sans-serif !important; text-align: right !important; } body.page-id-272 button.home-episode-listen:hover, body.page-id-272 button.home-episode-listen:focus { background: transparent !important; color: #F34E3F !important; box-shadow: none !important; } body.page-id-272 button.home-episode-listen:focus-visible { outline: 2px solid #F34E3F !important; outline-offset: 3px !important; } /* Playing: swap the play icon for pause bars in the same red. */ body.page-id-272 .home-episode-listen.is-playing::before { background-image: none !important; width: 12px !important; height: 13px !important; flex-basis: 12px !important; background: linear-gradient( to right, #F34E3F 0, #F34E3F 4px, transparent 4px, transparent 8px, #F34E3F 8px, #F34E3F 12px ) !important; } /* Never let the audio element affect layout. */ body.page-id-272 .home-episode-listen-audio { display: none !important; } @media only screen and (max-width: 767px) { body.page-id-272 .home-episode-listen.is-playing::before { width: 11px !important; height: 12px !important; flex-basis: 11px !important; background: linear-gradient( to right, #F34E3F 0, #F34E3F 4px, transparent 4px, transparent 7px, #F34E3F 7px, #F34E3F 11px ) !important; } } body.page-id-272 .home-episode-listen::before { content: "" !important; display: block !important; width: 14px !important; height: 14px !important; flex: 0 0 14px !important; background-image: url("https://thegymnasticsfiles.com/wp-content/uploads/2026/09/Play-icon.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; opacity: 1 !important; visibility: visible !important; } body.page-id-272 .home-episode-listen.is-playing::before { background-image: none !important; width: 12px !important; height: 13px !important; flex-basis: 12px !important; background: linear-gradient( to right, #F34E3F 0, #F34E3F 4px, transparent 4px, transparent 8px, #F34E3F 8px, #F34E3F 12px ) !important; } /* ========================================================= PODCAST FILTERS — MOBILE CAROUSEL Matches the Articles page tab behaviour. KEEP THIS AT THE VERY END OF STYLE.CSS ========================================================= */ @media screen and (max-width: 767px) { /* The row itself becomes the scroll container and bleeds out to the section edges. */ body.page-id-14 .episode-filter-row { display: block !important; width: auto !important; max-width: none !important; margin: 0 -18px 30px !important; padding: 4px 18px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; scroll-snap-type: x proximity !important; scroll-padding-left: 18px !important; } body.page-id-14 .episode-filter-row::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Gutenberg shortcode wrapper must not constrain width. */ body.page-id-14 .episode-filter-row .wp-block-shortcode { display: block !important; width: max-content !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* Pill container: single row, no background. */ body.page-id-14 .episode-filter-row > .episode-filter-buttons, body.page-id-14 .episode-filter-row .episode-filter-buttons, body.page-id-14 .episode-filter-buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; grid-template-columns: none !important; width: max-content !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; height: auto !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Each pill keeps its natural width. */ body.page-id-14 .episode-filter-buttons > .wp-block-button, body.page-id-14 .episode-filter-buttons .wp-block-button { display: block !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: start !important; } /* Inactive pill: white, same as Articles. */ body.page-id-14 .episode-filter-buttons .wp-block-button:not(.is-active) .wp-block-button__link, body.page-id-14 .episode-filter-buttons .wp-block-button:first-child:not(.is-active) .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 40px !important; margin: 0 !important; padding: 12px 20px !important; background: #FFFFFF !important; color: #1E2B33 !important; border: 1px solid #E5E7EB !important; border-radius: 9999px !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: none !important; } /* Active pill. */ body.page-id-14 .episode-filter-buttons .wp-block-button.is-active .wp-block-button__link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 40px !important; margin: 0 !important; padding: 12px 20px !important; background: #FF5148 !important; color: #FFFFFF !important; border: 1px solid #FF5148 !important; border-radius: 9999px !important; font-family: "Outfit", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; } } /* Small mobile: tighter pills, gutter matches the section. */ @media screen and (max-width: 480px) { body.page-id-14 .episode-filter-row { margin-left: -18px !important; margin-right: -18px !important; padding-left: 0px !important; padding-right: 18px !important; } body.page-id-14 .episode-filter-buttons { gap: 8px !important; } body.page-id-14 .episode-filter-buttons .wp-block-button .wp-block-button__link { min-height: 38px !important; padding: 11px 17px !important; font-size: 12px !important; } .single-podcast-episode .tgf-after-quote-content p { font-size: 18px !important; } .tgf-sponsor-description p{ font-size: 18px !important; } }