br-cover.jsx
1 // Brutalist COVER SHEET / TABLE OF CONTENTS — Form 00. 2 // Masthead, full index of the 15-form suite, legend, editorial colophon. 3 4 function BRCover({ onNav }) { 5 const phases = [ 6 { phase:"ACQUISITION", color:BR.ink, forms:[ 7 ["01","№ 00", "Cover Sheet", "Index · legend · colophon", "this page"], 8 ["02","№ 04", "Index", "Broadsheet homepage · Lot of the Week", "home"], 9 ["03","№ 07", "Catalogue", "Faceted search · silhouette table", "catalog"], 10 ["04","№ 07B", "Dossier", "Spec-sheet product page · loadout configs", "product"], 11 ["05","№ 63", "Sale-Room", "Live bidding · paddle · proxy-max", "auction"], 12 ["06","№ 18", "Dispatch", "Broker correspondence · Q-key encrypted", "broker"], 13 ]}, 14 { phase:"SETTLEMENT", color:BR.rust, forms:[ 15 ["07","№ 09A", "Manifest", "Bill of lading · consignment · riders", "cart"], 16 ["08","№ 09B", "Remittance", "Four-method payment · bonded instrument", "pay"], 17 ["09","№ 14", "Receipt", "Notarized delivery · transponder codes", "receipt"], 18 ]}, 19 { phase:"COMMISSIONING",color:"#8a6a1a", forms:[ 20 ["10","№ 71", "Punch-List", "80-point yard certification · defect gallery", "punch"], 21 ["11","№ 47", "Service", "Yard work order · parts & labor reckoning", "service"], 22 ["12","№ 31", "Induction", "Pilot onboarding · six-step oath", "onboard"], 23 ]}, 24 { phase:"OPERATIONS", color:BR.green, forms:[ 25 ["13","№ 22", "Commodore Bridge", "Fleet dashboard · sector map · flag orders", "fleet"], 26 ["14","№ 58", "Debrief", "After-action · telemetry · flight track", "debrief"], 27 ["15","№ 33", "Wireless", "Fleet comms · channels · transmission log", "comms"], 28 ["16","№ 29", "Rolodex", "Broker contact-book · active relationships", "contacts"], 29 ]}, 30 ]; 31 32 return ( 33 <BRPage minHeight={2100}> 34 <BRNav active="cover" cartCount={0} onNav={onNav}/> 35 36 {/* SUBLINE */} 37 <div style={{padding:"8px 40px", borderBottom:`1px solid ${BR.ink}`, fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase", display:"flex", justifyContent:"space-between"}}> 38 <span>COALITION REGISTER · FORM 00 · REV. 12</span> 39 <span style={{color:BR.rust, fontWeight:700}}>◆ SYSTEM OF RECORD · 15 FORMS · 4 PHASES</span> 40 <span>STRATA⁄FLEET · SECTOR G-4 · 2396.118</span> 41 </div> 42 43 {/* MASTHEAD */} 44 <div style={{padding:"36px 40px 26px", borderBottom:`4px double ${BR.ink}`, position:"relative"}}> 45 <div style={{display:"flex", alignItems:"baseline", gap:16, fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.mute, textTransform:"uppercase", marginBottom:10}}> 46 <span style={{background:BR.ink, color:BR.paper, padding:"3px 10px"}}>COVER SHEET</span> 47 <span>FORM 00 · MASTER INDEX</span> 48 <span>— BONDED UNDER §412 —</span> 49 </div> 50 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:152, lineHeight:0.86, letterSpacing:-4, color:BR.ink, textTransform:"uppercase"}}> 51 The Register. 52 </div> 53 <div style={{marginTop:14, display:"grid", gridTemplateColumns:"2fr 1.1fr", gap:40}}> 54 <div style={{fontFamily:"IBM Plex Sans", fontSize:16, lineHeight:1.55, color:BR.ink2, columnCount:2, columnGap:28, textAlign:"justify"}}> 55 This is the Strata⁄Fleet procurement and operations suite in one binding. Fifteen forms trace a hull from the broadsheet index it first appeared in, through the sale-room hammer, bonded escrow, notarized hand-off, yard certification, pilot induction, day-to-day operations, after-action review, and the wireless chatter between you and the desk. Every form is numbered, stamped, and signed. No hull leaves the register unless it has been examined, no credit clears unless it has been notarized, and no pilot flies unless they have sworn. This page indexes all of it. 56 </div> 57 <div> 58 <div style={{border:`3px double ${BR.ink}`, padding:"14px 16px", background:BR.paper2}}> 59 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:4, textTransform:"uppercase"}}>Quick Index</div> 60 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.ink2, letterSpacing:0.5, marginTop:10, lineHeight:1.8}}> 61 <div><span style={{color:BR.mute}}>ACQUISITION</span> · Forms 04 – 18 · <b>6 pages</b></div> 62 <div><span style={{color:BR.mute}}>SETTLEMENT</span> · Forms 09A – 14 · <b>3 pages</b></div> 63 <div><span style={{color:BR.mute}}>COMMISSIONING</span> · Forms 71 – 31 · <b>3 pages</b></div> 64 <div><span style={{color:BR.mute}}>OPERATIONS</span> · Forms 22 – 29 · <b>4 pages</b></div> 65 <div style={{borderTop:`1px solid ${BR.ink}`, marginTop:6, paddingTop:6, fontFamily:"Oswald", fontWeight:700, letterSpacing:2, color:BR.ink}}>TOTAL · 15 FORMS + COVER</div> 66 </div> 67 </div> 68 <div style={{display:"flex", gap:10, marginTop:14, justifyContent:"flex-end"}}> 69 <BRStamp color={BR.green} rotate={-7}>IN FORCE</BRStamp> 70 <BRStamp rotate={5}>BONDED</BRStamp> 71 </div> 72 </div> 73 </div> 74 </div> 75 76 {/* PHASE BANDS */} 77 <div> 78 {phases.map((p, pi) => ( 79 <div key={p.phase} style={{borderBottom: pi < phases.length-1 ? `2px solid ${BR.ink}` : `4px double ${BR.ink}`}}> 80 {/* phase header */} 81 <div style={{display:"grid", gridTemplateColumns:"220px 1fr", background: pi%2 ? BR.paper2 : BR.paper}}> 82 <div style={{padding:"20px 28px", borderRight:`2px solid ${BR.ink}`, background:p.color, color:BR.paper, display:"flex", flexDirection:"column", justifyContent:"center"}}> 83 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, opacity:0.8, textTransform:"uppercase"}}>PHASE {String(pi+1).padStart(2,"0")}</div> 84 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:28, letterSpacing:1, textTransform:"uppercase", marginTop:2, lineHeight:1}}>{p.phase}</div> 85 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:1.5, opacity:0.8, marginTop:6, textTransform:"uppercase"}}>{p.forms.length} forms</div> 86 </div> 87 <div style={{padding:"0"}}> 88 {/* column header */} 89 <div style={{display:"grid", gridTemplateColumns:"52px 92px 220px 1fr 140px 44px", padding:"10px 22px", background:BR.ink, color:BR.paper, fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, textTransform:"uppercase", borderBottom:`2px solid ${BR.ink}`}}> 90 <div>PG</div> 91 <div>FORM</div> 92 <div>TITLE</div> 93 <div>PURPOSE</div> 94 <div>ROUTE</div> 95 <div>→</div> 96 </div> 97 {p.forms.map((f, i) => ( 98 <div key={i} onClick={() => onNav(f[4])} style={{ 99 display:"grid", gridTemplateColumns:"52px 92px 220px 1fr 140px 44px", 100 padding:"12px 22px", 101 borderBottom: i < p.forms.length-1 ? `1px dotted ${BR.ink}44` : "none", 102 background: i%2 ? BR.paper2 : BR.paper, 103 cursor: f[4] === "this page" ? "default" : "pointer", 104 alignItems:"center", 105 }}> 106 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:22, letterSpacing:-0.5, color:BR.ink}}>{f[0]}</div> 107 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.mute, letterSpacing:1.5}}>{f[1]}</div> 108 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:18, letterSpacing:1, textTransform:"uppercase", color:BR.ink}}> 109 {f[2]} 110 <span style={{display:"inline-block", width:8, height:8, background:p.color, borderRadius:"50%", marginLeft:10, verticalAlign:"middle"}}/> 111 </div> 112 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, color:BR.ink2}}>{f[3]}</div> 113 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>{f[4]}</div> 114 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:18, color: f[4] === "this page" ? BR.mute : BR.ink, textAlign:"right"}}> 115 {f[4] === "this page" ? "—" : "▸"} 116 </div> 117 </div> 118 ))} 119 </div> 120 </div> 121 </div> 122 ))} 123 </div> 124 125 {/* LEGEND + COLOPHON */} 126 <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr 1fr", borderBottom:`2px solid ${BR.ink}`}}> 127 <div style={{padding:"24px 30px", borderRight:`1px solid ${BR.ink}`}}> 128 <BRH n="Α">Design System</BRH> 129 <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:8}}> 130 {[ 131 [BR.paper, "PAPER", "ece7dc"], 132 [BR.paper2, "SLIP", "e3ddce"], 133 [BR.ink, "INK", "1a1612", "white"], 134 [BR.ink2, "INK-2", "3a332a", "white"], 135 [BR.rust, "RUST", "c2421a", "white"], 136 [BR.green, "FORGE", "2d6b3a", "white"], 137 ["#c78f1a", "AMBER", "c78f1a", "white"], 138 [BR.mute, "MUTE", "7a756a", "white"], 139 ].map(([c, n, hex, fg], i) => ( 140 <div key={i} style={{background:c, color: fg || BR.ink, padding:"12px 10px", border:`1.5px solid ${BR.ink}`, fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:1}}> 141 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:13, letterSpacing:2}}>{n}</div> 142 <div style={{opacity:0.8}}>#{hex}</div> 143 </div> 144 ))} 145 </div> 146 <div style={{marginTop:14, fontFamily:"IBM Plex Mono", fontSize:11, color:BR.ink2, letterSpacing:0.5, lineHeight:1.8}}> 147 <div><span style={{color:BR.mute}}>DISPLAY</span> Oswald · 900 · tracked tight</div> 148 <div><span style={{color:BR.mute}}>DATA</span> IBM Plex Mono · 10–12px · LS 2</div> 149 <div><span style={{color:BR.mute}}>BODY</span> IBM Plex Sans · 13–16px · justified</div> 150 <div><span style={{color:BR.mute}}>HAND</span> Caveat · signatures + pilot logs</div> 151 </div> 152 </div> 153 154 <div style={{padding:"24px 30px", borderRight:`1px solid ${BR.ink}`, background:BR.paper2}}> 155 <BRH n="Β">Recurring Components</BRH> 156 <div style={{display:"flex", flexDirection:"column", gap:10}}> 157 {[ 158 ["BRNav", "Masthead — name · stardate · cart count · section list"], 159 ["BRFooter", "Five-column register — legal · channels · imprint"], 160 ["BRH", "Section head with §-number and horizontal rule"], 161 ["BRSpec", "Monospaced key · dots · value · unit row"], 162 ["BRChip", "Pill tag — default / ok (forge green) / rust"], 163 ["BRStamp", "Angled rubber-stamp with double-border"], 164 ["ShipSilhouette","Procedural SVG hull from serial seed"], 165 ["BRPage", "Letter-paper frame · margin · page number"], 166 ].map(([n, d], i) => ( 167 <div key={i} style={{display:"grid", gridTemplateColumns:"120px 1fr", gap:10, padding:"6px 0", borderBottom:`1px dotted ${BR.ink}33`}}> 168 <span style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:2, textTransform:"uppercase"}}>{n}</span> 169 <span style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink2}}>{d}</span> 170 </div> 171 ))} 172 </div> 173 </div> 174 175 <div style={{padding:"24px 30px"}}> 176 <BRH n="Γ">Legend</BRH> 177 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.ink2, letterSpacing:0.5, lineHeight:1.9}}> 178 <div><span style={{display:"inline-block", width:12, height:12, background:BR.ink, verticalAlign:"middle", marginRight:8}}/>Acquisition — discover & bind</div> 179 <div><span style={{display:"inline-block", width:12, height:12, background:BR.rust, verticalAlign:"middle", marginRight:8}}/>Settlement — pay & receive</div> 180 <div><span style={{display:"inline-block", width:12, height:12, background:"#8a6a1a", verticalAlign:"middle", marginRight:8}}/>Commissioning — certify & induct</div> 181 <div><span style={{display:"inline-block", width:12, height:12, background:BR.green, verticalAlign:"middle", marginRight:8}}/>Operations — fly & coordinate</div> 182 </div> 183 <div style={{height:14}}/> 184 <BRH n="Δ">Status Grammar</BRH> 185 <div style={{display:"flex", flexWrap:"wrap", gap:6}}> 186 <BRChip ok>OK</BRChip> 187 <BRChip>NEUTRAL</BRChip> 188 <BRChip rust>RUST</BRChip> 189 </div> 190 <div style={{marginTop:10, display:"flex", flexWrap:"wrap", gap:10}}> 191 <BRStamp color={BR.green} rotate={-6}>CLEARED</BRStamp> 192 <BRStamp rotate={4}>BONDED</BRStamp> 193 <BRStamp color={BR.rust} rotate={-3}>FLAGGED</BRStamp> 194 </div> 195 <div style={{marginTop:14, fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink2, lineHeight:1.55}}> 196 The suite commits to one voice: naval-yard formality, editorial broadsheet, handwritten sign-off. Every screen is a document a harbormaster could read without surprise. 197 </div> 198 </div> 199 </div> 200 201 {/* FILING STRIP */} 202 <div style={{padding:"22px 40px", borderBottom:`2px solid ${BR.ink}`, display:"grid", gridTemplateColumns:"1.5fr 1fr 1fr 1fr", gap:30, background:BR.paper2}}> 203 <div> 204 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>Filing Order</div> 205 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.ink2, letterSpacing:1, marginTop:4, lineHeight:1.6}}> 206 04 · 07 · 07B · 63 · 18 → 09A · 09B · 14 → 71 · 47 · 31 → 22 · 58 · 33 · 29 207 </div> 208 </div> 209 <div> 210 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>Notary of Record</div> 211 <div style={{fontFamily:"'Caveat','Space Grotesk',cursive", fontSize:28, color:BR.ink, marginTop:2}}>J. Hollister</div> 212 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>Seal 4481</div> 213 </div> 214 <div> 215 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>Ledger Block</div> 216 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:24, letterSpacing:-0.5, marginTop:2}}>#2396-118-44992</div> 217 </div> 218 <div> 219 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>Issued</div> 220 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:24, letterSpacing:-0.5, marginTop:2}}>2396.118 · 0700Z</div> 221 </div> 222 </div> 223 224 <BRFooter/> 225 </BRPage> 226 ); 227 } 228 229 Object.assign(window, { BRCover });