br-tokens.jsx
1 // Brutalist Procurement design tokens — shared across all funnel pages. 2 3 window.BR = { 4 paper: "#ece7dc", 5 paper2: "#e3ddcf", 6 ink: "#0c0c0c", 7 ink2: "#1f1f1d", 8 rust: "#c2421a", 9 rust2: "#e8542a", 10 mute: "#7a756a", 11 mute2: "#a39d8f", 12 line: "rgba(12,12,12,0.15)", 13 green: "#2d6b3a", 14 }; 15 16 // Brutalist primitives — headers, spec rows, form rows, stamps, etc. 17 // Naming: BR* to namespace globally-shared React components. 18 19 function BRH({ children, n, size = 14 }) { 20 return ( 21 <div style={{display:"flex", alignItems:"baseline", gap:14, borderBottom:`2px solid ${BR.ink}`, paddingBottom:6, marginBottom:14}}> 22 {n && <div style={{fontFamily:"IBM Plex Mono", fontSize:10, fontWeight:500, color:BR.mute}}>§{n}</div>} 23 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:size, letterSpacing:3, color:BR.ink, textTransform:"uppercase"}}>{children}</div> 24 </div> 25 ); 26 } 27 28 function BRSpec({ k, v, unit }) { 29 return ( 30 <div style={{display:"grid", gridTemplateColumns:"110px 1fr auto", alignItems:"baseline", fontFamily:"IBM Plex Mono", fontSize:12, color:BR.ink, padding:"4px 0", borderBottom:`1px dotted ${BR.ink}33`}}> 31 <div style={{color:BR.mute, fontSize:10, letterSpacing:1, textTransform:"uppercase"}}>{k}</div> 32 <div style={{fontWeight:500}}>{v}</div> 33 <div style={{color:BR.mute, fontSize:10, textTransform:"uppercase"}}>{unit}</div> 34 </div> 35 ); 36 } 37 38 function BRChip({ children, rust, ok }) { 39 const color = rust ? BR.rust : ok ? BR.green : BR.ink; 40 return ( 41 <span style={{ 42 display:"inline-block", background: rust ? BR.rust : "transparent", 43 color: rust ? BR.paper : color, 44 border: rust ? "none" : `1.5px solid ${color}`, 45 padding:"3px 10px", fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:2.5, 46 }}>{children}</span> 47 ); 48 } 49 50 function BRStamp({ children, color = BR.rust, rotate = -8, style }) { 51 return ( 52 <div style={{ 53 display:"inline-block", border:`2px solid ${color}`, color, padding:"6px 14px", 54 fontFamily:"Oswald", fontWeight:900, fontSize:14, letterSpacing:3, 55 transform:`rotate(${rotate}deg)`, textTransform:"uppercase", 56 ...style, 57 }}>{children}</div> 58 ); 59 } 60 61 // Top masthead — consistent navigation across all pages 62 function BRNav({ active, cartCount = 0, onNav }) { 63 const items = [ 64 ["home", "INDEX"], 65 ["catalog", "CATALOG"], 66 ["ship", "DOSSIER"], 67 ["cart", `MANIFEST (${cartCount})`], 68 ["pay", "REMITTANCE"], 69 ]; 70 return ( 71 <div style={{borderBottom:`4px solid ${BR.ink}`, background:BR.paper}}> 72 <div style={{padding:"14px 40px", display:"flex", alignItems:"flex-end", justifyContent:"space-between"}}> 73 <div style={{cursor:"pointer"}} onClick={() => onNav && onNav("home")}> 74 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:28, letterSpacing:6, color:BR.ink, lineHeight:1}}>STRATA⁄FLEET</div> 75 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, marginTop:2}}>COALITION PROCUREMENT · VOL 47 · 2396-114</div> 76 </div> 77 <div style={{display:"flex", gap:4, alignItems:"stretch"}}> 78 {items.map(([k, label]) => ( 79 <div key={k} onClick={() => onNav && onNav(k)} style={{ 80 padding:"10px 18px", fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, 81 color: active === k ? BR.paper : BR.ink, background: active === k ? BR.ink : "transparent", 82 border: `2px solid ${BR.ink}`, cursor:"pointer", textTransform:"uppercase", 83 }}>{label}</div> 84 ))} 85 </div> 86 </div> 87 <div style={{padding:"6px 40px", borderTop:`1px solid ${BR.ink}`, display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, textTransform:"uppercase"}}> 88 <span>STARDATE 2396.114.0841Z · SECTOR G-4 · CMDR. ORLAN VEYR</span> 89 <span>BONDED TIER-3 · COMMODORE AUTH · ENCRYPTED Q-KEY 4096</span> 90 </div> 91 </div> 92 ); 93 } 94 95 // Footer 96 function BRFooter() { 97 return ( 98 <div style={{borderTop:`4px solid ${BR.ink}`, padding:"20px 40px", display:"grid", gridTemplateColumns:"2fr 1fr 1fr 1fr 1fr", gap:32, background:BR.paper}}> 99 <div> 100 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:18, letterSpacing:4, color:BR.ink}}>STRATA⁄FLEET</div> 101 <div style={{fontFamily:"IBM Plex Sans", fontSize:11, color:BR.ink2, marginTop:6, lineHeight:1.5, maxWidth:320}}> 102 Coalition-bonded vessel procurement since 2341. Every hull notarized, every drive cycle accounted. 103 </div> 104 </div> 105 {[ 106 ["Catalog", ["Interceptors","Haulers","Capital","Yachts","Industrial"]], 107 ["Services", ["Brokerage","Insurance","Escrow","Transit"]], 108 ["Legal", ["Export Licensing","Arbitration","Privacy","Terms §412"]], 109 ["Desk", ["Sector G-4","+14 774 · COMMS","desk@strata.fleet"]], 110 ].map(([title, links]) => ( 111 <div key={title}> 112 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3, color:BR.ink, textTransform:"uppercase", borderBottom:`1px solid ${BR.ink}`, paddingBottom:4, marginBottom:8}}>{title}</div> 113 {links.map(l => ( 114 <div key={l} style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, padding:"2px 0", letterSpacing:0.5}}>— {l}</div> 115 ))} 116 </div> 117 ))} 118 <div style={{gridColumn:"1 / -1", borderTop:`1px solid ${BR.ink}`, paddingTop:10, display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2, textTransform:"uppercase"}}> 119 <span>© 2396 Coalition Commons · Form 7B appended · All sales bonded</span> 120 <span>Printed on hull-grade stock · Non-refundable</span> 121 </div> 122 </div> 123 ); 124 } 125 126 function BRPage({ children, width = 1280, minHeight = 1600 }) { 127 return ( 128 <div style={{ 129 width, minHeight, background:BR.paper, color:BR.ink, 130 fontFamily:"'IBM Plex Sans', sans-serif", position:"relative", 131 }}> 132 {children} 133 </div> 134 ); 135 } 136 137 Object.assign(window, { BRH, BRSpec, BRChip, BRStamp, BRNav, BRFooter, BRPage });