<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>WapKiz CSS Theme – Clean Mobile UI</title><style>:root{--bg:#0f1115;--card:#151922;--elev:#1a2030;--text:#e6eaf2;--muted:#a7b0c0;--brand:#5ee1b3;--brand-ink:#0d1b14;--stroke:#2a3142;--danger:#ff6b6b;--warning:#ffb84d;--success:#5cd67a;--radius:16px;--shadow:0 8px 24px rgba(0,0,0,.25);--shadow-soft:0 4px 12px rgba(0,0,0,.18);--font:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";}@media (prefers-color-scheme:light){:root{--bg:#f6f7fb;--card:#ffffff;--elev:#ffffff;--text:#0f1320;--muted:#5a6172;--brand:#15b88a;--brand-ink:#ffffff;--stroke:#e5e8ef;--shadow:0 8px 24px rgba(16,24,40,.08);--shadow-soft:0 4px 12px rgba(16,24,40,.06);}}*, *::before, *::after{box-sizing:border-box;}html, body{height:100%;}body{margin:0;font-family:var(--font);background:radial-gradient(1200px 800px at 80% -10%, rgba(94,225,179,.15), transparent 60%),radial-gradient(1000px 700px at -10% 10%, rgba(94,225,179,.10), transparent 50%),var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}a{color:var(--brand);text-decoration:none;}a:hover{text-decoration:underline;}img{max-width:100%;display:block;border-radius:calc(var(--radius) - 6px);}.container{width:100%;max-width:960px;margin:0 auto;padding:16px;}.topbar{position:sticky;top:0;z-index:50;background:rgba(15,17,21,.6);backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke);}.topbar-inner{display:flex;align-items:center;gap:12px;padding:12px 16px;}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;font-size:1.1rem;}.brand-badge{width:28px;height:28px;border-radius:10px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:900;box-shadow:var(--shadow-soft);}.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--stroke);border-radius:999px;padding:8px 12px;}.search input{background:transparent;border:none;outline:none;color:var(--text);width:160px;}.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid var(--stroke);background:linear-gradient(180deg, var(--elev), var(--card));color:var(--text);font-weight:600;text-decoration:none;cursor:pointer;transition:transform .06s ease, box-shadow .2s ease, background .2s;}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft);}.btn:active{transform:translateY(0);}.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:transparent;box-shadow:var(--shadow-soft);}.btn.ghost{background:transparent;}.btn.block{width:100%;}.btn.sm{padding:8px 12px;font-size:.9rem;}.section{padding:20px;background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow-soft);}.section + .section{margin-top:16px;}.card{background:linear-gradient(180deg, var(--elev), var(--card));border:1px solid var(--stroke);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-soft);}.grid{display:grid;gap:12px;}.grid.cols-2{grid-template-columns:repeat(2, minmax(0, 1fr));}.grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr));}@media (max-width:640px){.grid.cols-2, .grid.cols-3{grid-template-columns:1fr;}.search input{width:120px;}}.list{list-style:none;margin:0;padding:0;}.list .item{display:flex;align-items:center;justify-content:space-between ;gap:12px;padding:14px 12px;border-radius:12px;border:1px solid var(--stroke);background:linear-gradient(180deg, var(--elev), var(--card));}.list .item + .item{margin-top:10px;}.item .meta{color:var(--muted);font-size:.9rem;}.badge{display:inline-block;padding:6px 10px;font-size:.8rem;border-radius:999px;background:var(--elev);border:1px solid var(--stroke);color:var(--muted);}.badge.success{background:rgba(92,214,122,.12);color:#88e2a1;border-color:rgba(92,214,122,.3);}.badge.warn{background:rgba(255,184,77,.12);color:#ffd08a;border-color:rgba(255,184,77,.3);}.badge.danger{background:rgba(255,107,107,.12);color:#ff9c9c;border-color:rgba(255,107,107,.3);}.field{display:flex;flex-direction:column;gap:8px;}.input, .select, .textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke);background:var(--elev);color:var(--text);outline:none;transition:border-color .15s ease, box-shadow .2s ease;}.input:focus, .select:focus, .textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(94,225,179,.2);}.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:var(--radius);}.table thead th{text-align:left;padding:12px;font-size:.85rem;color:var(--muted);background:var(--elev);border-bottom:1px solid var(--stroke);}.table tbody td{padding:12px;border-bottom:1px solid var(--stroke);}.table tbody tr:hover{background:rgba(94,225,179,.05);}.alert{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--stroke);background:linear-gradient(180deg, var(--elev), var(--card));}.alert.success{border-color:rgba(92,214,122,.35);}.alert.warn{border-color:rgba(255,184,77,.35);}.alert.danger{border-color:rgba(255,107,107,.35);}.footer{margin-top:24px;padding:16px;border-top:1px solid var(--stroke);color:var(--muted);text-align:center;}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:24px}.center{text-align:center;}.right{text-align:right;}.muted{color:var(--muted);}.title{font-size:1.25rem;font-weight:800;letter-spacing:.2px;}.subtitle{font-size:.95rem;color:var(--muted);}</style></head><body><!-- Topbar --><header class="topbar"><div class="topbar-inner container"><div class="brand"><div class="brand-badge">WK</div>WapKiz Mint UI</div><form class="search" role="search"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M11 4a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm8.5 14.5-3.2-3.2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><input type="search" placeholder="Search..." /></form></div></header><main class="container"><!-- Hero --><section class="section"><div class="grid cols-2"><div><div class="badge">Theme</div><h1 class="title mt-2">Clean, fast, mobile‑first UI</h1><p class="subtitle mt-1">Drop this CSS into your WapKiz site. Customize colors using the variables at the top.</p><div class="mt-3"><a class="btn primary" href="#">Get Started</a><a class="btn ghost" href="#features">Features</a></div></div><div class="card"><img src="https://picsum.photos/560/300" alt="demo" /><p class="muted mt-1">Image placeholder – replace with your banner.</p></div></div></section><!-- Features / Cards --><section id="features" class="section"><div class="grid cols-3"><div class="card"><div class="badge success">Responsive</div><h3 class="mt-2">Mobile‑first</h3><p class="muted">Grids collapse to single column on small screens automatically.</p></div><div class="card"><div class="badge warn">Customizable</div><h3 class="mt-2">Easy theming</h3><p class="muted">Tweak <code>:root</code> color variables to match your brand.</p></div><div class="card"><div class="badge">Light/Dark</div><h3 class="mt-2">Auto mode</h3><p class="muted">Respects the user’s system preference for light or dark.</p></div></div></section><!-- List / Menu demo --><section class="section"><h2 class="title">Quick Links</h2><ul class="list mt-2"><li class="item"><span>Downloads</span> <span class="meta">v2.3</span></li><li class="item"><span>Premium Themes</span> <span class="badge">New</span></li><li class="item"><span>Community</span> <span class="meta">12k members</span></li></ul><div class="mt-3 right"><a class="btn sm" href="#">View all</a></div></section><!-- Form demo --><section class="section"><h2 class="title">Subscribe</h2><p class="subtitle">Get updates and freebies.</p><form class="mt-2 grid cols-2"><div class="field"><label>Email</label><input class="input" type="email" placeholder="you@domain.com" required /></div><div class="field"><label>Name</label><input class="input" type="text" placeholder="Your name" /></div><div class="field" style="grid-column:1/-1;"><label>Message</label><textarea class="textarea" rows="3" placeholder="Write something..."></textarea></div><div style="grid-column:1/-1" class="mt-1"><button class="btn primary block" type="submit">Subscribe</button></div></form></section><!-- Table + Alerts --><section class="section"><div class="grid cols-2"><div><h2 class="title">Pricing</h2><table class="table mt-2"><thead><tr><th>Plan</th><th>Price</th><th>Notes</th></tr></thead><tbody><tr><td>Starter</td><td>Free</td><td class="muted">Basic features</td></tr><tr><td>Pro</td><td>$5/mo</td><td class="muted">For growing sites</td></tr><tr><td>Elite</td><td>$12/mo</td><td class="muted">Unlimited power</td></tr></tbody></table></div><div><div class="alert success"><strong>Success:</strong> Your profile was saved.</div><div class="alert warn mt-2"><strong>Heads up:</strong> Storage is 80% full.</div><div class="alert danger mt-2"><strong>Error:</strong> Payment failed. Try again.</div></div></div></section><!-- Footer --><footer class="footer">© <span id="year"></span> YourSite on WapKiz • <a href="#">Privacy</a> • <a href="#">Terms</a></footer></main><script>// set yeardocument.getElementById('year').textContent = new Date().getFullYear();</script></body></html>