/* TOP — operator account pages (setup, sign in, home). 2026-09-23. These three used to live on tgmwashers.com in the Paper design system. They belong on TOP: an operator signing up is a TOP customer, not a washer rental customer, and tgmwashers.com is the consumer brand. One stylesheet for all three so the theme stays in one place. The tokens match agreement.html, which is the other TOP page an operator sees before they have an account. */ :root { --navy:#0b161c; --green:#2e9e54; --green-light:#3db365; --green-glow:rgba(0,255,136,0.25); --accent:#00ff88; --text:#cfe6dc; --muted:#8fb0a4; --card-bg:rgba(11,22,28,0.85); --border:rgba(0,255,136,0.3); --bad:#ff6b5e; } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } body { background:#070f13; color:var(--text); font-family:'DM Mono',monospace; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body::before { content:''; position:fixed; inset:0; background-image: linear-gradient(rgba(0,255,136,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,136,0.07) 1px, transparent 1px); background-size:40px 40px; pointer-events:none; z-index:0; } /* ── nav ─────────────────────────────────────────────────────────────── */ nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:20px 60px; background:rgba(7,15,19,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; } .nav-logo-mark { width:36px; height:36px; background:linear-gradient(135deg, var(--green), var(--green-light)); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:14px; color:#fff; letter-spacing:-1px; } .nav-logo-text { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; color:var(--text); letter-spacing:2px; } .nav-logo-text span { color:var(--accent); } .nav-right { font-size:12px; color:var(--muted); letter-spacing:1px; display:flex; align-items:center; gap:16px; } .nav-right a { color:var(--accent); text-decoration:none; } .nav-right a:hover { text-decoration:underline; } /* ── page shell ──────────────────────────────────────────────────────── */ .wrap { position:relative; z-index:1; max-width:660px; margin:0 auto; padding:132px 24px 70px; } .wrap.wide { max-width:940px; } .section-tag { font-size:11px; letter-spacing:3px; color:var(--accent); text-transform:uppercase; display:block; margin-bottom:12px; } h1 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(25px,4.4vw,36px); letter-spacing:-1px; line-height:1.14; color:#fff; } .sub { color:var(--muted); font-size:13.5px; margin-top:10px; } /* ── cards ───────────────────────────────────────────────────────────── */ .card { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:20px; margin-top:18px; } .card h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; color:#fff; margin-bottom:4px; } .card .why { color:var(--muted); font-size:12.5px; margin-bottom:16px; } .intro { background:var(--card-bg); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:16px 18px; margin-top:22px; font-size:13px; line-height:1.75; } /* ── form controls ───────────────────────────────────────────────────── */ label { display:block; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:7px; } input, select { width:100%; font-family:'DM Mono',monospace; font-size:14px; padding:12px 13px; border:1px solid var(--border); border-radius:4px; background:rgba(7,15,19,0.7); color:var(--text); } input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 16px var(--green-glow); } input[readonly] { color:var(--muted); } /* A native select on a dark background renders its list with the OS colours; the option needs telling or Windows draws white-on-white. */ select option { background:#0b1418; color:#e8f1f2; } /* 2026-09-24 — the verification form. Two columns where a phone has room, one where it does not, so City / State / ZIP do not each eat a full line. */ .pair { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; } .trio { display:grid; grid-template-columns:2fr 1fr 1fr; gap:0 12px; } @media (max-width:520px) { .pair, .trio { grid-template-columns:1fr; } } .doc { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); font-size:12.5px; } .doc:last-child { border-bottom:none; } .doc .n { flex:1; min-width:0; } .doc .n b { display:block; color:#fff; font-weight:500; } .doc .n span { color:var(--muted); font-size:11.5px; } .doc .on { color:var(--accent); } .doc input[type=file] { display:none; } .doc .pick { flex:0 0 auto; font-family:'Syne',sans-serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; padding:8px 12px; border:1px solid var(--border); border-radius:4px; color:var(--muted); background:none; } .doc .pick:hover { border-color:var(--accent); color:var(--accent); } .gaps { margin:12px 0 0; padding:11px 13px; border-radius:4px; border:1px solid var(--border); font-size:12.5px; color:var(--muted); } .gaps b { color:#fff; font-weight:500; } .hint { font-size:12px; color:var(--muted); margin-top:7px; } .btn { display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:20px; padding:14px 24px; background:var(--green); color:#fff; border:1px solid var(--green); border-radius:4px; font-family:'DM Mono',monospace; font-size:13px; letter-spacing:1px; cursor:pointer; transition:all 0.2s; } .btn:hover:not(:disabled) { background:var(--green-light); box-shadow:0 0 20px var(--green-glow); } .btn:disabled { opacity:.45; cursor:not-allowed; } .mini { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--accent); border:1px solid var(--border); padding:9px 18px; border-radius:4px; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1px; cursor:pointer; transition:all 0.2s; } .mini:hover { border-color:var(--accent); box-shadow:0 0 16px var(--green-glow); } /* ── messages ────────────────────────────────────────────────────────── */ .msg { display:none; padding:12px 15px; border-radius:4px; font-size:13px; margin-top:22px; line-height:1.65; } .msg.bad { display:block; background:rgba(255,107,94,0.1); border:1px solid rgba(255,107,94,0.4); color:var(--bad); } .msg.ok { display:block; background:rgba(0,255,136,0.08); border:1px solid var(--border); color:var(--accent); } .msg.info { display:block; background:var(--card-bg); border:1px solid var(--border); color:var(--muted); } .muted { color:var(--muted); font-size:13px; } /* ── the setup checklist on the home page ────────────────────────────── */ .todo { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:20px; margin-top:22px; } .todo h2 { font-family:'Syne',sans-serif; font-weight:700; font-size:17px; color:#fff; margin-bottom:4px; } .todo .lead { color:var(--muted); font-size:12.5px; margin-bottom:14px; } .step { display:flex; gap:13px; padding:14px 0; border-top:1px solid rgba(0,255,136,0.12); } .step:first-of-type { border-top:none; } .tick { flex:0 0 22px; height:22px; border-radius:50%; border:1px solid var(--border); margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#0b161c; } .tick.on { background:var(--accent); border-color:var(--accent); } .step .b { flex:1; min-width:0; } .step .t { font-family:'Syne',sans-serif; font-weight:700; font-size:14.5px; color:#fff; } .step .d { color:var(--muted); font-size:12.5px; margin-top:3px; } .step .act { margin-top:10px; } .panel { display:none; margin-top:12px; padding:15px; border:1px solid var(--border); border-radius:6px; background:rgba(7,15,19,0.6); } .panel ol { margin:0 0 14px; padding-left:20px; font-size:12.5px; color:var(--text); } .panel ol li { margin-bottom:7px; } .panel ol li::marker { color:var(--accent); } .panel b { color:#fff; font-weight:500; } .panel label { margin-top:12px; } .panel label:first-of-type { margin-top:0; } .panel input { margin-bottom:12px; } /* 2026-09-24 — owner: "Lets put that agreement in a card inside or under sign the operator agreement, it doesnr need to be way below at the bottom." So the contract renders in that step's own panel. The panel's dark chrome would frame a white sheet in a border it does not need, so when it holds the document it gets out of the way and lets the paper be the card. It also breaks the step's left gutter, because a contract indented behind a tick mark reads as a bullet point rather than as a document. */ .panel.doc-panel { padding:0; border:none; background:none; margin-top:14px; margin-left:-35px; } @media (max-width:620px) { .panel.doc-panel { margin-left:-35px; margin-right:0; } } .panel.doc-panel .legal-doc { box-shadow:0 1px 3px rgba(0,0,0,.30), 0 12px 34px rgba(0,0,0,.22); } .out { margin-top:10px; font-size:12.5px; color:var(--muted); } /* ── stats and tables ────────────────────────────────────────────────── */ .stats { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; } .stat { flex:1 1 150px; background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:15px 17px; } .stat .k { font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); } .stat .v { font-family:'Syne',sans-serif; font-weight:800; font-size:27px; color:#fff; line-height:1.2; margin-top:4px; } .stat .h { font-size:11.5px; color:var(--muted); } .scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:12.5px; } th { text-align:left; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:400; padding:0 12px 9px 0; border-bottom:1px solid var(--border); white-space:nowrap; } td { padding:10px 12px 10px 0; border-bottom:1px solid rgba(0,255,136,0.12); color:var(--text); } /* ── footer ──────────────────────────────────────────────────────────── */ footer { position:relative; z-index:1; border-top:1px solid var(--border); padding:28px 60px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .footer-brand { font-size:12px; color:var(--muted); line-height:1.7; } .footer-brand strong { font-family:'Syne',sans-serif; color:#fff; letter-spacing:1px; } .footer-links { display:flex; gap:24px; flex-wrap:wrap; } .footer-links a { color:var(--muted); text-decoration:none; font-size:11px; letter-spacing:2px; } .footer-links a:hover { color:var(--text); } @media (max-width:768px) { nav { padding:16px 22px; } .nav-right { font-size:11px; gap:12px; } .wrap { padding:112px 20px 56px; } footer { padding:24px 22px; flex-direction:column; text-align:center; } } /* ── the verification panel, given some weight ──────────────────────────── 2026-09-25. The owner looked at it on his phone and said "this is a little lite". He was right: nine inputs stacked in a column with one button in the middle of them reads like a form somebody has not finished building, and it is the screen where we ask for a photograph of their driving licence. A form asking for that should look like it knows what it is doing. So the fields are grouped into the four questions they actually answer - what the business is, where it is registered, who signs, what proves it - and each group says in one line why we want it. Nothing was added to the ask. It is the same nine fields and the same four documents; they are just no longer a pile. */ .vsec { margin-top:20px; padding-top:17px; border-top:1px solid var(--border); } .vsec:first-of-type { margin-top:4px; padding-top:0; border-top:none; } .vsec > h3 { font-family:'Syne',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.3px; color:#fff; margin:0 0 3px; display:flex; align-items:baseline; gap:9px; } .vsec > h3 .n { font-family:'DM Mono',monospace; font-weight:400; font-size:10.5px; letter-spacing:1px; color:var(--accent); opacity:.75; } .vsec > p { color:var(--muted); font-size:12px; line-height:1.65; margin:0 0 13px; } /* How much of it is filled in. Shown because the thing an operator actually wants to know on reopening a half-finished form is how much is left. */ .vbar { margin:2px 0 4px; height:3px; border-radius:2px; background:rgba(255,255,255,0.07); overflow:hidden; } .vbar i { display:block; height:100%; background:var(--accent); transition:width .35s ease; } .vcount { color:var(--muted); font-size:11.5px; margin:8px 0 2px; font-family:'DM Mono',monospace; letter-spacing:0.4px; } /* Two buttons at the end of a form, side by side and never stacked oddly on a narrow phone. */ .btnrow { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; } .btnrow .mini { flex:0 1 auto; } /* ── choosing a card processor ──────────────────────────────────────────── 2026-09-25. "for caleb he uses stripe so the stripe key and signing secret is fine, for henry he uses square can we have like selectable options." Tap targets rather than a