/home/u775757334/domains/civicwelllife.com/public_html/seller/function
Edit: /home/u775757334/domains/civicwelllife.com/public_html/seller/function/custum.css (10832B)
:root {
--primary: #2f57ef;
--primary-dark: #2146d0;
--text-dark: #0f172a;
--text-light: #64748b;
--border: #e6ecf5;
--bg-soft: #f4f7fb;
--card-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
--card-shadow-hover: 0 16px 35px rgba(15, 23, 42, 0.10);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f5f8ff 0%, #eef3ff 55%, #f8fbff 100%);
color: var(--text-dark);
}
a {
text-decoration: none;
}
.dashboard-page {
min-height: 100vh;
}
.dashboard-topbar {
position: sticky;
top: 0;
z-index: 1030;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(230, 236, 245, 0.9);
}
.dashboard-topbar-inner {
min-height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.topbar-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.hamburger-btn {
width: 44px;
height: 44px;
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
color: var(--text-dark);
display: none;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.brand-logo {
font-size: 24px;
font-weight: 800;
color: var(--primary);
letter-spacing: -0.3px;
white-space: nowrap;
}
.brand-logo span {
color: var(--text-dark);
}
.topbar-subtext {
font-size: 13px;
color: var(--text-light);
margin-top: 2px;
}
.topbar-right {
display: flex;
align-items: center;
gap: 12px;
}
.topbar-user-box {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--border);
padding: 8px 12px;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.topbar-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary) 0%, #5d7cff 100%);
color: #fff;
font-size: 15px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.topbar-user-info h6 {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--text-dark);
}
.topbar-user-info p {
margin: 0;
font-size: 12px;
color: var(--text-light);
}
.topbar-logout {
height: 44px;
padding: 0 16px;
border-radius: 12px;
border: 1px solid #ffd6d6;
background: #fff5f5;
color: #dc2626;
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.topbar-logout:hover {
background: #ffeaea;
color: #c81e1e;
}
.dashboard-body {
padding: 28px 0 40px;
}
.dashboard-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 24px;
align-items: start;
}
.sidebar-card {
position: sticky;
top: 98px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(230, 236, 245, 0.9);
border-radius: 26px;
padding: 22px;
box-shadow: var(--card-shadow);
backdrop-filter: blur(10px);
}
.seller-profile-box {
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid #eef2f7;
}
.seller-profile-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.seller-profile-avatar {
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary) 0%, #5f7fff 100%);
color: #fff;
font-size: 18px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.seller-profile-info h5 {
font-size: 18px;
font-weight: 800;
margin: 0 0 3px;
color: var(--text-dark);
}
.seller-profile-info p {
font-size: 13px;
color: var(--text-light);
margin: 0;
}
.seller-email {
font-size: 13px;
color: var(--text-light);
word-break: break-word;
margin: 0;
}
.sidebar-menu {
display: grid;
gap: 10px;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border-radius: 16px;
background: #f8fbff;
border: 1px solid #e8eef8;
color: #334155;
font-size: 14px;
font-weight: 700;
transition: all 0.25s ease;
}
.sidebar-link i {
font-size: 18px;
}
.sidebar-link.active,
.sidebar-link:hover {
background: linear-gradient(135deg, var(--primary) 0%, #537bff 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 10px 20px rgba(47, 87, 239, 0.18);
}
.content-area {
min-width: 0;
}
.glass-card {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(230, 236, 245, 0.9);
border-radius: 26px;
box-shadow: var(--card-shadow);
backdrop-filter: blur(10px);
}
.welcome-card {
padding: 28px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.welcome-card::before {
content: "";
position: absolute;
right: -40px;
top: -40px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(47, 87, 239, 0.08);
}
.welcome-badge {
display: inline-block;
padding: 8px 14px;
border-radius: 999px;
background: #edf3ff;
color: var(--primary);
font-size: 13px;
font-weight: 700;
margin-bottom: 14px;
}
.welcome-title {
font-size: 34px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 8px;
color: var(--text-dark);
}
.welcome-text {
font-size: 15px;
line-height: 1.8;
color: var(--text-light);
max-width: 760px;
margin: 0;
}
.stats-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-bottom: 24px;
}
.stat-card {
padding: 22px;
transition: all 0.25s ease;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--card-shadow-hover);
}
.stat-icon {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 16px;
background: #edf3ff;
color: var(--primary);
}
.stat-label {
font-size: 14px;
color: var(--text-light);
margin-bottom: 8px;
font-weight: 600;
}
.stat-value {
font-size: 34px;
font-weight: 800;
line-height: 1;
color: var(--text-dark);
margin-bottom: 6px;
}
.stat-note {
font-size: 12px;
color: #94a3b8;
}
.section-card {
padding: 24px;
}
.section-title {
font-size: 24px;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 18px;
}
.quick-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.quick-card {
display: block;
padding: 22px;
border-radius: 22px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid #e7edf6;
color: var(--text-dark);
transition: all 0.25s ease;
height: 100%;
}
.quick-card:hover {
transform: translateY(-4px);
box-shadow: var(--card-shadow-hover);
border-color: #dbe6ff;
}
.quick-icon {
width: 54px;
height: 54px;
border-radius: 18px;
background: #edf3ff;
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 16px;
}
.quick-card h5 {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
color: var(--text-dark);
}
.quick-card p {
font-size: 14px;
color: var(--text-light);
line-height: 1.8;
margin: 0;
}
.mobile-offcanvas .offcanvas-body {
padding: 20px;
background: #f8fbff;
}
.mobile-offcanvas .offcanvas-header {
border-bottom: 1px solid #eef2f7;
padding: 18px 20px;
}
.mobile-offcanvas .offcanvas-title {
font-size: 22px;
font-weight: 800;
color: var(--primary);
}
.mobile-offcanvas .offcanvas-title span {
color: var(--text-dark);
}
.footer-note {
text-align: center;
color: #7b8da8;
font-size: 13px;
margin-top: 24px;
}
@media (max-width: 1199px) {
.stats-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quick-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.hamburger-btn {
display: inline-flex;
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.sidebar-desktop {
display: none;
}
.welcome-title {
font-size: 28px;
}
.topbar-user-info {
display: none;
}
}
@media (max-width: 767px) {
.dashboard-body {
padding: 18px 0 28px;
}
.dashboard-topbar-inner {
min-height: 66px;
}
.brand-logo {
font-size: 22px;
}
.welcome-card,
.stat-card,
.section-card {
padding: 18px;
border-radius: 20px;
}
.welcome-title {
font-size: 24px;
}
.stats-row,
.quick-grid {
grid-template-columns: 1fr;
}
.topbar-right {
gap: 8px;
}
.topbar-logout {
padding: 0 12px;
font-size: 13px;
}
.topbar-logout span {
display: none;
}
}
.sidebar-desktop {
position: sticky;
top: 96px;
align-self: start;
}
.sidebar-card {
position: sticky;
top: 96px;
}