/* ========================================================================== CURBSIDE MOBILE REPAIR — DEMONSTRATION SITE Design direction: DISPATCH BOARD. A cool near-black board, lighter row surfaces, tabular mono for anything structural, plain sans for prose. Status color is STATUS, never decoration: green = done, amber = en route / waiting, red = declined / referred out. ⛔ No card grid. The layout is a narrow left rail of job rows and a wide right detail pane, and it stacks to one column below 900px. ⛔ Zero external requests. System font stacks only. No @import, no CDN. ========================================================================== */ :root{ --board:#0b1016; /* deep blue-gray, near black */ --board2:#0f151d; /* section ground */ --row:#151e28; /* row surface */ --row-hi:#1c2833; /* selected / hovered row */ --rule:#25333f; /* hairline */ --rule-soft:#1a242e; --ink:#e8eef4; --ink2:#b6c6d4; --dim:#7f95a7; --dimmer:#5d7183; --done:#43c08a; /* green — finished */ --wait:#e2a63f; /* amber — en route / waiting */ --no:#e2604f; /* red — declined / referred out */ /* STEEL is the only non-status color, and it has exactly one job: STRUCTURE. Selection, keylines, diagram rules, focus, the primary action. It is never allowed to mean "done", "waiting" or "declined", and green/amber/red are never allowed to mean "this is important". */ --steel:#5b93c4; --steel-dim:#3d6a92; --steel-glow:rgba(91,147,196,.22); /* ⭐ HI-VIS is the BRAND accent, added 11 Sep 2026, and it has exactly four jobs: the mark, the offer strip, one phrase of the home page h1, and the primary button. Nothing else. 🔴 READ THIS BEFORE USING IT ANYWHERE ELSE. --wait (#e2a63f) is a STATUS and it is also amber. The two are told apart by WHERE they appear, not by hue: --wait only ever fills a status pill or a row flag inside the board; --hivis only ever appears on brand furniture, and NEVER inside a board row. ⛔ Put hi-vis on a row and the row reads as "en route". That rewrites the steel rule below: the primary action is now hi-vis, but the rest of the rule stands — green/amber/red still never mean "this is important", and steel still owns selection, keylines, diagram rules and focus. */ --hivis:#ffb000; --hivis-lo:#d99500; --hivis-glow:rgba(255,176,0,.22); /* depth — a board is a lit screen, not a flat fill */ --lift:rgba(255,255,255,.045); /* hairline that catches the light */ --lift2:rgba(255,255,255,.022); /* alternating row value */ --sink:rgba(0,0,0,.34); --ease:cubic-bezier(.22,.61,.36,1); --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --shell: 1180px; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--board); background-image: radial-gradient(1100px 520px at 50% -160px, #16202b 0%, rgba(22,32,43,0) 70%), linear-gradient(180deg, #0d131b 0%, var(--board) 420px); background-repeat:no-repeat; background-attachment:scroll; color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.62; overflow-wrap:break-word; } img,svg{ max-width:100%; } a{ color:#8fd0ff; text-decoration:none; transition:color .16s var(--ease); } a:hover{ text-decoration:underline; color:#bce2ff; } :focus-visible{ outline:2px solid var(--steel); outline-offset:2px; } .shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 22px; } /* ---------- the demonstration strip ------------------------------------- ⛔ Not decoration and not optional. Every page opens with it, above the header, un-dismissable. These files are reachable outside the viewer that frames them, and standing alone every page reads as a real repair business with a phone number on it. */ .demostrip{ display:flex; align-items:flex-start; gap:10px; background:#1a1206; border-bottom:1px solid #43300e; color:#f0d9ae; font-family:var(--mono); font-size:.78125rem; line-height:1.5; padding:9px 22px; } .demostrip b{ color:#ffdf9e; } .demostrip a{ color:#ffcf7a; text-decoration:underline; white-space:nowrap; } .demostrip__dot{ flex:0 0 auto; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--wait); box-shadow:0 0 0 3px rgba(226,166,63,.16); } /* ---------- header ------------------------------------------------------ */ .top{ border-bottom:1px solid var(--rule); position:relative; z-index:5; background:linear-gradient(180deg,#131c25 0%,var(--board2) 100%); box-shadow:inset 0 1px 0 var(--lift), 0 1px 0 rgba(0,0,0,.5); } .top__in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; padding-top:14px; padding-bottom:14px; } .mark{ display:flex; align-items:baseline; gap:10px; } .mark__name{ font-family:var(--mono); font-size:1rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); } .mark__sub{ font-family:var(--mono); font-size:.65625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer); } .mark a{ color:inherit; text-decoration:none; } .nav{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-left:auto; } .nav a{ font-family:var(--mono); font-size:.71875rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink2); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; transition:color .16s var(--ease), border-color .16s var(--ease); } .nav a:hover{ color:#fff; border-bottom-color:var(--steel); text-decoration:none; } .nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--steel); } .callbar{ font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:var(--ink); border:1px solid var(--rule); white-space:nowrap; background:linear-gradient(180deg,#1b2632,#141d26); box-shadow:inset 0 1px 0 var(--lift); padding:7px 12px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease); } .callbar:hover{ border-color:var(--steel); text-decoration:none; color:#fff; box-shadow:inset 0 1px 0 var(--lift), 0 0 0 3px var(--steel-glow); } .callbar b{ color:#fff; } /* ---------- ruled section bars ------------------------------------------ */ .rulebar{ display:flex; align-items:center; gap:13px; font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); margin:66px 0 22px; } .rulebar::before{ content:""; flex:0 0 auto; width:7px; height:7px; background:var(--steel); box-shadow:0 0 0 3px var(--steel-glow); } .rulebar::after{ content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg,var(--rule) 0%,var(--rule) 55%,rgba(37,51,63,0) 100%); } .rulebar--first{ margin-top:38px; } .rulebar--done::before{ background:var(--done); box-shadow:0 0 0 3px rgba(67,192,138,.16); } .rulebar--wait::before{ background:var(--wait); box-shadow:0 0 0 3px rgba(226,166,63,.16); } .rulebar--no::before{ background:var(--no); box-shadow:0 0 0 3px rgba(226,96,79,.16); } /* ---------- headings & prose -------------------------------------------- */ h1,h2,h3{ margin:0 0 14px; } h1{ font-size:clamp(1.9375rem,5.1vw,3.25rem); font-weight:700; line-height:1.04; letter-spacing:-.025em; color:#fff; max-width:20ch; text-wrap:balance; } h2{ font-size:clamp(1.375rem,2.9vw,1.9375rem); font-weight:700; line-height:1.14; letter-spacing:-.018em; color:#fff; } h3{ font-size:1.09375rem; font-weight:700; line-height:1.25; letter-spacing:-.008em; } p{ margin:0 0 15px; } .lede{ font-size:clamp(1.0625rem,2.05vw,1.25rem); line-height:1.55; color:var(--ink2); max-width:62ch; } .prose{ max-width:70ch; } .prose h2{ margin-top:34px; } .prose h3{ margin-top:26px; color:#fff; } .prose ul,.prose ol{ margin:0 0 16px; padding-left:20px; } .prose li{ margin-bottom:8px; } .small{ font-size:.84375rem; color:var(--dim); } .stamp{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } /* ---------- the board: narrow left rail + wide right pane ---------------- */ .board{ display:grid; grid-template-columns:minmax(0,318px) minmax(0,1fr); gap:0; border:1px solid var(--rule); background: radial-gradient(760px 340px at 82% 0%, rgba(91,147,196,.055) 0%, rgba(91,147,196,0) 68%), linear-gradient(180deg,#111a23 0%,#0c1219 62%,#0a1017 100%); box-shadow:inset 0 1px 0 var(--lift), 0 18px 44px -28px rgba(0,0,0,.9); } .board__rail{ border-right:1px solid var(--rule); min-width:0; background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0) 220px); } .board__pane{ min-width:0; padding:20px 22px 26px; } .railhead,.panehead{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:.65625rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); padding:11px 14px; border-bottom:1px solid var(--rule); background:linear-gradient(180deg,#141d27,#0c131a); box-shadow:inset 0 1px 0 var(--lift); } .railhead b,.panehead b{ color:var(--steel); font-weight:700; } .panehead{ margin:-20px -22px 18px; padding-left:22px; padding-right:22px; } /* job rows in the rail */ .jobrow{ position:relative; display:grid; grid-template-columns:11px minmax(0,1fr); gap:11px; align-items:start; padding:12px 15px 12px 16px; border-bottom:1px solid var(--rule-soft); border-top:1px solid transparent; font-family:var(--mono); font-size:.75rem; line-height:1.45; color:var(--ink2); transition:background-color .17s var(--ease), color .17s var(--ease); } /* alternating value — a board is ruled, and ruled paper is never one tone */ .jobrow:nth-of-type(even){ background:var(--lift2); } /* the hairline that catches the light: dark rule below, lit rule above */ .jobrow + .jobrow{ border-top-color:var(--lift); } .jobrow:last-child{ border-bottom:0; } /* the SELECTED row. Steel, not amber — selection is structure, not status, and the row's own pip is still free to say what the job is doing. */ .jobrow--on{ background:linear-gradient(90deg,rgba(91,147,196,.13) 0%,rgba(91,147,196,.03) 46%,rgba(255,255,255,.028) 100%); color:var(--ink); box-shadow:inset 0 1px 0 var(--lift), 0 6px 18px -14px rgba(0,0,0,.9); } .jobrow--on::before{ content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:3px; background:var(--steel); box-shadow:0 0 12px 1px var(--steel-glow); } .jobrow__id{ color:#fff; font-weight:700; letter-spacing:.04em; } .jobrow--on .jobrow__id{ color:#fff; } .jobrow__meta{ color:var(--dimmer); font-size:.6875rem; display:block; } .jobrow--on .jobrow__meta{ color:var(--ink2); } .jobrow__st{ font-size:.65625rem; letter-spacing:.11em; text-transform:uppercase; } /* status pips read as lit indicators, not printed dots */ .pip{ width:9px; height:9px; margin-top:5px; border-radius:50%; background:var(--dim); box-shadow:0 0 0 3px rgba(127,149,167,.12); } .pip--done{ background:var(--done); box-shadow:0 0 0 3px rgba(67,192,138,.13), 0 0 9px rgba(67,192,138,.5); } .pip--wait{ background:var(--wait); box-shadow:0 0 0 3px rgba(226,166,63,.14), 0 0 9px rgba(226,166,63,.5); } .pip--no{ background:var(--no); box-shadow:0 0 0 3px rgba(226,96,79,.14), 0 0 9px rgba(226,96,79,.5); } .st--done{ color:var(--done); } .st--wait{ color:var(--wait); } .st--no{ color:var(--no); } /* ---------- the work order ---------------------------------------------- */ .wo{ border:1px solid var(--rule); background:linear-gradient(180deg,#18222d 0%,#141d26 34%,#121a23 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 22px 40px -30px rgba(0,0,0,1); } .wo__head{ display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline; padding:15px 16px; border-bottom:1px solid var(--rule); background:linear-gradient(180deg,#1a2531,#101922); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); font-family:var(--mono); font-size:.71875rem; letter-spacing:.08em; color:var(--dim); } .wo__no{ font-size:.9375rem; font-weight:700; color:#fff; letter-spacing:.06em; } .wo__facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:2px 22px; padding:14px 16px; border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:.75rem; } .wo__facts dt{ color:var(--dimmer); font-size:.65625rem; letter-spacing:.14em; text-transform:uppercase; } .wo__facts dd{ margin:0 0 10px; color:var(--ink); } .woline{ padding:15px 16px; border-bottom:1px solid var(--rule-soft); border-top:1px solid transparent; transition:background-color .18s var(--ease); } .woline + .woline{ border-top-color:var(--lift); } .woline:nth-of-type(even){ background:var(--lift2); } .woline:hover{ background:rgba(255,255,255,.038); } .woline:last-of-type{ border-bottom:0; } .woline__top{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:baseline; font-family:var(--mono); font-size:.78125rem; letter-spacing:.03em; } .woline__title{ color:#fff; font-weight:700; text-transform:uppercase; } .woline__price{ color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .woline__st{ grid-column:1/-1; font-size:.65625rem; letter-spacing:.13em; text-transform:uppercase; } .woline__note{ margin:8px 0 0; font-size:.90625rem; color:var(--ink2); max-width:64ch; } /* the $0.00 declined line. It is the best line on the site and it is lit like one — red is the status, and the status is "we did not touch it". */ .woline--no, .woline--no:nth-of-type(even){ background:linear-gradient(90deg,rgba(226,96,79,.115) 0%,rgba(226,96,79,.045) 55%,rgba(226,96,79,.02) 100%); box-shadow:inset 3px 0 0 var(--no), inset 0 1px 0 rgba(255,255,255,.05); } .woline--no:hover{ background:linear-gradient(90deg,rgba(226,96,79,.155) 0%,rgba(226,96,79,.06) 55%,rgba(226,96,79,.03) 100%); } .woline--no .woline__title{ color:#ffd9d2; } .woline--no .woline__price{ color:var(--no); } .woline--free .woline__price{ color:var(--dim); } .wo__total{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:14px 16px; border-top:1px solid var(--rule); background:linear-gradient(180deg,#16202a,#101922); box-shadow:inset 0 1px 0 var(--lift); font-family:var(--mono); font-size:.8125rem; letter-spacing:.06em; } .wo__total b{ color:#fff; font-size:1rem; font-variant-numeric:tabular-nums; } .wo__total span:first-child{ text-transform:uppercase; color:var(--dim); font-size:.6875rem; } .wo__foot{ padding:12px 16px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:.6875rem; color:var(--dimmer); letter-spacing:.05em; } /* ---------- queue rows (services, areas, anything tabular) --------------- */ .queue{ border:1px solid var(--rule); background:linear-gradient(180deg,#101923 0%,#0c1219 100%); box-shadow:inset 0 1px 0 var(--lift); } .queue__head{ display:grid; grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1.4fr); gap:14px; padding:10px 16px; border-bottom:1px solid var(--rule); background:linear-gradient(180deg,#141d27,#0c131a); box-shadow:inset 0 1px 0 var(--lift); font-family:var(--mono); font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); } .qrow{ position:relative; display:grid; grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1.4fr); gap:4px 14px; padding:15px 16px; border-bottom:1px solid var(--rule-soft); border-top:1px solid transparent; align-items:baseline; transition:background-color .18s var(--ease); } .qrow + .qrow{ border-top-color:var(--lift); } .qrow:nth-of-type(even){ background:var(--lift2); } .qrow:last-child{ border-bottom:0; } .qrow:hover{ background:rgba(91,147,196,.075); } .qrow:hover::before{ content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px; background:var(--steel); box-shadow:0 0 10px 1px var(--steel-glow); } /* a queue whose rows are JOB TYPES carries a drawn mark; a queue whose rows are something else (the mileage rings) does not, and must not get a phantom 34px column. Opt in with .queue--marked. */ .queue--marked .queue__head, .queue--marked .qrow{ grid-template-columns:34px minmax(0,2.1fr) minmax(0,1fr) minmax(0,1.4fr); } .queue--marked .qrow__note{ grid-column:2/-1; } .qrow__mark{ grid-row:1/3; align-self:start; margin-top:1px; } .qrow__name{ font-family:var(--mono); font-size:.8125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .qrow__name a{ color:#fff; } .qrow__name a:hover{ color:var(--steel); text-decoration:none; } .qrow__dur,.qrow__where{ font-family:var(--mono); font-size:.71875rem; color:var(--ink2); } .qrow__note{ grid-column:1/-1; margin:6px 0 0; font-size:.90625rem; color:var(--ink2); max-width:74ch; } .qrow__label{ display:none; font-family:var(--mono); font-size:.59375rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer); } /* ---------- the "when we will tell you no" list ------------------------- */ .nolist{ border:1px solid var(--rule); border-left:3px solid var(--no); background: linear-gradient(90deg,rgba(226,96,79,.07) 0%,rgba(226,96,79,0) 340px), linear-gradient(180deg,#111923 0%,#0c1219 100%); box-shadow:inset 0 1px 0 var(--lift); } .noitem{ padding:17px 19px; border-bottom:1px solid var(--rule-soft); border-top:1px solid transparent; transition:background-color .18s var(--ease); } .noitem + .noitem{ border-top-color:var(--lift); } .noitem:hover{ background:rgba(255,255,255,.03); } .noitem:last-child{ border-bottom:0; } .noitem__head{ display:flex; align-items:center; gap:10px; margin:0 0 8px; } .noitem__head h3{ margin:0; } .noitem h3{ font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--no); margin:0 0 7px; } .noitem p{ margin:0; font-size:.9375rem; color:var(--ink2); max-width:76ch; } /* ---------- plain ruled blocks ------------------------------------------ */ .slab{ border:1px solid var(--rule); padding:21px 23px; background:linear-gradient(180deg,#111923 0%,#0c1219 100%); box-shadow:inset 0 1px 0 var(--lift); } .slab + .slab{ border-top:0; } .slab h3{ color:#fff; } .slab p:last-child{ margin-bottom:0; } .kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:0; border:1px solid var(--rule); background:linear-gradient(180deg,#111923,#0c1219); box-shadow:inset 0 1px 0 var(--lift); } .kv > div{ padding:15px 16px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); transition:background-color .18s var(--ease); } .kv > div:hover{ background:rgba(91,147,196,.06); } .kv > div:last-child{ border-right:0; } .kv dt,.kv .k{ font-family:var(--mono); font-size:.625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer); margin-bottom:5px; } .kv .v{ font-family:var(--mono); font-size:.8125rem; color:#fff; } /* ---------- the empty frame where photographs will go ------------------- */ .frame{ border:1px dashed #3a4b59; background:repeating-linear-gradient(135deg,#0e151d 0 12px,#111922 12px 24px); padding:34px 24px; text-align:center; } .frame__label{ font-family:var(--mono); font-size:.65625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); } .frame p{ margin:11px auto 0; max-width:64ch; color:var(--ink2); font-size:.90625rem; text-align:left; } /* ---------- the hero ----------------------------------------------------- */ .hero, .showcase{ padding:36px 0 0; } .hero__kick{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-bottom:16px; } .hero__kick::before{ content:""; width:22px; height:1px; background:var(--steel); flex:0 0 auto; } .hero__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:start; } .illo{ border:1px solid var(--rule); padding:15px; background: radial-gradient(620px 300px at 26% 8%, rgba(91,147,196,.075) 0%, rgba(91,147,196,0) 70%), linear-gradient(180deg,#111a24 0%,#0a1017 100%); box-shadow:inset 0 1px 0 var(--lift), 0 20px 44px -34px rgba(0,0,0,1); } .illo svg{ display:block; width:100%; height:auto; } .illo--tight{ padding:0; } .illo--tight svg{ padding:12px 12px 0; } .illo__cap{ font-family:var(--mono); font-size:.71875rem; letter-spacing:.02em; color:var(--dimmer); margin-top:12px; line-height:1.7; max-width:92ch; } /* ---------- buttons ------------------------------------------------------ */ .btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:13px 19px; border:1px solid var(--rule); color:var(--ink); background:linear-gradient(180deg,#1c2733,#141d26); box-shadow:inset 0 1px 0 var(--lift); text-decoration:none; cursor:pointer; transition:border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); } .btn:hover{ border-color:var(--steel); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--lift), 0 0 0 3px var(--steel-glow); } .btn:active{ transform:translateY(0); } /* the primary action is STEEL. Amber is a status and it is not for sale. */ .btn--go{ background:linear-gradient(180deg,#6ea6d6,#4b81b1); border-color:#79b0dd; color:#07121b; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 0 var(--steel-glow); } .btn--go:hover{ background:linear-gradient(180deg,#83b8e4,#5a91c1); border-color:#96c8f0; color:#07121b; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px var(--steel-glow); } /* ---------- form --------------------------------------------------------- */ .form{ border:1px solid var(--rule); background:var(--board2); } .form__row{ padding:14px 16px; border-bottom:1px solid var(--rule-soft); } .form__row:last-child{ border-bottom:0; } label{ display:block; font-family:var(--mono); font-size:.65625rem; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); margin-bottom:7px; } input,select,textarea{ width:100%; max-width:100%; background:#0b1016; border:1px solid var(--rule); color:var(--ink); font-family:var(--mono); font-size:.875rem; padding:10px 12px; } input,select,textarea{ transition:border-color .16s var(--ease), box-shadow .16s var(--ease); } input:hover,select:hover,textarea:hover{ border-color:var(--steel-dim); } input:focus,select:focus,textarea:focus{ outline:2px solid var(--steel); outline-offset:-1px; box-shadow:0 0 0 4px var(--steel-glow); } textarea{ min-height:110px; font-family:var(--sans); line-height:1.55; } fieldset{ border:0; padding:0; margin:0; } /* ---------- footer ------------------------------------------------------- */ .foot{ border-top:1px solid var(--rule); margin-top:70px; padding:30px 0 42px; background:linear-gradient(180deg,#0e151d 0%,#080d13 100%); box-shadow:inset 0 1px 0 var(--lift); } .foot__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:24px; } .foot h4{ font-family:var(--mono); font-size:.625rem; letter-spacing:.17em; text-transform:uppercase; color:var(--dim); margin:0 0 10px; } .foot ul{ list-style:none; margin:0; padding:0; } .foot li{ margin-bottom:6px; font-size:.875rem; } .foot a{ color:var(--ink2); } .foot a:hover{ color:var(--steel); } .foot__note{ margin-top:26px; padding-top:18px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:.6875rem; color:var(--dimmer); line-height:1.7; } /* ---------- chat launcher (bottom LEFT — the host page owns bottom right) - */ .chatlaunch{ position:fixed; left:16px; bottom:16px; z-index:60; display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.71875rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#07121b; background:linear-gradient(180deg,#6ea6d6,#4b81b1); border:0; padding:13px 16px; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 26px rgba(0,0,0,.55); transition:background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); } .chatlaunch:hover{ background:linear-gradient(180deg,#83b8e4,#5a91c1); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.6); } .chatpanel{ position:fixed; left:16px; bottom:16px; z-index:61; width:min(340px,calc(100vw - 32px)); max-height:min(560px,calc(100vh - 32px)); display:none; flex-direction:column; background:var(--board2); border:1px solid var(--rule); box-shadow:0 10px 40px rgba(0,0,0,.6); } .chatpanel[data-open="1"]{ display:flex; } .chatpanel__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; border-bottom:1px solid var(--rule); background:#0d141c; font-family:var(--mono); font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); } .chatpanel__x{ background:none; border:0; color:var(--dim); font-size:1.125rem; line-height:1; cursor:pointer; padding:0 2px; } .chatpanel__x:hover{ color:#fff; } .chatlog{ padding:13px; overflow-y:auto; flex:1 1 auto; } .msg{ font-size:.875rem; line-height:1.55; margin-bottom:11px; } .msg--bot{ color:var(--ink2); border-left:2px solid var(--rule); padding-left:10px; } .msg--you{ color:#fff; font-family:var(--mono); font-size:.78125rem; text-align:right; } .chatopts{ padding:0 13px 13px; display:flex; flex-wrap:wrap; gap:7px; } .chatopt{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; background:var(--row); border:1px solid var(--rule); color:var(--ink); padding:8px 11px; cursor:pointer; } .chatopt{ transition:border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease); } .chatopt:hover{ border-color:var(--steel); color:#fff; background:rgba(91,147,196,.11); } .chatfoot{ padding:9px 13px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:.625rem; color:var(--dimmer); letter-spacing:.06em; } /* ---------- responsive --------------------------------------------------- ⚠️ The failure mode for a dispatch board is a dense table that overflows at 375px. Every multi-column grid below collapses to one column and the mono column labels turn back on so a stacked row still says what each value is. */ @media (max-width:900px){ .board{ grid-template-columns:minmax(0,1fr); } .board__rail{ border-right:0; border-bottom:1px solid var(--rule); } .board__pane{ padding:18px 16px 22px; } .panehead{ margin:-18px -16px 16px; padding-left:16px; padding-right:16px; } } @media (max-width:700px){ .queue__head{ display:none; } .qrow{ grid-template-columns:minmax(0,1fr); padding:14px 14px; } .qrow__label{ display:block; margin-top:8px; } .nav{ margin-left:0; width:100%; } .callbar{ width:100%; text-align:center; } .wo__total{ grid-template-columns:minmax(0,1fr); } } @media (max-width:480px){ body{ font-size:.96875rem; } .shell{ padding:0 14px; } .demostrip{ padding:9px 14px; font-size:.71875rem; } .woline__top{ grid-template-columns:minmax(0,1fr); } .woline__price{ color:#fff; } .wo__facts{ grid-template-columns:minmax(0,1fr); } .kv{ grid-template-columns:minmax(0,1fr); } .kv > div{ border-right:0; } .jobrow{ font-size:.71875rem; } .illo{ padding:8px; } .chatlaunch{ left:12px; bottom:12px; font-size:.6875rem; padding:11px 13px; } .chatpanel{ left:12px; bottom:12px; width:calc(100vw - 24px); } } /* ========================================================================== PART TWO — DEPTH, ILLUSTRATION AND MOTION Added in the enrichment pass. Everything below is ADDITIVE: nothing here is required for a page to be readable, and nothing here is hidden by default and switched on by script. ========================================================================== */ /* ---------- inline marks (.sym) ----------------------------------------- A hand-drawn glyph per job type. currentColor throughout so a mark takes the color of whatever row it sits in — it is never given a status color of its own, because a drawing of a door ding is not a status. */ .sym{ display:inline-block; width:24px; height:24px; flex:0 0 auto; vertical-align:-5px; color:var(--dimmer); transition:color .18s var(--ease), transform .18s var(--ease); } .sym svg{ display:block; width:100%; height:100%; } .sym--lg{ width:40px; height:40px; vertical-align:-11px; } .sym--xl{ width:56px; height:56px; } .qrow:hover .sym{ color:var(--steel); transform:translateY(-1px); } .qrow__mark .sym{ width:26px; height:26px; } .noitem__head .sym{ width:27px; height:27px; color:var(--no); } .rulebar .sym{ width:18px; height:18px; color:var(--dim); } /* a mark set beside a page title */ .titlemark{ display:flex; align-items:center; gap:16px; margin:0 0 6px; } .titlemark .sym{ color:var(--steel-dim); } .titlemark h1{ margin:0; } /* ---------- diagrams (.dgm) --------------------------------------------- A drawn explanation, framed like a plate in a manual. Steel keylines, mono labels, status color only where the drawing is stating a status. */ .dgm{ border:1px solid var(--rule); margin:0; background: radial-gradient(680px 320px at 30% 0%, rgba(91,147,196,.07) 0%, rgba(91,147,196,0) 72%), linear-gradient(180deg,#101923 0%,#0a1017 100%); box-shadow:inset 0 1px 0 var(--lift), 0 18px 40px -32px rgba(0,0,0,1); } .dgm svg{ display:block; width:100%; height:auto; padding:16px 16px 4px; } .dgm__cap{ display:block; padding:12px 16px 14px; margin:0; border-top:1px solid var(--rule); background:rgba(0,0,0,.26); font-family:var(--mono); font-size:.75rem; letter-spacing:.015em; color:var(--dim); line-height:1.75; max-width:96ch; } .dgm__cap b{ color:var(--steel); font-weight:700; } /* ---------- designed photograph slots (.slot) ---------------------------- Photographs are coming. Until they do, the space they will occupy is BUILT, at the aspect ratio the real frame will have, filled with line art and named in the caption so the shoot list writes itself. ⛔ There is no before/after slot here and one must never be added. In this trade a before/after pair IS the result, so an empty one would be a promise, and a filled one would be a fabricated repair. */ .slotgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; align-items:start; /* ⛔ never stretch: a 16:9 frame beside a 4:3 one would grow dead space under the short one */ } .slot{ position:relative; min-width:0; /* ⛔ a lone slot in an auto-fit grid absorbs the whole row: a 4:3 frame 1134px wide is 850px tall and reads as a hero, not as a plate. */ max-width:440px; border:1px solid var(--rule); background:linear-gradient(158deg,#141d27 0%,#0c1219 58%,#0f1822 100%); box-shadow:inset 0 1px 0 var(--lift); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .slot:hover{ border-color:var(--steel-dim); box-shadow:inset 0 1px 0 var(--lift), 0 0 0 3px var(--steel-glow); } .slot__art{ display:block; width:100%; height:auto; } .slot--wide .slot__art{ aspect-ratio:16/9; } .slot--box .slot__art{ aspect-ratio:4/3; } .slot--tall .slot__art{ aspect-ratio:3/2; } /* corner ticks — a registration frame, so the slot reads as deliberate */ .slot::before,.slot::after{ content:""; position:absolute; width:13px; height:13px; pointer-events:none; border:1px solid var(--steel-dim); opacity:.55; } .slot::before{ top:7px; left:7px; border-right:0; border-bottom:0; } .slot::after{ top:7px; right:7px; border-left:0; border-bottom:0; } .slot__cap{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:10px 13px; border-top:1px solid var(--rule); background:rgba(0,0,0,.3); font-family:var(--mono); font-size:.65625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--dimmer); } .slot__tag{ color:var(--steel); font-weight:700; } .slot__what{ color:var(--ink2); } .slot__ratio{ margin-left:auto; color:var(--dimmer); } .slotnote{ margin:12px 0 0; font-family:var(--mono); font-size:.6875rem; line-height:1.7; letter-spacing:.04em; color:var(--dimmer); } /* the existing honesty block, tightened */ .frame{ box-shadow:inset 0 1px 0 var(--lift); } /* ---------- the pane swap ------------------------------------------------ The work order for job 4417 is IN THE HTML and is on screen with no script running at all. The script only adds the ability to look at a different row, and it transitions rather than snapping. */ .paneswap{ transition:opacity .19s var(--ease), transform .19s var(--ease); } .paneswap[data-out="1"]{ opacity:0; transform:translateY(6px); } .jobrow[data-pick]{ cursor:pointer; } .jobrow[data-pick]:hover{ background:rgba(91,147,196,.085); color:var(--ink); } .jobrow[data-pick]:hover .jobrow__meta{ color:var(--ink2); } .jobrow[data-pick]:focus-visible{ outline:2px solid var(--steel); outline-offset:-2px; } .jobcard{ border:1px solid var(--rule); background:linear-gradient(180deg,#16202a,#111a23); box-shadow:inset 0 1px 0 var(--lift); } .jobcard__head{ display:flex; flex-wrap:wrap; gap:6px 20px; align-items:baseline; padding:15px 16px; border-bottom:1px solid var(--rule); background:linear-gradient(180deg,#1a2531,#101922); font-family:var(--mono); font-size:.71875rem; letter-spacing:.08em; color:var(--dim); } .jobcard__no{ font-size:.9375rem; font-weight:700; color:#fff; letter-spacing:.06em; } .jobcard__body{ padding:15px 16px; } .jobcard__body p{ font-size:.90625rem; color:var(--ink2); max-width:62ch; } .jobcard__body p:last-child{ margin-bottom:0; } .jobcard__back{ display:inline-block; margin-top:4px; font-family:var(--mono); font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase; } /* ========================================================================== MOTION Rules: the DEFAULT STATE IS VISIBLE. Entrance animations are attached to an .is-in class the script adds when the board scrolls into view — if the script never runs, every row and the whole work order is simply there. One thing pulses, not everything: the amber pip on the row that is actually moving right now. ========================================================================== */ @keyframes rowIn{ from{ opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } } @keyframes paneIn{ from{ opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } } @keyframes pipPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(226,166,63,.14), 0 0 8px rgba(226,166,63,.42); } 50% { box-shadow:0 0 0 6px rgba(226,166,63,.05), 0 0 16px rgba(226,166,63,.85); } } @keyframes rodSweep{ from{ transform:translateX(0); } to { transform:translateX(150px); } } @keyframes lineDraw{ from{ stroke-dashoffset:var(--dash,300); } to { stroke-dashoffset:0; } } /* rows arriving in sequence, like a queue populating */ .board.is-in .jobrow{ animation:rowIn .44s var(--ease) backwards; } .board.is-in .jobrow:nth-of-type(1){ animation-delay:.03s } .board.is-in .jobrow:nth-of-type(2){ animation-delay:.09s } .board.is-in .jobrow:nth-of-type(3){ animation-delay:.15s } .board.is-in .jobrow:nth-of-type(4){ animation-delay:.21s } .board.is-in .jobrow:nth-of-type(5){ animation-delay:.27s } .board.is-in .jobrow:nth-of-type(6){ animation-delay:.33s } .board.is-in .jobrow:nth-of-type(7){ animation-delay:.39s } .board.is-in .jobrow:nth-of-type(8){ animation-delay:.45s } .board.is-in .board__pane{ animation:paneIn .5s var(--ease) .26s backwards; } .queue.is-in .qrow{ animation:rowIn .4s var(--ease) backwards; } .queue.is-in .qrow:nth-of-type(1){ animation-delay:.03s } .queue.is-in .qrow:nth-of-type(2){ animation-delay:.08s } .queue.is-in .qrow:nth-of-type(3){ animation-delay:.13s } .queue.is-in .qrow:nth-of-type(4){ animation-delay:.18s } .queue.is-in .qrow:nth-of-type(5){ animation-delay:.23s } .queue.is-in .qrow:nth-of-type(6){ animation-delay:.28s } .queue.is-in .qrow:nth-of-type(7){ animation-delay:.33s } .queue.is-in .qrow:nth-of-type(8){ animation-delay:.38s } .queue.is-in .qrow:nth-of-type(9){ animation-delay:.43s } .nolist.is-in .noitem{ animation:rowIn .4s var(--ease) backwards; } .nolist.is-in .noitem:nth-of-type(1){ animation-delay:.04s } .nolist.is-in .noitem:nth-of-type(2){ animation-delay:.11s } .nolist.is-in .noitem:nth-of-type(3){ animation-delay:.18s } .nolist.is-in .noitem:nth-of-type(4){ animation-delay:.25s } .nolist.is-in .noitem:nth-of-type(5){ animation-delay:.32s } /* ONE pip pulses: the van that is on the road right now. Not the waiting row, not the demo strip, not the chat launcher. One thing moving. */ .pip--live{ animation:pipPulse 2.9s ease-in-out infinite; } /* the line-board diagram's traveling reflection — the one piece of motion that is actually explaining something: this is what the tech is doing. */ .dgm__sweep{ animation:rodSweep 5.5s ease-in-out infinite alternate; } .dgm__draw{ animation:lineDraw 1.6s var(--ease) backwards; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .board.is-in .jobrow, .queue.is-in .qrow, .nolist.is-in .noitem, .board.is-in .board__pane{ animation:none; opacity:1; transform:none; } .pip--live{ animation:none; } .dgm__sweep{ animation:none; } .btn:hover{ transform:none; } .chatlaunch:hover{ transform:none; } } /* ---------- responsive additions for the new pieces --------------------- */ @media (max-width:700px){ .queue--marked .qrow{ grid-template-columns:26px minmax(0,1fr); } .queue--marked .qrow__mark{ grid-row:1; } .queue--marked .qrow__name{ grid-column:2; } .queue--marked .qrow__dur, .queue--marked .qrow__where, .queue--marked .qrow__note{ grid-column:1/-1; } .slotgrid{ grid-template-columns:minmax(0,1fr); } .titlemark{ gap:12px; } } @media (max-width:480px){ .rulebar{ margin:46px 0 18px; letter-spacing:.14em; } .dgm svg{ padding:10px 10px 2px; } .dgm__cap{ padding:10px 12px; letter-spacing:.09em; } .slot__cap{ letter-spacing:.09em; font-size:.625rem; } .slot__ratio{ margin-left:0; } .sym--xl{ width:42px; height:42px; } .titlemark{ gap:11px; } } /* ---------- the four cases where paintless repair gets a no ------------- Four small drawn cases rather than one wide diagram, so a phone stacks them instead of shrinking a single plate into illegibility. */ .nogrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); border:1px solid var(--rule); border-left:3px solid var(--no); background:linear-gradient(180deg,#111923 0%,#0b1118 100%); box-shadow:inset 0 1px 0 var(--lift); } .nocase{ min-width:0; padding:16px 18px 18px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); transition:background-color .18s var(--ease); } .nocase:hover{ background:rgba(226,96,79,.05); } .nocase__art{ border:1px solid var(--rule); background:linear-gradient(170deg,#131c26,#090e15); box-shadow:inset 0 1px 0 var(--lift); } .nocase__art svg{ display:block; width:100%; height:auto; } .nocase__cap{ display:flex; align-items:baseline; gap:9px; margin-top:12px; font-family:var(--mono); font-size:.71875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--no); line-height:1.4; } .nocase__n{ color:var(--dimmer); font-weight:700; } .nocase__note{ margin:8px 0 0; font-size:.875rem; color:var(--ink2); } .nogrid.is-in .nocase{ animation:rowIn .42s var(--ease) backwards; } .nogrid.is-in .nocase:nth-of-type(1){ animation-delay:.04s } .nogrid.is-in .nocase:nth-of-type(2){ animation-delay:.12s } .nogrid.is-in .nocase:nth-of-type(3){ animation-delay:.20s } .nogrid.is-in .nocase:nth-of-type(4){ animation-delay:.28s } /* a slot grid arriving with the section */ .slotgrid.is-in .slot{ animation:paneIn .5s var(--ease) backwards; } .slotgrid.is-in .slot:nth-of-type(2){ animation-delay:.11s } .slotgrid.is-in .slot:nth-of-type(3){ animation-delay:.22s } .dgm.is-in{ animation:paneIn .55s var(--ease) backwards; } @media (prefers-reduced-motion: reduce){ .nogrid.is-in .nocase, .slotgrid.is-in .slot, .dgm.is-in{ animation:none; opacity:1; transform:none; } } /* ═══ 📱 MOBILE MENU — added 8 Sep 2026. See tools/navfix notes. ⛔ Do not give this a colour. The panel IS this site's own