/* ============================================================ Shaikh Yasir AlJabri Madani — Official Site Emerald & Gold · Editorial media-forward layout ============================================================ */ /* ── Tokens ─────────────────────────────────────────────────── */ :root { /* Brand */ --emerald: #1a3d2b; --emerald-light: #2a5c42; --emerald-mid: #234d37; --emerald-dark: #0f2419; --emerald-deep: #0a1a12; --gold: #c9a84c; --gold-light: #e2c47a; --gold-pale: #f5e9c8; --gold-dark: #a07830; /* icons, gradients, hovers (3:1 graphics) */ --gold-text: #7a5a1e; /* small gold text on cream/white — 5.9:1 */ --live: #b23b2c; /* "on air" accent — used sparingly, only for live-status signals */ /* Surfaces */ --cream: #faf6ee; --cream-dark: #f2ebdd; --white: #ffffff; /* Ink */ --ink: #16180f; --ink-muted: #56594a; --ink-faint: #6b6e5e; --on-dark: #f3efe4; --on-dark-muted: #b9c4b6; --border: #e4dcc8; --border-dark: rgba(226, 196, 122, 0.22); /* Type */ --font-display: 'Cinzel Decorative', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Space (density 4 — standard/spacious) */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --shadow-sm: 0 1px 2px rgba(26,61,43,.05), 0 2px 6px rgba(26,61,43,.06); --shadow-md: 0 4px 10px rgba(26,61,43,.07), 0 10px 24px rgba(26,61,43,.08); --shadow-lg: 0 8px 18px rgba(26,61,43,.10), 0 22px 48px rgba(26,61,43,.14); --shadow-gold: 0 8px 26px rgba(201,168,76,.30); --nav-h: 96px; /* resting header height */ --nav-h-stuck: 72px; /* compacts once the page scrolls */ } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x: hidden on BOTH html and body, not just body — found live on mobile: #shorts-rail deliberately bleeds edge-to-edge via a negative margin (see its own comment), and with overflow-x:hidden only on body, that still widens the effective viewport uses for computing `position: fixed; right: 0` (the sticky Mixlr/Apple Podcasts tabs) — body's own overflow was correctly clipped (no actual horizontal scrollbar/swipe existed), but the tabs still got positioned against the wider, uncomputed width and then had their overflow clipped, showing up as the tabs being cut off at the screen edge. html needs the same rule for `position: fixed` right/left offsets to resolve against the true visual viewport. */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Guarantees `hidden` always wins. Author-origin `display` rules beat the browser's own [hidden]{display:none} regardless of specificity, so any future class that sets `display` on a JS-toggled element would otherwise silently stop hiding — this is a defensive net, not a fix for a known bug here (admin.css needed this one for real; see its comment). */ [hidden] { display: none !important; } /* Focus — visible on every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; } .section--dark a:focus-visible, .section--dark button:focus-visible, .section--dark input:focus-visible, .section--dark select:focus-visible, .section--dark textarea:focus-visible, .library-band a:focus-visible, .footer a:focus-visible, .footer button:focus-visible, .footer input:focus-visible { outline-color: var(--gold-light); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: 8px; translate: -50% -160%; z-index: 200; background: var(--gold); color: var(--emerald-dark); padding: 10px 20px; border-radius: 999px; font-weight: 600; transition: translate .2s var(--ease); } .skip-link:focus { translate: -50% 0; } /* ── Layout primitives ──────────────────────────────────────── */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-3); } .section { padding: var(--sp-7) 0; } .section--alt { background: var(--white); } .section--dark { background: var(--emerald); color: var(--on-dark); } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--sp-2); display: flex; align-items: center; gap: 8px; } .eyebrow--gold { color: var(--gold-light); } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 4px rgba(201,168,76,.2); } .section-header { margin-bottom: var(--sp-5); max-width: 720px; } .section-header--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .section-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--emerald); } .section-title--light { color: var(--gold-pale); } .section-sub { color: var(--ink-muted); max-width: 46ch; } .section-sub--center { margin: var(--sp-2) auto 0; text-align: center; } .section-header:not(.section-header--split) { margin-left: auto; margin-right: auto; text-align: center; } .section-header:not(.section-header--split) .eyebrow { justify-content: center; } .link-more { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; /* comfortable tap target */ font-weight: 600; font-size: .92rem; color: var(--emerald-light); transition: color .2s var(--ease); } .link-more svg { width: 15px; height: 15px; } /* Underline hugs the text rather than the padded tap area */ .link-more::after { content: ''; position: absolute; left: 0; right: 0; bottom: 11px; height: 1.5px; background: var(--gold); scale: 0 1; transform-origin: left; transition: scale .25s var(--ease); } .link-more:hover { color: var(--gold-dark); } .link-more:hover::after { scale: 1 1; } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .btn svg { width: 17px; height: 17px; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--emerald); color: var(--gold-pale); box-shadow: var(--shadow-md); } .btn--primary:hover { background: var(--emerald-light); box-shadow: var(--shadow-lg); } .btn--gold { background: var(--gold); color: var(--emerald-dark); box-shadow: var(--shadow-gold); } .btn--gold:hover { background: var(--gold-light); } .btn--ghost { border: 1.5px solid var(--border); color: var(--emerald); background: var(--white); } .btn--ghost:hover { border-color: var(--gold); color: var(--gold-dark); } /* Outline on dark surfaces */ .btn--outline { border: 1.5px solid rgba(226,196,122,.55); color: var(--gold-pale); background: rgba(250,246,238,.06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn--outline:hover { border-color: var(--gold); background: rgba(201,168,76,.18); } .btn--lg { min-height: 56px; padding: 0 34px; font-size: 1.02rem; } .btn--block { width: 100%; } /* ── Navbar ─────────────────────────────────────────────────── */ .navbar { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); background: rgba(250, 246, 238, 0); transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease), height .3s var(--ease); } .navbar.is-stuck { height: var(--nav-h-stuck); background: rgba(15, 36, 25, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border-dark), var(--shadow-lg); } .navbar-inner { max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .navbar-brand { display: flex; align-items: center; min-height: 44px; flex: none; } .navbar-logo { height: 68px; width: auto; transition: height .3s var(--ease); } .navbar.is-stuck .navbar-logo { height: 48px; } /* Lifts the lockup off the photo it sits on over the hero — kept even once the bar turns solid, a soft shadow on a gold mark never hurts. */ .navbar-logo--dark { filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); } /* The bar stays dark (hero or stuck, it's always a dark emerald surface now), so the light-on-dark lockup is the only one ever shown. */ .navbar-logo--light { display: none; } .navbar-nav { display: flex; align-items: center; gap: var(--sp-3); } .navbar-nav > a { font-size: .93rem; font-weight: 500; color: var(--on-dark); position: relative; padding: 6px 0; transition: color .2s var(--ease); } .navbar-nav > a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--gold); scale: 0 1; transform-origin: left; transition: scale .25s var(--ease); } .navbar-nav > a:hover { color: var(--gold-light); } .navbar-nav > a:hover::after, .navbar-nav > a.is-active::after { scale: 1 1; } .navbar-nav > a.is-active { color: var(--gold-light); font-weight: 600; } /* Selector must out-rank `.navbar-nav > a` (0,1,1), or the link rule's `padding: 6px 0` wins and the pill loses its horizontal padding. */ .navbar-nav > a.navbar-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--gold); color: var(--emerald-dark) !important; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background-color .2s var(--ease), transform .2s var(--ease); } .navbar-cta::after { display: none !important; } .navbar-nav > a.navbar-cta:hover { background: var(--gold-light); transform: translateY(-2px); } .navbar-toggle { display: none; width: 48px; height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .navbar-toggle span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--gold-pale); transition: transform .3s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease); } .navbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .navbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Hero (full-bleed dark, portrait bleeding off the left) ──── */ .hero { position: relative; overflow: hidden; min-height: min(100svh, 940px); display: flex; align-items: center; padding: calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-6); background: radial-gradient(90% 120% at 72% 45%, rgba(42,92,66,.55), transparent 62%), radial-gradient(70% 90% at 92% 8%, rgba(201,168,76,.16), transparent 60%), linear-gradient(125deg, #08150e 0%, var(--emerald-deep) 45%, #0d2418 100%); color: var(--on-dark); } /* Eight-point Islamic star lattice */ .hero-pattern { position: absolute; inset: 0; opacity: .6; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M40 4 52 16 68 16 68 32 80 40 68 48 68 64 52 64 40 76 28 64 12 64 12 48 0 40 12 32 12 16 28 16Z'/%3E%3Cpath d='M40 16 64 40 40 64 16 40Z'/%3E%3C/g%3E%3C/svg%3E"); mask-image: linear-gradient(to bottom right, #000, transparent 72%); -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 72%); } /* Portrait: full-height on the left, dissolving into the background */ /* Spans the whole hero so the wash gradient is continuous — a box edge partway across would show as a vertical seam. */ .hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero-media img { /* Narrower box = less scale needed to cover it = more of the photo visible (object-fit:cover always scales by whichever of width/height is the tighter constraint; width was forcing a ~1.5x crop before). */ width: min(50%, 700px); height: 100%; object-fit: cover; object-position: 58% 10%; /* nudges the photo's cool studio backdrop toward the emerald palette */ filter: saturate(.78) hue-rotate(-14deg) contrast(1.05) brightness(.94); /* Long, eased dissolve so no hard edge is ever visible */ -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.98) 30%, rgba(0,0,0,.86) 48%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.1) 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.98) 30%, rgba(0,0,0,.86) 48%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.1) 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%); mask-composite: intersect; } /* Emerald wash that ties the photo into the hero gradient. Every stop ends fully transparent — a solid stop at the box edge would draw a visible vertical seam. */ .hero-media-fade { position: absolute; inset: 0; background: /* keeps the light-on-dark navbar legible over bright parts of the photo */ linear-gradient(to bottom, rgba(8,21,14,.55) 0%, rgba(8,21,14,0) 16%), linear-gradient(to right, rgba(8,21,14,.46) 0%, rgba(8,21,14,.12) 26%, rgba(9,24,16,.30) 50%, rgba(10,26,18,.55) 68%, rgba(10,26,18,.30) 100%), linear-gradient(to top, rgba(8,21,14,.88), rgba(8,21,14,0) 48%); } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 44% 1fr; gap: var(--sp-5); align-items: center; width: 100%; } .hero-copy { grid-column: 2; } .hero-welcome { font-size: .8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--sp-2); } .hero-title { font-family: var(--font-display); font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 700; line-height: 1.06; letter-spacing: -.015em; color: var(--gold-pale); margin-bottom: var(--sp-2); text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hero-title-accent { background: linear-gradient(100deg, var(--gold-light), var(--gold), var(--gold-light)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lead { font-size: 1.04rem; color: var(--on-dark-muted); max-width: 54ch; margin-bottom: var(--sp-3); } .hero-lead strong { color: var(--gold-pale); font-weight: 600; } .hero-credentials { display: flex; flex-wrap: wrap; gap: 10px var(--sp-3); margin-bottom: var(--sp-4); } .hero-credentials li { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: var(--on-dark-muted); } .hero-credentials svg { width: 17px; height: 17px; flex: none; color: var(--gold); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); } .hero-more { margin-bottom: var(--sp-2); } .hero-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--gold-light); transition: color .2s var(--ease), gap .2s var(--ease); } .hero-more svg { width: 16px; height: 16px; } .hero-more a:hover { color: var(--gold-pale); gap: 12px; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.55); } 70% { box-shadow: 0 0 0 9px rgba(201,168,76,0); } } /* ── Live Broadcast — slim status strip, docked to the hero ────── Deliberately a compact single-row bar (~1/3 the height of the section this replaced), not a full content section — the Mixlr/YouTube/ Facebook players and their own context live in the sticky drawers and platform links now, this is just a quick "is it live right now" glance plus one-click ways to get there. Nested inside `.hero` in the markup and pinned to its bottom edge (`.hero` is the positioning parent — `position:relative` there) rather than flowing as its own section below it, so it's always visible together with the hero instead of requiring a scroll to reach. */ .live-section { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; background: linear-gradient(150deg, var(--emerald-dark), var(--emerald-deep)); border-top: 1px solid var(--border-dark); color: var(--on-dark); /* "3x reduced" was the initial ask, but 86px (a ~6x cut, var(--sp-3) padding) is the version the user actually confirmed looking good once both were seen side by side — kept over the more literal 3x/ 175px version. */ padding: var(--sp-3) 0; } .live-pattern { position: absolute; inset: 0; opacity: .4; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-opacity='0.14' stroke-width='1'%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3Cpath d='M30 2 44 16 58 30 44 44 30 58 16 44 2 30 16 16Z'/%3E%3C/g%3E%3C/svg%3E"); } .live-strip { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; } .live-strip-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .live-strip-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); flex: none; padding-right: 12px; border-right: 1px solid var(--border-dark); } .live-status { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .9rem; font-weight: 600; color: var(--gold-pale); } .live-status .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; animation: pulse 2.2s var(--ease) infinite; } .live-status .live-dot--on { background: var(--live); animation: pulse-live 1.4s var(--ease) infinite; } @keyframes pulse-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(178,59,44,.6); } 70% { box-shadow: 0 0 0 10px rgba(178,59,44,0); } } .live-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* Scoped smaller than the site's default 48px-min-height .btn, so the strip stays slim — these three (Listen Live / YouTube / Facebook) are quick links, not primary calls to action. */ .live-actions .btn { min-height: 38px; padding: 0 15px; font-size: .82rem; } .live-actions .btn svg { width: 14px; height: 14px; } @media (max-width: 640px) { .live-strip-status { width: 100%; } } /* ── Interior page header (biography.html) ────────────────────── Dark, like the home hero, so the transparent light-on-dark navbar stays legible on every page. */ .page-header { position: relative; overflow: hidden; padding: calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-6); background: radial-gradient(80% 120% at 78% 40%, rgba(42,92,66,.5), transparent 62%), radial-gradient(60% 90% at 96% 4%, rgba(201,168,76,.16), transparent 60%), linear-gradient(125deg, #08150e 0%, var(--emerald-deep) 50%, #0d2418 100%); color: var(--on-dark); } .page-header-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: center; } .crumbs { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--on-dark-muted); margin-bottom: var(--sp-2); } .crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-light); } .crumbs a:hover { text-decoration: underline; } .page-title { font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; color: var(--gold-pale); margin-bottom: var(--sp-2); } .page-lead { color: var(--on-dark-muted); font-size: 1.04rem; max-width: 48ch; } .page-header-portrait { width: min(230px, 34vw); aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 3px rgba(201,168,76,.45); } .page-header-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; filter: saturate(.85) hue-rotate(-10deg); } /* ── Biography ──────────────────────────────────────────────── */ .bio-heading { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--emerald); margin: var(--sp-4) 0 var(--sp-2); } .bio-prose > .bio-heading:first-child { margin-top: 0; } .bio-path-cta { display: grid; gap: 10px; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); } .bio-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-6); align-items: start; } .bio-prose p { color: var(--ink-muted); margin-bottom: var(--sp-3); font-size: 1.03rem; } .bio-quote { border-left: 3px solid var(--gold); padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); margin: var(--sp-3) 0; font-size: 1.16rem; line-height: 1.6; font-style: italic; color: var(--emerald); } .bio-prose em { font-style: italic; color: var(--emerald-light); } /* Channel figures, sitting inline under the prose */ .bio-figures { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); } .bio-figures li { font-size: .88rem; color: var(--ink-muted); } .bio-figures strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--gold-text); line-height: 1.1; } /* Education & service — a vertical path with a gold spine */ .bio-path { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-3); } .section--alt .bio-path { background: var(--cream); } .bio-path-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--emerald); margin-bottom: var(--sp-3); } .bio-path-list { position: relative; display: grid; gap: var(--sp-3); } .bio-path-list::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1.5px; background: linear-gradient(var(--gold), rgba(201,168,76,.15)); } .bio-path-list li { position: relative; padding-left: var(--sp-4); } .bio-path-list li::before { content: ''; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--cream); border: 2px solid var(--gold); } .bp-place { display: block; font-weight: 600; font-size: .97rem; color: var(--ink); line-height: 1.35; } .bp-where { display: block; font-size: .82rem; color: var(--ink-faint); margin-top: 2px; } .bp-note { display: block; font-size: .84rem; color: var(--gold-text); font-weight: 600; margin-top: 5px; } /* ── Video grid ─────────────────────────────────────────────── */ .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); } .video-card { display: flex; flex-direction: column; text-align: left; width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .section--alt .video-card { background: var(--cream); } .video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); } .video-thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--emerald-light), var(--emerald-dark)); overflow: hidden; } .video-thumb img { width: 100%; height: 100%; object-fit: cover; } .video-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,36,25,.55), transparent 55%); opacity: 0; transition: opacity .25s var(--ease); } .video-card:hover .video-thumb::after { opacity: 1; } .video-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: rgba(250,246,238,.93); color: var(--emerald); display: grid; place-items: center; box-shadow: var(--shadow-md); z-index: 1; transition: transform .25s var(--ease), background-color .25s var(--ease); } .video-play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; } .video-card:hover .video-play { transform: scale(1.1); background: var(--gold); } .video-duration { position: absolute; right: 10px; bottom: 10px; z-index: 1; background: rgba(15,36,25,.86); color: var(--gold-pale); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 8px; border-radius: 5px; } .video-meta { padding: var(--sp-2) var(--sp-2) var(--sp-3); } .video-series { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .video-lang { background: var(--cream-dark); color: var(--ink-muted); letter-spacing: .08em; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border); } .section--alt .video-lang { background: var(--cream); } .video-title { font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-date { font-size: .8rem; color: var(--ink-faint); margin-top: 7px; } /* Fallback when a YouTube thumbnail cannot load */ .thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; gap: 6px; align-content: center; text-align: center; padding: var(--sp-2); color: rgba(245,233,200,.72); } .thumb-fallback svg { width: 34px; height: 34px; } .thumb-fallback span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; } /* A card still awaiting a real video ID shows the hint, not a play button */ .video-card--placeholder .video-play, .video-card--placeholder .video-duration { display: none; } /* ── Series grid (playlists) ────────────────────────────────── */ .series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); } .series-card { display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .series-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); } .series-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--emerald-light), var(--emerald-deep)); overflow: hidden; } .series-thumb img { width: 100%; height: 100%; object-fit: cover; } .series-count { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; background: rgba(10,26,18,.86); color: var(--gold-pale); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 5px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .series-count::before { content: ''; width: 12px; height: 10px; flex: none; background: currentColor; /* stacked-list glyph = playlist */ -webkit-mask: linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 4px/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 8px/70% 2px no-repeat; mask: linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 4px/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 8px/70% 2px no-repeat; } .series-meta { display: block; padding: var(--sp-2); } .series-title { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--ink); } .series-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .series-tag { display: inline-block; background: var(--cream-dark); color: var(--ink-muted); font-size: .72rem; font-weight: 600; letter-spacing: .03em; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); } .section--alt .series-tag { background: var(--cream); } .series-note { display: block; font-size: .82rem; color: var(--ink-muted); margin-top: 5px; } /* ── Shorts rail (vertical 9:16) ────────────────────────────── Fixed max (not `1fr`) on purpose: `1fr` divides the FULL row width among however many columns exist, which looks fine with 6-10 real Shorts but stretches each card huge when the channel only has 1-2 short-form uploads right now (live-fetched data, so that count is real and will vary) — a capped width just leaves empty rail space instead of a couple of giant cards. */ .shorts-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 220px); gap: var(--sp-2); /* overflow-y must be set explicitly, not left to default to `visible` — per the CSS overflow spec, when one axis is a non-visible value (overflow-x: auto here) and the other is left `visible`, the UA can't render that coherently and silently computes the `visible` axis as `auto` too. That's what was actually causing the vertical scrollbar: overflow-x:auto alone was making overflow-y compute to auto as a side effect, and the horizontal scrollbar's own 6px reserved height then counted as vertical overflow. Setting overflow-y: hidden explicitly stops the auto-conversion. */ overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); margin: 0 calc(var(--sp-3) * -1); padding-inline: var(--sp-3); scrollbar-width: thin; scrollbar-color: var(--gold) transparent; } .shorts-rail::-webkit-scrollbar { height: 6px; } .shorts-rail::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 99px; } .shorts-rail::-webkit-scrollbar-track { background: var(--border); border-radius: 99px; } .short-card { position: relative; scroll-snap-align: start; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; text-align: left; width: 100%; background: linear-gradient(160deg, var(--emerald-light), var(--emerald-deep)); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .short-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .short-card img { width: 100%; height: 100%; object-fit: cover; } .short-overlay { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--sp-4) 12px 12px; background: linear-gradient(to top, rgba(10,26,18,.92), transparent); color: var(--gold-pale); } .short-title { font-size: .86rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .short-badge { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; background: rgba(10,26,18,.72); color: var(--gold-light); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .short-badge svg { width: 11px; height: 11px; fill: currentColor; stroke: none; } /* ── Audio library band ─────────────────────────────────────── */ .library-band { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--emerald-dark), var(--emerald-deep)); color: var(--on-dark); padding: var(--sp-7) 0; text-align: center; } .library-pattern { position: absolute; inset: 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-opacity='0.16' stroke-width='1'%3E%3Ccircle cx='30' cy='30' r='14'/%3E%3Cpath d='M30 2 44 16 58 30 44 44 30 58 16 44 2 30 16 16Z'/%3E%3C/g%3E%3C/svg%3E"); } .library-inner { position: relative; z-index: 1; max-width: 680px; } .library-inner .eyebrow { justify-content: center; } .library-title { font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 700; line-height: 1.15; color: var(--gold-pale); margin-bottom: var(--sp-2); } .library-text { color: var(--on-dark-muted); margin-bottom: var(--sp-4); font-size: 1.06rem; } .library-host { margin-top: var(--sp-3); font-size: .82rem; letter-spacing: .1em; color: rgba(226,196,122,.65); } /* ── Events ─────────────────────────────────────────────────── */ .event-filters { display: flex; flex-wrap: wrap; gap: 8px; } .chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--white); font-size: .86rem; font-weight: 500; color: var(--ink-muted); transition: all .2s var(--ease); } .chip:hover { border-color: var(--gold); color: var(--gold-dark); } .chip.is-active { background: var(--emerald); border-color: var(--emerald); color: var(--gold-pale); font-weight: 600; } .event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-3); } .event-card { display: flex; flex-direction: column; text-align: left; width: 100%; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold); } /* Vertical flyer proportions when real poster art is supplied … */ .event-poster { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(155deg, var(--emerald-light), var(--emerald-deep)); overflow: hidden; display: grid; place-items: center; } .event-poster img { width: 100%; height: 100%; object-fit: cover; } /* … but the typographic day plate needs far less room. */ .event-poster--plate { aspect-ratio: 5 / 3; } .event-poster-fallback { display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: var(--sp-3); color: var(--gold-pale); } .event-poster-fallback .epf-day { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; text-transform: uppercase; } .event-poster-fallback .epf-time { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--gold); max-width: 15ch; line-height: 1.4; } .event-poster-fallback .epf-rule { width: 42px; height: 1px; background: rgba(201,168,76,.55); } .event-type { position: absolute; top: 11px; left: 11px; z-index: 1; background: rgba(250,246,238,.94); color: var(--emerald); font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; } .event-type--hybrid { background: var(--gold); color: var(--emerald-dark); } .event-body { padding: var(--sp-2) var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 8px; flex: 1; } .event-when { font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--gold-text); } .event-name { font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--ink); } .event-where { display: flex; align-items: flex-start; gap: 7px; font-size: .85rem; color: var(--ink-muted); margin-top: auto; padding-top: 6px; } .event-where svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--gold-dark); } .event-next { font-size: .78rem; color: var(--ink-faint); } .event-empty, .event-loading { text-align: center; color: var(--ink-faint); padding: var(--sp-5) 0; grid-column: 1 / -1; } .schedule-note { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: .88rem; color: var(--ink-muted); text-align: center; } .em-note { margin-top: var(--sp-2); font-size: .82rem; color: var(--ink-faint); line-height: 1.5; } /* ── Ask a question ─────────────────────────────────────────── */ .ask-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-6); align-items: start; } .ask-text { color: var(--on-dark-muted); margin-bottom: var(--sp-3); } .ask-points { display: grid; gap: 13px; } .ask-points li { display: flex; align-items: center; gap: 11px; font-size: .9rem; color: var(--on-dark-muted); } .ask-points svg { width: 19px; height: 19px; flex: none; color: var(--gold); } .ask-form { background: rgba(250,246,238,.05); border: 1px solid var(--border-dark); border-radius: var(--radius-lg); padding: var(--sp-4); display: grid; gap: var(--sp-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .field { display: grid; gap: 6px; } .field label { font-size: .84rem; font-weight: 600; color: var(--gold-pale); } .field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: rgba(10,26,18,.42); border: 1.5px solid var(--border-dark); border-radius: var(--radius-sm); color: var(--on-dark); font-size: .95rem; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .field textarea { resize: vertical; min-height: 118px; line-height: 1.6; } .field select { cursor: pointer; } .field select option { background: var(--emerald-dark); color: var(--on-dark); } .field input::placeholder, .field textarea::placeholder { color: rgba(185,196,182,.5); } .field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(226,196,122,.4); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: rgba(10,26,18,.62); } .field-hint { font-size: .77rem; color: rgba(185,196,182,.72); } .field-error { font-size: .8rem; color: #f0a5a5; min-height: 0; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #d97b7b; } /* Honeypot — off-screen rather than display:none, since some spam bots specifically skip display:none/visibility:hidden fields. Real visitors never see or tab into it (aria-hidden + tabindex="-1" on the field). */ .field--trap { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; } .checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .86rem; color: var(--on-dark-muted); cursor: pointer; } .checkbox input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--gold); flex: none; cursor: pointer; } .form-legal { font-size: .74rem; line-height: 1.5; color: rgba(185,196,182,.6); } .form-legal a { color: rgba(226,196,122,.8); text-decoration: underline; } .form-legal a:hover { color: var(--gold-light); } .form-status { font-size: .87rem; min-height: 20px; } .form-status.is-ok { color: var(--gold-light); } .form-status.is-err { color: #f0a5a5; } .link-inline { color: var(--gold-light); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .link-inline:hover { color: var(--gold); } /* ── Podcast platforms ──────────────────────────────────────── */ .podcast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-2); max-width: 940px; margin: 0 auto; } .podcast-card { display: flex; align-items: center; gap: 13px; padding: var(--sp-2) var(--sp-3); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .podcast-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); } .podcast-icon { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--emerald); color: var(--gold); } .podcast-icon svg { width: 21px; height: 21px; } .podcast-card > span:last-child { display: block; min-width: 0; } .podcast-name { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; } .podcast-note { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: 2px; } /* ── Supervision ────────────────────────────────────────────── */ .supervision { background: var(--cream-dark); padding: var(--sp-6) 0; border-top: 1px solid var(--border); } .supervision-inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--sp-5); align-items: center; } .supervision-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--emerald); line-height: 1.2; } /* RTL text keeps its reading order but aligns with the English above it */ .supervision-sub { font-size: 1.05rem; color: var(--emerald-light); margin-top: 10px; line-height: 1.9; text-align: left; } .supervision-note { font-size: .86rem; color: var(--ink-muted); margin-top: var(--sp-2); max-width: 54ch; } .supervision-logo { display: flex; justify-content: center; } .supervision-logo img { width: 100%; max-width: 400px; height: auto; filter: drop-shadow(0 6px 18px rgba(26,61,43,.12)); } /* ── Footer ─────────────────────────────────────────────────── */ .footer { background: var(--emerald-deep); color: var(--on-dark-muted); padding: var(--sp-6) 0 var(--sp-4); } .footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-dark); } .footer-brand img { height: 62px; width: auto; margin-bottom: var(--sp-2); } .footer-tag { font-size: .92rem; max-width: 34ch; } .footer-heading { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--gold-pale); margin-bottom: 6px; } .footer-sub { font-size: .87rem; margin-bottom: var(--sp-2); } .newsletter-row { display: flex; gap: 9px; flex-wrap: wrap; } .newsletter-row input { flex: 1 1 210px; min-height: 48px; padding: 0 15px; background: rgba(250,246,238,.06); border: 1.5px solid var(--border-dark); border-radius: 999px; color: var(--on-dark); font-size: .93rem; transition: border-color .2s var(--ease); } .newsletter-row input::placeholder { color: rgba(185,196,182,.5); } .newsletter-row input:focus { border-color: var(--gold); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0; } .footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; transition: color .2s var(--ease); } .footer-links a:hover { color: var(--gold-light); } .footer-social { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: var(--sp-3); } .social-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-dark); color: var(--on-dark-muted); transition: all .22s var(--ease); } .social-btn svg { width: 19px; height: 19px; } .social-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--emerald-dark); transform: translateY(-3px); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-dark); font-size: .82rem; color: rgba(185,196,182,.62); } .footer-cookie-link { color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(185,196,182,.4); transition: color .2s var(--ease); } .footer-cookie-link:hover { color: var(--gold-light); text-decoration-color: var(--gold-light); } /* Google auto-injects this floating "protected by reCAPTCHA" badge wherever grecaptcha.execute() runs (bottom-right, slides in). Hiding it is allowed by Google's own terms as long as the required attribution text is shown somewhere else on the page — it is, right under the Ask a Question submit button (#ask-recaptcha-note in index.html). */ .grecaptcha-badge { visibility: hidden !important; } /* ── Cookie banner ──────────────────────────────────────────── */ .cookie-banner { position: fixed; left: 0; right: 0; z-index: 200; /* Nudged up by initCookieBanner() (main.js) on pages where the Live Broadcast strip is docked to the same bottom viewport edge — a first-time visitor's banner would otherwise fully cover that strip for as long as it's showing. Defaults to 0 (flush with the bottom) everywhere else, e.g. biography.html. */ bottom: var(--cookie-banner-offset, 0px); background: linear-gradient(165deg, var(--emerald-dark), var(--emerald-deep)); border-top: 1px solid var(--border-dark); box-shadow: 0 -8px 28px rgba(0,0,0,.28); padding: var(--sp-3); } .cookie-banner[hidden] { display: none; } .cookie-banner-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .cookie-banner-text { flex: 1 1 460px; font-size: .86rem; line-height: 1.6; color: var(--on-dark-muted); } .cookie-banner-text strong { color: var(--gold-pale); font-weight: 600; } .cookie-banner-actions { display: flex; gap: 10px; flex: none; flex-wrap: wrap; } .cookie-banner-actions .btn { min-height: 42px; padding: 0 18px; font-size: .86rem; } /* ── Back to top ────────────────────────────────────────────── */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--emerald-dark); display: grid; place-items: center; box-shadow: var(--shadow-gold); opacity: 0; visibility: hidden; translate: 0 14px; transition: opacity .3s var(--ease), translate .3s var(--ease), visibility .3s, background-color .2s; } .to-top svg { width: 21px; height: 21px; stroke-width: 2.2; } .to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; } .to-top:hover { background: var(--gold-light); } /* ── Sticky tabs (shared wrapper) ────────────────────────────── One fixed, vertically-centered flex column holding both tabs — their spacing comes from `gap` here, not from each tab guessing its own % offset (two independent % offsets don't scale with the tabs' fixed pixel height and can overlap on short viewports — confirmed directly: they did, before this wrapper existed). */ .side-fabs { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 89; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } /* ── Mixlr sticky tab ───────────────────────────────────────── */ .mixlr-fab { /* Sized to its own content, not forced to match .podcast-fab's height — that was tried and reverted: matching required either stretching the logo (scaling it, not wanted) or padding out a lot of empty space. The source PNG had a wide transparent margin around the actual mark (bbox showed real content was only 452×142 inside a 512×242 canvas); assets/images/mixlr-logo.png is cropped tight to that content instead of solving the same problem by scaling, so the two tabs may end up different heights and that's fine. */ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; /* Cream, not Mixlr's own orange — their logo is red-on-transparent, and red-on-orange reads poorly (too little contrast between the two warm hues). The orange identity still comes through via the border/glow. */ background: var(--cream); border: 1.5px solid rgba(232,83,43,.3); border-right: none; cursor: pointer; border-radius: 12px 0 0 12px; box-shadow: var(--shadow-lg); transition: padding-right .2s var(--ease), box-shadow .2s var(--ease); } .mixlr-fab:hover, .mixlr-fab:focus-visible { padding-right: 10px; box-shadow: var(--shadow-lg), 0 0 22px rgba(232,83,43,.4); } /* Wired to the real schedule-based "on air now" detection that already drives the Live Broadcast section (renderLiveStatus() in main.js) — the same --live/pulse-live language used everywhere else on the site for that, not a separate one-off invented for this button. */ .mixlr-fab.is-live { animation: mixlr-fab-pulse 1.8s ease-in-out infinite; } @keyframes mixlr-fab-pulse { 0%, 100% { transform: scale(1); box-shadow: var(--shadow-lg), 0 0 0 0 rgba(178,59,44,.6); } 50% { transform: scale(1.045); box-shadow: var(--shadow-lg), 0 0 0 9px rgba(178,59,44,0); } } /* Mixlr's own logo (transparent PNG, cropped to its content — see the .mixlr-fab comment above) rotated to run with the tab. The wrap reserves the POST-rotation footprint (narrow × tall) so the rotated image doesn't disturb the flex column's layout math — the image itself keeps its natural pre-rotation size and just rotates visually inside it. Cropped source ratio is ~2.96:1 (468×158). Sized so the tab's *width* (padding + this) lands close to .podcast-fab's own ~45px — the earlier size made Mixlr noticeably wider than the Apple Podcasts tab (63.5px vs 45px, measured directly), which read as visibly bulkier/mismatched even though its height was already shorter. A 62px pre-rotation width gives a ~21px post-rotation visual width, matching Apple's icon-driven width. */ .mixlr-fab-logo-wrap { width: 22px; height: 62px; display: flex; align-items: center; justify-content: center; } .mixlr-fab-logo { /* max-width: none overrides the site-wide `img { max-width: 100% }` reset — that rule would otherwise cap this to the wrap's width (22px) *before* rotation, since the wrap is this image's containing block. */ width: 62px; max-width: none; height: auto; transform: rotate(-90deg); display: block; } .mixlr-fab-badge { display: none; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); align-items: center; gap: 5px; background: var(--live); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; box-shadow: var(--shadow-md); white-space: nowrap; } .mixlr-fab.is-live .mixlr-fab-badge { display: inline-flex; } .mixlr-fab-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; flex: none; animation: pulse-live 1.4s var(--ease) infinite; } /* ── Apple Podcasts sticky tab ──────────────────────────────── */ .podcast-fab { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 18px 12px; /* Apple Podcasts' purple→magenta identity, not a reproduction of their icon */ background: linear-gradient(165deg, #c43bc0 0%, #9a3fe0 50%, #7a2fda 100%); color: #fff; border: none; cursor: pointer; border-radius: 12px 0 0 12px; box-shadow: var(--shadow-lg); transition: padding-right .2s var(--ease), box-shadow .2s var(--ease); } .podcast-fab:hover, .podcast-fab:focus-visible { padding-right: 10px; box-shadow: var(--shadow-lg), 0 0 22px rgba(154,63,224,.5); } /* Added once the drawer's been opened — the embed is cross-origin, so there's no way to read its real play/pause state (confirmed: Apple's embed has no postMessage API or JS hook for this at all). Honest "your player is open, presumably playing" heuristic, not a verified live status. */ .podcast-fab.is-playing { animation: podcast-fab-pulse 1.8s ease-in-out infinite; } @keyframes podcast-fab-pulse { 0%, 100% { transform: scale(1); box-shadow: var(--shadow-lg), 0 0 0 0 rgba(196,59,192,.55); } 50% { transform: scale(1.045); box-shadow: var(--shadow-lg), 0 0 0 9px rgba(196,59,192,0); } } .podcast-fab svg { width: 21px; height: 21px; stroke-width: 1.8; flex: none; } .podcast-fab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .78rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } /* ── Modals ─────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: var(--sp-2); } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(10,26,18,.86); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .modal-panel { position: relative; z-index: 1; width: 100%; animation: modal-in .28s var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } } .modal-panel--video { max-width: 960px; } .modal-panel--event { max-width: 760px; max-height: 88vh; overflow-y: auto; background: var(--cream); border-radius: var(--radius-lg); } .modal-close { position: absolute; top: -46px; right: 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(250,246,238,.14); color: var(--cream); display: grid; place-items: center; transition: background-color .2s var(--ease); } .modal-close svg { width: 19px; height: 19px; stroke-width: 2.2; } .modal-close:hover { background: var(--gold); color: var(--emerald-dark); } .modal-panel--event .modal-close { top: 12px; right: 12px; background: rgba(15,36,25,.1); color: var(--emerald); } .modal-video { aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; } .modal-video iframe { width: 100%; height: 100%; border: 0; display: block; } .modal-caption { color: var(--gold-pale); text-align: center; margin-top: var(--sp-2); font-size: .95rem; } /* Apple Podcasts drawer — slides in from the right edge rather than the centered fade/scale every other modal uses. */ .podcast-drawer { justify-items: end; align-items: stretch; padding: 0; } .podcast-drawer .modal-backdrop { background: rgba(10,26,18,.5); } .modal-panel--drawer { position: relative; width: min(760px, 100vw); height: 100%; background: linear-gradient(165deg, var(--emerald-dark), var(--emerald-deep)); color: var(--on-dark); padding: var(--sp-5) var(--sp-3) var(--sp-3); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); animation: drawer-in .32s var(--ease); } @keyframes drawer-in { from { transform: translateX(100%); } } .modal-panel--drawer .modal-close { position: absolute; top: 14px; right: 14px; background: rgba(250,246,238,.12); color: var(--on-dark); } .podcast-drawer-head { display: flex; align-items: center; gap: 12px; padding-right: 30px; } .podcast-drawer-badge { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(165deg, #c43bc0, #7a2fda); } .podcast-drawer-badge--mixlr { background: linear-gradient(165deg, #ff9248, #e8532b); } .podcast-drawer-badge svg { width: 22px; height: 22px; } .podcast-drawer-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); } .mixlr-drawer-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--live); letter-spacing: .04em; } .mixlr-drawer-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex: none; animation: pulse-live 1.4s var(--ease) infinite; } .podcast-drawer-title { font-weight: 700; color: var(--gold-pale); font-size: 1.02rem; } .podcast-drawer-frame { border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); min-height: 450px; background: var(--emerald-mid); } .podcast-drawer-frame iframe { display: block; width: 100%; } /* Mixlr's widget is a fixed 300×300 square (its own generated embed code), not a full-width player like Apple's — narrower drawer to match, and the frame centers it instead of stretching it edge-to-edge. */ #mixlr-drawer .modal-panel--drawer { width: min(420px, 100vw); } #mixlr-drawer-frame { display: flex; align-items: center; justify-content: center; min-height: 300px; } #mixlr-drawer-frame iframe { flex: none; } /* .link-more's default colors (emerald-on-cream) read poorly against this panel's dark background — same gold-on-dark treatment as the rest of the site's dark sections (e.g. the Live Broadcast section's own links). */ .modal-panel--drawer .link-more { color: var(--gold-light); } .modal-panel--drawer .link-more:hover { color: var(--gold); } /* Event modal contents */ .em-poster { aspect-ratio: 16 / 7; background: linear-gradient(150deg, var(--emerald-light), var(--emerald-deep)); display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .em-poster img { width: 100%; height: 100%; object-fit: cover; } .em-body { padding: var(--sp-4); } .em-type { display: inline-block; background: var(--gold); color: var(--emerald-dark); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; margin-bottom: var(--sp-2); } .em-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; color: var(--emerald); line-height: 1.2; margin-bottom: var(--sp-2); } .em-desc { color: var(--ink-muted); margin-bottom: var(--sp-3); } .em-facts { display: grid; gap: 11px; margin-bottom: var(--sp-3); } .em-fact { display: flex; align-items: flex-start; gap: 11px; font-size: .93rem; } .em-fact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--gold-dark); } .em-fact strong { display: block; font-weight: 600; color: var(--ink); } .em-fact span { color: var(--ink-muted); } .em-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ── Scroll reveal ────────────────────────────────────────────── Only hidden when JS is running (html.js is set by main.js). Without JS — or if it throws — every section stays fully visible. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 1024px) { /* Portrait becomes a top band in normal flow, so the copy always clears it. A square box keeps the crop identical at every width — a viewport-height band would crop tighter as the screen widens and cut off the face. */ .hero { display: block; min-height: 0; padding-top: 0; padding-bottom: var(--sp-5); } .hero-grid { grid-template-columns: 1fr; gap: var(--sp-4); } .hero-copy { grid-column: 1; padding-top: var(--sp-4); } .hero-media { position: relative; inset: auto; /* Taller-than-square box reveals more of the photo (shoulders/torso) at the same magnification — width is full-bleed so it's the fixed constraint; height is the only lever left to zoom out here. */ width: 100%; aspect-ratio: 4 / 5; /* Only a guard for landscape phones — a tighter cap would override the ratio and start cutting the face off again. */ max-height: 90vh; } .hero-media img { width: 100%; object-position: 50% 0%; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; } .hero-media-fade { background: linear-gradient(to bottom, rgba(8,21,14,.7) 0%, rgba(8,21,14,0) 26%), linear-gradient(to bottom, rgba(8,21,14,.22) 0%, rgba(8,21,14,.55) 55%, rgba(8,21,14,.9) 82%, var(--emerald-deep) 100%); } .hero-credentials { max-width: 520px; } .bio-grid, .ask-grid { grid-template-columns: 1fr; gap: var(--sp-4); } .page-header-inner { grid-template-columns: 1fr; gap: var(--sp-4); } .page-header-portrait { order: -1; width: min(180px, 40vw); } .supervision-inner { grid-template-columns: 1fr; text-align: center; } .supervision-note { margin-inline: auto; } .supervision .eyebrow { justify-content: center; } .footer-top { grid-template-columns: 1fr; } } /* The header collapses well before the layout does: the enlarged logo plus six links and the CTA get cramped under ~1000px. */ @media (max-width: 1000px) { :root { --nav-h: 82px; --nav-h-stuck: 64px; } .navbar-toggle { display: flex; } /* Anchored to the bar itself so it follows the shrink on scroll instead of leaving a gap below a fixed offset. */ .navbar-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: linear-gradient(165deg, var(--emerald-dark), var(--emerald-deep)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: var(--sp-2) var(--sp-3) var(--sp-4); box-shadow: var(--shadow-lg); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; transition: clip-path .34s var(--ease), opacity .24s var(--ease); } .navbar-nav.is-open { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; } .navbar-nav > a { padding: 15px 0; border-bottom: 1px solid var(--border-dark); min-height: 48px; display: flex; align-items: center; } .navbar-nav > a::after { display: none; } .navbar-cta { margin-top: var(--sp-2); justify-content: center; } /* Open mobile menu is now the same dark emerald sheet as the bar itself — the base (hero) link/CTA colors already read correctly on it, so no light-on-cream override is needed here any more. */ .navbar-logo { height: 56px; } .navbar.is-stuck .navbar-logo { height: 42px; } } @media (max-width: 860px) { .section { padding: var(--sp-6) 0; } .section-header--split { flex-direction: column; align-items: flex-start; } .video-grid { grid-template-columns: 1fr; } .shorts-rail { grid-auto-columns: minmax(160px, 190px); } .modal-close { top: 10px; right: 10px; background: rgba(10,26,18,.7); } .modal-panel--video .modal-close { top: -44px; } } @media (max-width: 560px) { :root { --sp-6: 3rem; --sp-7: 3.75rem; } .container { padding: 0 var(--sp-2); } .hero-credentials { flex-direction: column; gap: 9px; } .hero-actions .btn { width: 100%; } .event-grid { grid-template-columns: 1fr; } .ask-form { padding: var(--sp-3); } .em-body { padding: var(--sp-3); } .em-actions .btn { width: 100%; } .footer-bottom { flex-direction: column; } } /* ── Reduced motion ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .reveal { opacity: 1; transform: none; } } /* ── Print ──────────────────────────────────────────────────── */ @media print { .navbar, .to-top, .side-fabs, .cookie-banner, .modal, .shorts-rail, .newsletter { display: none !important; } body { background: #fff; color: #000; } }