/* venuetech console. The portal's "Warm Workspace" language (cream ground, white cards, forest ink, VenueTech green) with the marketing site's deep green ground for the rail and hero surfaces. Amber is rationed: the mark's dot and genuine attention states (CERT mode, pending, merchant lens), never a button. Type is Manrope with IBM Plex Mono for codes and payloads, as on the site. Motion borrows the portal's vt-rise curve and stays off for prefers-reduced-motion. Mobile-first; tables reflow. */ :root { --bg: #FAF8F2; /* cream */ --bg-2: #F6F3EA; /* sunk fields */ --panel: #FFFFFF; --panel-2: #F1EDE2; /* chip */ --line: #E8E3D8; --line-soft: #F2EFE6; --ink: #14352A; /* forest ink */ --ink-2: #44594F; --ink-3: #6B7A72; --green: #3D9970; --green-deep: #2E6B50; --green-soft: #E4F0E9; --green-line: #CBE3D6; --brand: #2E6B50; /* accent text on light grounds */ --brand-2: #2E6B50; --amber: #FFAA00; --amber-soft: #FFF3D6; --amber-line: #F2D9A0; --amber-ink: #8A6A17; --deep: #071612; /* site nav + hero ground */ --deep-2: #0A1D16; --deep-panel: #0E241B; --deep-line: #1D3E30; --on-deep: #F2F7F4; --on-deep-2: #B7CDC0; --on-deep-3: #8FA79B; --mark: #56B285; --green-hi: #5CB88A; /* green accents on deep */ --good: #2E6B50; --warn: #8A6A17; --bad: #C2413A; --bad-soft: #FBECEA; --bad-line: #F0C9C4; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(20,53,42,.05), 0 12px 30px -22px rgba(20,53,42,.38); --shadow-lg: 0 28px 64px -30px rgba(7,22,18,.5); --ease: cubic-bezier(.22,1,.36,1); --t: .2s var(--ease); --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --rail: 252px; } * { box-sizing: border-box; } /* Inline icons scale with their text and sit on the baseline; nav/buttons override below. */ .ic { width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -.16em; } h1 .ic, h2 .ic, h3 .ic, legend .ic, .crumbs .ic, .section-head .ic { margin-right: .15em; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; } code, .mono, .code { font-family: var(--mono); font-size: .92em; } a { color: var(--brand-2); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } h1,h2,h3 { margin: 0 0 .2em; line-height: 1.15; letter-spacing: -.025em; font-weight: 700; color: var(--ink); } h1 { font-size: 1.7rem; letter-spacing: -.035em; font-weight: 800; } h2 { font-size: 1.1rem; } h3 { font-size: .98rem; } p { margin: .4em 0; } .muted { color: var(--ink-3); } .dim { color: var(--ink-2); } .eyebrow { font-size: 11.5px; line-height: 14px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--green-deep); margin: 0; } /* ---------- Brand lockup: the core mark + wordmark image, never retyped ---------- */ .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand:hover { text-decoration: none; } .lockup { display: inline-flex; align-items: center; gap: 10px; } .lockup-mark { width: 40px; height: 24px; flex: 0 0 auto; overflow: visible; } .lockup .wordmark { height: 17px; width: auto; display: block; } /* ============================================================= AUTH ===== */ .auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); } .auth-hero { position: relative; overflow: hidden; color: var(--on-deep); background: radial-gradient(90% 70% at 85% 110%, rgba(61,153,112,.28), transparent 60%), radial-gradient(70% 50% at 0% 0%, rgba(31,95,69,.35), transparent 70%), var(--deep); padding: 36px 40px; display: flex; flex-direction: column; } .auth-hero .schematic { position: absolute; right: -6%; top: 50%; width: min(78%, 620px); transform: translateY(-50%); overflow: visible; } .schematic .guide { stroke: rgba(92,184,138,.22); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; } .schematic .guide.solid { stroke-dasharray: none; stroke: rgba(92,184,138,.14); } .schematic .tick { fill: rgba(92,184,138,.5); } .auth-hero-copy { position: relative; margin-top: auto; max-width: 420px; display: flex; flex-direction: column; gap: 14px; } .auth-hero-copy .eyebrow { color: var(--green-hi); } .auth-hero-copy h2 { color: var(--on-deep); font-size: clamp(30px, 2.6vw + 10px, 46px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 0; } .auth-hero-copy p { color: var(--on-deep-2); font-size: 15.5px; margin: 0; max-width: 360px; } .auth-main { display: grid; place-items: center; padding: 32px 24px; } .auth-card { width: 100%; max-width: 380px; animation: rise .7s var(--ease) both .1s; } .auth-card h1 { font-size: 1.85rem; } .auth-mobile-brand { display: none; margin-bottom: 28px; } .auth-sub { color: var(--ink-3); margin: 4px 0 26px; font-size: .95rem; } .auth-foot { margin-top: 20px; font-size: .88rem; display: flex; justify-content: space-between; gap: 12px; } @media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-hero { display: none; } .auth-mobile-brand { display: block; } } /* Centred single card (error page). */ .auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .auth-wrap .auth-card { max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 36px 30px; box-shadow: var(--shadow-lg); } .auth-wrap .brand { justify-content: center; margin-bottom: 22px; } /* ============================================================= SHELL ==== */ .app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100dvh; } .rail { position: sticky; top: 0; align-self: start; height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: 22px 14px 16px; border-right: 1px solid var(--deep-line); background: radial-gradient(120% 40% at 0% 0%, rgba(61,153,112,.18), transparent 70%), linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--on-deep); } .rail .brand { padding: 4px 10px 22px; } .rail-label { padding: 6px 12px 8px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--on-deep-3); opacity: .8; } .rail nav { display: flex; flex-direction: column; gap: 2px; } .rail nav hr { border: 0; border-top: 1px solid var(--deep-line); margin: 10px 8px; } .navlink { display: flex; align-items: center; gap: 11px; padding: 10px 12px; min-height: 42px; border-radius: 10px; color: var(--on-deep-3); font-weight: 600; font-size: .92rem; transition: background var(--t), color var(--t); position: relative; } .navlink .ic { width: 18px; height: 18px; opacity: .85; transition: color var(--t); } .navlink:hover { background: rgba(242,247,244,.05); color: var(--on-deep); text-decoration: none; } .navlink.active { background: rgba(92,184,138,.12); color: var(--on-deep); } .navlink.active .ic { color: var(--green-hi); opacity: 1; } .navlink.active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green-hi); box-shadow: 0 0 12px rgba(92,184,138,.55); } .rail .spacer { flex: 1; } .rail .who { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--deep-line); padding: 14px 6px 2px; margin-top: 8px; font-size: .8rem; color: var(--on-deep-3); } .who .avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--deep-panel); border: 1px solid var(--deep-line); color: var(--green-hi); font-weight: 800; text-transform: uppercase; } .who .id { min-width: 0; flex: 1; } .rail .who .email { color: var(--on-deep); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who .signout { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--deep-line); background: transparent; color: var(--on-deep-3); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); } .who .signout:hover { background: rgba(242,247,244,.06); color: var(--on-deep); border-color: var(--deep-line); } .main { min-width: 0; display: flex; flex-direction: column; } /* "View as merchant" lens banner: an attention state, so it carries the amber. */ .viewas-bar { display: flex; align-items: center; gap: 10px; padding: 11px clamp(16px, 2.4vw, 30px); background: var(--amber-soft); border-bottom: 1px solid var(--amber-line); color: var(--ink); font-size: .9rem; flex-wrap: wrap; } .viewas-bar .ic { color: var(--amber-ink); } /* Topbar is mobile-only; desktop relies on the rail and each page's own heading. */ .topbar { display: none; } .topbar .grow { flex: 1; } /* Fluid horizontal padding, capped so content never feels lost on ultrawide displays. */ .content { padding: clamp(18px, 2.6vw, 34px); max-width: 1240px; width: 100%; margin: 0 auto; min-width: 0; container-type: inline-size; container-name: content; } /* Page entrance: each top-level block rises in, staggered, on load and on every boosted swap. */ .content > * { animation: rise .6s var(--ease) both; } .content > :nth-child(2) { animation-delay: .04s; } .content > :nth-child(3) { animation-delay: .08s; } .content > :nth-child(4) { animation-delay: .12s; } .content > :nth-child(5) { animation-delay: .16s; } .content > :nth-child(n+6) { animation-delay: .2s; } @media (min-width: 861px) and (max-width: 1100px) { :root { --rail: 220px; } } /* ---------- mobile nav ---------- */ .scrim { display: none; } @media (max-width: 860px) { .app { grid-template-columns: 1fr; } .rail { position: fixed; z-index: 60; left: 0; top: 0; width: min(280px, 84vw); height: 100dvh; transform: translateX(-102%); transition: transform .32s var(--ease); box-shadow: var(--shadow-lg); overflow-y: auto; } body.nav-open .rail { transform: translateX(0); } body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(7,22,18,.5); animation: fade .2s var(--ease) both; } .topbar { display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 20; padding: 10px 16px; background: rgba(7,22,18,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--deep-line); } .topbar .menu-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--deep-line); background: var(--deep-panel); color: var(--on-deep); cursor: pointer; } } /* ============================================================= CARDS ==== */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card + .card { margin-top: 18px; } .card h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; } .card h2 > * { min-width: 0; } .card h2 .ic { color: var(--green); } dialog.card { margin: auto; max-height: min(90dvh, 760px); overflow: auto; inset: 0; border-radius: 18px; container-type: inline-size; container-name: content; } dialog.card[open] { animation: pop .3s var(--ease) both; } dialog.card::backdrop { background: rgba(7,22,18,.5); backdrop-filter: blur(3px); } /* Explicit minmax(0, 1fr) tracks: an implicit grid track grows to its widest child's min-content and pushes the page sideways on phones. */ .card-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } .card-grid > .card + .card { margin-top: 0; } @container content (min-width: 780px) { .card-grid.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @supports not (container-type: inline-size) { @media (min-width: 1040px) { .card-grid.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } } .section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .section-head h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; } .section-head .grow { flex: 1; min-width: 0; } .section-head .btn { flex: 0 0 auto; } /* ---------- stat tiles ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px; } .stat { display: block; background: var(--panel); color: inherit; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; position: relative; overflow: hidden; box-shadow: var(--shadow); transition: transform var(--t), border-color var(--t), box-shadow var(--t); } .stat::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background var(--t); } .stat:hover { transform: translateY(-2px); border-color: var(--green-line); text-decoration: none; box-shadow: 0 18px 36px -24px rgba(20,53,42,.45); } .stat:hover::after { background: var(--green); } .stat .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--ink-3); } .stat .v { font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; margin-top: 6px; color: var(--ink); font-variant-numeric: tabular-nums; } .stat.accent .v { color: var(--ink); } .stat.good .v { color: var(--green-deep); } .stat.warn .v { color: var(--amber-ink); } .stat.warn::after { background: var(--amber-line); } .stat.live .v { color: var(--green-deep); } /* ---------- live device list (dashboard) ---------- */ .live-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .live-list a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); transition: border-color var(--t), background var(--t), transform var(--t); } .live-list a:hover { border-color: var(--green-line); background: var(--green-soft); text-decoration: none; transform: translateX(2px); } .live-list .ln { font-weight: 700; } .live-list .ld { color: var(--ink-3); font-size: .85rem; } .live-dot { position: relative; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--green); color: var(--green); margin: 0 4px; } .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; animation: ping 1.9s var(--ease) infinite; } .live-list .go { margin-left: auto; color: var(--green-deep); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; } /* ============================================================= TABLES === */ .table-wrap { overflow-x: auto; border-radius: var(--radius); } table.grid { width: 100%; border-collapse: collapse; font-size: .92rem; } table.grid th { text-align: left; font-weight: 700; color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); } table.grid td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.grid tbody tr { transition: background var(--t); } table.grid tbody tr:hover { background: rgba(61,153,112,.05); } table.grid tbody tr:last-child td { border-bottom: 0; } .row-link { cursor: pointer; } table.grid td { overflow-wrap: anywhere; } table.grid td .mono { overflow-wrap: anywhere; } td.actions { text-align: right; white-space: nowrap; } @media (max-width: 680px) { table.grid, table.grid thead, table.grid tbody, table.grid th, table.grid td, table.grid tr { display: block; } table.grid thead { display: none; } table.grid tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; padding: 6px 4px; } table.grid td { border: 0; padding: 8px 14px; display: flex; justify-content: space-between; gap: 16px; } table.grid td > * { min-width: 0; } table.grid td::before { content: attr(data-label); color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; align-self: center; flex: 0 0 auto; } table.grid td[style*="max-width"] { max-width: none !important; } table.grid td:empty { display: none; } td.actions { text-align: left; } } /* ============================================================= PILLS ==== */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; position: relative; flex: 0 0 auto; } .pill.on { color: var(--green-deep); background: var(--green-soft); border-color: var(--green-line); } .pill.off { color: var(--ink-3); background: var(--panel-2); border-color: var(--line); } .pill.pend{ color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-line); } .pill.role{ color: var(--green-deep); background: var(--green-soft); border-color: var(--green-line); } .pill.bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); } #cmd-log .pill { white-space: normal; border-radius: 10px; } .pill.sim { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-line); letter-spacing: .06em; } /* A live relay socket: the dot sends out a slow ring. */ .pill.live .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; animation: ping 1.9s var(--ease) infinite; } .cc-logrow .tag-code, td .tag-code { white-space: nowrap; flex: 0 0 auto; } .tag-code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-family: var(--mono); font-size: .84rem; font-weight: 500; letter-spacing: .02em; background: var(--green-soft); border: 1px solid var(--green-line); padding: 2px 8px; border-radius: 7px; color: var(--green-deep); } /* ============================================================= FORMS ==== */ form .field { margin-bottom: 15px; } label { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; } .req::after { content: " *"; color: var(--bad); } input, select, textarea { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: .94rem; transition: border-color var(--t), box-shadow var(--t), background var(--t); } input:hover, select:hover, textarea:hover { border-color: var(--green-line); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(61,153,112,.18); } input::placeholder { color: #9AA59F; } input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--green); } input[type=range] { padding: 0; border: 0; accent-color: var(--green); background: transparent; box-shadow: none; } input[type=file] { padding: 9px; background: var(--bg-2); font-size: .85rem; } input[type=file]::file-selector-button { font: inherit; font-weight: 700; font-size: .82rem; margin-right: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; } .field-row { display: grid; gap: 14px; } @container content (min-width: 620px) { .field-row.two { grid-template-columns: 1fr 1fr; } .field-row.three { grid-template-columns: 1fr 1fr 1fr; } } @supports not (container-type: inline-size) { @media (min-width: 560px) { .field-row.two { grid-template-columns: 1fr 1fr; } .field-row.three { grid-template-columns: 1fr 1fr 1fr; } } } .hint { font-size: .8rem; color: var(--ink-3); margin-top: 5px; } fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; margin: 0 0 16px; } legend { padding: 0 8px; color: var(--ink-3); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; } .secret-row { display: flex; gap: 8px; align-items: stretch; } .secret-row input { flex: 1; } /* ============================================================= BUTTONS == */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; min-height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-weight: 700; font-size: .87rem; cursor: pointer; transition: transform .12s var(--ease), background var(--t), border-color var(--t), box-shadow var(--t), color var(--t); white-space: nowrap; text-decoration: none; user-select: none; } .btn:hover { background: var(--green-soft); border-color: var(--green-line); text-decoration: none; } .btn:active { transform: scale(.97); } .btn .ic { width: 16px; height: 16px; } .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: 0 10px 22px -14px rgba(20,53,42,.8); } .btn.primary:hover { background: var(--green-deep); border-color: var(--green-deep); } .btn.ghost { background: transparent; } .btn.danger { color: var(--bad); border-color: var(--bad-line); background: var(--bad-soft); } .btn.danger:hover { background: #F7DCD8; } .btn.sm { padding: 6px 11px; min-height: 32px; font-size: .8rem; } .btn.block { width: 100%; } .btn.lg { min-height: 48px; font-size: .95rem; padding: 12px 22px; border-radius: 12px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } @media (pointer: coarse) { .btn.sm { min-height: 40px; } } /* ---------- HTMX loading indicator ---------- */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } .btn.htmx-request, .htmx-request > .btn { pointer-events: none; opacity: .85; } .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; opacity: .8; } .bar-loader { height: 2px; background: linear-gradient(90deg, transparent, var(--green), transparent); background-size: 40% 100%; animation: slide 1s var(--ease) infinite; border-radius: 2px; } /* ============================================================= QR ======= */ .qr-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-width: 0; } .qr-frame { background: #fff; padding: 14px; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 16px 36px -22px rgba(20,53,42,.5); animation: pop .5s var(--ease) both; width: max-content; max-width: 100%; } .qr-frame img, .qr-frame svg { display: block; width: 200px; height: auto; aspect-ratio: 1 / 1; max-width: min(200px, 70vw); } .qr-code { font-size: 1.5rem; font-weight: 600; letter-spacing: .08em; color: var(--ink); font-family: var(--mono); overflow-wrap: anywhere; max-width: 100%; } /* ============================================================= TOASTS === */ #toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px)); } .toast { background: var(--deep); color: var(--on-deep); border: 1px solid var(--deep-line); border-radius: 12px; padding: 12px 16px 12px 38px; box-shadow: var(--shadow-lg); position: relative; animation: toastIn .45s var(--ease) both; font-size: .9rem; font-weight: 600; } .toast::before { content: ""; position: absolute; left: 16px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--on-deep-3); } .toast.good::before { background: var(--green-hi); box-shadow: 0 0 0 4px rgba(92,184,138,.2); } .toast.bad::before { background: #E87B7B; box-shadow: 0 0 0 4px rgba(232,123,123,.2); } .toast.fade-out { animation: toastOut .3s var(--ease) forwards; } /* ---------- misc ---------- */ .empty { text-align: center; padding: 46px 20px; color: var(--ink-3); } .empty .big { font-size: 2.4rem; opacity: .45; margin-bottom: 8px; } .empty .empty-mark { width: 64px; height: 39px; opacity: .5; margin-bottom: 10px; } .banner { padding: 11px 14px; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 16px; border: 1px solid; animation: rise .35s var(--ease) both; } .banner.err { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); } .banner.ok { color: var(--green-deep); background: var(--green-soft); border-color: var(--green-line); } .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: .85rem; color: var(--ink-3); margin-bottom: 14px; overflow-wrap: anywhere; } .crumbs a { color: var(--ink-2); font-weight: 600; } .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 18px; font-size: .9rem; align-items: center; } .kv dt { color: var(--ink-3); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; padding: 0 0 16px 22px; border-left: 1px solid var(--line); } .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -4.5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--panel); border: 2px solid var(--green); } .timeline .t-type { font-weight: 700; font-size: .88rem; color: var(--ink); } .timeline .t-meta { color: var(--ink-3); font-size: .8rem; } .timeline a.t-link { display: block; color: inherit; text-decoration: none; margin: -5px -8px; padding: 5px 8px; border-radius: 8px; transition: background var(--t); } .timeline a.t-link:hover { background: var(--green-soft); text-decoration: none; } .timeline a.t-link::after { content: "›"; float: right; color: var(--ink-3); opacity: 0; transition: opacity var(--t); } .timeline a.t-link:hover::after { opacity: 1; } /* ======================================================== WORKSTATION HERO The deep green band that heads a workstation's detail and command pages. */ .ws-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; color: var(--on-deep); border: 1px solid var(--deep-line); background: radial-gradient(80% 140% at 100% 0%, rgba(61,153,112,.32), transparent 60%), linear-gradient(160deg, var(--deep-2), var(--deep)); box-shadow: var(--shadow-lg); } .ws-hero .watermark { position: absolute; right: -40px; bottom: -46px; width: 300px; opacity: .1; pointer-events: none; } .ws-hero .watermark .mark-dot { display: none; } @media (max-width: 600px) { .ws-hero .watermark { display: none; } } .ws-hero .crumbs { color: var(--on-deep-3); margin-bottom: 12px; position: relative; } .ws-hero .crumbs a { color: var(--on-deep-2); } .ws-hero-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; } .ws-hero h1 { color: var(--on-deep); margin: 0; font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); } .ws-hero .grow { flex: 1; } .ws-hero .pill.on { color: var(--green-hi); background: rgba(92,184,138,.12); border-color: rgba(92,184,138,.35); } .ws-hero .pill.off { color: var(--on-deep-3); background: rgba(242,247,244,.05); border-color: var(--deep-line); } .ws-hero .pill.sim { color: var(--amber); background: rgba(255,170,0,.1); border-color: rgba(255,170,0,.35); } .ws-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; position: relative; } .ws-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border-radius: 10px; background: rgba(242,247,244,.05); border: 1px solid var(--deep-line); font-size: .8rem; color: var(--on-deep-3); white-space: nowrap; } .ws-chip b { color: var(--on-deep); font-weight: 700; } .ws-chip .mono { color: var(--on-deep); } .ws-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; } .ws-actions form { margin: 0; } .ws-hero .btn { background: rgba(242,247,244,.06); border-color: var(--deep-line); color: var(--on-deep); } .ws-hero .btn:hover { background: rgba(242,247,244,.12); border-color: rgba(92,184,138,.4); } .ws-hero .btn.primary { background: var(--green); border-color: var(--green); color: #04120C; box-shadow: 0 10px 24px -14px rgba(61,153,112,.9); } .ws-hero .btn.primary:hover { background: var(--green-hi); border-color: var(--green-hi); } /* ========================================================= COMMAND CENTER */ .cc-layout { display: grid; gap: 18px; align-items: start; grid-template-columns: minmax(0, 1fr); } @container content (min-width: 980px) { .cc-layout { grid-template-columns: minmax(0, 1fr) 340px; } .cc-aside { position: sticky; top: 18px; } } .cc-main, .cc-aside { display: grid; gap: 18px; min-width: 0; grid-template-columns: minmax(0, 1fr); } .cc-main > .card + .card, .cc-aside > .card + .card { margin-top: 0; } .card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .card-head h2 { margin: 0; } .card-head .grow { flex: 1; } /* Command deck: one labelled row per op family. */ .deck { display: grid; gap: 4px; } .deck-group { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line-soft); } .deck-group:first-child { border-top: 0; padding-top: 2px; } .deck-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--ink-3); padding-top: 10px; } .deck-row { display: flex; flex-wrap: wrap; gap: 6px; } .deck-row form { margin: 0; display: inline; } @media (max-width: 560px) { .deck-group { grid-template-columns: 1fr; gap: 6px; } .deck-label { padding-top: 0; } } .cc-dd { position: relative; display: inline-block; } .cc-dd > summary { list-style: none; } .cc-dd > summary::-webkit-details-marker { display: none; } .cc-dd > summary::after { content: ""; display: inline-block; margin-left: 2px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); opacity: .6; transition: transform var(--t); } .cc-dd[open] > summary::after { transform: translateY(-2px) rotate(180deg); } .cc-dd[open] > summary { background: var(--green-soft); border-color: var(--green-line); } .cc-pop { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); animation: ddIn .18s var(--ease) both; } .cc-pop.right { left: auto; right: 0; } /* On phones a popover anchored to a button can run off the edge, so it docks as a bottom sheet. */ @media (max-width: 560px) { .cc-pop, .cc-pop.right { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; box-shadow: 0 -10px 40px -12px rgba(7,22,18,.45), var(--shadow-lg); } } .cc-pop label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; } .cc-pop p { font-size: .84rem; color: var(--ink-2); margin: 0 0 10px; max-width: 260px; } .cc-pop input[type=range] { width: 100%; } .cc-pop .rowflex, .rowflex { display: flex; gap: 8px; align-items: center; } .cc-pop .check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-top: 10px; } .cc-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cc-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--ink-3); margin: 0 0 6px; } .cc-drawer > summary { list-style: none; cursor: pointer; } .cc-drawer > summary::-webkit-details-marker { display: none; } /* Activity console */ .cc-console { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .cc-console-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); } .cc-console-h h2 { margin: 0; font-size: 1rem; } .cc-console-h .ic { color: var(--green); } .cc-console-h .muted { margin-left: auto; font-size: .82rem; } .cc-logrow { border-bottom: 1px solid var(--line-soft); } .cc-logrow:last-child { border-bottom: 0; } .cc-logrow > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 13px; transition: background var(--t); } .cc-logrow > summary::-webkit-details-marker { display: none; } .cc-logrow > summary:hover { background: var(--bg); } .cc-logrow[open] > summary { background: var(--green-soft); } .cc-logrow:first-child { animation: flash 1.4s var(--ease) both; } .cc-ico { flex: 0 0 auto; width: 0; height: 0; border: 5px solid transparent; border-left-color: var(--ink-3); transition: transform .18s var(--ease); } .cc-logrow[open] .cc-ico { transform: rotate(90deg); } .cc-time { width: 104px; color: var(--ink-3); flex: 0 0 auto; white-space: nowrap; } .cc-msg { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cc-spacer { margin-left: auto; } .cc-by { color: var(--ink-3); flex: 0 0 auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-ms { color: var(--ink-3); flex: 0 0 auto; width: 64px; text-align: right; font-family: var(--mono); font-size: 12px; } @media (max-width: 700px) { .cc-by, .cc-ms { display: none; } .cc-time { width: auto; } } .cc-logbody { padding: 8px 18px 16px 40px; background: var(--bg); } .cc-logbody .lab { font-size: 10.5px; letter-spacing: .12em; font-weight: 800; color: var(--ink-3); margin: 10px 0 4px; } .cc-pre, .trace-pre { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12px; line-height: 1.55; background: var(--deep); color: #CFE3D8; border: 1px solid var(--deep-line); padding: 12px 14px; border-radius: 10px; max-height: 340px; overflow: auto; margin: 0; } .cc-sys { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0; } .cc-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cc-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-3); } .cc-stat b { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-stat small { font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-below { display: grid; gap: 18px; margin-top: 18px; grid-template-columns: minmax(0, 1fr); } .cc-below > .card + .card { margin-top: 0; } /* Lifecycle popovers open out of ledger rows, which a scrolling wrapper would clip. So the ledger never scrolls: it reflows to cards whenever its own width can't hold the eight columns. */ #txn-table { container: ledger / inline-size; } #txn-table .table-wrap { overflow: visible; } @container ledger (max-width: 940px) { #txn-table table, #txn-table thead, #txn-table tbody, #txn-table th, #txn-table td, #txn-table tr { display: block; } #txn-table thead { display: none; } #txn-table tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; padding: 6px 4px; } #txn-table td { border: 0; padding: 7px 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } #txn-table td::before { content: attr(data-label); color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; flex: 0 0 auto; } #txn-table td:empty { display: none; } } .cc-pager { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line-soft); } /* Customer message composer */ .cc-icons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } .cc-ico-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); user-select: none; margin: 0; transition: background var(--t), border-color var(--t), color var(--t); } .cc-ico-chip input { position: absolute; opacity: 0; pointer-events: none; } .cc-ico-chip:hover { border-color: var(--green-line); } .cc-ico-chip:has(input:checked) { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); } .cc-ico-chip:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; } .cc-color { display: flex; gap: 8px; align-items: center; } .cc-swatch { width: 46px; height: 40px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; flex: 0 0 auto; } .cc-color input[name=bg_color] { flex: 1; } /* Device screen: the screenshot sits in a dark bezel, like the terminal it came from. */ .device-frame { background: linear-gradient(160deg, #13261E, var(--deep)); border: 1px solid var(--deep-line); border-radius: 22px; padding: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 20px 40px -26px rgba(7,22,18,.7); } .device-frame img { display: block; width: 100%; border-radius: 13px; } .device-frame .muted { color: var(--on-deep-3); text-align: center; padding: 48px 10px; display: block; } .device-frame .hint { color: var(--on-deep-3); text-align: center; margin: 8px 0 2px; font-size: .78rem; } /* Numpad (workstation detail) */ .vb-numpad { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--bg); } .vb-pad-display { font-family: var(--mono); font-size: 2rem; font-weight: 500; letter-spacing: -.02em; text-align: right; margin: 8px 0 14px; padding: 8px 14px; background: var(--deep); border-radius: 12px; color: var(--on-deep); font-variant-numeric: tabular-nums; } .vb-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .vb-pad-key, .vb-pad-clear { min-height: 48px; font-size: 1.05rem; font-family: var(--mono); font-weight: 500; } /* ============================================================= ANIM ===== */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes slide { from { background-position: -40% 0; } to { background-position: 140% 0; } } @keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(24px); } } @keyframes ping { 0% { transform: scale(.5); opacity: .75; } 80%, 100% { transform: scale(1.9); opacity: 0; } } @keyframes flash { from { background: var(--green-soft); } to { background: transparent; } } @keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes dotIn { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes glow { 0%, 100% { opacity: .25; } 50% { opacity: .7; } } /* The mark draws itself in once per full page load (the rail persists across boosted swaps). */ .mark-stroke { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.3s var(--ease) both .15s; } .mark-dot { transform-box: fill-box; transform-origin: center; animation: dotIn .6s var(--ease) both 1s; } .schematic .mark-stroke { animation-duration: 2.4s; animation-delay: .5s; } .schematic .mark-dot { animation-delay: 2.2s; } .schematic .halo { transform-box: fill-box; transform-origin: center; animation: glow 3.2s ease-in-out infinite 2.8s; opacity: .25; } .schematic .drift { animation: float 7s ease-in-out infinite 3s; } .htmx-added { animation: fade .3s var(--ease) both; } .fragment-swap.htmx-swapping { opacity: 0; transition: opacity .12s var(--ease); } /* View Transitions crossfade content swaps; the rail is identical across them. */ ::view-transition-old(root) { animation: vtOut .14s var(--ease) both; } ::view-transition-new(root) { animation: vtIn .26s var(--ease) both; } @keyframes vtOut { to { opacity: 0; } } @keyframes vtIn { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* --- pagination + merchant groups (workstations/merchants lists) --- */ .pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 18px; } .pager .page-info { color: var(--ink-3); font-size: .85rem; text-align: center; } .pager .btn { min-height: 40px; } .group { margin-bottom: 28px; } .group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 0 2px 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); } .group-head .g-name { color: var(--ink); min-width: 0; overflow-wrap: anywhere; font-size: 1.02rem; } .group-head .grow { flex: 1 1 0; min-width: 0; } .group-head .g-count { color: var(--ink-3); font-size: .82rem; flex: 0 0 auto; white-space: nowrap; } .group .g-empty { color: var(--ink-3); font-size: .88rem; padding: 4px 2px 2px; } /* ---------- Dropdown component ---------- Custom replacement for native