{"id":170,"date":"2025-11-11T22:56:04","date_gmt":"2025-11-11T22:56:04","guid":{"rendered":"https:\/\/4thmanpodcast.com\/?page_id=170"},"modified":"2025-11-11T22:56:04","modified_gmt":"2025-11-11T22:56:04","slug":"countdown","status":"publish","type":"page","link":"https:\/\/4thmanpodcast.com\/","title":{"rendered":"Countdown"},"content":{"rendered":"\n<!-- 4th Man Podcast \u2013 Countdown Block (WordPress-friendly, inherits theme header\/footer) -->\n<!-- Usage: Add a \"Custom HTML\" block on a normal page (Default template). Paste everything below. -->\n\n<section class=\"fmp-countdown\" data-target=\"2026-01-15T19:00:00-06:00\" data-finished-text=\"We're live! Tap below to listen.\">\n  <style>\n    \/* 4th Man Podcast color scheme *\/\n    .fmp-countdown { \n      --fmp-radius: 18px;\n      --fmp-gap: 14px;\n      --fmp-text: var(--wp--preset--color--foreground, currentColor);\n      --fmp-muted: color-mix(in oklab, var(--fmp-text) 60%, #8a8fa3);\n      --fmp-primary: #f69e24; \/* brand amber *\/\n      --fmp-secondary: #e8dec3; \/* soft beige accent *\/\n      --fmp-surface: color-mix(in oklab, var(--fmp-text) 8%, transparent);\n      --fmp-border: color-mix(in oklab, var(--fmp-text) 12%, transparent);\n\n      max-width: 1000px;\n      margin-inline: auto;\n      padding: clamp(16px, 4vw, 28px);\n      border: 1px solid var(--fmp-border);\n      border-radius: var(--fmp-radius);\n      background: linear-gradient(180deg, color-mix(in oklab, var(--fmp-text) 3%, transparent), color-mix(in oklab, var(--fmp-text) 6%, transparent));\n    }\n\n    .fmp-countdown header { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }\n    .fmp-brand { display: flex; gap: 12px; align-items: center; }\n    .fmp-logo { width: 48px; height: 48px; border-radius: 12px; background: conic-gradient(from 210deg, var(--fmp-primary), var(--fmp-secondary), var(--fmp-primary)); box-shadow: 0 8px 26px color-mix(in oklab, var(--fmp-primary) 30%, transparent); }\n    .fmp-title { margin: 0; font-size: clamp(22px, 2.2vw, 32px); color: var(--fmp-text); }\n    .fmp-sub { margin: 4px 0 0; color: var(--fmp-muted); font-size: clamp(14px, 1.5vw, 16px); }\n\n    .fmp-bar { height: 6px; border-radius: 6px; margin: 14px 0; background: linear-gradient(90deg, var(--fmp-primary), var(--fmp-secondary)); opacity: .85; }\n\n    .fmp-timer { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--fmp-gap); margin: 12px 0 6px; }\n    .fmp-unit { background: var(--fmp-surface); border: 1px solid var(--fmp-border); border-radius: 14px; padding: 16px 12px; text-align: center; }\n    .fmp-value { font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(28px, 5vw, 48px); line-height: 1; color: var(--fmp-text); }\n    .fmp-label { margin-top: 6px; color: var(--fmp-muted); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; }\n\n    .fmp-meta { display:flex; gap:12px; align-items:center; flex-wrap:wrap; color: var(--fmp-muted); font-size: 14px }\n    .fmp-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fmp-primary); box-shadow: 0 0 12px var(--fmp-primary); }\n\n    .fmp-ctas { display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px }\n    .fmp-btn { appearance: none; border: none; text-decoration: none; cursor: pointer; font-weight: 700; border-radius: 12px; padding: 12px 16px; display:inline-flex; align-items:center; gap:8px }\n    .fmp-btn.primary { color: #0b0d12; background: linear-gradient(90deg, var(--fmp-primary), var(--fmp-secondary)); }\n    .fmp-btn.secondary { color: var(--fmp-text); background: var(--fmp-surface); border: 1px solid var(--fmp-border); }\n\n    .fmp-foot { margin-top: 14px; color: var(--fmp-muted); font-size: 12px }\n\n    @media (max-width: 560px) { .fmp-timer { grid-template-columns: repeat(2, 1fr); } }\n  <\/style>\n\n  <header>\n    <div class=\"fmp-brand\">\n      <div class=\"fmp-logo\" aria-hidden=\"true\"><\/div>\n      <div>\n        <h2 class=\"fmp-title\" id=\"fmp-countdown-title\">Next Episode Drops Soon<\/h2>\n        <p class=\"fmp-sub\">New episodes every week \u2014 subscribe so you don&#8217;t miss the release.<\/p>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <div class=\"fmp-bar\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"fmp-timer\" aria-live=\"polite\" aria-atomic=\"true\">\n    <div class=\"fmp-unit\"><div class=\"fmp-value\" data-fmp-part=\"days\">\u2013<\/div><div class=\"fmp-label\">Days<\/div><\/div>\n    <div class=\"fmp-unit\"><div class=\"fmp-value\" data-fmp-part=\"hours\">\u2013<\/div><div class=\"fmp-label\">Hours<\/div><\/div>\n    <div class=\"fmp-unit\"><div class=\"fmp-value\" data-fmp-part=\"minutes\">\u2013<\/div><div class=\"fmp-label\">Minutes<\/div><\/div>\n    <div class=\"fmp-unit\"><div class=\"fmp-value\" data-fmp-part=\"seconds\">\u2013<\/div><div class=\"fmp-label\">Seconds<\/div><\/div>\n  <\/div>\n\n  <div class=\"fmp-meta\"><span class=\"fmp-dot\" aria-hidden=\"true\"><\/span> <span id=\"fmp-event-meta\">Counting down to <strong>Jan 15, 2026, 7:00 PM CST<\/strong><\/span><\/div>\n\n  <div class=\"fmp-ctas\">\n    <a class=\"fmp-btn primary\" href=\"https:\/\/4thmanpodcast.com\" target=\"_blank\" rel=\"noopener\">Listen at 4thManPodcast.com<\/a>\n    <a class=\"fmp-btn secondary\" href=\"https:\/\/podcasts.apple.com\/\" target=\"_blank\" rel=\"noopener\">Apple Podcasts<\/a>\n    <a class=\"fmp-btn secondary\" href=\"https:\/\/open.spotify.com\/\" target=\"_blank\" rel=\"noopener\">Spotify<\/a>\n    <a class=\"fmp-btn secondary\" href=\"https:\/\/www.youtube.com\/\" target=\"_blank\" rel=\"noopener\">YouTube<\/a>\n  <\/div>\n\n  <p class=\"fmp-foot\">Tip: set the <code>data-target<\/code> on the <code>.fmp-countdown<\/code> element to your next release time in ISO 8601 (e.g., <code>2026-01-15T19:00:00-06:00<\/code>). Colors now match the 4th Man Podcast brand palette (#f69e24 and #e8dec3).<\/p>\n\n  <script>\n    (function(){\n      const root = document.currentScript.closest('.fmp-countdown');\n      if(!root) return;\n      const targetAttr = root.getAttribute('data-target');\n      const doneText = root.getAttribute('data-finished-text') || \"We're live!\";\n      const target = new Date(targetAttr);\n      const parts = {\n        days: root.querySelector('[data-fmp-part=\"days\"]'),\n        hours: root.querySelector('[data-fmp-part=\"hours\"]'),\n        minutes: root.querySelector('[data-fmp-part=\"minutes\"]'),\n        seconds: root.querySelector('[data-fmp-part=\"seconds\"]'),\n      };\n      function pad(n){ return (n<10?'0':'')+n; }\n      function formatMeta(d){\n        try {\n          return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(d);\n        } catch(e){ return d.toString(); }\n      }\n      function tick(){\n        const now = new Date();\n        const diff = target - now;\n        if (isNaN(diff)) {\n          Object.values(parts).forEach(el=> el.textContent='?');\n          const m = root.querySelector('#fmp-event-meta');\n          if(m) m.textContent = 'Invalid countdown date';\n          return;\n        }\n        if (diff <= 0) {\n          Object.values(parts).forEach(el=> el.textContent='00');\n          const m = root.querySelector('#fmp-event-meta');\n          if(m) m.textContent = doneText;\n          return;\n        }\n        const total = Math.floor(diff\/1000);\n        const d = Math.floor(total\/86400);\n        const h = Math.floor((total%86400)\/3600);\n        const m = Math.floor((total%3600)\/60);\n        const s = total%60;\n        parts.days.textContent = pad(d);\n        parts.hours.textContent = pad(h);\n        parts.minutes.textContent = pad(m);\n        parts.seconds.textContent = pad(s);\n      }\n      const meta = root.querySelector('#fmp-event-meta');\n      if(meta && !\/Invalid|We're live!\/i.test(meta.textContent)) {\n        meta.innerHTML = 'Counting down to <strong>'+ formatMeta(target) +'<\/strong>';\n      }\n      tick();\n      const id = setInterval(tick, 1000);\n      window.addEventListener('beforeunload', ()=> clearInterval(id));\n      document.addEventListener('visibilitychange', ()=> { if(!document.hidden) tick(); });\n    })();\n  <\/script>\n<\/section>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next Episode Drops Soon New episodes every week \u2014 subscribe so you don&#8217;t miss the release. \u2013 Days \u2013 Hours \u2013 Minutes \u2013 Seconds Counting down to Jan 15, 2026, 7:00 PM CST Listen at 4thManPodcast.com Apple Podcasts Spotify YouTube Tip: set the data-target on the .fmp-countdown element to your next release time in ISO [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-170","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/4thmanpodcast.com\/index.php?rest_route=\/wp\/v2\/pages\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/4thmanpodcast.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/4thmanpodcast.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/4thmanpodcast.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4thmanpodcast.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=170"}],"version-history":[{"count":4,"href":"https:\/\/4thmanpodcast.com\/index.php?rest_route=\/wp\/v2\/pages\/170\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/4thmanpodcast.com\/index.php?rest_route=\/wp\/v2\/pages\/170\/revisions\/174"}],"wp:attachment":[{"href":"https:\/\/4thmanpodcast.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}