/* =========================================================================== ASGT ONE — application stylesheet =========================================================================== Inherits the visual language of the public landing page: same palette, same Archivo / IBM Plex Mono pairing, same cable-jacket legend motif, same terse register. If a value here disagrees with index.html, index.html is right. RTL: direction is never hardcoded. Spacing uses logical properties (margin-inline, padding-block, border-inline-start, inset-inline) so a later Arabic pass is `` plus a font swap, not a rewrite. The only physical properties left are ones that are genuinely physical: box-shadow offsets and the legend crawl keyframes. =========================================================================== */ :root{ --ink:#0D1317; --slate:#161F26; --raise:#1C272F; --line:#24313A; --line-lit:#324350; --paper:#E9EEF1; --steel:#8DA0AC; --dim:#5E7280; --copper:#A9673B; --copper-lit:#C88450; --signal:#4A93A6; --danger:#B4544A; --ok:#4F8A6B; --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; --wrap:1180px; --radius:3px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; } a{color:inherit} img{max-width:100%;display:block} button{font-family:inherit} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px} /* Hidden until JS decides what to show. Every page that uses this MUST have a no-JS fallback or a guaranteed reveal — a permanently hidden body is the "blank screen" failure this codebase is not allowed to have. */ [hidden]{display:none!important} .visually-hidden{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } /* ---- accessibility -------------------------------------------------------*/ :focus-visible{outline:2px solid var(--signal);outline-offset:2px} .skip{position:absolute;inset-inline-start:-9999px} .skip:focus{ inset-inline-start:24px;inset-block-start:12px;z-index:60; background:var(--copper);color:#12181C;padding:10px 16px;border-radius:2px; } /* =========================================================================== Preview banner — the guard rail. Sits above everything, on every page. =========================================================================== */ .preview-banner{ background:var(--copper); color:#12181C; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:8px 16px; font-weight:500; } /* =========================================================================== Header / nav =========================================================================== */ .app-header{border-block-end:1px solid var(--line);background:var(--ink);position:relative} .app-header__in{ display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:64px; } .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none} .brand img{height:24px;width:auto} .brand__tag{ font-family:var(--mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--steel); border-inline-start:1px solid var(--line);padding-inline-start:12px; } .app-who{ display:flex;align-items:center;gap:14px; font-size:13.5px;color:var(--steel); } .app-who__co{ font-family:var(--mono);font-size:12px;letter-spacing:.06em; color:var(--paper); max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .app-who__sep{color:var(--line-lit)} .linkbtn{ background:none;border:none;padding:0;cursor:pointer; color:var(--steel);font-size:13.5px;text-decoration:underline; text-underline-offset:3px; } .linkbtn:hover{color:var(--paper)} /* --- nav --- */ .app-nav{border-block-end:1px solid var(--line);background:var(--slate)} .app-nav__in{display:flex;gap:2px;align-items:stretch;overflow-x:auto;scrollbar-width:thin} .app-nav a{ display:inline-flex;align-items:center;gap:8px; padding:13px 16px;text-decoration:none;color:var(--steel); font-size:14px;white-space:nowrap; border-block-end:2px solid transparent; transition:color .16s,border-color .16s; } .app-nav a:hover{color:var(--paper)} .app-nav a[aria-current="page"]{color:var(--paper);border-block-end-color:var(--copper)} .navcount{ font-family:var(--mono);font-size:11px; background:var(--copper);color:#12181C; border-radius:20px;padding:1px 7px;font-weight:500; } .navcount:empty{display:none} /* --- cable legend strip, carried over from the landing page --- */ .legend{ border-block-end:1px solid var(--line); background:var(--slate);overflow:hidden;padding:8px 0; } .legend__track{display:flex;width:max-content;animation:crawl 44s linear infinite} .legend__seg{ font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-inline-end:34px; } .legend__seg b{color:var(--copper);font-weight:500} @keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* =========================================================================== Layout =========================================================================== */ .app-main{flex:1 0 auto;padding-block:36px 64px} .page-head{ display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end; justify-content:space-between;margin-block-end:28px; } .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--copper);margin:0 0 10px; } h1{font-size:clamp(28px,4vw,38px);line-height:1.1;font-weight:800;letter-spacing:-.022em;margin:0} h2{font-size:21px;font-weight:600;letter-spacing:-.012em;margin:0 0 6px} h3{font-size:17px;font-weight:600;margin:0 0 4px} .sub{color:var(--steel);font-size:15px;margin:6px 0 0;max-width:64ch} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px} .grid-side{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start} /* =========================================================================== Cards, panels =========================================================================== */ .card{ background:var(--slate);border:1px solid var(--line); border-radius:var(--radius);padding:22px; } .card--tight{padding:16px} .card + .card{margin-block-start:18px} .card__head{ display:flex;gap:12px;align-items:baseline;justify-content:space-between; margin-block-end:14px; } .meta{ font-family:var(--mono);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--dim); } .note{ font-family:var(--mono);font-size:11.5px;line-height:1.7; color:var(--dim);letter-spacing:.02em; } /* =========================================================================== Buttons =========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--sans);font-size:14.5px;font-weight:600; padding:11px 18px;border-radius:2px;text-decoration:none; border:1px solid transparent;cursor:pointer; transition:background .16s,border-color .16s,color .16s; } .btn--solid{background:var(--copper);color:#12181C;border-color:var(--copper)} .btn--solid:hover:not(:disabled){background:var(--copper-lit);border-color:var(--copper-lit)} .btn--ghost{background:transparent;color:var(--paper);border-color:var(--line)} .btn--ghost:hover:not(:disabled){border-color:var(--steel)} .btn--quiet{background:transparent;color:var(--steel);border-color:transparent;padding-inline:8px} .btn--quiet:hover:not(:disabled){color:var(--paper)} .btn--danger{background:transparent;color:var(--danger);border-color:var(--line)} .btn--danger:hover:not(:disabled){border-color:var(--danger)} .btn--wide{width:100%} .btn--sm{font-size:13px;padding:7px 12px} .btn:disabled{opacity:.5;cursor:not-allowed} .btn-row{display:flex;flex-wrap:wrap;gap:10px} /* =========================================================================== Forms =========================================================================== */ .field{margin-block-end:16px} .field label,.label{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em; text-transform:uppercase;color:var(--steel);margin-block-end:7px; } .req{color:var(--copper)} .field input,.field textarea,.field select,.input{ width:100%;background:var(--ink);color:var(--paper); border:1px solid var(--line);border-radius:2px; padding:11px 12px;font-family:var(--sans);font-size:16px; transition:border-color .16s; } .field textarea{resize:vertical;min-height:80px;font-family:var(--mono);font-size:13px} .field input:focus,.field textarea:focus,.field select:focus,.input:focus{ outline:none;border-color:var(--signal); box-shadow:0 0 0 3px rgba(74,147,166,.16); } .field input::placeholder,.field textarea::placeholder{color:#4E606C} .field__hint{font-size:12.5px;color:var(--dim);margin-block-start:6px} .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px} input[type="number"]{font-family:var(--mono)} .qty{width:82px;text-align:end} /* =========================================================================== Messages — every one says what happened and what to do next =========================================================================== */ .msg{ padding:13px 15px;border-radius:2px;font-size:14.5px; margin-block-start:14px;border:1px solid; } .msg--ok{background:rgba(79,138,107,.12);border-color:var(--ok);color:var(--paper)} .msg--err{background:rgba(180,84,74,.12);border-color:var(--danger);color:var(--paper)} .msg--info{background:rgba(74,147,166,.10);border-color:var(--signal);color:var(--paper)} .msg--warn{background:rgba(169,103,59,.12);border-color:var(--copper);color:var(--paper)} .msg strong{display:block;margin-block-end:3px;font-weight:600} /* =========================================================================== Empty states — never a blank screen =========================================================================== */ .empty{ border:1px dashed var(--line-lit);border-radius:var(--radius); padding:44px 28px;text-align:center;background:var(--slate); } .empty__mark{ font-family:var(--mono);font-size:11px;letter-spacing:.22em; text-transform:uppercase;color:var(--copper);margin-block-end:14px; } .empty h3{font-size:18px;margin-block-end:8px} .empty p{color:var(--steel);margin:0 auto 18px;max-width:52ch;font-size:14.5px} /* Loading state. Always paired with text, never a bare spinner, and every caller is responsible for replacing it with content OR an error. */ .loading{ padding:40px 20px;text-align:center;color:var(--steel); font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; } /* =========================================================================== Tables =========================================================================== */ .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)} table.data{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px} table.data th{ text-align:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--steel);font-weight:500; padding:12px 14px;background:var(--slate); border-block-end:1px solid var(--line);white-space:nowrap; } table.data td{padding:13px 14px;border-block-end:1px solid var(--line);vertical-align:top} table.data tr:last-child td{border-block-end:none} table.data tbody tr:hover{background:rgba(255,255,255,.02)} .num{text-align:end;font-family:var(--mono);white-space:nowrap} .sku{font-family:var(--mono);font-size:13px;color:var(--copper-lit)} /* =========================================================================== Price display =========================================================================== */ .price{font-family:var(--mono);font-size:15px;font-weight:500;white-space:nowrap} .price__cur{color:var(--steel);font-size:11px;margin-inline-end:4px} /* No price for this customer. Never a fallback number, never a list price. */ .price--none{ font-family:var(--mono);font-size:12px;letter-spacing:.04em; color:var(--copper);white-space:nowrap; } .price-basis{ font-family:var(--mono);font-size:11px;letter-spacing:.08em; color:var(--dim);text-transform:uppercase; } /* =========================================================================== Pills / badges =========================================================================== */ .pill{ display:inline-block;font-family:var(--mono);font-size:10.5px; letter-spacing:.12em;text-transform:uppercase; padding:3px 9px;border-radius:20px;border:1px solid var(--line); color:var(--steel);white-space:nowrap; } .pill--ok{border-color:var(--ok);color:#8FC4A8} .pill--warn{border-color:var(--copper);color:var(--copper-lit)} .pill--err{border-color:var(--danger);color:#D98C84} .pill--info{border-color:var(--signal);color:#8FC6D3} /* =========================================================================== Filters / search =========================================================================== */ .filters{ display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end; margin-block-end:20px; } .filters .field{margin-block-end:0} .search-wide{flex:1 1 280px;min-width:220px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ border:1px solid var(--line);border-radius:2px;background:transparent; padding:7px 12px;font-size:13px;color:var(--steel);cursor:pointer; transition:border-color .14s,color .14s,background .14s; } .chip:hover{color:var(--paper)} .chip[aria-pressed="true"]{ border-color:var(--copper);color:var(--paper);background:rgba(169,103,59,.14); } /* =========================================================================== Totals block =========================================================================== */ .totals{margin-inline-start:auto;max-width:340px;width:100%} .totals__row{ display:flex;justify-content:space-between;gap:20px; padding:9px 0;border-block-end:1px solid var(--line);font-size:14.5px; } .totals__row:last-child{border-block-end:none} .totals__row--grand{ border-block-start:1px solid var(--line-lit);margin-block-start:4px; padding-block-start:14px;font-size:18px;font-weight:600; } .totals__row span:last-child{font-family:var(--mono)} /* =========================================================================== Auth pages — single centred column =========================================================================== */ .auth-wrap{ flex:1 0 auto;display:flex;align-items:center;justify-content:center; padding:48px 24px; } .auth-card{width:100%;max-width:420px} .auth-card h1{font-size:28px;margin-block-end:8px} .auth-card .sub{margin-block-end:26px} .auth-foot{ margin-block-start:22px;padding-block-start:20px;border-block-start:1px solid var(--line); font-size:13.5px;color:var(--steel); } .auth-foot a{color:var(--steel);text-decoration:underline;text-underline-offset:3px} .auth-foot a:hover{color:var(--paper)} /* =========================================================================== Footer =========================================================================== */ .app-footer{ flex:none;border-block-start:1px solid var(--line); padding-block:26px 40px;color:var(--dim);font-size:13px; } .app-footer__in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center} .app-footer a{color:var(--dim);text-decoration:none} .app-footer a:hover{color:var(--steel)} .app-footer__links{display:flex;gap:18px;flex-wrap:wrap} /* =========================================================================== Responsive =========================================================================== */ @media (max-width:900px){ .grid-side{grid-template-columns:1fr;gap:20px} .grid-2{grid-template-columns:1fr} } @media (max-width:620px){ .pair{grid-template-columns:1fr} .brand__tag{display:none} .app-who__co{max-width:16ch} .app-main{padding-block:24px 44px} .wrap{padding-inline:16px} .card{padding:16px} } /* Honoured, not decorative: the legend crawl and every transition stop. */ @media (prefers-reduced-motion:reduce){ .legend__track{animation:none} *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }