/* ============================================================================ Barq Vogue — shared portal theme v4 (admin, finance, rider, warehouse) Load LAST in . One design language across every portal, matched to the split login gate: ivory canvas, white cards with hairlines, ink type, gold accents, soft depth. Desktop and mobile. ============================================================================ */ :root{ --ink:#1a1714; --mut:#7a736b; --line:#e8e3db; --bg:#f6f4f0; --card:#fff; --gold:#9a6b32; --ok:#256b3a; --okbg:#e7f0e8; --err:#9f1d1d; --errbg:#f6e9e9; --accent:#9a6b32; --radius:14px; --shadow-sm:0 1px 2px rgba(26,20,14,.04), 0 1px 3px rgba(26,20,14,.06); --shadow-md:0 6px 18px rgba(26,20,14,.07), 0 2px 6px rgba(26,20,14,.05); --shadow-lg:0 18px 44px rgba(26,20,14,.12); } /* ---------- base ---------- */ body{ background:var(--bg) !important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } *{ -webkit-tap-highlight-color:transparent; } .card, .stat, .btn, .pill, .tab, .rtab, .side nav button, .bv-live-btn, .chip{ transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease; } /* ---------- headings / section labels ---------- */ .main h1{ letter-spacing:.01em; } .sec-h{ color:var(--mut) !important; letter-spacing:.16em !important; } /* ---------- cards ---------- */ .card{ background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-sm); } .card:hover{ box-shadow:var(--shadow-md); } .card[data-goto], .stat[data-goto]{ cursor:pointer; } .stat[data-goto]:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } /* ---------- KPI stat tiles ---------- */ .stats{ gap:14px !important; } .stat, .fk-stat, .stk-stat, .kpi, .chip-stat{ background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-sm); } .stat{ padding:18px 20px !important; position:relative; overflow:hidden; } .stat::after{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--accent),transparent); transition:width .35s ease; } .stat:hover{ box-shadow:var(--shadow-md); } .stat:hover::after{ width:100%; } .stat .n, .fk-stat .sn, .kpi-n, .stk-stat .sn{ font-family:Jost,sans-serif !important; font-weight:400 !important; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:.005em; line-height:1.05; } .stat .l{ color:var(--mut) !important; letter-spacing:.14em !important; } /* ---------- buttons: soft-radius ink, ghost, gold ---------- */ .btn{ border-radius:10px !important; letter-spacing:.12em !important; } .btn:not(.ghost):not(.red):not(.gold):hover{ background:#000 !important; transform:translateY(-1px); } .btn.gold:hover{ filter:brightness(1.06); transform:translateY(-1px); } .btn.ghost{ border-color:#ddd5c9 !important; } .btn.ghost:hover{ border-color:var(--ink) !important; background:#faf7f2 !important; } .btn:active{ transform:translateY(0); } input, select, textarea{ border-radius:10px !important; } /* ---------- pills / status ---------- */ .pill{ border-radius:999px !important; font-weight:500; background:#fff; } /* ---------- top bars / headers (warehouse, finance) ---------- */ .bar{ border-bottom:1px solid var(--line) !important; } .acct{ border-radius:12px !important; } /* ---------- segmented tabs: white rail, gold active (wh/finance) ---------- */ .tabs{ border-radius:14px !important; } .tab .n{ font-weight:600; } /* ---------- rows / tables ---------- */ .row, .lk-row, .ckline{ border-radius:8px; } tr{ transition:background .18s ease; } tbody tr:hover{ background:rgba(154,107,50,.035); } thead th{ letter-spacing:.08em; color:var(--mut); font-weight:500; } td{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ---------- login gate: the split card owns its layout ---------- */ .gate{ border:1px solid var(--line) !important; border-radius:16px !important; box-shadow:var(--shadow-lg); padding:0 !important; } .gate input{ transition:border-color .2s ease, box-shadow .2s ease; } .gate input:focus{ outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(154,107,50,.12); } .gate .g-form .btn:hover{ background:#000 !important; } /* ---------- live bar (portal-live.js) ---------- */ .bv-livebar{ font-size:12px; border-radius:12px; } .bv-live-btn{ border-radius:9px !important; } .bv-live-btn:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); } /* subtle fade for freshly loaded panels */ #content > *, .pane.show{ animation:bvFadeIn .35s ease both; } @keyframes bvFadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} } /* ---------- focus rings ---------- */ .btn:focus-visible, .pill:focus-visible, .tab:focus-visible, .rtab:focus-visible, .side nav button:focus-visible, .bv-live-btn:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .main input:focus-visible, .main select:focus-visible, .main textarea:focus-visible, .wrap input:focus-visible, .wrap select:focus-visible, .wrap textarea:focus-visible{ outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(154,107,50,.12); } .main input, .main select, .main textarea, .wrap input, .wrap select, .wrap textarea{ transition:border-color .2s ease, box-shadow .2s ease; accent-color:var(--accent); } /* ---------- selection / scrollbars ---------- */ ::selection{ background:rgba(154,107,50,.18); } *{ scrollbar-width:thin; scrollbar-color:#c9c1b4 transparent; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:#c9c1b4; border-radius:8px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background:#a89e8e; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-track{ background:transparent; } /* ---------- print ---------- */ @media print{ .side, .bv-livebar, .btn, nav, .tabs{ display:none !important; } body{ background:#fff !important; } .main{ margin:0 !important; padding:0 !important; } .card, .stat{ box-shadow:none !important; break-inside:avoid; } } @media(prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }