/* Round 3 tribunal fixes - shipped 2026-08-30 * Cardone (revenue capture) + Gary (attention) + Jobs (design craft) * Loaded site-wide via in */ /* ============================================================ 1. STICKY MOBILE BOOK-JEREMY BAR (Cardone #3) ============================================================ Shows on <=768px, hides on /speaking (already has fee grid), /thanks* (already converted), /shop* (Shopify territory). Hides on scroll-down, shows on scroll-up (respectful, not spammy). */ .jgb-mobile-cta { display: none; } @media (max-width: 768px) { .jgb-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(14, 14, 12, 0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(196, 144, 64, 0.4); padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35); transform: translateY(0); transition: transform 0.28s ease; } .jgb-mobile-cta[hidden] { display: flex; transform: translateY(120%); } .jgb-mobile-cta-copy { flex: 1; min-width: 0; } .jgb-mobile-cta-eyebrow { font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-bright, #C49040); margin: 0 0 0.15rem; line-height: 1; } .jgb-mobile-cta-headline { font-family: var(--font-serif, "Source-Reg", serif); font-size: 0.95rem; color: #E8E2D5; margin: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jgb-mobile-cta a.jgb-mobile-cta-btn { flex: 0 0 auto; min-height: 44px; padding: 0.6rem 1rem; background: var(--brass-bright, #C49040); color: #0E0E0C; font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: background 0.2s; } .jgb-mobile-cta a.jgb-mobile-cta-btn:active { background: #B08D57; } /* Push content up so the sticky bar doesn't overlap the last footer row */ body.has-mobile-cta { padding-bottom: 64px; } } /* ============================================================ 2. NEW EPISODE THIS WEEK RIBBON (Gary #16) ============================================================ Sits above the top nav on non-podcast pages so mobile viewers see fresh content pointer without the interstitial ribbon feel. Auto-hides on /podcast (already there) and /thanks* pages. */ .jgb-episode-ribbon { display: block; background: linear-gradient(90deg, #A0282A 0%, #7A1E1F 100%); color: #F0EAD9; text-align: center; padding: 0.5rem 1rem; font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; position: relative; z-index: 95; } .jgb-episode-ribbon a { color: #F0EAD9; text-decoration: underline; text-underline-offset: 2px; /* R3 audit fix: ensure 44px min tap target on mobile */ display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; vertical-align: middle; } @media (max-width: 768px) { .jgb-episode-ribbon { min-height: 44px; } .jgb-episode-ribbon a { line-height: 44px; } } /* R3 audit fix: enlarge tap targets for text-only links on mobile Footer partner links, feature-in-press chips, book title links Site-wide, not just home. */ @media (max-width: 768px) { .footer a, footer a, .footer-links a, .partner-links a, .press-chips a, .book-links a, a.book-title-link, .featured-in a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 6px; } /* Preserve inline layout inside paragraphs by NOT applying to a.inline-link */ a.inline-link, p a.inline, .prose a { min-height: 0; line-height: inherit; padding: 0; } } /* ========================================================== R3 audit hotfix: "The rooms I have been in" grid on mobile Prior CSS: `display: flex` + `flex: 0 0 70%` + horizontal scroll below 900px. On iPhone 14 this collapsed to 10 vertical stripes with one letter per line (word-break: break-word inside a flex-shrunk child). Fix: force `display: grid` with 2 columns on mobile, natural image aspect, wrapping captions. Uses !important because the flex rule at style.css line 2444 sits inside a media query with equal specificity and later cascade order. ========================================================== */ @media (max-width: 900px) { .co-signed-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; overflow-x: visible !important; scroll-snap-type: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .co-signed-grid > li, .co-signed-grid > .co-signed-card { flex: none !important; width: auto !important; min-width: 0; scroll-snap-align: none !important; } .co-signed-card p, .co-signed-card figcaption, .co-signed-name, .co-signed-context { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } .co-signed-name { font-size: 0.62rem !important; letter-spacing: 0.10em !important; line-height: 1.2 !important; } .co-signed-context { font-size: 0.78rem !important; line-height: 1.25 !important; } } .jgb-episode-ribbon a:hover { color: #FFF; } .jgb-episode-ribbon .jgb-episode-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #C49040; vertical-align: middle; margin: 0 0.5rem 0 0; animation: jgb-pulse 2s infinite ease-in-out; } @keyframes jgb-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.25); } } @media (max-width: 480px) { .jgb-episode-ribbon { font-size: 0.65rem; padding: 0.45rem 0.75rem; } } /* ============================================================ 3. SPEAKER INQUIRY PROGRESSIVE DISCLOSURE (Cardone #4) ============================================================ */ .sp-form-step-lbl { font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-bright, #C49040); margin: 0 0 1rem; } .sp-form-next { min-height: 44px; padding: 0.8rem 1.6rem; background: var(--brass-bright, #C49040); color: #0E0E0C; font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; border: 0; border-radius: 3px; cursor: pointer; transition: background 0.2s, opacity 0.2s; margin-top: 0.5rem; } .sp-form-next:disabled { opacity: 0.45; cursor: not-allowed; } .sp-form-next:not(:disabled):hover { background: #E0A85F; } .sp-form-step[data-step="2"] { animation: sp-step-slide-in 0.28s ease-out; } @keyframes sp-step-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 4. CURATE HOME PODCAST WALL ON MOBILE (Jobs #7) Show first 6 tiles on <=768, hide the rest, restore on desktop. Adds 'See all 33 episodes' anchor visible everywhere. ============================================================ */ @media (max-width: 768px) { .onmic-grid > .mic-tile:nth-child(n+7) { display: none; } } .onmic-cta .onmic-see-all { display: inline-block; margin-top: 0.6rem; color: var(--brass-bright, #C49040); font-family: var(--font-mono, monospace); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } .onmic-cta .onmic-see-all:hover { color: #E0A85F; } /* ============================================================ 5. JOBS UTILITY CLASSES (Jobs #5) ============================================================ Replace inline styles on home hero + repeating sections. Sub-list: .eyebrow-inline, .row-tight, .pullquote-body */ .eyebrow-inline { font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-bright, #C49040); margin: 0 0 0.5rem; } .row-tight { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .pullquote-body { font-family: var(--font-serif, "Source-Reg", serif); font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; color: #E8E2D5; max-width: 62ch; font-style: italic; } .mt-tight { margin-top: 0.5rem; } .mt-loose { margin-top: 2rem; } .mb-tight { margin-bottom: 0.5rem; } .brass-accent { color: var(--brass-bright, #C49040); } .text-mono-small { font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted, #8A847C); }