Cards
Basic cards
KPI cards
Total Orders1,248
▲ 12% vs last week
RevenueSAR 84,200
▲ 8% vs last week
Pending37
▼ 3% vs last week
Customers612
▲ 5% vs last week
Feature cards
Hero & action cards
Welcome back, Admin
You have 8 new orders and 3 items running low on stock today.
Quick actions
Profile & list cards
AK
Ahmed Khan
ActiveRecent Orders
View all
AK
Order #1012Ahmed Khan · Dine In
Paid
SAR 86.00
SR
Order #1013Sara Raza · Takeaway
Preparing
SAR 42.50
MH
Order #1014Mona Hasan · Delivery
Unpaid
SAR 120.00
Product cards
Beef BurgerSAR 24.00
Chicken ShawarmaSAR 16.00
FriesSAR 8.00
ColaSAR 5.00
Cover cards
Popular
Grill Platter
Serves 4 · SAR 89.00
Fresh
Garden Salad
Serves 2 · SAR 32.00
Spicy
Wings Combo
12 pcs · SAR 45.00
/* ---------- Colour tokens (c-*) ---------- */
.c-blue {
--c: var(--blue-2563eb);
--bg: var(--blue-e0ebff);
}
.c-indigo {
--c: var(--indigo-2a2f8f);
--bg: var(--blue-e8ebff);
}
.c-purple {
--c: var(--indigo-5b3fd1);
--bg: var(--indigo-efeaff);
}
.c-green {
--c: var(--green-168a57);
--bg: var(--green-dcf5e8);
}
.c-orange {
--c: var(--orange-b45f06);
--bg: var(--orange-fff1de);
}
.c-red {
--c: var(--red-d63a3a);
--bg: var(--red-fde4e4);
}
.c-yellow {
--c: var(--yellow-9a6b00);
--bg: var(--yellow-fff3c4);
}
.c-teal {
--c: var(--teal-0f8a8a);
--bg: var(--teal-d9f4f4);
}
.c-gray {
--c: var(--blue-5d6680);
--bg: var(--blue-eceff6);
}
/* ---------- Basic card ---------- */
.pg-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--card);
box-shadow: var(--shadow2);
}
.pg-card-h {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 16px;
}
.pg-card-h h6 {
margin: 0;
font-family: var(--font-head);
font-weight: 800;
color: var(--brand-deep);
}
.pg-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 12px 16px;
font-size: .85rem;
color: var(--muted);
}
.pg-card-b {
padding: 14px 16px;
}
.pg-link {
font-size: .8rem;
font-weight: 700;
color: var(--brand);
text-decoration: none;
}
.pg-link:hover {
text-decoration: underline;
}
.pg-card-table {
overflow: hidden;
transition: box-shadow .25s ease;
}
.pg-card-table:hover {
box-shadow: 0 14px 34px rgba(var(--blue-1e2978-rgb),.10);
}
.pg-card-table .pg-card-h h6 {
display: flex;
align-items: center;
gap: 8px;
}
.pg-card-table .pg-card-h h6 i {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: .9rem;
color: var(--brand-deep);
background: linear-gradient(135deg,var(--blue-eef1ff),var(--blue-dfe6ff));
}
.pg-card-table .pg-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 600;
transition: gap .2s ease;
}
.pg-card-table .pg-link:hover {
gap: 8px;
}
.t-amt {
color: var(--blue-1f2a55);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ---------- KPI card ---------- */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
gap: 8px;
margin-bottom: 10px;
}
.kpi {
--tint: var(--blue-eef1ff);
display: flex;
align-items: center;
gap: 14px;
padding: 7px 16px;
border: 1px solid var(--line);
border-radius: 8px;
background: linear-gradient(135deg,var(--tint),var(--white) 72%);
transition: transform .25s var(--ease),box-shadow .25s var(--ease);
}
.kpi:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}
.kpi.is-green {
--tint: var(--green-e6f8ee);
border-color: var(--green-d5f3e2);
}
.kpi.is-amber {
--tint: var(--yellow-fff4de);
border-color: var(--orange-ffe6b8);
}
.kpi.is-red {
--tint: var(--red-ffecee);
}
.kpi-ic {
flex: none;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--brand-soft);
color: var(--brand);
font-size: 1.3rem;
}
.kpi.is-green .kpi-ic {
background: var(--green-d5f3e2);
color: var(--s-open-t);
}
.kpi.is-amber .kpi-ic {
background: var(--orange-ffe6b8);
color: var(--orange-b86e00);
}
.kpi.is-red .kpi-ic {
background: var(--red-ffd9dd);
color: var(--red-d4303a);
}
.kpi small {
display: block;
font-size: .8rem;
color: var(--muted);
}
.kpi b {
font-family: var(--font-head);
font-weight: 800;
font-size: 1.2rem;
letter-spacing: -.4px;
color: var(--brand-deep);
}
.kpi.is-purple {
--tint: var(--indigo-f1ecff);
border-color: var(--indigo-e3d9ff);
}
.kpi.is-purple .kpi-ic {
background: var(--indigo-e3d9ff);
color: var(--indigo-6d4ce0);
}
.kpi.is-teal {
--tint: var(--teal-e4f7f8);
}
.kpi.is-teal .kpi-ic {
background: var(--teal-c4eef2);
color: var(--teal-0b8691);
}
.kpi small + b + small,
.kpi b + small {
margin-top: 1px;
}
.trend {
margin-top: 2px;
font-size: .72rem;
color: var(--muted);
}
.trend .up {
font-weight: 700;
color: var(--green);
}
.trend .dn {
font-weight: 700;
color: var(--red);
}
/* ---------- Status, tag & avatar chips ---------- */
.av {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg,var(--brand-2),var(--brand));
color: var(--white);
font-family: var(--font-head);
font-weight: 800;
font-size: .8rem;
box-shadow: 0 6px 12px -6px rgba(var(--brand-rgb),.7);
}
.av.is-amber {
background: linear-gradient(135deg,var(--orange-ffbf47),var(--orange-f08a00));
}
.av.is-green {
background: linear-gradient(135deg,var(--green-34c98a),var(--green-0e9a56));
}
.t-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 8px;
font-size: .76rem;
font-weight: 600;
white-space: nowrap;
color: var(--c,var(--blue-5d6680));
background: var(--bg);
}
.t-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 20px;
font-size: .74rem;
font-weight: 700;
white-space: nowrap;
color: var(--c,var(--blue-5d6680));
background: var(--bg);
}
.t-status::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.t-status.live::before {
animation: tPulse 1.4s ease-in-out infinite;
}
/* ---------- Profile card ---------- */
.box {
border: 1px solid var(--line);
border-radius: 12px;
padding: 1rem;
margin-bottom: 0.6rem;
background: var(--card);
}
.box h6 {
font-weight: 700;
font-size: 1.05rem;
color: var(--blue-0e2a66);
margin-bottom: .75rem;
}
.box {
border: 1px solid var(--line);
border-radius: 8px;
background: var(--card);
box-shadow: 0 1px 2px rgba(var(--text-rgb),.03);
transition: box-shadow .3s var(--ease), border-color .3s;
}
.box:hover {
box-shadow: 0 10px 24px -14px rgba(var(--blue-283478-rgb),.3);
border-color: var(--blue-d5dcf2);
}
.box h6 {
font-weight: 800;
color: var(--brand-deep);
}
.pf-card {
padding: 0 0 1.2rem;
overflow: hidden;
}
.pf-cover {
height: 90px;
background: linear-gradient(135deg,var(--brand),var(--blue-0f2a6b));
}
.pf-avatar-wrap {
position: relative;
width: 96px;
margin: -48px auto 0;
}
.pf-status {
display: inline-block;
padding: .2rem .7rem;
border-radius: 2rem;
font-size: .75rem;
font-weight: 600;
background: var(--green-dcfce7);
color: var(--green-15803d);
}
.pf-status i {
font-size: .5rem;
vertical-align: middle;
}
.pf-meta {
padding: 0 1.2rem;
}
.pf-meta li {
display: flex;
align-items: center;
gap: .6rem;
padding: .6rem 0;
border-bottom: 1px dashed var(--blue-e2e8f0);
font-size: .85rem;
}
.pf-meta li:last-child {
border-bottom: 0;
}
.pf-meta i {
color: var(--brand);
font-size: 1rem;
}
.pf-meta span {
color: var(--blue-64748b);
flex: 1;
}
.pf-meta b {
font-weight: 600;
color: var(--blue-0f172a);
}
.pf-card {
transition: box-shadow .2s ease;
}
/* ---------- Product card ---------- */
.pi {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
box-shadow: var(--shadow);
transition: transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s;
}
.pi:hover {
transform: translateY(-4px);
border-color: rgba(var(--brand-rgb),.4);
box-shadow: var(--shadow-hover);
}
.pi-img {
aspect-ratio: 4/3;
background: linear-gradient(135deg,var(--blue-e9edff),var(--white));
overflow: hidden;
}
.pi-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.pi:hover .pi-img img {
transform: scale(1.08);
}
.pi-b {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
}
.pi-b b {
display: block;
font-family: var(--font-head);
font-size: .88rem;
line-height: 1.2;
}
.pi-b small {
font-weight: 700;
color: var(--green);
}
.pi-add {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 0;
border-radius: 11px;
background: linear-gradient(135deg,var(--brand-2),var(--brand));
color: var(--white);
box-shadow: 0 8px 14px -8px rgba(var(--brand-rgb),.8);
transition: transform .2s;
}
.pi-add:hover {
transform: scale(1.12) rotate(90deg);
}
/* ---------- Action tiles ---------- */
.oc-ico {
flex: none;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--brand-soft);
color: var(--brand);
font-size: 1.05rem;
transition: transform .3s var(--ease);
}
.oc-ico.is-green {
background: var(--green-e3f7ec);
color: var(--s-ready-t);
}
.oc-ico.is-red {
background: var(--red-ffe8ea);
color: var(--red-d4303a);
}
.oc-ico.is-amber {
background: var(--orange-fff1d9);
color: var(--orange-c27300);
}
.oc-ico.is-purple {
background: var(--indigo-efeaff);
color: var(--indigo-6d4ce0);
}
.oc-ico.is-teal {
background: var(--teal-dff6f8);
color: var(--teal-0b8691);
}
.oc-grid3 {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 8px;
}
.oc-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 6px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
font: inherit;
font-weight: 700;
font-size: .8rem;
color: var(--text);
text-align: center;
transition: transform .25s var(--ease),border-color .2s,box-shadow .25s;
}
.oc-tile .oc-ico {
width: 40px;
height: 40px;
font-size: 1.15rem;
}
.oc-tile:hover {
transform: translateY(-3px);
border-color: rgba(var(--brand-rgb),.4);
box-shadow: var(--shadow-hover);
}
.oc-tile:hover .oc-ico {
transform: scale(1.1) rotate(-5deg);
}
/* ---------- Card buttons (btn-solid) ---------- */
.btn-solid {
background: linear-gradient(135deg,var(--blue-1c63f0),var(--blue-0f49c4));
color: var(--white);
border: 0;
font-weight: 600;
box-shadow: 0 4px 12px rgba(var(--blue-1456d9-rgb),.3);
}
.btn-solid:hover {
color: var(--white);
box-shadow: 0 6px 16px rgba(var(--blue-1456d9-rgb),.4);
transform: translateY(-1px);
}
.btn-solid {
background: linear-gradient(135deg, var(--brand-2), var(--brand) 55%, var(--brand-deep));
background-size: 160% 160%;
background-position: 0% 50%;
box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb),.65), inset 0 1px 0 rgba(var(--white-rgb),.25);
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
}
.btn-solid:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow: 0 14px 24px -10px rgba(var(--brand-rgb),.7), inset 0 1px 0 rgba(var(--white-rgb),.3);
}
@keyframes tPulse {
0% {
box-shadow: 0 0 0 0 rgba(var(--blue-2563eb-rgb),.55)
}
70% {
box-shadow: 0 0 0 6px rgba(var(--blue-2563eb-rgb),0)
}
100% {
box-shadow: 0 0 0 0 rgba(var(--blue-2563eb-rgb),0)
}
}
/* ---------- New card classes (fc-*) ---------- */
/* 1) Feature card (c-blue / c-purple / c-green ... zaroor lagayen) */
.fc-feature {
height: 100%;
padding: 1.25rem;
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow2);
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
.fc-feature:hover {
transform: translateY(-4px);
border-color: rgba(var(--brand-rgb), .35);
box-shadow: var(--shadow2-hover);
}
.fc-feature-ic {
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin-bottom: .9rem;
border-radius: 14px;
font-size: 1.3rem;
color: var(--c);
background: var(--bg);
}
.fc-feature h6 {
font-family: var(--font-head);
font-weight: 800;
color: var(--brand-deep);
}
.fc-feature p {
margin-bottom: .6rem;
font-size: .85rem;
color: var(--muted);
}
/* 2) Gradient hero / welcome card */
.fc-hero {
position: relative;
overflow: hidden;
padding: 1.5rem;
border-radius: 16px;
color: var(--white);
background: linear-gradient(135deg, var(--brand-deep), var(--brand) 60%, var(--brand-2));
box-shadow: 0 18px 30px -16px rgba(var(--brand-rgb), .7);
}
.fc-hero::after {
content: "";
position: absolute;
right: -50px;
top: -50px;
width: 190px;
height: 190px;
border-radius: 50%;
background: rgba(var(--white-rgb), .12);
}
.fc-hero > * {
position: relative;
z-index: 1;
}
.fc-hero h5 {
font-family: var(--font-head);
font-weight: 800;
}
.fc-hero p {
max-width: 38ch;
font-size: .88rem;
color: rgba(var(--white-rgb), .9);
}
.fc-hero .btn {
border: 0;
background: var(--white);
color: var(--brand-deep);
}
/* 3) Profile avatar (initials) - .pf-card ke andar */
.fc-avatar-lg {
display: grid;
place-items: center;
width: 96px;
height: 96px;
border: 4px solid var(--card);
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-2), var(--brand));
color: var(--white);
font-family: var(--font-head);
font-weight: 800;
font-size: 1.8rem;
box-shadow: 0 6px 18px rgba(var(--blue-0f172a-rgb), .18);
}
/* 4) List card rows */
.fc-row {
display: flex;
align-items: center;
gap: 12px;
padding: .75rem 1rem;
border-bottom: 1px dashed var(--blue-e8ecf6);
transition: background .2s;
}
.fc-row:last-child {
border-bottom: 0;
}
.fc-row:hover {
background: var(--blue-f6f8ff);
}
.fc-row .grow {
flex: 1;
min-width: 0;
}
.fc-row b {
display: block;
font-size: .88rem;
}
.fc-row small {
color: var(--muted);
}
/* 5) Cover card (image + overlay text). Image: style="--img:url(/img/x.jpg)" */
.fc-cover {
position: relative;
display: flex;
align-items: flex-end;
min-height: 190px;
padding: 1rem;
overflow: hidden;
border-radius: 16px;
color: var(--white);
background: linear-gradient(180deg, transparent 35%, rgba(var(--blue-14214d-rgb), .85)), var(--img, linear-gradient(135deg, var(--brand-2), var(--brand-deep)));
background-size: cover;
background-position: center;
box-shadow: var(--shadow);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fc-cover:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.fc-cover h6 {
margin: 0;
font-family: var(--font-head);
font-weight: 800;
}
.fc-cover small {
opacity: .85;
}
/* Section title (har card-group ke upar) */
.fc-section-title {
margin: 0 0 .75rem;
font-family: var(--font-head);
font-weight: 800;
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
/* Equal-height card helper: Bootstrap col ke andar card poori height le */
.pg-card.fc-flex { display: flex; flex-direction: column; height: 100%; }
.pg-card.fc-flex > .pg-card-b { flex: 1; }