/* ==========================================================================
VARNER TOOLBOX — the shared chrome for every Varner application.
==========================================================================
Anything built for the crew rather than for customers wears this header. It
exists so a person can tell, in the first half second and without reading
anything, whether they are looking at something a customer can see.
Use it by putting this in the page head, BEFORE the app's own stylesheet:
and this as the first element in the body:
Change to name the tool. Everything else stays identical across
applications — that consistency is the whole point.
The lockup is a LINK back to the Toolbox dashboard on every app. Tapping the
logo to get home is the one navigation habit every person already has, and
it costs no space in a bar that has none to give. It points at /toolbox/
rather than / because / is the marketing site on the public domain; the
Toolbox host rewrites /toolbox/ to the hub and the public host redirects it,
so the one path is right from everywhere. The hub's own logo is not a link —
it is already home.
Colours are the 2026 brand system: black ground, one red accent, white type.
See brain/Brand & Copy .md files/BRAND.md.
========================================================================== */
:root{
--vw-red:#D80C11; --vw-black:#0A0A0A; --vw-carbon:#171717;
--vw-line:rgba(255,255,255,.13);
/* The Toolbox palette, defined ONCE. Every crew-facing page used to carry
its own copy of this block, so a colour change was a four-file hunt and
the copies had already started to drift. Pages may still override a token
locally; they should not redeclare the set. */
--red:#D80C11; --red-deep:#A8090D; --red-soft:#FF5A5E; --go:#3FB950;
--bg:#0A0A0A; --card:#141413; --card-2:#101010;
--line:#262624; --line-2:#333331;
--ink:#F4F4F1; --ink-2:#B2B2AB; --ink-3:#7C7C76;
--r:4px; --r-lg:6px; --gut:20px;
}
.vw-bar{
position:sticky; top:0; z-index:40;
background:var(--vw-carbon);
border-bottom:2px solid var(--vw-red);
}
.vw-bar__in{
max-width:860px; margin:0 auto; padding:12px 16px;
display:flex; align-items:center; gap:12px;
}
/* The lockup: VARNER in red, the rest in white, per the brand kit.
Also the way home — see the note at the top of this file. */
.vw-mark{
font:900 15px/1 Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
letter-spacing:-.02em; text-transform:uppercase; color:#fff; white-space:nowrap;
}
/* As a link it must still LOOK like the lockup — no underline, no link blue —
while being a real 44px touch target. The negative margin lets the target
grow to full thumb size without making the bar taller. */
/* Block, not a column flex. As a flex container the bare text node
"WINDOWS" becomes its own flex item and the lockup stacks onto three
lines — VARNER / WINDOWS / TOOL NAME. Block keeps "VARNER WINDOWS" on one
line with the tool name beneath, which is the actual lockup, and the
padding still gives the link a 44px tap target. */
a.vw-mark{
display:block; min-height:44px; margin:-9px 0; padding:9px 2px;
text-decoration:none; color:#fff; flex:none;
border-radius:3px; -webkit-tap-highlight-color:transparent;
transition:opacity .14s;
}
a.vw-mark:hover{ opacity:.82 }
a.vw-mark:active{ opacity:.65 }
a.vw-mark:focus-visible{ outline:2px solid var(--vw-red); outline-offset:3px }
.vw-mark i{ font-style:normal; color:var(--vw-red); }
.vw-mark small{
display:block; margin-top:3px;
font-size:8.5px; font-weight:800; letter-spacing:.3em; color:rgba(255,255,255,.62);
}
/* The badge. Outlined rather than filled: it names the room, it is not a
warning, and a solid red block here would compete with the actual buttons. */
.vw-toolbox{
font:800 9.5px/1 Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
letter-spacing:.18em; text-transform:uppercase;
color:var(--vw-red); border:1.5px solid var(--vw-red); border-radius:2px;
padding:5px 7px; white-space:nowrap; flex:none;
}
.vw-spacer{ flex:1 }
@media (max-width:420px){
.vw-bar__in{ gap:9px; padding:11px 13px }
.vw-mark{ font-size:14px }
.vw-toolbox{ font-size:9px; letter-spacing:.14em; padding:4px 6px }
}
/* ==========================================================================
NO ZOOM, NO SIDEWAYS DRIFT — Grayson's call, 2026-08-21.
==========================================================================
Every Toolbox page carries `maximum-scale=1, user-scalable=no` in its
viewport tag. That is what stops pinch-zoom; it works on Android and in the
iOS home-screen app, which is how the crew actually open this. (Safari as a
plain browser tab ignores it by design — Apple will not let a page take
zoom away from someone there, and that is a reasonable place to lose.)
These rules handle the other half: the sideways rubber-banding that makes a
page feel broken when a thumb catches an edge.
`touch-action` is deliberately NOT set globally. The Knock Map needs its own
gestures and Leaflet sets `touch-action:none` on the map itself; a blanket
rule here would fight it, and would also kill the horizontal scrolling that
the ladder table and the filter chips rely on. Those scroll inside their own
boxes — which is the correct way to be wide, and still works. */
html, body{
max-width:100%;
overflow-x:hidden;
/* Stops the whole page bouncing horizontally, and stops a sideways swipe
being handed to the browser as a back-gesture mid-drag. */
overscroll-behavior-x:none;
}
body{
/* Kills the double-tap-to-zoom delay without touching pinch handling inside
a map or a scroller. */
touch-action:manipulation;
}