/* ─────────────────── ✦ ALL EP BLUEPRINTS ✦ ─────────────────── */ html, body { overflow-x: hidden; /* HA scroll kill switch */ min-height : 100vh; /* Ctrl+Alt+A aligns */ min-width : 100vw; /* Ctrl+Shift+P > Fold All */ margin : 0; background-color: #080808; } body { background-color: #080808 !important; background-color: #070707 !important; background-color: #000000 !important; } .btnLoad { /* Margin top isnt the correct target to push it down */ margin-top: 25%; width: 100%; } /* NOTES TO DO: Clean up this css, remove irrelvenat sections, rename to naming conventstions of ep_testing Gallery needs an overhaul at smaller lengths, copy crunchy roll, also 5 cards?? Needs to load in more data: Meta data or decription and sEO, for google and for my own advanced search. Also loading in video time length. List v grid layouts. Work on advanced search engine like youtube Information on texthover like crunchy roll? Create card loading animations or nah? References: Crunchroll, Netflix, etc. */ /* ────────────────────── ✦ DEVTOOLS - DEBUGGING ✦ ────────────────────── */ /* :root { --dev-color1: red; --dev-color2: orange; --dev-color3: yellow; --dev-color4: green; --dev-color5: blue; --dev-color6: purple; --dev-color7 : #8e9020; --dev-color8 : #209087; --dev-color9 : #203890; --dev-color10: #90206e; --dev-color11: #7a1a23; --dev-color12: #903820; } */ /* RESOURCES: HEX TO FILTER: https://codepen.io/sosuke/pen/Pjoqqp https://simpleicons.org/?q=spot ICONS https://super.so/icons SVG Iconpacks https://www.flaticon.com/search/2?word=play ICONS */ /* ────────────── ✦ HERO SECTION ✦ ────────────── */ .heroprimarycontainer{ position: relative; width : 100%; height : auto; overflow: visible; --hero-h: 60vh; /* Mobile default */ } @media (min-width: 800px){ .heroprimarycontainer{ --hero-h: 56.25vw; /* Desktop hero height (~16:9 feel) */ } } @media (min-width: 1024px){ .heroprimarycontainer{ --hero-h: clamp(580px, 40vw, 672px); /* MIN HEIGHT | SCALING: 40% of ViewPort width | MAX HEIGHT */ } } .heroinnercontainer{ /* Background Layer: Covers only the hero height - Removes clipping & scroll issues */ position : absolute; top : 0; left : 0; right : 0; height : var(--hero-h); /* Inset:0 breaks this, needs to be dynamic */ background: #2727279c; z-index : 0; overflow : hidden; pointer-events : none; user-select : none; -webkit-user-select: none; } .heroimg{ position : absolute; object-fit : cover; object-position: center top; width : 100%; height: 100%; inset : 0; pointer-events : none; user-select : none; -webkit-user-select: none; -webkit-user-drag : none; opacity: 0.3; } @media (min-width: 50em){ .heroimg{ object-position: left top; } } .heroinnercontainer::after{ content : ""; /* Vignette Overlay [CR-Style] */ position: absolute; background: /* Mobile */ linear-gradient(204deg, #0009 0%, #0000 20%), linear-gradient(to bottom, #0000 40%, #000000bf 65%, #000 90%); inset : 0; z-index : 2; pointer-events: none; } @media (min-width: 50em){ .heroinnercontainer::after{ background: /* Desktop */ linear-gradient(252deg, #0000008c 5%, #0000 25%), linear-gradient(to right, #000000d9 0%, #00000080 30%, #0000 55%), linear-gradient(to bottom, #0000 50.04%, #000 100%); } } /* ULTRAWIDE PATCH */ /* ───────────────────────────── ULTRA-WIDE: PIN CHARACTER RIGHT Push image OFF the right side Lock it there ───────────────────────────── */ /* ───────────────────────────────────────────── ULTRA-WIDE PATCH (1330+) 1) Keep avatar pushed RIGHT (off-screen a bit) 2) Fade happens at the CONTENT edge (max width), not the browser edge 3) Hard lock everything after 2000px (Paste AFTER your existing hero CSS) ───────────────────────────────────────────── */ @media (min-width: 1330px){ :root{ --hero-maxw : 1700px; /* match your video/grid max width */ --hero-pin-right: 180px; /* + = push further off the RIGHT */ } /* Clamp the HERO LAYER to the same max width as your content, centered like streaming sites, so fades end at content edge */ .heroinnercontainer{ left: 50%; right: auto; width: min(100%, var(--hero-maxw)); transform: translateX(-50%); } /* Pin avatar to the RIGHT side of that clamped hero layer */ .heroimg{ object-position: calc(100% + var(--hero-pin-right)) top !important; opacity: 0.45; } /* Keep your subtle CR-style shine, just add a RIGHT-edge fade layer (this fade now ends at the clamped content edge because the ::after is on .heroinnercontainer) */ .heroinnercontainer::after{ background: /* RIGHT edge fade (soft) */ linear-gradient(to left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 14%, rgba(0,0,0,0.00) 32% ), /* your existing desktop shine */ linear-gradient(252deg, #0000008c 5%, #0000 25%), linear-gradient(to right, #000000d9 0%, #00000080 30%, #0000 55%), linear-gradient(to bottom, #0000 50.04%, #000 100%); } } /* HARD LOCK (2000px+) — stop any remaining growth/drift */ @media (min-width: 2000px){ .heroprimarycontainer{ --hero-h: 672px; /* lock height */ } :root{ --hero-maxw : 1700px; /* lock clamp width */ --hero-pin-right: 180px; /* lock position */ } } /* MOBILE PATCH (0–749.98px) */ @media (max-width: 800px){ :root{ --hero-shift-x: 230px; --hero-dim: 0.7; } .heroimg{ object-position: calc(50% + var(--hero-shift-x)) top !important; opacity: 1; } .heroinnercontainer::after{ background: /* linear-gradient(to right, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.65) 22%, rgba(0,0,0,0.30) 48%, rgba(0,0,0,0.00) 68% ), */ linear-gradient(to right, rgba(0, 0, 0, 0.88) 5%, rgba(0, 0, 0, 0.65) 55%, rgba(0,0,0,0.30) 90%, rgba(225, 0, 255, 0) 100% ), linear-gradient(to bottom, rgba(0,0,0,var(--hero-dim)), rgba(0,0,0,var(--hero-dim))), linear-gradient(204deg, #0009 0%, #0000 20%), /* linear-gradient(to bottom, #0000 40%, #000000bf 65%, #000 90%) !important; */ linear-gradient(to bottom, #0000 45%, #000000bf 70%, #000 90%) !important; } } /* Needs optimization for mobile and ultra wide dimensions */ .herotxtprimarycontainer { position : relative; display : flex; box-sizing : border-box; /* Allows correct inner padding */ justify-content: center; align-items : center; width : 100%; margin-top : min(5%, 110px); /* Grows at 5% until max height */ margin-bottom: 0%; /* Was at 5.8% */ color : #fff; background: var(--dev-color1); position: relative; z-index : 5; } @media (min-width: 2000px) { .herotxtprimarycontainer { max-width: 2000px; /* Sets maximum width */ left : 50%; /* Centers horizontally */ right : auto; transform: translateX(-50%); /* Create center pivot point */ } } @media (max-width: 750px) and (min-width: 0px) { .herotxtprimarycontainer { padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px)))); padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px)))); /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */ aspect-ratio: auto; height : auto; } } .herotxtinnercontainer { display: grid; width : 90%; /* Gives 5% margins */ height: auto; background: var(--dev-color2); grid-template-columns: 1fr; grid-template-rows : 1fr; } .herotxtgrid1 { grid-column: 1 / 1; grid-row : 1 / 1; background: var(--dev-color4); display : flex; justify-content: flex-start; align-items : flex-start; flex-direction : column; align-content : center; position : relative; } .titlelogo { width : 290px; height : auto; margin : 0px; padding: 0px; /* background-color: red; */ } /* ─────────────────── ✦ EPISODE NAV PANEL ✦ ─────────────────── */ .allepnavprimarycontainer { position : relative; display : flex; box-sizing : border-box; /* Allows correct inner padding */ justify-content: center; align-items : center; width : 100%; margin-top : min(5.8%, 85px); /* Grows at 5% until max height */ margin-bottom: clamp(0px, calc((900px - 100vw) * (12 / 400)), 12px) !important; color : #fff; background: var(--dev-color1); position: relative; z-index : 5; } @media (min-width: 2000px) { .allepnavprimarycontainer { max-width: 2000px; /* Sets maximum width */ left : 50%; /* Centers horizontally */ right : auto; transform: translateX(-50%); /* Create center pivot point */ } } @media (max-width: 750px) and (min-width: 0px) { .allepnavprimarycontainer { padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px)))); padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px)))); /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */ aspect-ratio: auto; height : auto; } } .allepnavcontainer { display: grid; width : 90%; /* Gives 5% margins */ height: 100%; margin-top : 0%; /* Was 5.8%, then 0% */ margin-bottom: 0.5%; /* Was 5.8% */ background: var(--dev-color2) !important; grid-template-columns: auto; grid-template-rows : auto; } .navmenubutton { background-color: var(--dev-color5) !important; } .naviconbtn { --icon-filter: invert(1) brightness(1.15); /* Icon color */ --icon-gap : 21px; --icon-size : 20px; /* Was 21 */ display : flex; align-items: center; gap : var(--icon-gap); margin : 0; padding : 0; line-height: 0; overflow : visible; /* Allows expansion */ } .naviconbtn a{ display : inline-flex; align-items : center; justify-content: center; text-decoration: none; width : var(--icon-size); height: var(--icon-size); } .naviconbtn img{ display: block; width : var(--icon-size); height: var(--icon-size); filter : var(--icon-filter); transition: filter .25s ease-in-out, opacity .25s ease-in-out; } .btn-search{ position : relative; display : inline-flex; align-items: center; height : 32px; gap : 6px; max-width: 100%; background-color: var(--dev-color4); --open-w : 220px; --underline-pos : 28.4px; /* Relates to gap. Base 0px | 32px */ --placeholder-placement: translateY(-1px); } .btn-search-icon{ display : inline-flex; /* Icon click area hitbox */ align-items : center; justify-content: flex-start; width : 20px; height: 32px; background: none; border : 0; padding : 0; margin : 0; cursor : pointer; } .btn-search-svg{ width : 2px; /* Icon image size */ height : auto; display: block; } .btn-search-input{ width : 0; opacity: 0; padding: 0; margin : 0; border : 0; outline : none; background: transparent; font-family : 'Work Sans', sans-serif; font-size : 13px; letter-spacing : .12em; line-height : 2.5px; text-decoration: none; text-transform: uppercase; max-width : min(220px, calc(100vw - 120px)); /* cap width on mobile */ min-width : 0; box-sizing: border-box; color: #fff; caret-color: #fff; -webkit-appearance: none; appearance : none; transform : var(--placeholder-placement); transition : width 240ms ease, opacity 180ms ease, padding 240ms ease; } @media (max-width: 749.98px){ .btn-search{ /* Mobile zoom prevention */ --open-w : min(220px, calc(100vw - 120px)); max-width: 100%; overflow : hidden; } .btn-search-input{ width : 0; max-width : var(--open-w); min-width : 0; box-sizing: border-box; font-size : 16px; /* Computed size - IOS zoom kill */ line-height: 16px; white-space : nowrap; overflow : hidden; text-overflow: clip; -webkit-text-size-adjust: 100%; text-size-adjust : 100%; appearance : none; -webkit-appearance: none; border-radius : 0; transform-origin : left center; transform : scale(0.82); /* visually smaller while computed stays 16px */ } .btn-search.is-open .btn-search-input{ width : calc(var(--open-w) / 0.82); opacity: 1; padding: 0 4px; } .btn-search-underline{ right: 0; overflow: hidden; } } .btn-search-input::placeholder{ color : rgb(255, 255, 255); /* Place holder text */ letter-spacing: 0.2em; } .btn-search-input:not(:placeholder-shown)::placeholder{ opacity: 0; } .btn-search-underline{ position: absolute; left: var(--underline-pos); right: 0; bottom: 5px; /* Distance between underline & text */ height: 0.9px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; pointer-events: none; } .btn-search.is-open .btn-search-input{ width : var(--open-w); opacity: 1; padding: 0 4px; } .btn-search.is-open .btn-search-underline{ transform: scaleX(1); } .btn-search-input::-webkit-search-cancel-button{ display: none; /* Removes x button */ } .btn-search-input::-webkit-search-decoration, .btn-search-input::-webkit-search-cancel-button, .btn-search-input::-webkit-search-results-button, .btn-search-input::-webkit-search-results-decoration{ -webkit-appearance: none; display: none; } /* ────────────────────── ✦ ALL EPISODES SECTION ✦ ────────────────────── */ .allepprimarycontainer { position : relative; display : flex; box-sizing: border-box; /* Allows correct inner padding */ width : 100%; aspect-ratio: auto; height : auto; margin : 0 auto !important; left : auto !important; right : auto !important; transform: none !important; background: var(--dev-color1); justify-content: center; align-items : center; } @media (min-width: 2000px) { .allepprimarycontainer { max-width: 2000px; /* Sets maximum width */ left : 50%; /* Centers horizontally */ right : auto; transform: translateX(-50%); /* Create center pivot point */ } } @media (max-width: 750px) and (min-width: 0px) { .allepprimarycontainer { padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px)))); padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px)))); /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */ aspect-ratio: auto; height : auto; } } .allepinnercontainer { display : grid; align-content: start !important; width : 90%; /* Gives 5% margins */ /* height: 100%; */ height: auto !important; margin-top : 1%; /* Was 5.8%, then 0% */ margin-bottom: 5.8%; /* Was 5.8% */ background: var(--dev-color2) !important; grid-template-columns: auto; grid-template-rows : auto; } /* ────────────── ✦ BANNER (OLD) ✦ ────────────── */ .display1primarycontainer { position : relative; display : flex; box-sizing: border-box; /* Allows correct inner padding */ width : 100%; aspect-ratio: auto; height : auto; background: var(--dev-color1); justify-content: center; align-items : center; } @media (min-width: 1700px) { .display1primarycontainer { width : 1700px; /* Sets maximum width */ left : 50%; /* Centers horizontally */ right : auto; transform: translateX(-50%); /* Create center pivot point */ } } @media (max-width: 750px) and (min-width: 0px) { .display1primarycontainer { padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px)))); padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px)))); /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */ aspect-ratio: auto; height : auto; } } .display1container { display: grid; width : 90%; /* Gives 5% margins */ height: 100%; margin-top : 5.8%; margin-bottom: 5.8%; background: var(--dev-color2) !important; grid-template-columns: auto 1fr; grid-template-rows : auto 25px auto; } .dis1grid1 { grid-column: 1 / 3; grid-row : 1 / 1; background: var(--dev-color4) !important; display : flex; /* Makes grid cell a flex container */ justify-content: center; /* Centers items inside horizontally */ align-items : center; /* Centers items inside vertically */ position : relative; /* Local stacking context for glow */ grid-template-rows: auto; } .dis1grid1-1 { grid-column: 1 / 3; grid-row : 1 / 1; background: var(--dev-color4); display : flex; /* Makes grid cell a flex container */ justify-content: center; /* Centers items inside horizontally */ align-items : center; /* Centers items inside vertically */ position : relative; /* Local stacking context for glow */ grid-template-rows: auto; } /* ──────────────────── ✦ EPISODE BACKGROUND ✦ ──────────────────── */ .reference-ep{ position: absolute; width : 100%; height : auto; display : block; z-index : -1; opacity: 0; } /* ───────────────── ✦ SKELETON LOADER ✦ ───────────────── */ .ep-card.skel { pointer-events: none; --skelbgcolor: #ffffff10; } .ep-card.skel .skel-title { height : 27px; width : 90%; background : var(--skelbgcolor); border-radius: 4px; animation : epPulse 1.4s ease-in-out infinite; } .ep-card.skel .skel-meta { height : 16px; width : 55%; background : var(--skelbgcolor); border-radius: 4px; animation : epPulse 1.4s ease-in-out infinite; } .ep-card.skel .ep-media, .ep-card.skel .skel-media { background:#000; } @keyframes epPulse{ 0%,100% { opacity:.6; } 50% { opacity:.9; } } /* ────────────────────────────────────────── ✦ EPISODE FOOTER DYNAMIC HEIGHT ADJUSTMENT ✦ ────────────────────────────────────────── */ .rectangle1 { position: absolute; width : 100%; height : 1.8px; background-color: #ececec; left : 0px; z-index: 0; } /* ───────────────────── ✦ EPISODE GRID LAYOUT ✦ ───────────────────── */ .ep-row{ --gap-x: 33px; /* Horizontal gap */ --gap-y: 40px; /* Vertical gap - Was 18px */ --cols : 2; /* Default col # */ display : grid; column-gap : var(--gap-x); row-gap : var(--gap-y); justify-content: stretch; justify-items : stretch; align-content : start; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); width : 100%; /* PATCH FIX: stable spacing + full-width fill */ height: auto; box-sizing: border-box; position : relative; z-index : 1; } @media (min-width: 790px){ .ep-row{ --cols: 3; } } @media (min-width: 1030px){ .ep-row{ --cols: 4; } } @media (min-width: 1400px){ /* Was 1440px */ .ep-row{ --cols: 5; } } /* TODO: Ultrawide later corrections */ @media (min-width: 1698px){ .ep-row{ --cols: 5; } /* change to 6/7 if needed */ } /* ─────────────── ✦ EPISODE CARDS ✦ ─────────────── */ .ep-card { display : grid; aspect-ratio : 643 / 550; grid-template-rows: 362fr 188fr; width : 100% !important; overflow : hidden; cursor : pointer; position : relative; isolation : isolate; overflow : visible !important; /* let glow spill */ transition: box-shadow 140ms ease; box-sizing: border-box !important; } .ep-media { position : relative; width : 100%; aspect-ratio: 16 / 9; background: #111; overflow : hidden; } .ep-media img, .ep-thumb { width : 100%; height : 100%; object-fit: cover; display : block; } .ep-text { display : flex; flex-direction: column; padding-top : 4.7%; row-gap : 5.9%; } .ep-channel { /* Channel Name */ text-transform: uppercase; font-family : 'Inter', sans-serif; font-style : normal; font-weight : 300; /* Was 400 */ /* font-size : clamp(12px, 0.798rem + 0.149vw, 15.9px); */ font-size : 10px; line-height : 27px; letter-spacing: 0px; color : rgba(255, 255, 255, 0.61); margin : 0; margin-top : -2px; padding-bottom: 2px; /* opacity : 0.75; */ } .ep-title{ text-transform: uppercase; font-family : 'DMSans', sans-serif; font-style : normal; font-weight : 600; /* Was 400 */ font-size : 14px; /* Was 19, 16 */ line-height : 22px; /* Was 27 */ letter-spacing: 0px; /* Was -0.48, 0.5 */ text-wrap-mode: wrap; color : #ffffff; margin: 0; padding-bottom: 3px; box-sizing: border-box; display : -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow : hidden; font-synthesis: none; -webkit-font-smoothing: antialiased; user-select: text; pointer-events: auto; } .ep-meta, .ep-dsc{ position : relative; text-transform: uppercase; font-family : 'Public', sans-serif; /* Was Inter */ font-style : normal; font-weight : 200; /* Was 400 */ /* font-size : clamp(12px, 0.798rem + 0.149vw, 15.9px); */ font-size : 11px; line-height : 27px; letter-spacing: 0px; color : rgba(255, 255, 255, 0.541); margin : 0; padding : 0px; margin-top : 10px; padding-top: 0; white-space : nowrap; overflow : hidden; text-overflow: ellipsis; /* opacity : 0.75; */ } .ep-timestamp { position: absolute; /* ARCHIVED: Was integrated with description meta */ right : 5px; bottom : 5px; font-family: DMSans; font-weight: 500; font-size : 14px; line-height: 1; color : #fff; border-radius: 0px; padding : 4px 8px; background : rgba(0, 0, 0, 0.52); z-index : 2; user-select : none; pointer-events: none; } /* ────────────────────────────── ✦ EPISODE CARD HOVER ANIMATION ✦ ────────────────────────────── */ .ep-media { position : relative; overflow : visible !important; /* prevent clipping of glow/shine */ transform-origin: center; transition : transform 160ms ease; will-change : transform; box-shadow: 0 6px 15px 0px rgba(0, 0, 0, 0.37), /* x-offset y-offset blur spread */ 0 8px 22px rgba(0, 0, 0, 0.084) !important; transition: transform 160ms ease, box-shadow 140ms ease; } .ep-card:hover .ep-media { transform : translateY(-6px) scale(1.02); box-shadow: none !important; } .ep-media img.ep-thumb { position: relative; z-index : 2; display : block; } /* ──────────────────── ✦ ADAPTIVE BLUR GLOW ✦ ──────────────────── */ .ep-media::before{ content:""; position:absolute; inset: 0px; /* generous spill outside */ z-index: 1; /* behind the image */ background-image: var(--thumb, none); background-size: cover; background-position: center; filter: blur(30px) saturate(170%) brightness(1.20); opacity: 0; transition: opacity 120ms ease, filter 120ms ease; pointer-events:none; } .ep-card:hover .ep-media::before{ opacity: 1; filter: blur(25px) saturate(185%) brightness(1); } /* ───────── ✦ RESULTS ✦ ───────── */ .allep-no-results { font-family : 'Work Sans', sans-serif; font-weight : 400; font-size : 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; text-align : center; margin : 24px auto 0; color : rgba(255,255,255,0.85); } /* ────────────────── ✦ LOAD MORE BUTTON ✦ ────────────────── */ #loadMore{ display : block; margin-top: 35px !important; margin-bottom: min(3%, 10px); /* Loadmore Bottom Mar */ position: relative; z-index : 1; } @media (max-width: 750px){ #loadMore:hover, /* Disables hover glow at 750px to stop cliping */ #loadMore:focus-visible{ filter: none !important; box-shadow: none !important; transform: none !important; } } /* ───────────────────────────────────────────── ✦ MOBILE / <900px LIST LAYOUT (Crunchy-style) ✦ Thumb left, info right, stacked rows ───────────────────────────────────────────── */ /* Patch fix for rn, will add upwards later */ /* ───────────────────────────────────────────── ✦ LIST MODE STARTS AT 750px AND DOWN ✦ Single column only (no 2-col phase) Extra-tight sizing is the default in list mode ───────────────────────────────────────────── */ @media (max-width: 749.98px){ .ep-row{ --gap: 18px; /* Vertical list gap */ display: grid !important; width : 100% !important; height: auto; gap : var(--gap) !important; box-sizing : border-box !important; align-content: start !important; justify-items: stretch !important; grid-template-columns: 1fr !important; } .ep-card { display : flex !important; flex-direction: row !important; width : 100% !important; height: auto !important; align-items : center !important; aspect-ratio: auto !important; /* Disables grid-card ratio in list mode */ overflow : visible !important; transition : none !important; } .ep-title{ display : block !important; white-space : nowrap !important; /* Allows online 1 line of text */ overflow : hidden !important; text-overflow : ellipsis !important; -webkit-line-clamp : unset !important; -webkit-box-orient : unset !important; } .ep-media{ flex : 0 0 150px !important; width : 150px !important; aspect-ratio: 16 / 9 !important; overflow : hidden !important; transition : none !important; } .ep-thumb{ display : block !important; width : 100% !important; height : 100% !important; object-fit: cover !important; } .ep-text{ flex : 1 1 auto !important; min-width : 0 !important; /* enables clamp/ellipsis */ padding-top : 0 !important; padding-left: 14px !important; /* extra-tight spacing */ row-gap : 0px !important; } .ep-card:not(:last-child){ padding-bottom: 14px !important; /* Divider */ border-bottom : 1px solid rgba(255,255,255,0.08) !important; } .ep-timestamp{ right : 8px !important; bottom : 8px !important; /* font-size: 14px !important; */ padding : 5px 8px !important; } .ep-card:hover .ep-media{ transform: none !important; /* Disables hover */ box-shadow: 0 6px 15px 0px rgba(0, 0, 0, 0.37), 0 8px 22px rgba(0, 0, 0, 0.084) !important; } .ep-card:hover .ep-media::before{ opacity: 0 !important; filter : none !important; } } /* ✦ PATCH FIX: Rigth Margin 5%, Prevents glow spill ✦ */ @media (max-width: 560px){ /* Hard clamp the episodes area */ .allepinnercontainer, .ep-row{ overflow-x: clip !important; /* use hidden if clip not supported */ } /* In list-mode widths, do NOT allow glow spill to affect layout */ .ep-card{ overflow: hidden !important; /* overrides overflow: visible !important */ } .ep-media{ overflow: hidden !important; /* overrides overflow: visible !important */ } /* Kill the blurred glow layer that extends past bounds */ .ep-media::before{ content: none !important; display: none !important; } /* Load more should never exceed container width */ #loadMore{ max-width : 100% !important; width : 100% !important; box-sizing: border-box !important; } } /* ✦ PATCH FIX: Text verical centering ✦ */ /* Merge with upper later */ @media (max-width: 749.98px){ /* Card row */ .ep-card{ align-items: center !important; /* keeps whole block centered vs thumb */ } /* Text column */ .ep-text{ padding-top : 0 !important; padding-bottom : 0 !important; margin : 0 !important; display : flex !important; flex-direction : column !important; justify-content: center !important; /* <-- fixes “a few px too high” */ align-items : flex-start !important; /* kill any inherited gap + set per-line spacing manually */ row-gap : 0 !important; gap : 0 !important; line-height : normal !important; } /* Individually control spacing */ .ep-channel{ margin-top : 0 !important; margin-bottom : 0px !important; /* NAME -> TITLE spacing */ } .ep-title{ margin-top : 0 !important; margin-bottom : 7px !important; /* TITLE -> META spacing */ line-height : 22px !important; /* keep title height consistent */ } .ep-meta, .ep-dsc{ margin-top : 0 !important; margin-bottom : 0 !important; /* removes “mystery space under meta” */ line-height : 18px !important; /* tighten meta without pushing block */ padding : 0 !important; } } /* PATCH FIX: Mobile search underline */ /* MOBILE: keep search underline inside the page and match the opened input width */ /* MOBILE: underline length matches “14 visible chars” (shorter) and never spills */ @media (max-width: 749.98px){ .btn-search{ --open-w: min(220px, calc(100vw - 120px)) !important; --u-ch : 13; /* Makes the line longer */ --u-pad : 16px; /* Extra padding room */ } .btn-search{ max-width: 100% !important; /* Prevents spilling */ overflow : hidden !important; } .btn-search-underline{ right: auto !important; width: min(var(--open-w), calc((var(--u-ch) * 1ch) + var(--u-pad))) !important; left : var(--underline-pos) !important; } } /* ✦ PATCH FIX: Preserve 5% right margins, stops overflow [EP + LOADMORE] ✦ */ @media (max-width: 749.98px){ html, body{ overflow-x: hidden !important; } .allepprimarycontainer, .allepinnercontainer, .ep-row, .ep-card, .ep-media, .ep-text, .btn-search, #loadMore{ max-width: 100% !important; box-sizing: border-box !important; overflow-x: clip !important; } .ep-card, .ep-media{ overflow: hidden !important; } /* kills glow/shadow spill */ .ep-media::before{ display: none !important; content: none !important; } .btn-search-underline{ max-width: calc(100% - var(--underline-pos)) !important; } } /* PATCH: list-mode text overflow fixes (750px and below) */ @media (max-width: 749.98px){ .ep-text{ flex: 1 1 auto !important; min-width: 0 !important; /* critical: allow shrink inside flex row */ overflow: hidden !important; /* contain any spill */ } .ep-channel, .ep-title, .ep-meta, .ep-dsc{ min-width: 0 !important; /* critical: allow ellipsis to work */ max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; } .ep-title{ white-space: nowrap !important; /* 1 line + ... */ display: block !important; } .ep-meta, .ep-dsc{ white-space: nowrap !important; display: block !important; } } /* PATCH: prevent title baseline clipping (all widths) */ .ep-title{ line-height : 1.45 !important; /* slightly taller */ padding-bottom: 2px !important; margin-bottom : 0 !important; display : -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow : hidden; } /* ✦ PATCH FIX: Removes Tap Highlight from EPISODES & SHORTS buttons on IOS */ @media (max-width: 749.98px){ /* Apply to your episode/shorts controls (add selectors as needed) */ #btnEpisodes, #btnShorts, .naviconbtn a, .naviconbtn button, .btn-search-icon, #loadMore, .ep-card{ -webkit-tap-highlight-color: transparent !important; /* kills iOS highlight */ tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; /* kills iOS callout */ -webkit-user-select: none !important; user-select: none !important; outline: none !important; } /* If EP/SHORTS are