/* sqlXpert PerformanceCheck Portal - design system. White page, ink text, wine red only for brand / "you are here" / counter badges / the ONE primary action per screen (always a solid fill). Problems and destructive actions: vermilion (--alarm) or amber, always with an icon or dot, never a solid wine fill. Good = green. Flat (no shadows, no gradients), small radii (5-8px), light only, Archivo + JetBrains Mono. Sections: 1 fonts+tokens 2 base 3 shell: top bar, page 4 headings 5 buttons 6 forms 7 cards + boxes 8 notices, alerts, pills, dots 9 tables + lists 10 admin: pipeline, queue, health 11 review desk (viewer, release box, files, drop zone, facts, history, danger) 12 customer: steps, fresh banner, track, report rows, contact 13 account / login split screen 14 misc 15 responsive */ /* ============================== 1. fonts + tokens ============================== */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('fonts/Archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('fonts/Archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --paper: #FFFFFF; --soft: #F5F5F3; --ink: #171717; --ink-2: #4A4A47; --muted: #7A7A75; --line: #E4E4E0; --row: #EFEFEC; --field: #FAFAF8; --control-line: #CFCFCA; --x: #93282C; /* brand wine red */ --x-hover: #7A1F23; --x-tint: #F7EDED; --good: #15803D; --good-tint: #EEF7F0; --good-line: #A7D3B5; --good-text: #14532D; --amber: #A16207; --amber-tint: #FEF8E7; --amber-line: #E9CD85; --amber-text: #6E4205; --alarm: #C2410C; --alarm-tint: #FFF4EE; --alarm-line: #F2B79A; --alarm-text: #8A2E07; --r-sm: 5px; --r-md: 6px; --r-lg: 8px; /* review desk (dark viewer) */ --d-desk: #232323; --d-stage: #2F2F2F; --d-tab: #A8A8A3; --d-tab-on: #FFFFFF; --d-k: rgba(255,255,255,.14); --d-ctl: #D4D4CF; --font: 'Archivo', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; color-scheme: light; } /* ============================== 2. base ============================== */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; } h1, h2, h3, h4, p { margin: 0; } a { color: var(--ink); text-underline-offset: 3px; } a:hover { color: var(--x); } .mono { font-family: var(--mono); font-size: 12.5px; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .nowrap { white-space: nowrap; } .r { text-align: right; } .num { font-variant-numeric: tabular-nums; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ============================== 3. shell: top bar + page ============================== */ /* Only the content scrolls, below the fixed top bar. The gutter is always reserved, so pages of any length have the same width and the nav never shifts sideways. */ .app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .top { flex: none; z-index: 4; background: var(--paper); border-bottom: 1px solid var(--line); } .top-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 28px; height: 56px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } .brandlink { display: flex; align-items: center; text-decoration: none; color: var(--ink); } .top img { height: 19px; width: auto; display: block; } .nav { display: flex; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { display: flex; align-items: center; padding: 0 11px; height: 100%; color: var(--muted); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .nav a:hover { color: var(--ink); } .nav a.active, .nav a.on { color: var(--ink); border-bottom-color: var(--x); } /* you are here */ .nav .count { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--x); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; } /* counter badge */ .nav .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--x); margin-left: 6px; } .me { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); white-space: nowrap; } .me a { color: var(--muted); text-decoration: none; } .me a:hover, .me a.active { color: var(--ink); } .me .who { display: flex; flex-direction: column; line-height: 1.2; text-align: right; max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .me .who b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .me .who span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; } .inline-form { margin: 0; display: inline; } .linkbtn-plain { border: 0; background: none; padding: 0; font: 400 13px var(--font); color: var(--muted); cursor: pointer; } .linkbtn-plain:hover { color: var(--ink); } /* DE | EN as underlined text toggle (LanguageSwitch) */ .lang { margin: 0; display: inline-flex; } .lang-toggle, .lang { gap: 2px; } .lang-toggle { display: inline-flex; } .lang button { border: 0; background: none; font: 600 12.5px var(--font); color: var(--muted); padding: 4px 6px; border-radius: 4px; cursor: pointer; } .lang button:hover { color: var(--ink); } .lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--x); text-decoration-thickness: 2px; text-underline-offset: 5px; } .main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; } .page { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; padding-block: 36px 96px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } .page > * { flex-shrink: 0; } .crumb { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; text-decoration: none; } .crumb:hover { color: var(--ink); } /* ============================== 4. headings ============================== */ h1 { font-size: 30px; font-weight: 720; font-stretch: 116%; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; } h2 { font-size: 17px; font-weight: 700; font-stretch: 110%; } h3 { font-size: 15px; font-weight: 700; } .page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; } .page-head > p { flex-basis: 100%; color: var(--ink-2); line-height: 1.6; max-width: 720px; } .sec-head .sub-line { display: inline-flex; gap: 6px 18px; flex-wrap: wrap; } .intro { margin-bottom: 12px; } .page-head .sub { display: flex; gap: 6px 18px; flex-wrap: wrap; color: var(--ink-2); } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sec-head a { font-size: 13px; } /* ============================== 5. buttons ============================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--control-line); background: var(--paper); color: var(--ink); font: 600 13.5px var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; } .btn:hover:not(:disabled) { background: var(--soft); color: var(--ink); } .btn-primary { background: var(--x); border-color: var(--x); color: #fff; } /* the ONE primary action per screen */ .btn-primary:hover:not(:disabled) { background: var(--x-hover); color: #fff; } .btn-small { height: 28px; padding: 0 10px; font-size: 12.5px; } .btn-block { width: 100%; } .btn-danger { color: var(--alarm-text); border-color: var(--alarm-line); } /* destructive: vermilion outline */ .btn-danger:hover:not(:disabled) { background: var(--alarm-tint); color: var(--alarm-text); } .btn-danger-solid { background: var(--alarm); border-color: var(--alarm); color: #fff; } /* final confirm of a destructive action */ .btn-danger-solid:hover:not(:disabled) { background: #A8380A; color: #fff; } .btn:disabled { background: var(--soft); color: var(--muted); border-color: var(--line); cursor: not-allowed; } .btn.ms, .ms { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; width: 100%; background: #fff; color: #2F2F2F; border: 1px solid #8C8C8C; border-radius: 4px; font: 600 14px 'Segoe UI', var(--font); cursor: pointer; } /* Microsoft sign-in branding */ .ms:hover { background: #F5F5F5; } .ms svg { flex: none; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .iconbtn { width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: var(--muted); } .iconbtn:hover { border-color: var(--line); color: var(--ink); background: var(--paper); } .iconbtn.del:hover { color: var(--alarm); border-color: var(--alarm-line); background: var(--alarm-tint); } .linkbtn { border: 0; background: none; padding: 0; font: 600 13px var(--font); color: var(--alarm); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; } .seg { display: inline-flex; padding: 2px; border-radius: var(--r-md); background: var(--soft); border: 1px solid var(--line); } .seg button, .seg a { height: 26px; padding: 0 10px; border-radius: 4px; border: 0; background: transparent; color: var(--muted); font: 600 12.5px var(--font); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; } .seg button.on, .seg a.on { background: #fff; color: var(--ink); outline: 1px solid var(--control-line); outline-offset: -1px; } /* ============================== 6. forms ============================== */ .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; } .field label, .label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { width: 100%; height: 38px; padding: 0 12px; border-radius: var(--r-sm); background: var(--field); border: 1px solid var(--control-line); color: var(--ink); font: 14px var(--font); } textarea { height: auto; min-height: 76px; padding: 8px 12px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; background: #fff; } input[aria-invalid="true"], .invalid { border-color: var(--alarm); } input[type=checkbox], input[type=radio] { accent-color: var(--x); width: 16px; height: 16px; margin: 0; } input[type=file] { font: 13px var(--font); max-width: 100%; } .checks { display: flex; gap: 8px 20px; flex-wrap: wrap; } .checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); font-weight: 500; cursor: pointer; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 16px; align-items: end; } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .search { width: 260px; max-width: 100%; } .filter { width: 220px; max-width: 100%; } .stack { display: flex; flex-direction: column; gap: 12px; margin: 0; } .fields { display: flex; flex-direction: column; } .card form { margin: 0; } .card form .btn { align-self: flex-start; } /* ============================== 7. cards + boxes ============================== */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .card > p { line-height: 1.6; } .card.narrow { max-width: 480px; } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .two { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; align-items: start; } /* access codes */ .codebox { display: flex; gap: 10px; align-items: flex-start; } .codetext { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; padding: 8px 10px; border-radius: var(--r-sm); background: var(--soft); border: 1px solid var(--control-line); word-break: break-all; max-height: 6.6em; overflow-y: auto; user-select: all; } .codebox .btn { flex: none; } .codebox.spaced { margin-top: 8px; } .newcode { border-color: var(--good-line); background: var(--good-tint); } .newcode .codetext { background: #fff; } details > summary { cursor: pointer; font-weight: 600; padding: 4px 0; } .confirm { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } /* ============================== 8. notices, alerts, pills, dots ============================== */ .notice { position: relative; font-size: 13.5px; line-height: 1.5; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--soft); overflow-wrap: anywhere; } .notice.bad, .notice.warning, .notice.good { padding-left: 32px; } .notice.bad::before, .notice.warning::before, .notice.good::before { content: ''; position: absolute; left: 14px; top: 17px; width: 8px; height: 8px; border-radius: 50%; } .notice.bad { background: var(--alarm-tint); border-color: var(--alarm-line); color: var(--alarm-text); } .notice.bad::before { background: var(--alarm); } .notice.warning { background: var(--amber-tint); border-color: var(--amber-line); color: var(--amber-text); } .notice.warning::before { background: var(--amber); } .notice.good { background: var(--good-tint); border-color: var(--good-line); color: var(--good-text); } .notice.good::before { background: var(--good); } /* alert / note with an inline svg icon (login, steps):
*/ .alert, .note { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--alarm-line); background: var(--alarm-tint); color: var(--alarm-text); font-size: 13.5px; } .alert svg, .note svg { flex: none; margin-top: 1px; color: var(--alarm); } .alert.amber, .note { border-color: var(--amber-line); background: var(--amber-tint); color: var(--amber-text); } .alert.amber svg, .note svg { color: var(--amber); } .note { font-size: 13px; } .pill { font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .pills { display: inline-flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 650; white-space: nowrap; } .chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .chip.pending { background: var(--x-tint); color: var(--x); } /* waits for approval */ .chip.released { background: var(--good-tint); color: var(--good-text); } .chip.released i { background: var(--good); } /* state dots: Text */ .state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); } .state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; } .state.wait i { background: #B5B5AF; } .state.run i { background: var(--ink); } .state.done i { background: var(--good); } .state.warn i { background: var(--amber); } .state.bad i { background: var(--alarm); } .new { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: #fff; background: var(--x); padding: 1px 6px; border-radius: 3px; vertical-align: 2px; } /* ============================== 9. tables + lists ============================== */ .table-wrap { overflow-x: auto; max-width: 100%; } table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.list th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 8px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } table.list td { padding: 10px 14px; border-top: 1px solid var(--row); vertical-align: middle; } table.list tbody tr:first-child td { border-top: 0; } table.list tr.dim td { color: var(--muted); } table.list th.r, table.list td.r { text-align: right; } table.list th:first-child, table.list td:first-child { padding-left: 0; } table.list th:last-child, table.list td:last-child { padding-right: 0; } table.list td.wrap { max-width: 360px; overflow-wrap: anywhere; } table.list td.small { font-size: 12.5px; } .empty { padding: 18px 0; color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 10px; } .empty svg { color: var(--good); flex: none; } .empty.ruled { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ============================== 10. admin: pipeline, approval queue, health ============================== */ /* pipeline: one object, four stages.
...
*/ .pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .stage { position: relative; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-decoration: none; color: var(--ink); } .stage + .stage { border-left: 1px solid var(--line); } .stage + .stage::before { content: ''; position: absolute; left: -7px; top: 30px; width: 12px; height: 12px; background: var(--paper); border-top: 1px solid var(--line); border-right: 1px solid var(--line); transform: rotate(45deg); } .stage:hover { background: var(--soft); color: var(--ink); } .stage:hover + .stage::before { background: var(--soft); } .stage .n { font-size: 40px; font-weight: 650; font-stretch: 112%; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .stage .l { font-weight: 650; font-size: 14px; } .stage .h { color: var(--muted); font-size: 12.5px; } .stage.act { background: var(--x-tint); } .stage.act + .stage::before { background: var(--paper); } .stage.act .n, .stage.act .h { color: var(--x); } .stage.zero .n { color: #C4C4BE; } /* approval queue: rows on the page, no card */ .queue { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .qrow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .qrow .t { font-weight: 650; min-width: 0; overflow-wrap: anywhere; } .qrow .s { color: var(--muted); font-size: 12.5px; } .qrow .age { font-size: 13px; color: var(--ink-2); } .qrow .age.old { color: var(--amber); font-weight: 600; } .qrow .acts { display: flex; gap: 8px; } /* system health: list of checks with a status dot.

[

][

]
*/ .health { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .hrow { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--row); } .hrow > i { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; } .hrow b { font-weight: 650; } .hrow p { grid-column: 2; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; } .hrow.good > i { background: var(--good); } .hrow.amber > i { background: var(--amber); } .hrow.alarm > i { background: var(--alarm); } .hrow.alarm { background: var(--alarm-tint); border: 1px solid var(--alarm-line); border-radius: var(--r-md); padding: 12px; margin: 8px 0; } .hrow.alarm p { color: var(--alarm-text); } .hrow p.mono { font-size: 12px; } .hrow .fix { grid-column: 2; margin-top: 6px; } /* ============================== 11. review desk (admin report detail; customer viewer reuses it) ============================== */ .review { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; } .desk { background: var(--d-desk); border-radius: var(--r-lg); min-width: 0; display: flex; flex-direction: column; } .tabs { display: flex; gap: 2px; padding: 8px 8px 0; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { border: 0; background: transparent; font: 600 13px var(--font); color: var(--d-tab); padding: 9px 14px; border-radius: 6px 6px 0 0; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; } .tab .k { font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--d-k); color: inherit; } .tab .tn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .tab[aria-selected="true"] { background: var(--d-stage); color: var(--d-tab-on); } .tab:hover { color: var(--d-tab-on); } .tab:focus-visible, .pager button:focus-visible, .desk a:focus-visible { outline-color: #fff; } .desk-stage { background: var(--d-stage); border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 28px 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 640px; } .pager { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--d-ctl); font-variant-numeric: tabular-nums; } .pager a { color: var(--d-ctl); } .pager button { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid #555; background: transparent; cursor: pointer; font-size: 15px; color: #fff; } .pager button:disabled { opacity: .35; cursor: default; } .pager .open { margin-left: 10px; } .pager .open:only-child { margin-left: 0; } .pdf-frame { width: 100%; height: 80vh; min-height: 480px; border: 0; border-radius: 4px; background: #fff; } /* inline PDF preview */ .noprev { flex: 1; display: grid; place-items: center; align-content: center; text-align: center; color: var(--d-tab); gap: 12px; padding: 40px 20px; } .noprev .zip { font-family: var(--mono); font-size: 12px; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; text-align: left; line-height: 1.7; } .side-col { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 20px; min-width: 0; } .side-col h2 { margin: 0 0 10px; font-size: 15px; } /* release / decide box: the one object with a frame */ .decide { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; } .decide.done { border-color: var(--good-line); background: var(--good-tint); } .decide h2 { margin: 0; } .decide .lead { color: var(--ink-2); font-size: 13.5px; } .recips { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .recips div { display: flex; justify-content: space-between; gap: 10px; } .recips span:last-child { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .okline { display: flex; gap: 9px; align-items: flex-start; color: var(--good-text); font-size: 13.5px; } .okline svg { flex: none; color: var(--good); margin-top: 1px; } .confirmbox { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--soft); border-radius: var(--r-md); font-size: 13.5px; } .confirmbox .row { display: flex; gap: 8px; flex-wrap: wrap; } /* file list with type icon.
PDFbuttons
*/ .files { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .file { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--row); } .file .ic { grid-row: span 2; width: 28px; height: 34px; border: 1px solid #D6D6D1; border-radius: 3px; font: 600 8.5px var(--mono); display: grid; place-items: end center; padding-bottom: 4px; color: var(--ink-2); background: #fff; } .file .ic.pdf { color: var(--x); } .file .n { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file .m { grid-column: 2; font-size: 12px; color: var(--muted); } .file .a { grid-row: span 2; grid-column: 3; display: flex; gap: 6px; } .files > .confirmbox { margin: 8px 0; } .drop { margin-top: 10px; border: 1px dashed #C9C9C3; border-radius: var(--r-md); padding: 14px; text-align: center; font-size: 13px; color: var(--muted); } .drop b { color: var(--ink); font-weight: 600; } .drop.over { border-color: var(--x); background: var(--x-tint); } .drop { position: relative; } /* the file input covers the whole zone */ .drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .drop:hover, .drop:focus-within { border-color: var(--ink-2); } /* facts dl */ .facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: 13px; margin: 0; border-top: 1px solid var(--line); padding-top: 10px; } .facts dt { color: var(--muted); } .facts + .actions { margin-top: 20px; } .facts dd .state { margin-right: 6px; } .facts dd { margin: 0; overflow-wrap: anywhere; } /* history timeline.
  • Textdate, who
*/ .hist { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; } .hist li { position: relative; padding: 0 0 14px 22px; font-size: 13px; } .hist li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); } .hist li::after { content: ''; position: absolute; left: 7px; top: 15px; bottom: -2px; width: 1px; background: var(--line); } .hist li:last-child::after { display: none; } .hist li.next::before { background: var(--paper); border: 1.5px solid var(--x); width: 8px; height: 8px; left: 3px; } .hist li.next { color: var(--x); font-weight: 600; } .hist span { display: block; color: var(--muted); font-size: 12px; font-weight: 400; } /* danger zone */ .danger { border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; display: flex; flex-direction: column; gap: 10px; } .danger .confirmbox { background: var(--alarm-tint); border: 1px solid var(--alarm-line); color: var(--alarm-text); } /* ============================== 12. customer: steps, fresh banner, track, report rows, contact ============================== */ /* three numbered run steps:
1

...

*/ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); } .step { padding: 20px 24px 4px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .step + .step { padding-left: 24px; border-left: 1px solid var(--line); } .step .no { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .step p { color: var(--ink-2); font-size: 13.5px; } .step .meta { color: var(--muted); font-size: 12.5px; } .code { display: flex; gap: 8px; align-items: stretch; } .code .txt { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; padding: 8px 10px; border: 1px solid var(--control-line); border-radius: var(--r-sm); background: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; } .code .btn { height: auto; } .copied { color: var(--good-text) !important; border-color: var(--good-line) !important; background: var(--good-tint) !important; } .codemeta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .codemeta .soon { color: var(--amber); font-weight: 600; } .step details { font-size: 12.5px; color: var(--muted); } .step summary { cursor: pointer; font-weight: 400; padding: 0; } .step details ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } /* thumbnail of a report's first page (also in report rows) */ .thumb { width: 76px; aspect-ratio: 1 / 1.414; border: 1px solid #D6D6D1; background: #fff; padding: 8px 7px; display: flex; flex-direction: column; gap: 4px; } .thumb img { width: 70%; height: auto; } .thumb i { display: block; height: 3px; background: #ECECE8; border-radius: 2px; } .thumb i.r { background: var(--x); height: 2px; margin-top: auto; } /* new report banner: the one framed object on the start page.

*/ .fresh { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); } .fresh .k { font-size: 12.5px; font-weight: 650; color: var(--x); } .fresh h3 { margin: 2px 0; font-size: 19px; font-stretch: 110%; overflow-wrap: anywhere; } .fresh .m { color: var(--muted); font-size: 13px; } /* package in progress with a three-part track.
Textx3
*/ .pk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .pk:first-of-type { border-top: 1px solid var(--line); } .pk .t { font-weight: 650; overflow-wrap: anywhere; } .pk .s { font-size: 12.5px; color: var(--muted); } .track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .track span { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); } .track span::before { content: ''; height: 4px; border-radius: 2px; background: var(--row); } .track span.done::before { background: var(--ink); } .track span.now { color: var(--ink); font-weight: 650; } .track span.now::before { background: linear-gradient(90deg, var(--ink) 50%, var(--row) 50%); } /* half-filled: the only gradient, a progress mark */ .track span.ready { color: var(--good-text); font-weight: 650; } .track span.ready::before { background: var(--good); } /* report list rows.
*/ .rlist { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .rrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); } .rrow:hover { background: var(--soft); color: var(--ink); } .rrow .thumb { width: 44px; padding: 5px 4px; gap: 2px; } .rrow .thumb i { height: 2px; } .rrow .t { font-weight: 650; } .rrow .s { font-size: 12.5px; color: var(--muted); } .rrow .d { font-size: 13px; color: var(--ink-2); white-space: nowrap; } .contact { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; } .contact b { font-size: 14px; } .contact .sel { user-select: all; } /* ============================== 13. account / login: split screen ============================== */ .shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .vis { position: relative; overflow: hidden; background: var(--soft); color: var(--ink); min-height: 100%; border-right: 1px solid var(--line); padding-block: 44px; padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: 48px; display: flex; flex-direction: column; } .vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .thesis { position: relative; z-index: 1; max-width: 480px; display: flex; flex-direction: column; gap: 12px; } .thesis h1 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; font-weight: 700; font-stretch: 118%; letter-spacing: -0.015em; } .thesis p { color: #6E6C67; font-size: 15px; max-width: 44ch; } .tip { position: absolute; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; } .tip b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); } .tip strong { color: var(--x); font-size: 14px; } .tip .t { color: var(--muted); font-family: var(--mono); font-size: 11.5px; } .side { display: flex; flex-direction: column; min-width: 0; padding-block: 28px; padding-right: max(40px, env(safe-area-inset-right, 0px)); padding-left: 40px; } .side-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .logo { height: 24px; width: auto; display: block; } .formwrap { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 36px; } .form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 18px; } .form .head { display: flex; flex-direction: column; gap: 4px; } .form h1 { font-size: 22px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.01em; } .form .lead { color: var(--muted); font-size: 13.5px; } .form .field { margin-bottom: 0; } .form .fields { gap: 12px; } .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; } .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); } .access { color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 14px; } .foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; } .foot a { color: var(--muted); } /* ============================== 14. misc ============================== */ #blazor-error-ui { display: none; } /* ============================== 15. responsive ============================== */ @media (max-width: 1040px) { .review { grid-template-columns: 1fr; } .side-col { position: static; } .desk-stage { min-height: 0; } } @media (max-width: 980px) { .two { grid-template-columns: 1fr; } .me .who { display: none; } .steps { grid-template-columns: 1fr; } .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .step { padding-bottom: 20px; } } @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .side { order: -1; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); padding-block: 20px 8px; } .formwrap { padding-block: 28px 36px; } .vis { min-height: 300px; padding-block: 28px 24px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); padding-bottom: 90px; } .thesis h1 { font-size: 22px; } .thesis p { font-size: 13.5px; } .foot { padding-top: 8px; } } @media (max-width: 760px) { .top-in { gap: 14px; height: auto; flex-wrap: wrap; padding-block: 10px 0; } .nav { order: 3; width: 100%; height: 42px; } .page { padding-block: 24px 64px; gap: 32px; } h1 { font-size: 24px; } .pipe { grid-template-columns: 1fr 1fr; } .stage:nth-child(3) { border-left: 0; } .stage:nth-child(n+3) { border-top: 1px solid var(--line); } .stage:nth-child(3)::before { display: none; } .stage .n { font-size: 32px; } .qrow { grid-template-columns: minmax(0, 1fr) auto; } .qrow .cust, .qrow .age { grid-column: 1; } .qrow .acts { grid-column: 2; grid-row: 1 / span 3; } .desk-stage { padding: 16px 12px 14px; } .fresh { grid-template-columns: 56px minmax(0, 1fr); } .fresh .thumb { width: 56px; } .fresh .btn { grid-column: 1 / -1; } .pk { grid-template-columns: 1fr; gap: 10px; } .rrow { grid-template-columns: 36px minmax(0, 1fr) auto; } .rrow .thumb { width: 36px; } .rrow .d { display: none; } .codebox { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } } /* customer report page additions */ .pk .t.mono { font-size: 13.5px; } .allzip { margin-top: 12px; }