/* Graph Scene — 3b "full bomb" treatment: night wall, neon spray, drips everywhere */ :root { --wall-1: #232328; --wall-2: #1b1b20; --wall-3: #212126; --paper: #f2f0ea; --ink: #0f0f13; --muted: #b6b3bd; --dim: #9a97a3; --dimmer: #75727e; --pink: #ff3ea5; --red: #ff3b3b; --green: #3dff8e; --yellow: #ffe34d; --blue: #59c1f2; --blue-line: #1d9bd7; --box: rgba(15, 15, 19, .55); --box-solid: rgba(15, 15, 19, .7); --line: rgba(242, 240, 234, .25); --line-strong: rgba(242, 240, 234, .18); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: linear-gradient(160deg, var(--wall-1) 0%, var(--wall-2) 55%, var(--wall-3) 100%); color: var(--paper); font-family: 'Oswald', sans-serif; } .page { max-width: 1180px; margin: 0 auto; } a { color: inherit; text-decoration: none; } /* ---------- top bar ---------- */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 36px; border-bottom: 2px solid var(--line-strong); } .logo { font: 400 24px 'Permanent Marker', cursive; color: var(--yellow); text-shadow: 0 0 14px rgba(255, 227, 77, .5); transform: rotate(-2deg); } .nav { display: flex; gap: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); } .nav a { padding: 4px 2px; } .nav a:hover { color: var(--paper); } .nav a.on { color: var(--ink); padding: 4px 12px; } .nav a.on-green { background: var(--green); box-shadow: 0 0 16px rgba(61, 255, 142, .45); } .nav a.on-pink { background: var(--pink); box-shadow: 0 0 16px rgba(255, 62, 165, .45); } .nav a.on-blue { background: var(--blue); box-shadow: 0 0 16px rgba(29, 155, 215, .45); } .nav a.on-yellow { background: var(--yellow); box-shadow: 0 0 16px rgba(255, 227, 77, .45); } .nav a.on-red { background: var(--red); box-shadow: 0 0 16px rgba(255, 59, 59, .5); color: #fff; } /* ---------- spray halos ---------- */ .halo { position: absolute; border-radius: 50%; pointer-events: none; } .halo-pink { background: radial-gradient(circle, rgba(255, 62, 165, .16) 0%, transparent 65%); } .halo-blue { background: radial-gradient(circle, rgba(29, 155, 215, .14) 0%, transparent 65%); } .halo-green { background: radial-gradient(circle, rgba(61, 255, 142, .12) 0%, transparent 65%); } .halo-yellow{ background: radial-gradient(circle, rgba(255, 227, 77, .12) 0%, transparent 65%); } /* ---------- paint drips ---------- */ .drip { position: absolute; pointer-events: none; border-radius: 0 0 5px 5px; } .drip-pink { background: linear-gradient(var(--pink), rgba(255, 62, 165, 0)); } .drip-paper { background: linear-gradient(var(--paper), rgba(242, 240, 234, 0)); } .drip-green { background: linear-gradient(var(--green), rgba(61, 255, 142, 0)); } .drip-yellow { background: linear-gradient(var(--yellow), rgba(255, 227, 77, 0)); } /* ---------- type helpers ---------- */ .marker { font-family: 'Permanent Marker', cursive; font-weight: 400; } .scrawl { font-family: 'Rock Salt', cursive; font-weight: 400; } .mono { font-family: 'Special Elite', monospace; } .up { text-transform: uppercase; } .throwup { position: relative; font: 400 84px/1.02 'Permanent Marker', cursive; color: var(--paper); text-shadow: 3px 3px 0 var(--pink), 0 0 26px rgba(255, 62, 165, .35); transform: rotate(-1.2deg); } h1.head { font: 700 46px/1 'Oswald', sans-serif; text-transform: uppercase; margin: 0; color: var(--paper); } .hl-yellow { background: linear-gradient(transparent 55%, rgba(255, 227, 77, .35) 55%); text-shadow: 0 0 12px rgba(255, 227, 77, .35); } .sub { font-family: 'Special Elite', monospace; font-size: 13px; color: var(--muted); margin-top: 8px; } /* ---------- neon boxes ---------- */ .box { border: 2px solid var(--line); background: var(--box); padding: 12px 14px; } .box-solid { border: 3px solid var(--paper); background: var(--box-solid); } .neon { border-width: 2px; border-style: solid; } .neon-green { border-color: var(--green); background: rgba(61, 255, 142, .06); box-shadow: 0 0 18px rgba(61, 255, 142, .18); } .neon-pink { border-color: var(--pink); background: rgba(255, 62, 165, .08); box-shadow: 0 0 18px rgba(255, 62, 165, .2); } .neon-blue { border-color: var(--blue-line); background: rgba(29, 155, 215, .07); box-shadow: 0 0 18px rgba(29, 155, 215, .18); } .neon-yellow { border-color: var(--yellow); background: rgba(255, 227, 77, .07); box-shadow: 0 0 18px rgba(255, 227, 77, .18); } .glow-green { color: var(--green); text-shadow: 0 0 12px rgba(61, 255, 142, .5); } .glow-pink { color: var(--pink); text-shadow: 0 0 12px rgba(255, 62, 165, .5); } .glow-blue { color: var(--blue); text-shadow: 0 0 12px rgba(29, 155, 215, .5); } .glow-yellow { color: var(--yellow); text-shadow: 0 0 12px rgba(255, 227, 77, .5); } .glow-red { color: var(--red); text-shadow: 0 0 12px rgba(255, 59, 59, .55); } .neon-red { border-color: var(--red); background: rgba(255, 59, 59, .07); box-shadow: 0 0 18px rgba(255, 59, 59, .22); } .halo-red { background: radial-gradient(circle, rgba(255, 59, 59, .15) 0%, transparent 65%); } .drip-red { background: linear-gradient(var(--red), rgba(255, 59, 59, 0)); } /* ---------- buttons & chips ---------- */ .btn { display: inline-flex; align-items: center; cursor: pointer; background: var(--pink); color: var(--ink); border: none; padding: 14px 30px; font: 700 18px 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .06em; position: relative; box-shadow: 0 0 24px rgba(255, 62, 165, .55); } .btn:hover { background: #ff5cb3; } .btn:active { transform: translateY(1px); } .chip { display: inline-block; cursor: pointer; border: 2px solid var(--line); color: var(--muted); padding: 5px 12px; font: 600 12px 'Oswald', sans-serif; text-transform: uppercase; background: transparent; } .chip:hover { border-color: var(--paper); color: var(--paper); } .chip.on { background: var(--green); border-color: var(--green); color: var(--ink); box-shadow: 0 0 14px rgba(61, 255, 142, .4); } .chip.on-pink { background: var(--pink); border-color: var(--pink); color: var(--ink); box-shadow: 0 0 14px rgba(255, 62, 165, .4); } .tag { display: inline-block; border: 2px solid var(--line); background: var(--box); padding: 4px 10px; font: 600 12px 'Oswald', sans-serif; text-transform: uppercase; color: var(--paper); } .tag:hover { border-color: var(--green); color: var(--green); box-shadow: 0 0 10px rgba(61, 255, 142, .25); } .tag.tag-hot { background: rgba(255, 227, 77, .12); border-color: var(--yellow); color: var(--yellow); } /* a shot fired, not a shout-out -- see data/beefs.json */ .tag.tag-beef { background: rgba(255, 62, 165, .12); border-color: var(--pink); color: var(--pink); } #lines .shot { border-left: 2px solid var(--pink); padding-left: 10px; margin-left: -12px; } .tag.tag-dash { border-style: dashed; border-color: rgba(242, 240, 234, .4); background: transparent; color: var(--dimmer); } /* stamps: rotated rubber-stamp label */ .stamp { position: absolute; transform: rotate(7deg); border: 3px solid var(--pink); color: var(--pink); font: 700 13px 'Special Elite', monospace; padding: 5px 12px; letter-spacing: .12em; opacity: .9; text-shadow: 0 0 10px rgba(255, 62, 165, .5); box-shadow: 0 0 14px rgba(255, 62, 165, .2), inset 0 0 14px rgba(255, 62, 165, .12); } /* ---------- search row (dig / degrees) ---------- */ .searchrow { display: flex; gap: 0; max-width: 880px; align-items: stretch; position: relative; } .searchrow .who { flex: 1; border: 3px solid var(--paper); background: var(--box-solid); padding: 14px 18px; font: 600 18px 'Oswald', sans-serif; text-transform: uppercase; color: var(--green); text-shadow: 0 0 10px rgba(61, 255, 142, .5); outline: none; min-width: 0; } .searchrow .who::placeholder { color: var(--dimmer); text-shadow: none; } .searchrow .who.empty { border: 3px dashed rgba(242, 240, 234, .4); background: rgba(15, 15, 19, .5); color: var(--dimmer); text-shadow: none; } .searchrow .amp { display: flex; align-items: center; padding: 0 16px; font: 400 26px 'Permanent Marker', cursive; color: var(--yellow); text-shadow: 0 0 12px rgba(255, 227, 77, .5); } .searchrow .btn { margin-left: 14px; } /* ---------- route chain (degrees) ---------- */ .route { display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 40px; padding-top: 24px; } .route .stop { border: 3px solid var(--paper); background: var(--box-solid); padding: 12px 18px; box-shadow: 4px 4px 0 rgba(255, 62, 165, .35); border-left-color: var(--sc, var(--paper)); /* degrees.html: the stop's scene accent */ } .route .stop .n { font: 700 17px 'Oswald', sans-serif; text-transform: uppercase; } .route .stop .d { font-family: 'Special Elite', monospace; font-size: 10.5px; color: var(--muted); } .route .stop.song { background: rgba(255, 227, 77, .12); border-color: var(--yellow); transform: rotate(-1deg); box-shadow: 0 0 18px rgba(255, 227, 77, .25); } .route .stop.song .n { font-size: 15px; color: var(--yellow); text-shadow: 0 0 10px rgba(255, 227, 77, .4); } .route .stop.end { background: var(--pink); border-color: var(--pink); color: var(--ink); box-shadow: 0 0 22px rgba(255, 62, 165, .5); } .route .stop.end .d { color: rgba(15, 15, 19, .7); } .route .hop { width: 74px; position: relative; border-top: 3px dotted rgba(242, 240, 234, .5); } .route .hop span { position: absolute; left: 0; right: 0; top: -24px; text-align: center; font-family: 'Special Elite', monospace; font-size: 10px; color: var(--pink); text-shadow: 0 0 8px rgba(255, 62, 165, .5); white-space: nowrap; } /* ---------- orbit rings ---------- */ .rings { position: relative; width: 300px; height: 300px; margin: 0 auto; } .rings .r1 { position: absolute; inset: 0; border: 2px dashed rgba(242, 240, 234, .25); border-radius: 50%; } .rings .r2 { position: absolute; inset: 46px; border: 2px dashed rgba(242, 240, 234, .4); border-radius: 50%; } .rings .r3 { position: absolute; inset: 96px; border: 3px solid var(--green); border-radius: 50%; box-shadow: 0 0 18px rgba(61, 255, 142, .25), inset 0 0 18px rgba(61, 255, 142, .15); } .rings .me { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--green); color: var(--ink); font: 700 12px 'Oswald', sans-serif; text-transform: uppercase; padding: 8px 10px; box-shadow: 0 0 18px rgba(61, 255, 142, .5); } .rings .sat { position: absolute; background: var(--box-solid); border: 2px solid var(--paper); font: 600 10.5px 'Oswald', sans-serif; text-transform: uppercase; padding: 3px 7px; } .rings .sat.hot { background: rgba(255, 227, 77, .18); border-color: var(--yellow); color: var(--yellow); } .rings .sat.far { border-color: rgba(242, 240, 234, .35); color: var(--dim); font-size: 10px; } .rings .sat.faint { border-width: 1px; border-color: rgba(242, 240, 234, .3); color: var(--dimmer); font-size: 9.5px; padding: 2px 6px; } /* ---------- moment cards (timeline) ---------- */ .tape { position: absolute; left: 50%; top: -9px; transform: translateX(-50%) rotate(-3deg); width: 52px; height: 16px; background: rgba(255, 227, 77, .5); border: 1px solid rgba(255, 227, 77, .3); box-shadow: 0 0 10px rgba(255, 227, 77, .25); } .moment { border: 2px solid var(--line); background: var(--box); padding: 12px 14px; position: relative; } .moment .yr { font: 700 14px 'Oswald', sans-serif; } .moment .tx { font-family: 'Special Elite', monospace; font-size: 11.5px; line-height: 1.5; margin-top: 5px; color: var(--muted); } .moment.hot { border-color: var(--pink); background: rgba(255, 62, 165, .08); box-shadow: 0 0 16px rgba(255, 62, 165, .2); } .moment.gold { border-color: var(--yellow); background: rgba(255, 227, 77, .08); box-shadow: 0 0 16px rgba(255, 227, 77, .2); } .receipt { margin-top: 10px; border-left: 3px solid var(--pink); padding: 6px 10px; font-family: 'Special Elite', monospace; font-size: 10.5px; color: var(--muted); background: var(--box); } .connector { flex: 1; min-height: 16px; border-left: 3px dotted rgba(242, 240, 234, .4); margin-left: 24px; } /* ---------- bars ---------- */ .bars { display: flex; align-items: flex-end; gap: 2px; } .bars > i { flex: 1; display: block; background: rgba(182, 179, 189, .35); } .bars > i.k { background: var(--paper); box-shadow: 0 0 8px rgba(242, 240, 234, .3); } .bars > i.p { background: var(--pink); box-shadow: 0 0 10px rgba(255, 62, 165, .5); } .bars > i.y { background: var(--yellow);box-shadow: 0 0 10px rgba(255, 227, 77, .5); } .bars > i.g { background: var(--green); box-shadow: 0 0 10px rgba(61, 255, 142, .5); } .bars > i.b { background: var(--blue); box-shadow: 0 0 10px rgba(29, 155, 215, .5); } /* ---------- misc ---------- */ .rule-b { border-bottom: 2px solid var(--line-strong); } .rule-t { border-top: 2px solid var(--line-strong); } .rule-r { border-right: 2px solid var(--line-strong); } .rot-l1 { transform: rotate(-1.6deg); } .rot-l2 { transform: rotate(-1deg); } .rot-l3 { transform: rotate(-.6deg); } .rot-l4 { transform: rotate(-.4deg); } .rot-r1 { transform: rotate(1deg); } .rot-r2 { transform: rotate(.5deg); } .rot-r3 { transform: rotate(.4deg); } .rot-r4 { transform: rotate(.8deg); } .listline { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(242, 240, 234, .12); padding-bottom: 6px; } .listline:last-child { border-bottom: none; padding-bottom: 0; } ::selection { background: var(--pink); color: var(--ink); } /* long pages: skip painting offscreen sections — prevents GPU tile dropout (whole scroll bands rendering white/black) once heavy glow shadows pile up */ .page > div:not(.topbar) { content-visibility: auto; contain-intrinsic-size: auto 900px; } /* ---------- loading states: empty JS-rendered containers get a spray tag ---------- */ #route:empty::before, #catalog:empty::before, #network-list:empty::before, #wall:empty::before, #beef-timeline:empty::before, #lines:empty::before, #moments:empty::before, #mention-bars:empty::before, #year-bars:empty::before { content: 'tagging the wall…'; font-family: 'Permanent Marker', cursive; font-size: 15px; color: var(--dimmer); display: block; padding: 12px 0; animation: spraypulse 1.1s ease-in-out infinite alternate; } @keyframes spraypulse { from { opacity: .35; } to { opacity: .9; text-shadow: 0 0 12px rgba(242, 240, 234, .25); } } /* ---------- responsive ---------- */ html, body { overflow-x: hidden; } img, svg { max-width: 100%; } @media (max-width: 1000px) { .theme-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 760px) { /* stacked layout: every side-by-side panel becomes a column */ .split, .split3 { grid-template-columns: 1fr !important; } .split > .rule-r, .split3 > div { border-right: none !important; } .split > div, .split3 > div { border-right: none !important; } .theme-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* header + nav */ .topbar { flex-wrap: wrap; gap: 8px 14px; padding: 14px 18px !important; } .logo { font-size: 20px; } .nav { width: 100%; overflow-x: auto; gap: 14px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .nav a { white-space: nowrap; } /* section padding: the wall gets narrower */ .page > div { padding-left: 18px !important; padding-right: 18px !important; } /* headline type scales down; inline sizes are overridden by bucket */ .throwup { font-size: 44px !important; } .throwup .drip { display: none; } .marker[style*="font-size:96px"] { font-size: 58px !important; } .marker[style*="font-size:72px"] { font-size: 42px !important; } .marker[style*="font-size:46px"] { font-size: 28px !important; } .marker[style*="font-size:44px"] { font-size: 27px !important; } .marker[style*="font-size:40px"] { font-size: 26px !important; } .marker[style*="font-size:34px"] { font-size: 24px !important; } .scrawl[style*="font-size:30px"], .scrawl[style*="font-size:26px"] { font-size: 16px !important; right: 12px !important; top: 12px !important; } /* search rows stack */ .searchrow { flex-direction: column; align-items: stretch; gap: 10px; } .searchrow .who { font-size: 16px; } .searchrow .amp { justify-content: center; padding: 0; } .searchrow .btn { margin-left: 0; justify-content: center; } /* route chain: tighter hops */ .route { row-gap: 34px; } .route .hop { width: 34px; } .route .hop span { font-size: 8.5px; } .route .stop { padding: 9px 12px; } .route .stop .n { font-size: 14px; } /* orbit fits small screens */ .rings { transform: scale(.85); margin: -16px auto; } /* stat plaques full width-ish */ .neon { flex: 1 1 140px; } /* index moments strip scrolls sideways */ .moments-row { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .moments-row > * { flex: none !important; width: 190px; } /* beef timeline scrolls sideways instead of squeezing */ .tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } #beef-timeline, #beef-axis { min-width: 640px; } /* wall of beefs rows wrap; hide the era column */ #wall a { flex-wrap: wrap; row-gap: 2px; } #wall a > span:nth-child(3) { display: none; } /* legend tiles stack two-up */ #legend > div { min-width: 44% !important; } /* zoom panel headers stack */ #year-zoom .chip { padding: 4px 8px; font-size: 11px; } /* stamps shrink and tuck in */ .stamp { font-size: 10px !important; padding: 3px 8px; right: 12px !important; } /* game board wraps */ #game > div { flex-wrap: wrap; } /* header rows holding title + chip groups wrap instead of overflowing */ .page > div:has(> #filters), .page > div:has(> #modes) { flex-wrap: wrap; } #filters, #modes { flex-wrap: wrap; width: 100%; margin-top: 12px; } } @media (max-width: 420px) { .throwup { font-size: 36px !important; } .marker[style*="font-size:96px"] { font-size: 46px !important; } .theme-grid { grid-template-columns: 1fr !important; } .route .stop .n { font-size: 13px; } } /* datalist styling fallback: custom suggestion popover */ .suggest { position: absolute; z-index: 30; min-width: 240px; background: #141418; border: 2px solid var(--paper); box-shadow: 0 0 24px rgba(0, 0, 0, .6); max-height: 260px; overflow: auto; } .suggest div { padding: 8px 14px; font: 600 14px 'Oswald', sans-serif; text-transform: uppercase; color: var(--muted); cursor: pointer; } .suggest div:hover, .suggest div.sel { background: var(--pink); color: var(--ink); } /* ---------- "Takes" nav dropdown ---------- */ .nav-drop { position: relative; display: inline-block; } .nav-drop .drop-trig { cursor: pointer; } .nav-drop .drop-menu { display: none; position: absolute; left: auto; right: 0; top: 100%; z-index: 60; min-width: 150px; padding: 6px 0; margin-top: 6px; background: rgba(15, 15, 19, .97); border: 2px solid var(--line); box-shadow: 5px 5px 0 rgba(0, 0, 0, .4); } .nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu, .nav-drop.open .drop-menu { display: block; } /* .open is the tap path, for touch */ /* a touch device gets no hover; without this the menu can flash open under a stray hover event on iOS and then stick */ @media (hover: none) { .nav-drop:hover .drop-menu { display: none; } .nav-drop.open .drop-menu { display: block; } } .nav-drop .drop-menu a { display: block; padding: 8px 14px; white-space: nowrap; } .nav-drop .drop-menu a.on { margin: 0 8px; padding: 6px 10px; } /* ---------- accessibility ---------- */ /* Keyboard users land on the nav every page; this lets them jump the chrome. Visible only when focused, so it costs the design nothing. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--yellow); color: var(--ink); font: 700 13px 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 10px 16px; text-decoration: none; } .skip-link:focus { left: 0; } /* h1 inherits whatever the page's headline div already looked like — these just strip the browser defaults that would otherwise change the layout. */ h1.marker, h1.throwup { margin: 0; font-weight: inherit; } :focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } /* ---------- footer ---------- */ .wall-foot { border-top: 2px solid var(--line-strong); margin-top: 40px; padding: 30px 36px 22px; position: relative; } .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 26px; } .foot-h { font: 400 17px 'Permanent Marker', cursive; color: var(--green); text-shadow: 0 0 12px rgba(61,255,142,.35); transform: rotate(-1deg); margin-bottom: 10px; } .foot-col a { display: block; font: 12px/2 'Special Elite', monospace; color: var(--muted); } .foot-col a:hover { color: var(--paper); } .foot-note { font: 11px/1.6 'Special Elite', monospace; color: var(--dimmer); margin-bottom: 10px; max-width: 34ch; } .foot-sub form { display: flex; gap: 0; max-width: 300px; } .foot-sub input, .fb-box input, .fb-box textarea { background: var(--box); border: 2px solid var(--line); color: var(--paper); padding: 8px 10px; font: 12px 'Special Elite', monospace; width: 100%; } .foot-sub input:focus, .fb-box input:focus, .fb-box textarea:focus { outline: none; border-color: var(--green); } .foot-go { background: var(--green); color: var(--ink); border: none; cursor: pointer; padding: 8px 14px; font: 700 12px Oswald, sans-serif; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .foot-go:hover { background: #6bffab; } .foot-msg { font: 11px 'Special Elite', monospace; color: var(--yellow); margin-top: 7px; min-height: 1.3em; } .foot-rule { height: 2px; background: var(--line-strong); margin: 24px 0 14px; } .foot-bottom { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; font: 11px 'Special Elite', monospace; color: var(--dim); } .foot-bottom .marker { font: 400 16px 'Permanent Marker', cursive; color: var(--yellow); } .foot-bottom .foot-dim { color: var(--dimmer); margin-left: auto; } /* feedback dialog */ .fb-scrim { position: fixed; inset: 0; background: rgba(9,9,12,.78); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; } .fb-scrim[hidden] { display: none; } .fb-box { position: relative; width: min(460px, 100%); background: var(--wall-2); border: 2px solid var(--pink); box-shadow: 8px 8px 0 rgba(0,0,0,.5); padding: 22px 22px 20px; } .fb-box textarea { resize: vertical; margin-bottom: 8px; } .fb-box input { margin-bottom: 10px; } .fb-x { position: absolute; top: 6px; right: 10px; background: none; border: none; color: var(--dim); font: 700 22px Oswald, sans-serif; cursor: pointer; } .fb-x:hover { color: var(--paper); } @media (max-width: 620px) { .wall-foot { padding: 24px 20px 18px; } .foot-bottom .foot-dim { margin-left: 0; } } /* ---- graph node detail panel --------------------------------------------- Every graph on the wall drew clickable dots whose only behaviour was to NAVIGATE: you clicked a name and the graph you were reading vanished. The black book already had the better pattern -- a panel that answers "who is this" without leaving the picture -- so it is shared here and every graph using js/collabgraph.js gets it. The link out is still offered, it is just no longer the only thing a click can do. */ /* Transparent on purpose. A dark scrim hid the graph, which is the thing the reader just clicked on; the graph now dims its own irrelevant parts instead (see focusNode in js/collabgraph.js). This stays only to catch the click-outside that closes the panel. */ .gp-scrim { position: fixed; inset: 0; background: transparent; z-index: 60; } .gp-panel { position: fixed; z-index: 61; right: 0; top: 0; bottom: 0; width: 330px; max-width: 92vw; background: var(--wall-2); border-left: 2px solid var(--acc, var(--pink)); padding: 20px 22px; overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,.5); } .gp-panel .gp-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--dim); font: 700 20px Oswald, sans-serif; cursor: pointer; line-height: 1; } .gp-panel .gp-x:hover { color: var(--paper); } .gp-panel .gp-kind { font: 10px 'Special Elite', monospace; color: var(--acc, var(--pink)); text-transform: uppercase; letter-spacing: .12em; } .gp-panel .gp-name { font: 700 21px Oswald, sans-serif; color: var(--paper); margin: 4px 0 2px; line-height: 1.2; } .gp-panel .gp-sub { font: 11px 'Special Elite', monospace; color: var(--dim); margin-bottom: 14px; } .gp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .gp-stats div { border: 1px solid var(--line); padding: 6px 10px; min-width: 74px; } .gp-stats .n { font: 700 16px Oswald, sans-serif; color: var(--paper); display: block; line-height: 1.1; } .gp-stats .k { font: 9.5px 'Special Elite', monospace; color: var(--dim); } .gp-h { font: 10px Oswald, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin: 14px 0 6px; } .gp-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); font: 11.5px 'Special Elite', monospace; } .gp-row:last-child { border-bottom: none; } .gp-row a { color: var(--muted); text-decoration: none; } .gp-row a:hover { color: var(--paper); } .gp-row .n { color: var(--dimmer); } .gp-chips { display: flex; flex-wrap: wrap; gap: 5px; } .gp-chips a, .gp-chips span { font: 10.5px 'Special Elite', monospace; color: var(--paper); border: 1px solid var(--line); padding: 3px 8px; text-decoration: none; } .gp-chips a:hover { border-color: var(--acc, var(--pink)); color: var(--acc, var(--pink)); } .gp-links { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; } .gp-links a { font: 700 12px Oswald, sans-serif; color: var(--acc, var(--pink)); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; } .gp-links a:hover { color: var(--paper); } .gp-note { font: 11px/1.6 'Special Elite', monospace; color: var(--muted); border-left: 2px solid var(--line); padding-left: 10px; margin-top: 12px; } @media (max-width: 620px) { .gp-panel { width: auto; left: 0; top: auto; height: 62vh; border-left: none; border-top: 2px solid var(--acc, var(--pink)); } } /* ---- artist social / reference links -------------------------------------- Points at real people's accounts, so it is rendered only from data/artist-links.json, whose entries are MusicBrainz url-rels hanging off a confidently-resolved MBID -- never a URL guessed from a name. rel carries noopener (these are outbound to third parties) and nofollow (we are not vouching for or ranking anybody's account). */ .a-social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .a-social a { font: 10.5px 'Special Elite', monospace; color: var(--muted); border: 1px solid var(--line); padding: 3px 9px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .a-social a:hover { border-color: var(--acc, var(--pink)); color: var(--paper); } .a-social a .ic { font-size: 11px; line-height: 1; } /* header search, injected by js/app.js on every page */ .top-find { margin-left: auto; padding-left: 14px; } .top-find input { background: transparent; border: 1px solid var(--line); color: var(--paper); font: 12px 'Special Elite', monospace; padding: 5px 10px; width: 160px; } .top-find input:focus { outline: none; border-color: var(--pink); } .top-find input::placeholder { color: var(--dimmer); } /* ---------- the header on a phone ----------------------------------------- This whole block used to be one line: `.top-find { display: none }` below 900px. The reasoning was sound -- a logo, seven nav items and a 160px box will not sit on one line -- but the conclusion was not: they do not have to sit on one line. The pitch here is "a thank-you note with a search box", and index.html's wall search is the only other one, so hiding this stranded every page on every phone and most tablets. The bar wraps instead: search beside the logo, nav underneath. `order` puts the box in the middle without touching the markup -- js/app.js appends .top-find last, and this file does not own that file. */ @media (max-width: 900px) { .topbar { flex-wrap: wrap; gap: 10px 14px; } .logo { order: 1; flex: 0 0 auto; } /* never let the name wrap */ /* grows into whatever the logo leaves, but capped: on a tablet the rest of the row is 660px and a 660px search box looks like a mistake. Past the cap the topbar's own space-between parks it on the right, where it sits on desktop. */ .top-find { order: 2; flex: 1 1 130px; min-width: 0; max-width: 360px; margin-left: 0; padding-left: 0; } .nav { order: 3; width: 100%; } /* 16px is not a style choice: iOS Safari zooms the whole page in when you focus an input whose text is smaller than that, and never zooms back out. The taller padding is what carries the box to a ~41px touch target. */ .top-find input { display: block; width: 100%; font-size: 16px; padding: 10px; } /* attachSuggest places the popover in page pixels and sizes it to the input. The 240px floor made it wider than its own box, so on a 375px screen it ran off the right edge into body{overflow-x:hidden} and was simply gone. */ .suggest { min-width: 0; max-width: calc(100vw - 24px); } .suggest div { padding: 11px 14px; } /* The nav was a silent overflow-x:auto strip: at 375px "The Digs" and the entire Takes menu sat off the right edge with nothing on screen to say so. Worse, overflow-x also clips overflow-y, so the Takes menu was being cut off by the scroller it lived in. Wrapping fixes both -- every destination is on screen, so there is no scroll affordance left to design. */ .nav { flex-wrap: wrap; overflow: visible; gap: 2px 14px; padding-bottom: 0; } /* 44px is the Apple/Google touch minimum; these were ~28px. inline-flex rather than fatter padding so the .on chips keep their own 12px sides. The row gap drops to 2px because the targets now do the spacing. */ .nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 6px; } /* With the nav wrapped, the Takes trigger lands in a different place on every page, so a menu anchored to it (right: 0) hangs off the left edge on one page and the right edge on the next. Anchor it to the nav instead: one sheet under the whole bar, same place every time, no edge to fall off. */ .nav { position: relative; } .nav-drop { position: static; } .nav-drop .drop-menu { left: 0; right: auto; width: 100%; max-width: 320px; margin-top: 4px; max-height: 62vh; overflow-y: auto; /* twelve 44px rows overrun a phone */ } .nav-drop .drop-menu a { display: flex; align-items: center; min-height: 44px; padding: 4px 14px; } } /* ---------- wide diagrams on a phone -------------------------------------- The scene atlas is drawn in a 1500-unit box and the digs graph in a 1560-unit one (both set in JS -- js/atlas.js writes the viewBox from cfg.width, so the viewBox in the markup is not the one that ships). Squeezed into a ~300px column that is a scale of about .2: their 10-11px labels come out two pixels tall, which is a picture of a graph rather than a graph. Same trick #beef-timeline already uses above: hold the drawing at a width its type survives -- 1100px, a scale of about .7 -- and let the container scroll sideways instead of squashing it to fit. min-width needs no !important to beat the pages' own #id `width: 100%` -- min always wins over width and max-width -- which matters because these two SVGs are styled in