/* ============================================================================ BRAINZAP — shared site stylesheet, simple edition. One file. It dresses about.html, contact.html, /rentals/ and every /rentals/items/ page to match the homepage: teal crumpled paper, yellow labels, black outlines, and nothing else. Rules of the road if you edit this: · The paper backdrop lives on a FIXED pseudo-element at z-index -2, and must never get its own background-color — an opaque one there paints straight over it. · Long copy goes on white paper cards. Body text directly on the teal is too low-contrast to read comfortably. · Decoration is hidden in one block at the bottom, so it is obvious what was switched off and easy to switch back on. ============================================================================ */ :root{ --paper:#0b7f92; --yellow:#ffe900; --ink:#0a0a0a; --line:#0a0a0a; --muted:#5b6b70; --card:#ffffff; --display:'Bungee','Arial Rounded MT Bold',Arial,sans-serif; --mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; /* Three hands, three states. Before, the CLOSED hand was on absolutely everything, so the cursor never told you whether a thing could be clicked. Now: open hand = ordinary page, nothing to click here pointing hand= over something clickable closed hand = mouse is actually down on it Hotspots: the open and closed hands are centred (16 16); the pointing hand's hotspot is its fingertip, near the top-middle, not the middle of the image. */ --cur-idle:url("/images/cursor%20open.png") 16 16; --cur-point:url("/images/cursor.png") 12 4; --cur-press:url("/images/cursor%20click.png") 16 16; --radius:14px; --wrap:1060px; } *{box-sizing:border-box} html,body{margin:0;padding:0;width:100%;overflow-x:hidden} html{background:var(--paper)} /* No background-color on body — it would cover the paper layer below. */ body{ min-height:100vh; font-family:var(--mono); font-size:16px; line-height:1.6; color:var(--ink); -webkit-font-smoothing:antialiased; } body::before{ content:""; position:fixed; inset:0; z-index:-2; background:var(--paper) url("/images/background.jpg") center top / cover no-repeat; } *{cursor:var(--cur-idle),default} /* Anything you can actually act on gets the pointing hand. */ a[href],button,summary,label,select,[role="button"],[role="link"],[role="tab"], input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"], [data-add],[data-open-cart],[data-drag],.orb,.tile,.gear-card__frame,.cloud{ cursor:var(--cur-point),pointer; } /* Text you can select should say so, or the hand fights the caret. */ input[type="text"],input[type="email"],input[type="tel"],input[type="search"], input[type="date"],input[type="number"],textarea{cursor:text} /* Mouse down: the hand closes. */ a[href]:active,button:active,[role="button"]:active, [data-add]:active,[data-open-cart]:active,.orb:active,.tile:active,.cloud:active{ cursor:var(--cur-press),pointer; } /* A disabled control must not look clickable. */ button:disabled,[aria-disabled="true"]{cursor:not-allowed} img,video{max-width:100%;height:auto;display:block;border:0} a{color:var(--ink);text-decoration:none} a:hover{text-decoration:underline} a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px; } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------------------------------------------------------------- headings */ h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.15;margin:0 0 .6em} h1{font-size:clamp(26px,4.4vw,44px)} h2{font-size:clamp(20px,3vw,30px)} h3{font-size:clamp(16px,2.2vw,21px)} p{margin:0 0 1em} ul,ol{margin:0 0 1em;padding-left:1.3em} li{margin:.3em 0} strong,b{font-weight:700} hr{border:0;border-top:2px solid rgba(10,10,10,.12);margin:1.8em 0} /* the yellow label motif from the homepage artwork */ .bz-eyebrow,.badge,.chip-list a,.chip-list span,.cat{ display:inline-block; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; background:var(--yellow); color:var(--ink); padding:4px 9px; border:2px solid var(--line); border-radius:5px; line-height:1.25; } .status{ display:inline-block;font-family:var(--mono);font-weight:700;font-size:11px; letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--ink); padding:4px 9px;border:2px solid var(--line);border-radius:5px;line-height:1.25; } /* ------------------------------------------------------------------ header */ .site-header{ position:sticky;top:0;z-index:50; display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:10px clamp(12px,3vw,26px); background:rgba(8,74,86,.93); backdrop-filter:blur(10px); border-bottom:3px solid var(--line); } .site-header .brand{ display:flex;align-items:center;gap:9px; font-family:var(--display);font-size:16px;color:var(--yellow); text-decoration:none;flex:0 0 auto; } .site-header .brand:hover{text-decoration:none;filter:brightness(1.15)} .site-header .brand img{height:30px;width:auto} .site-header .search{ position:relative;display:flex;align-items:center; flex:1 1 190px;min-width:0;max-width:420px; } /* The magnifier is an inline stays out too. */ body > canvas,body > video{display:none !important} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} } /* ---------- grab and drag (engine lives in brainzap-drag.js) ---------- */ [data-drag]{touch-action:none} .grabbing,body.is-gripping,body.is-gripping *{ cursor:url("/images/cursor%20grip.png") 16 16,grabbing !important; } .dragged{position:fixed !important;margin:0 !important;z-index:60;transition:none !important} .grabbing{filter:brightness(1.06) drop-shadow(0 8px 18px rgba(0,0,0,.4))} #bzLive.dragged{z-index:80} /* the gear-list lines carry no money either — brainzap-app.js now prints the category here instead of a day rate, and this keeps any stale cached copy of that file from putting a price back on screen */ .cart-line__m{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} /* ============================================================================ The site-wide cloud layer (#bzSky, injected by brainzap-clouds.js) is position:fixed at z-index 0 and is appended last, so without these rules it would paint OVER the unpositioned page content and swallow every click and touch-scroll underneath it. Each container is raised individually and .shell is deliberately NOT among them: giving .shell a stacking context would trap the mobile filter rail (z-index 95) inside it, and #railScrim (z-index 90, a body-level sibling declared earlier) would then paint over the open panel. ============================================================================ */ .subbar,.results,.bz-wrap,.prose-wrap,.item-layout,.site-footer{position:relative;z-index:1} .rail{z-index:1} /* ============================================================================ ADD-TO-LIST FEEDBACK brainzap-app.js already did all three of these and you could not see any of them, because none had a single line of CSS anywhere in the bundle: · toast() built #bzToast with class .toast and added .show · the button set class .added and swapped its label to "Added" · updateCounts toggled .has on .cart-count when the list is non-empty The behaviour was written months ago. Only the styling was missing. ============================================================================ */ /* the slide-up confirmation */ #bzToast,.toast{ position:fixed;left:50%;bottom:26px;z-index:99990; transform:translate(-50%,180%); display:flex;align-items:center;gap:9px; max-width:min(90vw,440px); padding:13px 18px; background:var(--ink);color:#fff; border:3px solid var(--ink);border-radius:12px; box-shadow:6px 7px 0 rgba(0,0,0,.34); font-family:var(--mono);font-size:13px;font-weight:700; line-height:1.35;text-align:left; pointer-events:none; transition:transform .38s cubic-bezier(.2,1.25,.3,1),opacity .2s ease; } #bzToast::before,.toast::before{ content:"✓"; display:grid;place-items:center;flex:0 0 auto; width:22px;height:22px;border-radius:50%; background:var(--yellow);color:var(--ink); font-size:13px;line-height:1; } #bzToast.show,.toast.show{transform:translate(-50%,0)} @media(max-width:560px){ #bzToast,.toast{left:12px;right:12px;bottom:16px;transform:translateY(180%);max-width:none} #bzToast.show,.toast.show{transform:translateY(0)} } /* the button confirms in place, so the eye never has to leave it */ .gear-card .add-btn.added,.buybox .add-btn.added{ background:var(--ink); border-color:var(--ink); box-shadow:2px 3px 0 rgba(0,0,0,.3); transform:translate(1px,2px); } .gear-card .add-btn.added::before,.buybox .add-btn.added::before{ content:"Added \2713"; color:var(--yellow); } /* ---------------------------------------------------------------- IN LIST The flash above lasts a second and a half. This does not: for as long as a piece of gear is on the list, its button stays black with a yellow "✓ In list · 2", on the catalogue and on the gear page. Scroll back later and the answer to "did I already add that?" is on the button itself. markInList() in brainzap-app.js keeps the class and data-qty in step. :not(.added) so the momentary "Added ✓" wins while it is playing, whatever order these rules end up in. */ .gear-card .add-btn.in-list,.buybox .add-btn.in-list,.buybox .btn.in-list{ background:var(--ink);border-color:var(--ink);color:var(--yellow); box-shadow:2px 3px 0 rgba(0,0,0,.3); } .gear-card .add-btn.in-list:not(.added)::before, .buybox .add-btn.in-list:not(.added)::before{ content:"✓ In list · " attr(data-qty); color:var(--yellow); } /* a hairline of yellow on the card itself, so a full grid reads at a glance */ .gear-card:has(.add-btn.in-list){box-shadow:0 0 0 3px var(--yellow),5px 6px 0 rgba(0,0,0,.28)} /* ------------------------------------------------------- how many we own Counts come from /gear-stock.json (see brainzap-app.js). Items with no count are not capped and never show any of this. */ .gear-card .add-btn.in-list.at-cap:not(.added)::before, .buybox .add-btn.in-list.at-cap:not(.added)::before{ content:"✓ All " attr(data-qty) " on your list"; } /* the shake when you ask for an eleventh C-stand and there are ten */ .add-btn.at-limit,.buybox .btn.at-limit{animation:bzNope .4s ease} @keyframes bzNope{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 45%{transform:translateX(5px)} 70%{transform:translateX(-3px)} } #cartLines .cart-line__stock{ font-style:normal;font-size:10.5px;letter-spacing:.04em; color:var(--muted);margin-left:2px;white-space:nowrap; } #cartLines .cart-line__stock.maxed{color:#a11616;font-weight:700} #cartLines .qty button[disabled]{ opacity:.4;background:#fff;box-shadow:none; cursor:not-allowed; } /* --------------------------------------------------------- promo confirmation Money rows stay hidden — rentals is a request-a-list, not a shop — so the code box says in words what it cannot say in dollars. Injected by promoNote() because the drawer markup is baked into 171 gear pages. */ .promo-note{ font-family:var(--mono);font-size:11.5px;line-height:1.45; margin-top:6px;padding:0 2px; } .promo-note:empty{display:none} .promo-note.is-ok{color:#0a6b2f;font-weight:700} .promo-note.is-expired{color:#8a5a00;font-weight:700} .promo-note.is-unknown{color:#a11616;font-weight:700} #promoCode:has(~ .promo-note.is-ok){border-style:solid;border-color:#0a6b2f;background:#f2fff6} #promoCode:has(~ .promo-note.is-unknown){border-color:#a11616} /* The whole button lights up once the list has something in it — that reads from across the page, which a small badge alone does not. The badge itself deliberately STAYS dark: yellow-on-yellow would erase the number. */ .cart-count{transition:transform .18s ease} .cart-btn:has(.cart-count.has){ background:var(--yellow); box-shadow:0 0 0 2px var(--ink); } /* and it kicks each time it changes, so a click is never ambiguous */ .cart-count.bump{animation:bzBump .42s cubic-bezier(.2,1.4,.3,1)} @keyframes bzBump{ 0%{transform:scale(1)} 38%{transform:scale(1.55)} 62%{transform:scale(.92)} 100%{transform:scale(1)} } @media (prefers-reduced-motion:reduce){ #bzToast,.toast{transition:opacity .2s ease} .cart-count.bump{animation:none} } /* ============================================================================ THE DOCK — the gear list follows you down the page (#bzDock, injected on every page by brainzap-app.js) Bottom LEFT on purpose: the floating TV (#bzLive) owns the bottom right of every page and is 390px wide. z-index 85 sits above the page (1) and the TV (80) but UNDER the scrim (90), so opening the drawer or the mobile filter panel buries the dock rather than leaving it floating on top of the dimmed page. ============================================================================ */ #bzDock{ position:fixed;left:16px;bottom:16px;z-index:85; display:flex;align-items:center;gap:10px; padding:8px 12px 8px 9px; font-family:var(--mono);text-align:left; background:var(--yellow);color:var(--ink); border:3px solid var(--line);border-radius:15px; box-shadow:5px 6px 0 rgba(0,0,0,.34); transition:transform .24s cubic-bezier(.2,1.3,.35,1),opacity .24s ease,box-shadow .12s ease,background .2s ease; } #bzDock:hover{transform:translateY(-3px);box-shadow:6px 9px 0 rgba(0,0,0,.34)} #bzDock:active{transform:translate(1px,2px);box-shadow:3px 3px 0 rgba(0,0,0,.34)} #bzDock.is-empty{background:#fff} #bzDock.is-empty .cart-count, #bzDock.is-empty .bzDock__thumbs{display:none} #bzDock.is-hidden{opacity:0;pointer-events:none;transform:translateY(180%)} /* any open panel dims the page — the dock goes under it, not over it */ .drawer-scrim.open ~ #bzDock{opacity:0;pointer-events:none;transform:translateY(180%)} .bzDock__thumbs{display:flex;align-items:center;flex:0 0 auto} .bzDock__thumbs img{ width:34px;height:34px;object-fit:cover;background:#fff; border:2px solid var(--line);border-radius:9px; margin-right:-13px;box-shadow:2px 2px 0 rgba(0,0,0,.25); } .bzDock__thumbs img:last-child{margin-right:0} .bzDock__txt{display:flex;flex-direction:column;gap:1px;line-height:1.2;min-width:0} .bzDock__ttl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em} .bzDock__sub{font-size:10.5px;opacity:.72;white-space:nowrap} #bzDock .cart-count{ min-width:23px;height:23px;margin-left:2px;font-size:12px; background:var(--ink);color:var(--yellow); } /* it takes the hit when gear lands in it */ #bzDock.hit{animation:bzDockHit .52s cubic-bezier(.2,1.4,.3,1)} @keyframes bzDockHit{ 0%{transform:scale(1)} 28%{transform:scale(1.16) rotate(-2.5deg)} 56%{transform:scale(.95) rotate(1deg)} 100%{transform:scale(1)} } #bzDock.hit::after{ content:"";position:absolute;inset:-7px;border-radius:20px; border:3px solid var(--ink);pointer-events:none; animation:bzRing .55s ease-out forwards; } @keyframes bzRing{ from{opacity:.85;transform:scale(.92)} to{opacity:0;transform:scale(1.3)} } @media(max-width:560px){ #bzDock{left:10px;bottom:10px;padding:7px 10px 7px 8px;gap:8px} .bzDock__thumbs img{width:30px;height:30px} .bzDock__sub{display:none} /* the toast is full-width down here — clear the dock */ #bzToast,.toast{bottom:74px} } /* ---------------------------------------------------------------- the throw The clicked gear flies out of the card and into the dock, so there is never a question of where the thing you just clicked went. Built and animated by flyToDock() in brainzap-app.js; this is only its skin. */ .bz-fly{ position:fixed;z-index:99995;pointer-events:none; background:#fff;border:3px solid var(--line);border-radius:11px; overflow:hidden;box-shadow:4px 5px 0 rgba(0,0,0,.3); will-change:transform,opacity; } .bz-fly img{width:100%;height:100%;object-fit:cover;display:block} .bz-fly.no-art{background:var(--yellow)} /* the card itself flashes, so the reaction starts where the finger is */ .gear-card.bz-flash,.buybox.bz-flash{animation:bzFlash .62s ease-out} @keyframes bzFlash{ 0% {box-shadow:0 0 0 0 rgba(255,233,0,0),5px 6px 0 rgba(0,0,0,.28)} 22% {box-shadow:0 0 0 7px var(--yellow),5px 6px 0 rgba(0,0,0,.28)} 100%{box-shadow:0 0 0 0 rgba(255,233,0,0),5px 6px 0 rgba(0,0,0,.28)} } /* and the button pops before it settles into its pressed "Added" state. The 109 gear pages use a plain .btn.btn-primary in the buybox rather than .add-btn, so it is named here too or those pages get no button feedback. */ .gear-card .add-btn.added,.buybox .add-btn.added,.buybox .btn.added{animation:bzPop .36s cubic-bezier(.2,1.5,.3,1)} .buybox .btn.added{ background:var(--ink);border-color:var(--ink);color:var(--yellow); box-shadow:2px 3px 0 rgba(0,0,0,.3); } @keyframes bzPop{ 0% {transform:scale(1)} 42% {transform:scale(1.13)} 100%{transform:translate(1px,2px) scale(1)} } /* ------------------------------------------------------------- rich toast Thumbnail + what happened + a way straight into the list. The plain text toast is still there for every other message. */ #bzToast:not(.show){pointer-events:none} #bzToast.toast--rich{ pointer-events:auto;padding:11px 12px 11px 11px;gap:11px;align-items:center; } #bzToast.toast--rich::before{display:none} .toast__thumb{ flex:0 0 auto;width:42px;height:42px;border-radius:9px;overflow:hidden; background:#fff;border:2px solid var(--yellow); } .toast__thumb img{width:100%;height:100%;object-fit:cover;display:block} .toast__txt{display:flex;flex-direction:column;gap:2px;min-width:0} .toast__txt b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--yellow)} .toast__txt span{ font-size:12px;font-weight:400;opacity:.9; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42vw; } .toast__cta{ flex:0 0 auto;margin-left:auto; font-family:var(--mono);font-weight:700;font-size:11px; text-transform:uppercase;letter-spacing:.06em; background:var(--yellow);color:var(--ink); border:2px solid var(--yellow);border-radius:8px;padding:8px 11px; } .toast__cta:hover{background:#fff;border-color:#fff;text-decoration:none} /* ------------------------------------------------------------- drawer lines renderCart() in brainzap-app.js has always emitted .cart-line / .cart-line__img / .qty / .cart-rm, and not one of them had a rule anywhere in the bundle — so the list you were sending arrived as an unstyled stack with a full-width photo on top of each row. This is the layout that markup was written for. Everything is scoped to #cartLines, the container renderCart() writes into, so none of it can reach the merch shop's own cart markup. */ #cartLines .cart-line{ display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:11px;align-items:center; padding:10px;border:2px solid var(--line);border-radius:11px;background:#fff; } #cartLines .cart-line + .cart-line{margin-top:9px} #cartLines .cart-line__img{ width:54px;height:54px;border:2px solid var(--line);border-radius:8px; overflow:hidden;background:#f4f4f4;display:grid;place-items:center; } #cartLines .cart-line__img img{width:100%;height:100%;object-fit:cover} #cartLines .cart-line__t{font-size:13px;font-weight:700;line-height:1.3} #cartLines .qty{display:inline-flex;align-items:center;gap:9px;margin-top:6px} #cartLines .qty button{ width:26px;height:26px;padding:0;display:grid;place-items:center; font-family:var(--mono);font-weight:700;font-size:15px;line-height:1; background:var(--yellow);color:var(--ink); border:2px solid var(--line);border-radius:7px; } #cartLines .qty button:hover{background:#fff} #cartLines .qty span{font-family:var(--mono);font-weight:700;font-size:13px;min-width:14px;text-align:center} #cartLines .cart-rm{ align-self:start; font-family:var(--mono);font-weight:700;font-size:10px; text-transform:uppercase;letter-spacing:.06em; background:#fff;color:var(--muted); border:2px solid var(--line);border-radius:7px;padding:5px 8px; } #cartLines .cart-rm:hover{background:var(--ink);color:#fff} #cartLines .cart-empty{ padding:22px 16px;text-align:center;font-size:13px;line-height:1.5;color:var(--muted); border:2px dashed var(--line);border-radius:11px;background:#fffdf0; } /* an open drawer reacts too — the line that just changed lights up */ .cart-line.just{animation:bzLine 1.1s ease-out} @keyframes bzLine{ 0% {background:var(--yellow);box-shadow:0 0 0 6px var(--yellow)} 70% {background:var(--yellow);box-shadow:0 0 0 6px var(--yellow)} 100%{background:transparent;box-shadow:0 0 0 6px rgba(255,233,0,0)} }