/* ===================================================== JUxta Medical Store - Visual identity Palette: deep clinical teal + warm apricot accent Type: Poppins (display) / Inter (body) Supports light / dark / auto themes via [data-theme] on ===================================================== */ :root { /* Brand colors (constant across themes) */ --jx-teal-900: #0b3d3a; --jx-teal-700: #0f6f66; --jx-teal-500: #16947f; --jx-teal-100: #e6f5f2; --jx-apricot: #f3944e; --jx-apricot-dark: #d9762e; --jx-danger: #c0392b; --jx-radius: 14px; /* Theme-able tokens: LIGHT (default) */ --jx-bg: #fbf9f4; --jx-surface: #ffffff; --jx-surface-2: #f6f8f7; --jx-text: #16252b; --jx-text-muted: #6b7d80; --jx-border: #eef1ef; --jx-input-bg: #ffffff; --jx-input-border: #d9e5e3; --jx-table-head: var(--jx-teal-100); --jx-hover-tint: var(--jx-teal-100); --jx-shadow: rgba(11, 61, 58, .09); --jx-navbar-bg: var(--jx-teal-900); --jx-condition-icon-bg: var(--jx-teal-100); --jx-disclaimer-bg: #fff8e6; --jx-disclaimer-border: #f2e0a4; --jx-disclaimer-text: #6b5619; --jx-rx-notice-bg: #fdeeee; --jx-rx-notice-border: #f3caca; --jx-rx-notice-text: #9a2c2c; --jx-rx-badge-bg: #fff4e9; --jx-rx-badge-border: #f4d9bd; } /* Theme-able tokens: DARK */ html[data-theme="dark"] { --jx-bg: #0c1615; --jx-surface: #142322; --jx-surface-2: #101c1b; --jx-text: #e7f2f0; --jx-text-muted: #93aba7; --jx-border: #23332f; --jx-input-bg: #172624; --jx-input-border: #2b3d38; --jx-table-head: #1a2b28; --jx-hover-tint: #1a2b28; --jx-shadow: rgba(0, 0, 0, .45); --jx-navbar-bg: #081312; --jx-condition-icon-bg: #1a2b28; --jx-disclaimer-bg: #2a2411; --jx-disclaimer-border: #4a3f1c; --jx-disclaimer-text: #f0d98a; --jx-rx-notice-bg: #2c1616; --jx-rx-notice-border: #4a2323; --jx-rx-notice-text: #f1a3a3; --jx-rx-badge-bg: #2c2013; --jx-rx-badge-border: #4a3722; } * { transition: background-color .15s ease, border-color .15s ease, color .15s ease; } body { font-family: 'Inter', -apple-system, sans-serif; background-color: var(--jx-bg); color: var(--jx-text); } h1, h2, h3, h4, h5, .brand-font { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 600; color: var(--jx-text); } a { color: var(--jx-teal-500); } a:hover { color: var(--jx-apricot-dark); } /* ---------- Theme toggle button ---------- */ .jx-theme-toggle { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .jx-theme-toggle:hover { background: rgba(255,255,255,.22); } .jx-theme-toggle.jx-theme-toggle-light { background: rgba(11,61,58,.08); border-color: rgba(11,61,58,.18); color: var(--jx-teal-900); } .jx-theme-toggle.jx-theme-toggle-light:hover { background: rgba(11,61,58,.15); } /* ---------- Navbar ---------- */ .jx-navbar { background: var(--jx-navbar-bg); padding: .85rem 0; } .jx-navbar .navbar-brand { font-family: 'Poppins', sans-serif; font-weight: 700; color: #fff !important; letter-spacing: .2px; font-size: 1.35rem; } .jx-navbar .navbar-brand .dot { color: var(--jx-apricot); } .jx-navbar .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; margin: 0 .25rem; } .jx-navbar .nav-link:hover { color: #fff !important; } .jx-navbar .btn-cart { background: var(--jx-apricot); color: #fff; border-radius: 999px; padding: .4rem .9rem; font-weight: 600; position: relative; } .jx-navbar .btn-cart .badge { background: var(--jx-navbar-bg); border: 2px solid var(--jx-apricot); } .jx-navbar .dropdown-menu { background: var(--jx-surface); border: 1px solid var(--jx-border); } .jx-navbar .dropdown-item { color: var(--jx-text); } .jx-navbar .dropdown-item:hover { background: var(--jx-hover-tint); color: var(--jx-text); } /* ---------- Search ---------- */ .jx-search-bar { background: var(--jx-input-bg); border-radius: 999px; border: 1px solid var(--jx-input-border); overflow: hidden; } .jx-search-bar input { border: none; outline: none; box-shadow: none !important; background: transparent; color: var(--jx-text); } .jx-search-bar button { background: var(--jx-teal-700); color: #fff; border: none; padding: 0 1.2rem; } /* ---------- Hero ---------- */ .jx-hero { background: linear-gradient(135deg, var(--jx-teal-900) 0%, var(--jx-teal-700) 100%); color: #fff; padding: 3.5rem 0; border-radius: 0 0 32px 32px; } .jx-hero h1 { color: #fff; font-size: 2.3rem; } .jx-hero p { color: rgba(255,255,255,.85); } .jx-hero .jx-search-bar { max-width: 640px; } /* ---------- Cards ---------- */ .jx-card { background: var(--jx-surface); border: 1px solid var(--jx-border); border-radius: var(--jx-radius); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; height: 100%; } .jx-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--jx-shadow); } .jx-card .jx-card-img { height: 160px; background: var(--jx-condition-icon-bg); display: flex; align-items: center; justify-content: center; border-radius: var(--jx-radius) var(--jx-radius) 0 0; font-size: 2.6rem; overflow: hidden; } .jx-card .jx-card-img img { width: 100%; height: 100%; object-fit: cover; } .jx-price { color: var(--jx-teal-500); font-weight: 700; font-size: 1.15rem; } .jx-stock-in { color: #1b8a5a; font-size: .85rem; font-weight: 600; } .jx-stock-out { color: var(--jx-danger); font-size: .85rem; font-weight: 600; } .jx-rx-badge { background: var(--jx-rx-badge-bg); color: var(--jx-apricot-dark); border: 1px solid var(--jx-rx-badge-border); font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; } /* ---------- Condition pills ---------- */ .jx-condition-card { background: var(--jx-surface); border: 1px solid var(--jx-border); border-radius: var(--jx-radius); text-align: center; padding: 1.4rem 1rem; text-decoration: none; display: block; color: var(--jx-text); transition: all .15s ease; } .jx-condition-card:hover { background: var(--jx-hover-tint); color: var(--jx-text); transform: translateY(-2px); } .jx-condition-card .icon { font-size: 1.9rem; display: block; margin-bottom: .4rem; } /* ---------- Buttons ---------- */ .btn-jx-primary { background: var(--jx-teal-700); border-color: var(--jx-teal-700); color: #fff; font-weight: 600; } .btn-jx-primary:hover { background: var(--jx-teal-900); border-color: var(--jx-teal-900); color: #fff; } .btn-jx-accent { background: var(--jx-apricot); border-color: var(--jx-apricot); color: #fff; font-weight: 600; } .btn-jx-accent:hover { background: var(--jx-apricot-dark); border-color: var(--jx-apricot-dark); color: #fff; } .btn-outline-jx { border: 1.5px solid var(--jx-teal-500); color: var(--jx-teal-500); font-weight: 600; background: transparent; } .btn-outline-jx:hover { background: var(--jx-teal-700); border-color: var(--jx-teal-700); color: #fff; } /* ---------- Disclaimer / notices ---------- */ .jx-disclaimer { background: var(--jx-disclaimer-bg); border: 1px solid var(--jx-disclaimer-border); border-radius: var(--jx-radius); padding: 1rem 1.25rem; font-size: .92rem; color: var(--jx-disclaimer-text); } .jx-rx-notice { background: var(--jx-rx-notice-bg); border: 1px solid var(--jx-rx-notice-border); color: var(--jx-rx-notice-text); border-radius: 10px; padding: .85rem 1rem; font-weight: 600; font-size: .92rem; } /* ---------- Footer ---------- */ .jx-footer { background: var(--jx-navbar-bg); color: rgba(255,255,255,.75); padding: 2.5rem 0 1.2rem; margin-top: 3rem; } .jx-footer h6 { color: #fff; font-weight: 700; } .jx-footer a { color: rgba(255,255,255,.75); text-decoration: none; } .jx-footer a:hover { color: var(--jx-apricot); } .jx-footer .brand-font .dot { color: var(--jx-apricot); } /* ---------- Admin sidebar ---------- */ .jx-admin-sidebar { background: var(--jx-navbar-bg); min-height: 100vh; color: #fff; } .jx-admin-sidebar .nav-link { color: rgba(255,255,255,.8); padding: .6rem 1.1rem; border-radius: 8px; margin-bottom: 2px; font-weight: 500; } .jx-admin-sidebar .nav-link.active, .jx-admin-sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; } .jx-stat-card { background: var(--jx-surface); border-radius: var(--jx-radius); border: 1px solid var(--jx-border); padding: 1.2rem 1.4rem; } .jx-stat-card .num { font-size: 1.7rem; font-weight: 700; color: var(--jx-text); } .jx-stat-card .label { color: var(--jx-text-muted); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } .jx-admin-content-bg { background: var(--jx-surface-2); min-height: 100vh; } /* ---------- Misc ---------- */ .jx-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; } .table-jx thead { background: var(--jx-table-head); } /* ===================================================== Bootstrap component overrides so dark mode looks native (only the components this app actually uses) ===================================================== */ .form-control, .form-select, textarea.form-control { background-color: var(--jx-input-bg); border-color: var(--jx-input-border); color: var(--jx-text); } .form-control:focus, .form-select:focus { background-color: var(--jx-input-bg); color: var(--jx-text); border-color: var(--jx-teal-500); box-shadow: 0 0 0 .2rem rgba(22,148,127,.15); } .form-control::placeholder { color: var(--jx-text-muted); opacity: .8; } .form-label { color: var(--jx-text); } .form-check-label { color: var(--jx-text); } .form-text, .text-muted { color: var(--jx-text-muted) !important; } .table { color: var(--jx-text); } .table-jx, .table { --bs-table-bg: var(--jx-surface); --bs-table-color: var(--jx-text); --bs-table-striped-bg: var(--jx-surface-2); --bs-table-hover-bg: var(--jx-hover-tint); --bs-table-border-color: var(--jx-border); } .dropdown-menu { background-color: var(--jx-surface); border-color: var(--jx-border); color: var(--jx-text); } .dropdown-item { color: var(--jx-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--jx-hover-tint); color: var(--jx-text); } .dropdown-divider { border-color: var(--jx-border); } .list-group-item { background-color: var(--jx-surface); border-color: var(--jx-border); color: var(--jx-text); } .list-group-item.active { background-color: var(--jx-teal-700); border-color: var(--jx-teal-700); color: #fff; } .nav-pills .nav-link { color: var(--jx-text); background: var(--jx-surface); border: 1px solid var(--jx-border); margin-right: .4rem; } .nav-pills .nav-link.active { color: #fff; } .pagination .page-link { background-color: var(--jx-surface); border-color: var(--jx-border); color: var(--jx-teal-500); } .pagination .page-item.active .page-link { background-color: var(--jx-teal-700); border-color: var(--jx-teal-700); } .badge.bg-light { background-color: var(--jx-surface-2) !important; color: var(--jx-text) !important; border-color: var(--jx-border); } .border { border-color: var(--jx-border) !important; } hr { border-color: var(--jx-border); opacity: 1; } .card, .modal-content { background-color: var(--jx-surface); color: var(--jx-text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--jx-bg); } ::-webkit-scrollbar-thumb { background: var(--jx-border); border-radius: 999px; }