<style>
/* 1. FONTS & VARIABLES */
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');
:root {
--track-pink: #ff8fa3;
--track-dark: #2b2b2b;
--track-bg: #fffcfd;
}
/* 2. MAIN SECTION */
.mws-track-section {
padding: 100px 20px;
background: #FFFFF;
font-family: 'Plus Jakarta Sans', sans-serif;
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Background Texture */
.mws-track-grain {
position: absolute;
inset: 0;
opacity: 0.05;
background-image: url("https://grainy-gradients.vercel.app/noise.svg");
pointer-events: none;
z-index: 0;
}
/* 3. TRACKING CARD */
.mws-track-card {
position: relative;
z-index: 2;
background: #ffffff;
border: 1px solid #f0f0f0;
padding: 60px 40px;
max-width: 550px;
width: 100%;
border-radius: 20px;
text-align: center;
box-shadow: 0 20px 50px rgba(0,0,0,0.03);
}
/* Pink Top Bar accent */
.mws-track-card::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--track-pink);
border-radius: 0 0 4px 4px;
}
.mws-track-icon {
width: 60px; height: 60px;
background: #fff5f8;
color: var(--track-pink);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
}
.mws-track-icon svg { width: 30px; height: 30px; fill: currentColor; }
.mws-track-title {
font-family: 'Tenor Sans', sans-serif;
font-size: 32px;
color: var(--track-dark);
margin-bottom: 10px;
}
.mws-track-text {
font-size: 15px;
color: #666;
margin-bottom: 30px;
line-height: 1.6;
}
/* 4. INPUT FIELD STYLING */
.mws-input-group {
position: relative;
margin-bottom: 20px;
}
.mws-track-input {
width: 100%;
padding: 16px 20px 16px 50px; /* Space for icon */
font-size: 16px;
border: 1px solid #e0e0e0;
border-radius: 50px;
outline: none;
transition: all 0.3s ease;
background: #fdfdfd;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.mws-track-input:focus {
border-color: var(--track-pink);
background: #fff;
box-shadow: 0 0 0 4px rgba(214, 122, 143, 0.1);
}
.mws-input-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #bbb;
pointer-events: none;
width: 18px;
height: 18px;
}
/* 5. BUTTON STYLING (Fixed White Issue) */
.mws-track-btn {
width: 100%;
padding: 16px;
background-color: var(--track-dark) !important; /* Force Black */
color: #ffffff !important; /* Force White Text */
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.mws-track-btn:hover {
background-color: var(--track-pink) !important; /* Pink on Hover */
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(214, 122, 143, 0.2);
}
.mws-btn-arrow { width: 18px; height: 18px; fill: currentColor; }
/* 6. HELPER TEXT */
.mws-helper-text {
margin-top: 20px;
font-size: 13px;
color: #999;
}
/* RESPONSIVE */
@media (max-width: 600px) {
.mws-track-section { padding: 60px 15px; }
.mws-track-card { padding: 40px 20px; }
.mws-track-title { font-size: 28px; }
}
</style>
<section class="mws-track-section">
<div class="mws-track-grain"><br></div>
<div class="mws-track-card">
<div class="mws-track-icon"><svg viewbox="0 0 24 24"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></svg></div>
<h2 class="mws-track-title">Track Your Order</h2>
<p class="mws-track-text">Enter your Leopards tracking number below to check the real-time status of your order.</p>
<div class="mws-input-group">
<svg fill="currentColor" viewbox="0 0 24 24" class="mws-input-icon"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg> <input placeholder="Enter Tracking ID (e.g. PX123...)" class="mws-track-input" id="trackingNumber" type="text">
</div>
<button class="mws-track-btn"> Track Order <svg viewbox="0 0 24 24" class="mws-btn-arrow"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path></svg> </button>
<p class="mws-helper-text">Tracking information may take 6–12 hours to appear after dispatch.</p>
</div>
</section>
<p> </p>