https://surviveaccounting.com/assets/branding_.social-CFrlKHwD.js

1import{hl as $,r as y,j as e,q as Z,A as ee}from"./index-B-VekllG.js";import{B as te}from"./BrandingNav-BCx7T9_k.js";import{F as A,M as ae,B as ie,C as V,E as D,i as S,a as se}from"./kit-ui-CN8gfXdQ.js";import{b as re,K as M,m as O,a as le,c as ne,T as oe}from"./ThumbnailArt-ZAQZ6412.js";import{b as x,c as P,d as ce,N as de,e as _,i as he,f as H}from"./export-png-BMChpE1w.js";import{u as xe}from"./use-kit-fonts-CyMQpsS4.js";import{V as pe,a as C,c as I,b as L}from"./Shell-BX-ALkhd.js";import"./CalloutCard-BTp70M5j.js";import"./inline-md-BGloW58v.js";import"./theme-DfwJ9FOc.js";import"./chain-lightning-Bmy6f9xO.js";import"./useLocation-GRhx_v-G.js";import"./talkthrough-review-CY4l6vBo.js";import"./cost-ledger.functions-3jb9tvih.js";import"./use-bank-QSvZR96M.js";import"./production-time.functions-BpUc-oRa.js";import"./production-time-B4X0dJW7.js";import"./end-of-topic-DGd-vt3s.js";import"./flask-conical-HSkN45MB.js";function z(a,r,l,c){return{x:(a-l)/2,y:(r-c)/2,w:l,h:c}}const w={size:2048,filename:"survive-accounting-avatar.png"},R={min:.4,max:.76,step:.01,default:.66},ue=.06;function U(a,r=w.size){const l=r/2,c=re(a*r);return{radius:l,reach:c,clearance:l-c,share:(l-c)/l}}const G=[{id:"instagram",label:"Instagram",name:"Survive Accounting | Exam Prep"},{id:"tiktok",label:"TikTok",name:"Survive Accounting"},{id:"youtube",label:"YouTube",name:"Survive Accounting"}],n={w:2560,h:1440,filename:"survive-accounting-youtube-banner.png"},u=z(n.w,n.h,1235,338),X=[{id:"desktop",label:"Desktop",rect:z(n.w,n.h,2560,423)},{id:"tablet",label:"Tablet",rect:z(n.w,n.h,1855,423)},{id:"mobile",label:"Mobile",rect:z(n.w,n.h,1546,423)},{id:"tv",label:"TV",rect:{x:0,y:0,w:n.w,h:n.h}}],E={tagline:["Cram what's on your exam.","Skip everything else."],cta:"EXAM 1 IS FREE",url:"SURVIVEACCOUNTING.COM"},q={wordmark:144,tagline:42,taglineLeading:1.16,cta:25,ctaTracking:.12,ctaPillH:50,gaps:[28,24]};function me(){const a=q,r=-144*(.8-.13),l=a.wordmark*.13,c=a.tagline*.72,m=a.tagline*.22,o=l-r+a.gaps[0]+c+a.tagline*a.taglineLeading+m+a.gaps[1]+a.ctaPillH,t=u.y+(u.h-o)/2,h=t-r,d=h+l+a.gaps[0]+c,f=d+a.tagline*a.taglineLeading,v=f+m+a.gaps[1];return{top:t,bottom:v+a.ctaPillH,height:o,wordmarkBaseline:h,taglineBaselines:[d,f],ctaTop:v}}const ge=["ole-miss","lsu","tennessee","alabama","florida","oregon"];function ye(){const a=n.w/2,r=n.h/2,l=[{dx:1160,h:240,opacity:.09},{dx:950,h:270,opacity:.14},{dx:750,h:300,opacity:.2}],c=(t,h)=>({x:t-h*$/2,y:r-h/2,w:h*$,h}),m=l.map(t=>({cx:a-t.dx,h:t.h,opacity:t.opacity})),o=[...l].reverse().map(t=>({cx:a+t.dx,h:t.h,opacity:t.opacity}));return[...m,...o].map((t,h)=>({id:ge[h],cx:t.cx,cy:r,h:t.h,opacity:t.opacity,box:c(t.cx,t.h)}))}const fe=["ole-miss","lsu","tennessee","alabama","arkansas","georgia"],be="survive-accounting-social-cover.png",J=y.forwardRef(function({fill:r,width:l,guides:c=!1},m){const o=w.size,t=o/2;return e.jsxs("svg",{ref:m,xmlns:"http://www.w3.org/2000/svg",viewBox:`0 0 ${o} ${o}`,width:l,height:l,role:"img","aria-label":"Survive Accounting avatar",style:{display:"block"},children:[e.jsx("rect",{x:0,y:0,width:o,height:o,fill:x.navy}),e.jsx(M,{cx:t,cy:t,inkH:r*o,c1:x.boltLit,c2:x.boltShade}),c&&e.jsxs("g",{"data-kit-guide":"1",fill:"none",children:[e.jsx("circle",{cx:t,cy:t,r:t-4,stroke:"#7DD3FC",strokeWidth:8,strokeDasharray:"34 24"}),e.jsx("circle",{cx:t,cy:t,r:U(r).reach,stroke:"#FCA311",strokeWidth:6,strokeDasharray:"10 16"})]})]})}),Y={desktop:"#7DD3FC",tablet:"#C4B5FD",mobile:"#3BF5A0",tv:"#9AA3B8"},K=y.forwardRef(function({width:r,guides:l=!1,crop:c},m){const o=c??{x:0,y:0,w:n.w,h:n.h},t=q,h=me(),d=n.w/2,f=O(E.cta,t.cta,800,x.sans,t.ctaTracking)+52,v=O("→",t.cta+6,800,x.sans),F=O(E.url,t.cta,800,x.sans,t.ctaTracking),j=d-(f+20+v+16+F)/2,T=h.ctaTop+t.ctaPillH/2+t.cta*.36,b=(i,p=0)=>({fontFamily:x.sans,fontWeight:800,fontSize:i,letterSpacing:i*p});return e.jsxs("svg",{ref:m,xmlns:"http://www.w3.org/2000/svg",viewBox:`${o.x} ${o.y} ${o.w} ${o.h}`,width:r,height:r?r*o.h/o.w:void 0,role:"img","aria-label":"Survive Accounting YouTube banner",style:{display:"block"},children:[e.jsx("rect",{x:0,y:0,width:n.w,height:n.h,fill:x.navy}),ye().map(i=>{const p=P(i.id);return e.jsx(le,{x:i.box.x,y:i.box.y,h:i.h,c1:p.c1,c2:p.c2,opacity:i.opacity},i.id)}),e.jsx(ne,{x:d,baseline:h.wordmarkBaseline,size:t.wordmark,anchor:"middle"}),E.tagline.map((i,p)=>e.jsx("text",{x:d,y:h.taglineBaselines[p],textAnchor:"middle",fill:x.cream,style:b(t.tagline),children:i},i)),e.jsx("rect",{x:j,y:h.ctaTop,width:f,height:t.ctaPillH,rx:t.ctaPillH/2,fill:x.ctaRed}),e.jsx("text",{x:j+26,y:T,fill:x.cream,style:b(t.cta,t.ctaTracking),children:E.cta}),e.jsx("text",{x:j+f+20,y:T+1,fill:x.cream,style:b(t.cta+6),children:"→"}),e.jsx("text",{x:j+f+20+v+16,y:T,fill:x.cream,fillOpacity:.92,style:b(t.cta,t.ctaTracking),children:E.url}),l&&e.jsxs("g",{"data-kit-guide":"1",fill:"none",children:[X.filter(i=>i.id!=="tv").map((i,p)=>e.jsxs("g",{children:[e.jsx("rect",{x:i.rect.x+4,y:i.rect.y,width:i.rect.w-8,height:i.rect.h,stroke:Y[i.id],strokeWidth:5,strokeDasharray:"22 16"}),e.jsxs("text",{x:i.rect.x+20,y:p===1?i.rect.y+i.rect.h+44:i.rect.y-18,fill:Y[i.id],style:b(30,.08),children:[i.label.toUpperCase()," ",i.rect.w,"×",i.rect.h]})]},i.id)),e.jsx("rect",{x:u.x,y:u.y,width:u.w,height:u.h,stroke:"#FCA311",strokeWidth:6}),e.jsxs("text",{x:u.x+u.w,y:u.y+u.h+44,textAnchor:"end",fill:"#FCA311",style:b(30,.08),children:["SAFE AREA ",u.w,"×",u.h]})]})]})});function B({title:a,blurb:r,children:l}){return e.jsxs("section",{style:{marginTop:34},children:[e.jsx("div",{style:{fontSize:11,fontWeight:800,letterSpacing:"0.18em",textTransform:"uppercase",color:L},children:a}),e.jsx("div",{style:{fontSize:12.5,color:I,margin:"4px 0 14px",maxWidth:760,lineHeight:1.5},children:r}),l]})}function N({size:a,fill:r}){return e.jsx("div",{style:{width:a,height:a,borderRadius:"50%",overflow:"hidden",flexShrink:0},children:e.jsx(J,{fill:r,width:a})})}const W={marginTop:6,fontSize:11,color:I,textAlign:"center"};function ve(){xe();const[a,r]=y.useState(R.default),[l,c]=y.useState(!1),[m,o]=y.useState(!0),[t,h]=y.useState(()=>Object.fromEntries(G.map(s=>[s.id,s.name]))),[d,f]=y.useState(()=>ce({part:"1",title:`5 TYPES OF
2ACCOUNTS`,concept:{kind:"bolt",text:""}}

2)),[v,F]=y.useState(de),j=y.useRef(null),T=y.useRef(null),b=y.useRef(null),i=U(a),p=i.share>=ue,k=s=>f(g=>({...g,...s}));return e.jsxs("div",{style:{color:pe},children:[e.jsx(B,{title:"1 · Master avatar",blurb:"One image for Instagram, TikTok and YouTube: navy, the real house bolt centred on its own ink, nothing else. The small circles are the sizes the apps actually draw it — the bolt has to read there.",children:e.jsxs("div",{style:{display:"flex",gap:22,flexWrap:"wrap",alignItems:"flex-start"},children:[e.jsxs("div",{children:[e.jsx("div",{style:{borderRadius:8,overflow:"hidden",border:`1px solid ${C}`},children:e.jsx(J,{ref:j,fill:a,width:300,guides:l})}),e.jsxs("div",{style:W,children:["square · ",w.size,"×",w.size]})]}),e.jsxs("div",{children:[e.jsx(N,{size:300,fill:a}),e.jsx("div",{style:W,children:"the circular crop"})]}),e.jsxs("div",{style:{display:"flex",gap:22,alignItems:"flex-end",paddingTop:20},children:[e.jsxs("div",{children:[e.jsx(N,{size:48,fill:a}),e.jsx("div",{style:W,children:"48 px"})]}),e.jsxs("div",{children:[e.jsx(N,{size:32,fill:a}),e.jsx("div",{style:W,children:"32 px"})]})]}),e.jsxs("div",{style:{minWidth:250,flex:"1 1 250px"},children:[e.jsx(A,{label:"Bolt size",hint:"The bolt's height as a share of the square.",children:e.jsxs("div",{style:{display:"flex",gap:10,alignItems:"center"},children:[e.jsx("input",{type:"range",min:R.min,max:R.max,step:R.step,value:a,onChange:s=>r(Number(s.target.value)),style:{flex:1,accentColor:L}}),e.jsxs("span",{style:{fontSize:12,fontVariantNumeric:"tabular-nums"},children:[Math.round(a*100),"%"]})]})}),e.jsxs("div",{style:{marginTop:10,fontSize:12.5,color:p?ae:ie,lineHeight:1.5},children:[i.clearance>0?`The bolt's farthest point, keyline included, stays ${Math.round(i.clearance)} px inside the circle (${Math.round(i.share*100)}% of the radius).`:`The bolt runs ${Math.round(-i.clearance)} px past the circle — the crop would cut it.`,i.clearance>0&&!p&&" That's too tight — bring it down."]}),e.jsxs("div",{style:{marginTop:10,display:"flex",gap:8,flexWrap:"wrap",alignItems:"flex-start"},children:[e.jsx(V,{on:l,onClick:()=>c(s=>!s),title:"The crop circle and the bolt's reach — never exported",children:"guides"}),e.jsx(D,{strong:!0,label:"Download Avatar PNG",blocked:p?null:"The bolt is too close to the circle.",run:()=>_(j.current,{width:w.size,height:w.size,filename:w.filename})})]})]})]})}),e.jsx(B,{title:"Profiles",blurb:"The same avatar on all three. Display names are reference text for when you fill the profile in — they are never baked into the image.",children:e.jsx("div",{style:{display:"flex",gap:14,flexWrap:"wrap"},children:G.map(s=>e.jsxs("div",{style:{width:270,border:`1px solid ${C}`,borderRadius:14,padding:14,background:"rgba(244,239,230,0.03)"},children:[e.jsx("div",{style:{fontSize:10.5,fontWeight:800,letterSpacing:"0.14em",textTransform:"uppercase",color:I},children:s.label}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10,alignItems:"center",marginTop:12},children:[e.jsx(N,{size:84,fill:a}),e.jsx("input",{value:t[s.id]??"",onChange:g=>h(Q=>({...Q,[s.id]:g.target.value})),"aria-label":`${s.label} display name`,style:{...S,fontWeight:800,fontSize:13.5,textAlign:"center"}})]})]},s.id))})}),e.jsxs(B,{title:"2 · YouTube banner",blurb:`${n.w}×${n.h}. Everything that matters sits inside YouTube's 1235×338 safe area; the faint campus trail lives outside it and may be cut. Guides show in the editor only.`,children:[e.jsxs("div",{style:{display:"flex",gap:8,alignItems:"flex-start",flexWrap:"wrap",marginBottom:10},children:[e.jsx(V,{on:m,onClick:()=>o(s=>!s),title:"Safe area + device bands — never exported",children:"guides"}),e.jsx(D,{strong:!0,label:"Download YouTube Banner PNG",run:()=>_(T.current,{width:n.w,height:n.h,filename:n.filename})})]}),e.jsx("div",{style:{borderRadius:10,overflow:"hidden",border:`1px solid ${C}`,maxWidth:1100},children:e.jsx(K,{ref:T,guides:m})}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(380px, 1fr))",gap:14,marginTop:14,maxWidth:1100},children:X.map(s=>e.jsxs("div",{children:[e.jsxs("div",{style:{fontSize:11.5,fontWeight:800},children:[s.label," ",e.jsxs("span",{style:{color:I,fontWeight:600},children:["· shows ",s.rect.w,"×",s.rect.h]})]}),e.jsx("div",{style:{marginTop:6,borderRadius:8,overflow:"hidden",border:`1px solid ${C}`},children:e.jsx(K,{crop:s.rect})})]},s.id))})]}),e.jsx(B,{title:"3 · Social cover template",blurb:"The thumbnail system's social cover with free fields — for Reel, TikTok and Shorts covers and Story launch slides. Per-video covers (frames, illustrations, the four variants) are on Thumbnails.",children:e.jsxs("div",{style:{display:"flex",gap:22,flexWrap:"wrap",alignItems:"flex-start"},children:[e.jsxs("div",{style:{flex:"0 0 320px"},children:[e.jsx(A,{label:"Eyebrow",hint:e.jsxs(e.Fragment,{children:["Blank = the series label from the exam number (EXAM ",d.exam," · ",d.part.trim()?d.part.padStart(2,"0"):"…",")."]}),children:e.jsx("input",{value:d.eyebrow,onChange:s=>k({eyebrow:s.target.value}),placeholder:"EXAM 1 · EASY POINTS",style:S})}),e.jsx(A,{label:"Exam number",children:e.jsxs("div",{style:{display:"flex",gap:8},children:[e.jsx("input",{type:"number",min:1,max:9,value:d.exam,onChange:s=>k({exam:Math.max(1,Math.min(9,Number(s.target.value)||1))}),style:{...S,width:64}}),e.jsx("input",{value:d.part,onChange:s=>k({part:s.target.value}),placeholder:"01",style:S,"aria-label":"Video number or name"})]})}),e.jsx(A,{label:"Main title",hint:"Enter forces a line break.",children:e.jsx("textarea",{value:d.title,onChange:s=>k({title:s.target.value}),rows:2,style:{...S,resize:"vertical"}})}),e.jsx(A,{label:"Subtitle · optional",children:e.jsx("input",{value:d.subtitle,onChange:s=>k({subtitle:s.target.value}),placeholder:"Free for every campus",style:S})}),e.jsx(A,{label:"Campus accent",children:e.jsx(se,{value:v,onCh

2ange:F})}),e.jsx("div",{style:{marginTop:14},children:e.jsx(D,{strong:!0,label:"Download Social Cover PNG",blocked:he(d,"social"),run:()=>_(b.current,{width:H.w,height:H.h,filename:be})})}),e.jsx("div",{style:{marginTop:12,fontSize:12},children:e.jsx(Z,{to:"/branding/thumbnails",style:{color:L},children:"Per-video covers →"})})]}),e.jsx("div",{style:{borderRadius:12,overflow:"hidden",border:`1px solid ${C}`},children:e.jsx(oe,{ref:b,spec:d,colorway:P(v),mode:"social",guides:!0,width:300})})]})}),e.jsx(B,{title:"Campus bolts",blurb:"Design review only: the same bolt in six school colourways from the school table, on the navy and at avatar size. Campuses keep both school colours.",children:e.jsx("div",{style:{display:"flex",gap:16,flexWrap:"wrap"},children:fe.map(s=>{const g=P(s);return e.jsxs("div",{style:{width:150,textAlign:"center"},children:[e.jsxs("svg",{viewBox:"0 0 200 200",width:150,height:150,style:{display:"block",borderRadius:14},children:[e.jsx("rect",{x:0,y:0,width:200,height:200,fill:x.navy}),e.jsx(M,{cx:100,cy:100,inkH:136,c1:g.c1,c2:g.c2})]}),e.jsxs("div",{style:{display:"flex",gap:10,justifyContent:"center",alignItems:"center",marginTop:8},children:[e.jsx("div",{style:{width:48,height:48,borderRadius:"50%",overflow:"hidden"},children:e.jsxs("svg",{viewBox:"0 0 200 200",width:48,height:48,style:{display:"block"},children:[e.jsx("rect",{x:0,y:0,width:200,height:200,fill:x.navy}),e.jsx(M,{cx:100,cy:100,inkH:200*R.default,c1:g.c1,c2:g.c2})]})}),e.jsxs("div",{style:{fontSize:10,color:I,lineHeight:1.5,textAlign:"left"},children:[g.c1,e.jsx("br",{}),g.c2]}

2)]}),e.jsx("div",{style:{marginTop:6,fontSize:12,fontWeight:800},children:g.name})]},s)})})})]})}function je(){return e.jsxs("div",{style:{minHeight:"100vh",background:"#070B14",color:"#F4EFE6",fontFamily:"'Inter', system-ui, sans-serif",padding:"28px 32px 80px"},children:[e.jsx(te,{current:"/branding/social"}),e.jsxs("div",{style:{display:"flex",alignItems:"baseline",gap:16,flexWrap:"wrap"},children:[e.jsx("h1",{style:{fontFamily:"'Rubik', system-ui, sans-serif",fontSize:22,fontWeight:900,margin:0},children:"Social kit"}),e.jsx("span",{style:{fontSize:12.5,color:"#9AA3B8"},children:"the avatar, the YouTube banner and the cover template — one bolt, one navy, one cream, one typeface"})]}),e.jsx(ve,{})]})}const Le=()=>e.jsx(ee,{children:e.jsx(je,{})});export{Le as component};