/* ============================================================ THE CALLOUT SHOW — design system White / Red (#E12A2C) / Black. Proxima Nova (Montserrat fallback). ============================================================ */ /* Proxima Nova is Adobe Fonts (paid). It loads first if a Typekit kit is added in ; otherwise Montserrat — the standard free, near- identical geometric-humanist substitute — renders live. */ :root{ --red:#E12A2C; --red-dark:#B71F22; --red-soft:#fbe7e7; --black:#121212; --ink:#1a1a1a; --white:#ffffff; --paper:#f7f7f8; --line:#e6e6e8; --muted:#6b6b70; --footer-gray:#767676; /* medium gray on light bg (per footer spec, AA-accessible) */ --red-ink:#bf1e22; /* darker brand red for small TEXT on light (AA contrast) */ --maxw:1180px; --r:14px; --shadow:0 10px 40px rgba(18,18,18,.10); --shadow-lg:0 24px 70px rgba(18,18,18,.18); --sans:"proxima-nova","Proxima Nova","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--sans); color:var(--ink); background:var(--white); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .container{width:90%;max-width:var(--maxw);margin:0 auto} /* ---------- type ---------- */ h1,h2,h3,h4{line-height:1.04;font-weight:800;letter-spacing:-.01em;color:var(--black)} .display{ font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.95; } h1{font-size:clamp(2.4rem,6vw,4.6rem)} h2{font-size:clamp(1.9rem,4vw,3rem)} h3{font-size:clamp(1.2rem,2.2vw,1.55rem)} p.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--muted);font-weight:500} .text-red{color:var(--red)} .eyebrow{ display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.22em; text-transform:uppercase;color:var(--red-ink);margin-bottom:18px; } .eyebrow.on-dark{color:#ff5a5c} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.55em;justify-content:center; font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.04em; font-size:.92rem;padding:15px 30px;border-radius:60px;border:2px solid transparent; cursor:pointer;transition:.18s ease;line-height:1;white-space:nowrap; } .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 12px 30px rgba(225,42,44,.35)} .btn-black{background:var(--black);color:#fff} .btn-black:hover{background:#000;transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--black);border-color:var(--black)} .btn-ghost:hover{background:var(--black);color:#fff} .btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)} .btn-ghost-light:hover{background:#fff;color:var(--black);border-color:#fff} .btn-lg{padding:18px 38px;font-size:1rem} .btn-sm{padding:11px 20px;font-size:.8rem} /* neon-green gradient CTA (nav "Get on the Show") — black text */ .btn-neon{background:linear-gradient(135deg,#39ff14 0%,#00e676 55%,#00c853 100%);color:#0a0a0a; box-shadow:0 4px 18px rgba(0,230,118,.45)} .btn-neon:hover{filter:brightness(1.06);transform:translateY(-2px); box-shadow:0 8px 26px rgba(57,255,20,.55);color:#0a0a0a} /* ---------- nav ---------- */ #nav-mount{display:block;height:74px} /* reserve space pre-JS to avoid layout shift */ .nav{ position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line); } .nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px} .nav-logo img{height:46px;width:auto;aspect-ratio:520/381} .nav-links{display:flex;align-items:center;gap:34px} .nav-links a{font-weight:700;font-size:.93rem;color:var(--ink);position:relative;transition:.15s} .nav-links a:hover{color:var(--red-ink)} .nav-links a.active{color:var(--red-ink)} .nav-links a:not(.btn)::after{ content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--red);transition:.2s; } .nav-links a:not(.btn):hover::after,.nav-links a.active:not(.btn)::after{width:100%} .nav-cta{display:flex;align-items:center;gap:14px} .nav-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:24px;position:relative} .nav-toggle span{position:absolute;left:0;width:100%;height:3px;background:var(--black);border-radius:3px;transition:.25s} .nav-toggle span:nth-child(1){top:0} .nav-toggle span:nth-child(2){top:10px} .nav-toggle span:nth-child(3){top:20px} .nav-toggle.open span:nth-child(1){top:10px;transform:rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){top:10px;transform:rotate(-45deg)} /* ---------- hero ---------- */ .hero{position:relative;padding:clamp(60px,9vw,120px) 0 clamp(56px,8vw,100px);overflow:hidden} .hero::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(900px 480px at 88% -8%,rgba(225,42,44,.10),transparent 60%), radial-gradient(700px 420px at 0% 110%,rgba(18,18,18,.05),transparent 60%); } .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center} .hero .lead{margin:22px 0 32px;max-width:540px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-logo-wrap{position:relative;display:flex;justify-content:center} .hero-logo-wrap img{width:100%;max-width:480px;aspect-ratio:900/660;filter:drop-shadow(0 30px 60px rgba(18,18,18,.18))} .vs-badge{ display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line); border-radius:60px;padding:9px 18px;font-weight:800;box-shadow:var(--shadow);font-size:.9rem; } .vs-badge b{color:var(--red-ink)} /* ---------- featured hero (large studio image) ---------- */ .hero-feature{padding-top:0} /* round logo, centered below the nav: 70px gap, 20% of screen width on all devices */ .hero-logo-top{display:block;width:20vw;margin:70px auto clamp(22px,3.4vw,34px)} .hero-logo-top img{width:100%;height:auto;aspect-ratio:900/660; filter:drop-shadow(0 16px 34px rgba(18,18,18,.16))} .hero-copy{text-align:center;max-width:780px;margin:0 auto} .ln2{display:inline-block} /* desktop refinements: bigger eyebrow, keep "One honest conversation." on one line */ @media(min-width:921px){ .hero-feature .hero-copy{max-width:1040px} .hero-feature .hero-copy .eyebrow{font-size:1.08rem;letter-spacing:.24em;margin-bottom:18px} .hero-feature h1{font-size:clamp(2.4rem,5vw,4.05rem)} .hero-feature .ln2{white-space:nowrap} } .hero-feature .lead{margin:20px auto 30px;max-width:600px} .hero-feature .hero-actions{justify-content:center} .hero-shot{position:relative;margin:clamp(36px,5vw,56px) auto 0;max-width:var(--maxw)} .hero-shot::before{ content:"";position:absolute;inset:-3% -2% -6%;z-index:-1;border-radius:30px; background:radial-gradient(60% 70% at 50% 8%,rgba(225,42,44,.22),transparent 70%);filter:blur(8px); } .hero-shot img{ width:100%;height:auto;aspect-ratio:5504/3072;object-fit:cover; border-radius:clamp(14px,2vw,22px);box-shadow:var(--shadow-lg); border:1px solid var(--line);background:#121212; } .hero-shot-badge{ position:absolute;left:50%;bottom:0;transform:translate(-50%,50%); display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line); border-radius:60px;padding:11px 22px;font-weight:800;box-shadow:var(--shadow); font-size:.9rem;white-space:nowrap;max-width:92%; } .hero-shot-badge b{color:var(--red-ink)} /* ---------- sections ---------- */ section{padding:clamp(56px,8vw,96px) 0} .section-head{max-width:720px;margin-bottom:46px} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .bg-paper{background:var(--paper)} .bg-black{background:var(--black);color:#fff} .bg-black h1,.bg-black h2,.bg-black h3{color:#fff} .bg-red{background:var(--red);color:#fff} .bg-red h1,.bg-red h2{color:#fff} /* ---------- stat / pillars ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .pillar{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;transition:.2s} .pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .pillar .ico{width:52px;height:52px;border-radius:13px;background:var(--red-soft);color:var(--red); display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:20px} .pillar h3{margin-bottom:10px} .pillar p{color:var(--muted);font-size:.98rem} /* ---------- episodes grid ---------- */ .ep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .ep-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; transition:.22s;display:flex;flex-direction:column; } .ep-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .ep-thumb{position:relative;aspect-ratio:16/9;background:#1c1c1c;overflow:hidden} .ep-thumb img{width:100%;height:100%;object-fit:cover;transition:.3s} .ep-card:hover .ep-thumb img{transform:scale(1.05)} .ep-thumb .play{ position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%; background:var(--red);display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.4);transition:.2s; } .ep-card:hover .ep-thumb .play{transform:scale(1.1)} .ep-thumb .play svg{width:24px;height:24px;fill:#fff;margin-left:3px} .ep-thumb .dur{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.82);color:#fff; font-size:.74rem;font-weight:700;padding:3px 8px;border-radius:6px} .ep-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .ep-topic{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink)} .ep-card h3{font-size:1.15rem;line-height:1.2} .ep-card .ep-desc{color:var(--muted);font-size:.92rem;flex:1; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ep-meta{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--muted); border-top:1px solid var(--line);padding-top:14px;margin-top:4px} .ep-socials{display:flex;gap:8px;margin-left:auto} .ep-socials a{width:26px;height:26px;border-radius:7px;background:var(--paper);display:flex; align-items:center;justify-content:center;color:var(--ink);transition:.15s} .ep-socials a:hover{background:var(--red);color:#fff} .ep-socials svg{width:14px;height:14px;fill:currentColor} .empty-state{text-align:center;padding:70px 20px;border:2px dashed var(--line);border-radius:var(--r);color:var(--muted)} .empty-state h3{margin-bottom:8px;color:var(--ink)} /* ---------- single episode ---------- */ .player-wrap{background:#000;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/9} .player-wrap iframe{width:100%;height:100%;border:0} .ep-detail-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 6px} .chip{background:var(--paper);border:1px solid var(--line);border-radius:60px;padding:7px 16px; font-size:.82rem;font-weight:700} .chip.red{background:var(--red);color:#fff;border-color:var(--red)} .watch-on{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .watch-on a{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.9rem; padding:12px 20px;border-radius:60px;border:1px solid var(--line);transition:.15s} .watch-on a:hover{border-color:var(--black);background:var(--black);color:#fff} .watch-on svg{width:18px;height:18px;fill:currentColor} /* ---------- guests / cta band ---------- */ .cta-band{text-align:center} .cta-band .lead{margin:18px auto 30px;max-width:620px;color:rgba(255,255,255,.85)} .cta-band.bg-red .lead{color:#fff} /* ---------- forms ---------- */ .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,4vw,44px);box-shadow:var(--shadow)} .field{margin-bottom:20px} .field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:8px;letter-spacing:.01em} .field input,.field textarea,.field select{ width:100%;font-family:var(--sans);font-size:1rem;padding:14px 16px;border:1.5px solid var(--line); border-radius:10px;background:#fff;color:var(--ink);transition:.15s; } .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(225,42,44,.12)} .field textarea{min-height:130px;resize:vertical} .field select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23E12A2C' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:42px} .field select:invalid{color:#9a9a9f} .field select option{color:var(--ink)} .field .hint{font-size:.78rem;color:var(--muted);margin-top:6px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .radio-row{display:flex;gap:12px;flex-wrap:wrap} .radio-opt{flex:1;min-width:170px;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line); border-radius:10px;padding:14px 16px;cursor:pointer;font-weight:700;transition:.15s} .radio-opt:hover{border-color:var(--red)} .radio-opt input{width:18px;height:18px;accent-color:var(--red);flex-shrink:0} .radio-opt small{color:var(--muted);font-weight:400} .radio-opt:has(input:checked){border-color:var(--red);background:var(--red-soft)} .form-msg{padding:14px 16px;border-radius:10px;font-weight:600;font-size:.92rem;margin-bottom:18px;display:none} .form-msg.ok{display:block;background:#e8f7ec;color:#1b7a37;border:1px solid #bce5c7} .form-msg.err{display:block;background:#fdeaea;color:#b71f22;border:1px solid #f3c4c4} .form-msg.info{display:block;background:#eef2fb;color:#2a4ea8;border:1px solid #cdd9f3} /* ---------- legal pages ---------- */ .legal{padding:60px 0 80px} .legal .container{max-width:820px} .legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:8px} .legal .updated{color:var(--muted);font-size:.9rem;margin-bottom:36px} .legal h2{font-size:1.4rem;margin:34px 0 12px} .legal h3{font-size:1.1rem;margin:22px 0 8px} .legal p,.legal li{color:#3a3a3e;font-size:1rem;margin-bottom:12px} .legal ul,.legal ol{margin:0 0 14px 22px} .legal a{color:var(--red-ink);font-weight:600;text-decoration:underline} /* ---------- admin ---------- */ .admin-shell{max-width:920px;margin:0 auto} .upload-zone{border:2.5px dashed var(--line);border-radius:var(--r);padding:46px 24px;text-align:center; transition:.18s;cursor:pointer;background:var(--paper)} .upload-zone:hover,.upload-zone.drag{border-color:var(--red);background:var(--red-soft)} .upload-zone .big{font-size:2.4rem;margin-bottom:8px} .progress{height:12px;background:var(--line);border-radius:60px;overflow:hidden;margin:18px 0 6px;display:none} .progress .bar{height:100%;width:0;background:var(--red);transition:width .2s} .admin-ep-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line); border-radius:12px;padding:14px 16px;margin-bottom:12px} .admin-ep-row img{width:96px;height:54px;object-fit:cover;border-radius:7px;background:#1c1c1c;flex-shrink:0} .admin-ep-row .meta{flex:1;min-width:0} .admin-ep-row .meta h4{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .admin-ep-row .meta span{font-size:.8rem;color:var(--muted)} .badge{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px} .badge.live{background:#e8f7ec;color:#1b7a37} .badge.proc{background:#fff4e0;color:#b5740a} /* ---------- footer (spec: 90% width, 9px, gray) ---------- */ #site-footer{background:#fff;border-top:1px solid var(--line);padding:40px 0 30px} #site-footer .foot-inner{width:90%;max-width:var(--maxw);margin:0 auto} #site-footer .foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px; padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:22px} #site-footer .foot-brand img{height:40px;width:auto;aspect-ratio:520/381;margin-bottom:12px} #site-footer .foot-brand p{font-size:.85rem;color:var(--muted);max-width:330px} #site-footer .foot-col .foot-h{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--black);margin-bottom:12px;font-weight:800} #site-footer .foot-col a{display:block;font-size:.85rem;color:var(--muted);margin-bottom:9px;transition:.15s} #site-footer .foot-col a:hover{color:var(--red-ink)} #site-footer .foot-social{display:flex;gap:10px;margin-top:6px} #site-footer .foot-social a{width:36px;height:36px;border-radius:9px;background:var(--paper); display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.15s} #site-footer .foot-social a:hover{background:var(--red);color:#fff} #site-footer .foot-social svg{width:17px;height:17px;fill:currentColor} /* 9px disclaimer block, 90% width, medium gray on white */ #site-footer .foot-legal{font-size:9px;line-height:1.7;color:var(--footer-gray)} #site-footer .foot-legal p{margin-bottom:8px;color:var(--footer-gray)} #site-footer .foot-legal a{color:var(--footer-gray);text-decoration:underline} #site-footer .foot-legal a:hover{color:var(--red-ink)} #site-footer .foot-links9{margin-top:6px} #site-footer .foot-links9 a{margin-right:12px;white-space:nowrap} /* ---------- utilities ---------- */ .text-center{text-align:center} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .hidden{display:none!important} .spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff; border-radius:50%;animation:spin .7s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} .fade-up{opacity:0;transform:translateY(26px);transition:.6s cubic-bezier(.2,.7,.2,1)} .fade-up.in{opacity:1;transform:none} /* Desktop only: tighten top spacing on these pages (pull content up 60px) */ @media(min-width:921px){ body[data-page="episodes"] main, body[data-page="about"] main, body[data-page="guest"] main, body[data-page="contact"] main{margin-top:-60px} /* widen these hero sections so the headline fits on 2 lines (no resize) */ body[data-page="about"] .hero > .container, body[data-page="guest"] .hero > .container{max-width:1120px!important} } /* ---------- responsive ---------- */ @media(max-width:920px){ .hero-grid{grid-template-columns:1fr;gap:30px;text-align:center} .hero-actions{justify-content:center} .hero .lead{margin-left:auto;margin-right:auto} .hero-logo-wrap{order:-1} /* hero logo at half size on mobile only (desktop unchanged) */ .hero-logo-wrap img{max-width:170px} .pillars{grid-template-columns:1fr} .ep-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ /* hero badge: allow it to wrap and sit fully below the image on small screens */ .hero-shot-badge{ position:static;transform:none;margin:18px auto 0;display:flex;text-align:center; white-space:normal;font-size:.82rem;line-height:1.4;max-width:100%; } } @media(max-width:760px){ .nav-links{ position:fixed;top:74px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch; gap:0;padding:10px 0 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow); transform:translateY(-130%);transition:.28s;max-height:calc(100vh - 74px);overflow:auto; } .nav-links.open{transform:none} .nav-links a{padding:14px 28px;font-size:1rem} .nav-links a:not(.btn)::after{display:none} .nav-links .btn{margin:10px 28px 0;text-align:center} .nav-toggle{display:block} .grid-2{grid-template-columns:1fr} .ep-grid{grid-template-columns:1fr} #site-footer .foot-top{flex-direction:column;gap:22px} /* mobile: bring the whole homepage hero up 30px */ .hero-feature .hero-logo-top{margin-top:40px} } @media(max-width:420px){ body{font-size:16px} .btn{padding:13px 22px} }