1;!function(){try { var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof global?global:"undefined"!=typeof window?window:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&((e._debugIds|| (e._debugIds={}))[n]="50caa091-8a9f-a9ba-b56c-9b0438cc4daf")}catch(e){}}(); 2(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,525182,e=>{"use strict";let r=[{slug:"youtube-growth",label:"YouTube Growth"},{slug:"algorithm",label:"Algorithm"},{slug:"analytics",label:"Analytics"},{slug:"content-strategy",label:"Content Strategy"},{slug:"thumbnails",label:"Thumbnails & CTR"},{slug:"monetization",label:"Monetization"},{slug:"shorts",label:"Shorts"},{slug:"ai-tools",label:"AI & Tools"}],a=Object.fromEntries(r.map(e=>[e.slug,e.label]));e.s(["BLOG_CATEGORIES",0,r,"categoryLabel",0,function(e){return e?a[e]||e:""}])},116762,e=>{"use strict";var r=e.i(843476),a=e.i(271645),o=e.i(846932),t=e.i(231178);let l=(0,a.createContext)(null);var i=e.i(287022),s=e.i(674008);let n=e=>!e.isLayoutDirty&&e.willUpdate(!1),g=({children:e,id:o,inherit:g=!0})=>{let c=(0,a.useContext)(t.LayoutGroupContext),d=(0,a.useContext)(l),[p,b]=function(){let e,r=(e=(0,a.useRef)(!1),(0,s.useIsomorphicLayoutEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e),[o,t]=(0,a.useState)(0),l=(0,a.useCallback)(()=>{r.current&&t(o+1)},[o]);return[(0,a.useCallback)(()=>i.frame.postRender(l),[l]),o]}(),m=(0,a.useRef)(null),u=c.id||d;if(null===m.current){let e,r,a,t;(!0==(!0===(t=g))||"id"===t)&&u&&(o=o?u+"-"+o:u),m.current={id:o,group:!0===g&&c.group||(e=new Set,r=new WeakMap,{add:o=>{e.add(o),r.set(o,o.addEventListener("willUpdate",a))},remove:o=>{e.delete(o);let t=r.get(o);t&&(t(),r.delete(o)),a()},dirty:a=()=>e.forEach(n)})}}let h=(0,a.useMemo)(()=>({...m.current,forceRender:p}),[b]);return(0,r.jsx)(t.LayoutGroupContext.Provider,{value:h,children:e})};var c=e.i(522016),d=e.i(525182);function p(e){return new Date(e).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})}function b(e){return(e||"?").trim().charAt(0).toUpperCase()||"?"}function m({post:e,index:a}){return(0,r.jsxs)(c.default,{href:`/blog/${e.slug}`,className:"blog-card",style:{animation:`blog-fade 0.5s cubic-bezier(0.16,1,0.3,1) ${.06*Math.min(a,8)}s both`},children:[e.cover_image?(0,r.jsx)("div",{className:"blog-card-imgwrap",children:(0,r.jsx)("img",{className:"blog-card-img",src:e.cover_image,alt:e.title,loading:"lazy"})}):null,(0,r.jsxs)("div",{className:"blog-card-body",children:[(0,r.jsx)("h3",{className:"blog-card-title",children:e.title}),(0,r.jsxs)("div",{className:"blog-card-meta",children:[e.author_name?(0,r.jsx)("span",{className:"blog-avatar",children:b(e.author_name)}):null,e.author_name?(0,r.jsx)("span",{className:"blog-meta-name",children:e.author_name}):null,e.author_name&&e.published_at?(0,r.jsx)("span",{className:"blog-dot",children:"·"}):null,e.published_at?(0,r.jsx)("span",{children:p(e.published_at)}):null]})]})]})}e.s(["default",0,function(){let e,[t,l]=(0,a.useState)([]),[i,s]=(0,a.useState)(0),[n,u]=(0,a.useState)([]),[h,x]=(0,a.useState)(!0),[f,v]=(0,a.useState)(null),[w,j]=(0,a.useState)(""),[y,N]=(0,a.useState)(""),[k,z]=(0,a.useState)(1),S=(0,a.useRef)(null),C=!!f||!!y.trim(),L=(e,r,a)=>{let o=new URLSearchParams;e>1&&o.set("page",String(e)),r&&o.set("category",r),a&&a.trim()&&o.set("q",a.trim());let t=o.toString(),l=t?`?${t}`:window.location.pathname;window.history.pushState({},"",l)};(0,a.useEffect)(()=>{let e=()=>{let e=new URLSearchParams(window.location.search),r=parseInt(e.get("page")||"1"),a=e.get("q")||"";z(Number.isFinite(r)&&r>0?r:1),v(e.get("category")||null),j(a),N(a)};return e(),window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)},[]),(0,a.useEffect)(()=>{if(w.trim()===y)return;let e=setTimeout(()=>{let e=w.trim();N(e),z(1),L(1,f,e)},350);return()=>clearTimeout(e)},[w,y]),(0,a.useEffect)(()=>{x(!0);let e=new URLSearchParams;C?(e.set("limit",String(9)),e.set("offset",String((k-1)*9)),f&&e.set("category",f),y.trim()&&e.set("q",y.trim())):e.set("limit",String(50)),fetch(`/api/blog?${e.toString()}`).then(e=>e.json()).then(e=>{l(e.posts||[]),s(e.total||0),Array.isArray(e.availableCategories)&&u(e.availableCategories)}).catch(()=>{}).finally(()=>x(!1))},[f,y,k]);let _=Math.max(1,Math.ceil(i/9)),T=e=>{let r=Math.min(Math.max(1,e),_);r!==k&&(z(r),L(r,f,y),S.current&&S.current.scrollIntoView({behavior:"smooth",block:"start"}))},E=e=>{v(e),z(1),L(1,e,y)},B=(0,a.useMemo)(()=>{let e=[];
2if(_<=7){for(let r=1;r<=_;r++)e.push(r);return e}e.push(1);let r=Math.max(2,k-1),a=Math.min(_-1,k+1);r>2&&e.push("â¦");for(let o=r;o<=a;o++)e.push(o);return a<_-1&&e.push("â¦"),e.push(_),e},[k,_]),M=(0,a.useMemo)(()=>{if(C)return[];let e=[];for(let r of d.BLOG_CATEGORIES){let a=t.filter(e=>e.category===r.slug).slice(0,6);if(!(a.length<3)&&(e.push({slug:r.slug,label:r.label,posts:a}),e.length>=10))break}return e},[t,C]),A=new Set(n.map(e=>e.category)),R=d.BLOG_CATEGORIES.filter(e=>A.has(e.slug)),$=!C&&t.length>0?t[0]:null;if(h)e=(0,r.jsx)("div",{className:"blog-loader",children:(0,r.jsx)("div",{className:"blog-spinner"})});else if(C)e=(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"blog-filter-head",children:[(0,r.jsxs)("span",{className:"blog-filter-label",children:[i," ",1===i?"result":"results",y.trim()?` for "${y.trim()}"`:"",f?` in ${(0,d.categoryLabel)(f)}`:""]}),(0,r.jsx)("button",{type:"button",onClick:()=>{v(null),j(""),N(""),z(1),L(1,null,"")},className:"blog-clear",children:"Clear filters"})]}),0===t.length?(0,r.jsxs)("div",{className:"blog-empty",children:[(0,r.jsx)("p",{className:"blog-empty-title",children:"Nothing matched"}),(0,r.jsx)("p",{className:"blog-empty-sub",children:"Try another search or category."})]}):(0,r.jsx)("div",{className:"blog-grid",children:t.map((e,a)=>(0,r.jsx)(m,{post:e,index:a},e.id))}),_>1?(0,r.jsxs)("nav",{"aria-label":"Blog pagination",className:"blog-pagination",children:[(0,r.jsx)(g,{id:"blog-pagination",children:(0,r.jsxs)("div",{className:"blog-page-row",children:[(0,r.jsxs)("button",{onClick:()=>T(k-1),disabled:1===k,"aria-label":"Previous page",className:"blog-page-btn is-prev is-edge",children:[(0,r.jsx)("svg",{className:"arrow",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.4",strokeLinecap:"round",strokeLinejoin:"round",children:(0,r.jsx)("polyline",{points:"15 18 9 12 15 6"})}),"Prev"]}),B.map((e,a)=>"â¦"===e?(0,r.jsx)("span",{className:"blog-page-gap",children:"â¦"},`gap-${a}`):(0,r.jsxs)("button",{onClick:()=>T(e),"aria-current":e===k?"page":void 0,className:`blog-page-btn${e===k?" is-active":""}`,children:[e===k?(0,r.jsx)(o.motion.span,{layoutId:"blog-page-active-pill",className:"blog-page-pill",transition:{type:"spring",stiffness:380,damping:32,mass:.7}}):null,(0,r.jsx)("span",{className:"blog-page-num",children:e})]},e)),(0,r.jsxs)("button",{onClick:()=>T(k+1),disabled:k===_,"aria-label":"Next page",className:"blog-page-btn is-next is-edge",children:["Next",(0,r.jsx)("svg",{className:"arrow",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.4",strokeLinecap:"round",strokeLinejoin:"round",children:(0,r.jsx)("polyline",{points:"9 18 15 12 9 6"})})]})]})}),(0,r.jsxs)("div",{className:"blog-progress-wrap",children:[(0,r.jsxs)("div",{className:"blog-progress-track",role:"presentation",children:[(0,r.jsx)(o.motion.div,{className:"blog-progress-fill",initial:!1,animate:{width:`${k/_*100}%`},transition:{type:"spring",stiffness:220,damping:28}}),(0,r.jsx)(o.motion.div,{className:"blog-progress-dot",initial:!1,animate:{left:`${k/_*100}%`},transition:{type:"spring",stiffness:220,damping:28}})]}),(0,r.jsxs)("div",{className:"blog-progress-label",children:[(0,r.jsx)("span",{className:"blog-progress-word",children:"Page"}),(0,r.jsx)("span",{className:"blog-progress-page",children:String(k).padStart(2,"0")}),(0,r.jsxs)("span",{className:"blog-progress-of",children:["/ ",String(_).padStart(2,"0")]}),(0,r.jsx)("span",{className:"blog-progress-sep"}),(0,r.jsxs)("span",{className:"blog-progress-total",children:[i," ",1===i?"post":"posts"," total"]})]})]})]}):null]});else if(0===t.length)e=(0,r.jsxs)("div",{className:"blog-empty",children:[(0,r.jsx)("p",{className:"blog-empty-title",children:"No posts yet"}),(0,r.jsx)("p",{className:"blog-empty-sub",children:"Check back soon for new content."})]});else{let a=$?(0,r.jsxs)(c.default,{href:`/blog/${$.slug}`,className:"blog-featured blog-card",children:[$.cover_image?(0,r.jsx)("div",{className:"blog-featured-imgwrap",children:(0,r.jsx)("img",{className:"blog-card-img",src:$.cover_image,alt:$.title})}):null,(0,r.jsxs)("div",{className:"blog-featured-body",children:[$.category?(0,r.jsx)("span",{className:"blog-featured-tag",children:(0,d.categoryLabel)($.category)}):null,(0,r.jsx)("h2",{className:"blog-featured-title",children:$.title}),$.excerpt?(0,r.jsx)("p",{className:"blog-featured-excerpt",children:$.excerpt}):null,(0,r.jsxs)("div",{className:"blog-card-meta",children:[$.author_name?(0,r.jsx)("span",{className:"blog-avatar",children:b($.author_name)}):null,$.author_name?(0,r.jsx)("span",{className:"blog-meta-name",children:$.author_name}):null,$.author_name&&$.published_at?(0,r.jsx)("span",{className:"blog-dot",children:"·"}):null,$.published_at?(0,r.jsx)("span",{children:p($.published_at)}):null]})]})]}):null,o=null;M.length>0?o=M.map(e=>(0,r.jsxs)("section",{className:"blog-section",children:[(0,r.jsxs)("div",{className:"blog-section-head",children:[(0,r.jsx)("h2",{className:"blog-section-title",children:e.label}),(0,r.jsxs)("button",{type:"button",onClick:()=>E(e.slug),className:"blog-view-all",children:["View All",(0,r.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 20 20",fill:"none",children:(0,r.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.6",d:"m7.5 15 5-5-5-5"})})]})]}),(0,r.jsx)("div",{className:"blog-grid",children:e.posts.map((e,a)=>(0,r.jsx)(m,{post:e,index:a},e.id))})]},e.slug)):t.length>1&&(o=(0,r.jsxs)("section",{className:"blog-section",children:[(0,r.jsx)("div",{className:"blog-section-head",children:(0,r.jsx)("h2",{className:"blog-section-title",children:"Latest articles"})}),(0,r.jsx)("div",{className:"blog-grid",children:t.slice(1).map((e,a)=>(0,r.jsx)(m,{post:e,index:a},e.id))})]})),e=(0,r.jsxs)(r.Fragment,{children:[a,o]})}return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("style",{children:` 3 @keyframes blog-fade { 4 from { opacity: 0; transform: translateY(16px); } 5 to { opacity: 1; transform: translateY(0); } 6 } 7 @keyframes blog-spin { to { transform: rotate(360deg); } } 8 9 .blog-breadcrumb { 10 display: flex; align-items: center; gap: 8px; 11 max-width: 1180px; margin: 0 auto; width: 100%; 12 padding: 104px 24px 0; position: relative; z-index: 1; 13 font-family: var(--font-dm); font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.55); 14 } 15 .blog-breadcrumb a { color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s ease; } 16 .blog-breadcrumb a:hover { color: #fff; } 17 .blog-breadcrumb svg { width: 13px; height: 13px; opacity: 0.75; } 18 .blog-breadcrumb .current { color: rgba(255,255,255,0.92); } 19 20 .blog-hero { padding: 28px 24px 36px; text-align: center; position: relative; z-index: 1; } 21 .blog-hero h1 { 22 font-family: 'Open Sauce Two', sans-serif; font-weight: 800; color: #fff; 23 font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.08; margin-bottom: 14px; 24 } 25 .blog-hero p { font-size: 1.02rem; color: rgba(255,255,255,0.7); max-width: 540px; margin: 0 auto; line-height: 1.7; } 26 27 .blog-search { 28 display: flex; align-items: center; gap: 10px; 29 max-width: 560px; margin: 28px auto 0; padding: 0 16px; 30 height: 52px; border-radius: 16px; 31 background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); 32 transition: border-color 0.2s ease, background 0.2s ease; 33 } 34 .blog-search:focus-within { border-color: rgba(232,48,48,0.4); background: rgba(255,255,255,0.05); } 35 .blog-search svg { width: 18px; height: 18px; color: rgba(255,255,255,0.4); flex-shrink: 0; } 36 .blog-search input { 37 flex: 1; background: transparent; border: none; outline: none; 38 color: #fff; font-size: 1rem; font-family: var(--font-dm); 39 } 40 .blog-search input::placeholder { color: rgba(255,255,255,0.4); } 41 .blog-search-clear { 42 background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.4); 43 font-size: 1.2rem; line-height: 1; padding: 4px; transition: color 0.2s ease; 44 } 45 .blog-search-clear:hover { color: #fff; } 46 47 .blog-chips { 48 display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; 49 padding: 24px 24px 0; max-width: 900px; margin: 0 auto; 50 position: relative; z-index: 1; 51 } 52 .blog-chip { 53 padding: 8px 18px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.06); 54 background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.74); font-size: 0.85rem; font-weight: 600; 55 cursor: pointer; font-family: var(--font-dm); 56 transition: all 0.25s cubic-bezier(0.16,1,0.3,1); 57 } 58 .blog-chip:hover { color: #fff; border-color: rgba(255,255,255,0.14); } 59 .blog-chip.is-active { color: #ff8888; border-color: rgba(232,48,48,0.25); background: rgba(232,48,48,0.08); } 60 61 .blog-main { 62 max-width: 1180px; width: 100%; margin: 0 auto; 63 padding: 40px 24px 90px; position: relative; z-index: 1; flex: 1; scroll-margin-top: 90px; 64 } 65 66 .blog-card { 67 background: rgba(14,10,14,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; 68 overflow: hidden; text-decoration: none; display: flex; flex-direction: column; 69 transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease; 70 } 71 .blog-card:hover { 72 transform: translateY(-4px); border-color: rgba(232,48,48,0.25); box-shadow: 0 12px 40px rgba(0,0,0,0.4); 73 } 74 .blog-card:hover .blog-card-img { transform: scale(1.05); } 75 .blog-card-imgwrap { aspect-ratio: 16 / 10; overflow: hidden; } 76 .blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } 77 .blog-card-body { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; } 78 .blog-card-title { 79 font-size: 1.12rem; font-weight: 600; color: #fff; line-height: 1.4; margin-bottom: 16px; 80 } 81 .blog-card-meta { 82 display: flex; align-items: center; gap: 8px; margin-top: auto; 83 font-size: 0.82rem; color: rgba(255,255,255,0.58); font-family: var(--font-dm); 84 } 85 .blog-meta-name { color: rgba(255,255,255,0.85); } 86 .blog-dot { color: rgba(255,255,255,0.4); } 87 .blog-avatar { 88 width: 26px;
88 height: 26px; border-radius: 50%; flex-shrink: 0; 89 background: rgba(232,48,48,0.15); color: #ff8888; 90 display: inline-flex; align-items: center; justify-content: center; 91 font-size: 0.72rem; font-weight: 700; 92 } 93 94 .blog-featured { flex-direction: row; margin-bottom: 56px; } 95 .blog-featured-imgwrap { position: relative; width: 50%; min-height: 340px; overflow: hidden; flex-shrink: 0; } 96 .blog-featured-imgwrap .blog-card-img { position: absolute; inset: 0; } 97 .blog-featured-body { padding: 36px 40px; display: flex; flex-direction: column; flex: 1; } 98 .blog-featured-tag { 99 align-self: flex-start; padding: 4px 12px; border-radius: 10px; margin-bottom: 16px; 100 background: rgba(232,48,48,0.08); border: 1px solid rgba(232,48,48,0.2); 101 color: #ff8888; font-size: 0.7rem; font-weight: 600; 102 } 103 .blog-featured-title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 14px; } 104 .blog-featured-excerpt { font-size: 0.95rem; color: rgba(255,255,255,0.64); line-height: 1.7; margin-bottom: 22px; } 105 .blog-featured .blog-card-meta { font-size: 0.88rem; } 106 107 .blog-section { margin-bottom: 56px; } 108 .blog-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } 109 .blog-section-title { font-family: 'Open Sauce Two', sans-serif; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: #fff; } 110 .blog-view-all { 111 display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; 112 color: rgba(255,255,255,0.7); font-size: 0.95rem; font-weight: 600; font-family: var(--font-dm); 113 transition: color 0.25s ease; 114 } 115 .blog-view-all:hover { color: #fff; } 116 .blog-view-all svg { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } 117 .blog-view-all:hover svg { transform: translateX(3px); } 118 119 .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 24px; } 120 121 .blog-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } 122 .blog-filter-label { font-size: 0.95rem; color: rgba(255,255,255,0.74); font-family: var(--font-dm); } 123 .blog-clear { 124 background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; cursor: pointer; 125 padding: 7px 14px; color: rgba(255,255,255,0.6); font-size: 0.8rem; font-weight: 600; font-family: var(--font-dm); 126 transition: all 0.2s ease; 127 } 128 .blog-clear:hover { color: #fff; border-color: rgba(232,48,48,0.3); background: rgba(232,48,48,0.06); } 129 130 .blog-loader { display: flex; justify-content: center; padding: 80px; } 131 .blog-spinner { width: 32px; height: 32px; border: 2px solid var(--border2); border-top-color: var(--red); border-radius: 50%; animation: blog-spin 0.8s linear infinite; } 132 .blog-empty { text-align: center; padding: 80px 24px; color: rgba(255,255,255,0.4); } 133 .blog-empty-title { font-size: 1.1rem; margin-bottom: 8px; } 134 .blog-empty-sub { font-size: 0.85rem; } 135 136 .blog-pagination { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; } 137 .blog-page-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; } 138 .blog-page-gap { padding: 0 6px; color: rgba(255,255,255,0.22); font-size: 0.95rem; user-select: none; letter-spacing: 1px; } 139 .blog-page-num { position: relative; z-index: 1; } 140 .blog-page-btn { 141 position: relative; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; 142 border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.66); 143 font-size: 0.84rem; font-weight: 700; cursor: pointer; font-family: var(--font-dm); 144 display: inline-flex; align-items: center; justify-content: center; gap: 4px; 145 transition: color 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.34,1.56,0.64,1); 146 } 147 .blog-page-btn:hover:not(:disabled):not(.is-active) { color: #fff; border-color: rgba(232,48,48,0.25); background: rgba(232,48,48,0.04); box-shadow: 0 4px 16px rgba(232,48,48,0.12); transform: translateY(-1px); } 148 .blog-page-btn:active:not(:disabled) { transform: translateY(0) scale(0.96); }
149 .blog-page-btn:disabled { cursor: not-allowed; color: rgba(255,255,255,0.18); } 150 .blog-page-btn.is-active { color: #fff; cursor: default; } 151 .blog-page-btn.is-edge { padding: 0 14px; min-width: auto; } 152 .blog-page-btn .arrow { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); } 153 .blog-page-btn.is-prev:hover:not(:disabled) .arrow { transform: translateX(-3px); } 154 .blog-page-btn.is-next:hover:not(:disabled) .arrow { transform: translateX(3px); } 155 .blog-page-pill { 156 position: absolute; inset: 0; border-radius: 10px; 157 background: linear-gradient(135deg, rgba(232,48,48,0.22), rgba(232,48,48,0.08)); 158 border: 1px solid rgba(232,48,48,0.45); 159 box-shadow: 0 6px 20px rgba(232,48,48,0.25), inset 0 0 18px -8px rgba(232,48,48,0.4); 160 pointer-events: none; z-index: 0; 161 } 162 .blog-progress-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } 163 .blog-progress-track { position: relative; width: 220px; height: 4px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; } 164 .blog-progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, rgba(232,48,48,0.7), rgba(232,48,48,1)); border-radius: 999px; box-shadow: 0 0 12px rgba(232,48,48,0.5); } 165 .blog-progress-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(232,48,48,0.9), 0 0 0 1px rgba(232,48,48,0.5); } 166 .blog-progress-label { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-dm); } 167 .blog-progress-word { font-size: 0.7rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; } 168 .blog-progress-page { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -0.5px; line-height: 1; } 169 .blog-progress-of { font-size: 0.7rem; color: rgba(255,255,255,0.25); letter-spacing: 0.5px; } 170 .blog-progress-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.08); margin: 0 4px; } 171 .blog-progress-total { font-size: 0.72rem; color: rgba(255,255,255,0.35); } 172 173 @media (max-width: 860px) { 174 .blog-featured { flex-direction: column; } 175 .blog-featured-imgwrap { width: 100%; min-height: 0; aspect-ratio: 16 / 9; } 176 .blog-featured-body { padding: 26px 24px; } 177 } 178 @media (max-width: 600px) { 179 .blog-breadcrumb { padding-top: 92px; } 180 .blog-section-title { font-size: 1.3rem; } 181 } 182 `}),(0,r.jsxs)("nav",{"aria-label":"Breadcrumb",className:"blog-breadcrumb",children:[(0,r.jsx)(c.default,{href:"/",children:"Home"}),(0,r.jsx)("svg",{viewBox:"0 0 20 20",fill:"none",children:(0,r.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.6",d:"m7.5 15 5-5-5-5"})}),(0,r.jsx)("span",{className:"current",children:"Blog"})]}),(0,r.jsxs)("section",{className:"blog-hero",children:[(0,r.jsx)("h1",{children:"Voclify Blog"}),(0,r.jsx)("p",{children:"Strategies, tutorials, and updates to help you grow your YouTube channel."}),(0,r.jsxs)("form",{className:"blog-search",role:"search",onSubmit:e=>e.preventDefault(),children:[(0,r.jsx)("svg",{viewBox:"0 0 21 20",fill:"none",children:(0,r.jsx)("path",{d:"M9.667 15.833a6.667 6.667 0 1 0 0-13.333 6.667 6.667 0 0 0 0 13.333ZM18 17.5l-3.625-3.625",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),(0,r.jsx)("input",{type:"text",value:w,onChange:e=>j(e.target.value),placeholder:"Search any topic or article","aria-label":"Search articles"}),w?(0,r.jsx)("button",{type:"button",className:"blog-search-clear",onClick:()=>j(""),"aria-label":"Clear search",children:"Ã"}):null]})]}),R.length>0?(0,r.jsxs)("div",{className:"blog-chips",children:[(0,r.jsx)("button",{type:"button",onClick:()=>E(null),className:`blog-chip${!f?" is-active":""}`,children:"All"}),R.map(e=>(0,r.jsx)("button",{type:"button",onClick:()=>E(e.slug),className:`blog-chip${f===e.slug?" is-active":""}`,children:e.label},e.slug))]}):null,(0,r.jsx)("section",{ref:S,className:"blog-main",children:e})]})}],116762)}]); 183
184//# debugId=50caa091-8a9f-a9ba-b56c-9b0438cc4daf
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.