body.home,
body.page-id-0 {
background: #151515;
}
body.home header,
body.home footer,
body.page-id-0 header,
body.page-id-0 footer {
display: none !important;
}
body.home .site-main,
body.home .wp-site-blocks,
body.page-id-0 .site-main,
body.page-id-0 .wp-site-blocks {
margin: 0 !important;
padding: 0 !important;
}
.demo-page {
–bg: #151515;
–panel: #1c1c1c;
–text: #f4f4f1;
–muted: #b7b7b0;
–line: rgba(255, 255, 255, 0.08);
–accent: #e2f90f;
–shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
min-height: 100vh;
margin: -1.5rem;
padding: 0;
background:
radial-gradient(circle at 70% 15%, rgba(226, 249, 15, 0.08), transparent 20%),
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.04), transparent 18%),
linear-gradient(180deg, #181818 0%, #121212 100%);
color: var(–text);
font-family: ‘Space Grotesk’, ‘Trebuchet MS’, sans-serif;
}
.demo-page * { box-sizing: border-box; }
.demo-page a { color: inherit; text-decoration: none; }
.demo-topbar {
background: #fff;
color: #0f0f0f;
text-align: center;
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
.demo-header,
.demo-section,
.demo-contact {
width: min(1240px, calc(100% – 2rem));
margin: 0 auto;
}
.demo-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 0 1.25rem;
}
.demo-brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-weight: 700;
text-transform: lowercase;
}
.demo-brand-mark {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: grid;
place-items: center;
color: #151515;
background: var(–accent);
}
.demo-brand-text { font-size: 1.75rem; color: var(–accent); }
.demo-nav { display: flex; gap: 2rem; color: rgba(255,255,255,.9); }
.demo-hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 2rem;
align-items: center;
min-height: calc(100vh – 9rem);
padding: 2.5rem 0 3rem;
}
.demo-eyebrow,
.demo-label { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; color: rgba(255,255,255,.58); }
.demo-hero h1,
.demo-title { margin: 0; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; }
.demo-hero h1 { max-width: 10ch; font-size: clamp(3rem, 5vw, 5.2rem); }
.demo-lede,
.demo-copy p,
.demo-card p { color: var(–muted); line-height: 1.7; font-size: 1.05rem; }
.demo-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.demo-btn {
display: inline-flex; align-items: center; justify-content: center; min-height: 3.9rem; padding: 0 1.6rem;
border: 1px solid transparent; font-weight: 700; letter-spacing: .02em;
}
.demo-btn.primary { background: var(–accent); color: #141414; }
.demo-btn.secondary { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.02); }
.demo-meta { display:flex; flex-wrap:wrap; gap: 1rem 2rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(–line); }
.demo-meta strong { display:block; font-size:1rem; }
.demo-meta span { color: var(–muted); font-size:.94rem; }
.demo-art { position: relative; min-height: 42rem; perspective: 1200px; }
.demo-glow { position:absolute; border-radius:50%; filter: blur(36px); }
.demo-glow.one { top:12%; right:5%; width:18rem; height:18rem; background: rgba(226, 249, 15, 0.22); }
.demo-glow.two { right:0; bottom:5%; width:14rem; height:14rem; background: rgba(226, 249, 15, 0.12); }
.demo-screen { position:absolute; border:1px solid rgba(226, 249, 15, 0.26); background: linear-gradient(180deg, rgba(28,28,28,.96), rgba(20,20,20,.94)); box-shadow: var(–shadow); }
.demo-screen.main { inset:14% 0 12% 22%; border-radius:1.25rem; transform: rotateX(11deg) rotateY(-19deg) rotateZ(-1deg); }
.demo-topbar2 { height:2.5rem; border-bottom:1px solid rgba(255,255,255,.06); border-radius:1.25rem 1.25rem 0 0; }
.demo-content { display:grid; grid-template-columns: 1.2fr .9fr; gap:1rem; padding:1.2rem; }
.demo-card { border-radius:1rem; background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); padding:1rem; }
.demo-card.wide { grid-column: span 2; }
.demo-kicker { display:block; margin-bottom:.9rem; color: rgba(255,255,255,.62); font-size:.82rem; }
.demo-bar-row { display:grid; gap:.65rem; }
.demo-bar-row span { height:.9rem; border-radius:999px; background: linear-gradient(90deg, rgba(226,249,15,.82), rgba(226,249,15,.18)); }
.demo-bar-row span:nth-child(2) { width:68%; }
.demo-bar-row span:nth-child(3) { width:48%; }
.demo-chart { display:flex; align-items:end; gap:.5rem; height:11rem; padding-top:.5rem; }
.demo-chart i { flex:1; border-radius:999px 999px 0 0; background: linear-gradient(180deg, rgba(226,249,15,.95), rgba(226,249,15,.12)); }
.demo-chart i:nth-child(1){height:22%}.demo-chart i:nth-child(2){height:48%}.demo-chart i:nth-child(3){height:78%}.demo-chart i:nth-child(4){height:56%}.demo-chart i:nth-child(5){height:86%}
.demo-checklist ul { list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.demo-checklist li::before { content:’✓’; color: var(–accent); margin-right:.6rem; }
.demo-floor { position:absolute; inset:auto 0 0; height:18rem; background: linear-gradient(to right, rgba(226,249,15,.07) 1px, transparent 1px), linear-gradient(to top, rgba(226,249,15,.07) 1px, transparent 1px); background-size:2.6rem 2.6rem; transform: perspective(800px) rotateX(70deg) translateY(9rem); transform-origin: bottom center; opacity:.7; }
.demo-showcase { display:grid; grid-template-columns: .95fr 1.05fr; gap:3rem; align-items:center; padding:5rem 0; }
.demo-photo { min-height:36rem; display:grid; place-items:center; }
.demo-desk { position:relative; width:min(100%, 36rem); aspect-ratio:.84; border-radius:1.5rem; background: linear-gradient(180deg, #f6eddc 0%, #ddb78a 56%, #9d6f44 100%); box-shadow: var(–shadow); overflow:hidden; }
.demo-tablet { position:absolute; inset:24% 18% 20% 14%; border-radius:1.5rem; background:#0e0e0e; border:.6rem solid #0a0a0a; transform: rotate(-7deg); }
.demo-tablet-screen { position:absolute; inset:2.2rem .8rem .8rem; border-radius:1rem; background:#f9faf7; }
.demo-widget { position:absolute; border-radius:.95rem; background: linear-gradient(180deg, #fff, #f0f3f8); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.demo-widget.ring { left:2.4rem; top:1.8rem; width:7rem; height:7rem; border-radius:50%; background: radial-gradient(circle at center, transparent 0 28%, #6eb7ff 29% 40%, transparent 41% 100%), conic-gradient(from 40deg, #77c7ff, #82e4b0, #6eb7ff); }
.demo-widget.line { left:10rem; top:1.9rem; width:10rem; height:6rem; background: linear-gradient(180deg, transparent 0 18%, #e8eef8 18% 20%, transparent 20%), linear-gradient(135deg, transparent 0 24%, #3ea1ff 24% 28%, transparent 28%), linear-gradient(135deg, transparent 0 43%, #6a7dff 43% 47%, transparent 47%), linear-gradient(135deg, transparent 0 63%, #82e4b0 63% 67%, transparent 67%); }
.demo-widget.grid { left:2.4rem; top:10rem; width:17.6rem; height:10rem; background: linear-gradient(90deg, transparent 0 13%, #d7e3f6 13% 15%, transparent 15%), linear-gradient(180deg, transparent 0 22%, #d7e3f6 22% 24%, transparent 24%), linear-gradient(90deg, transparent 0 36%, #d7e3f6 36% 38%, transparent 38%), linear-gradient(180deg, transparent 0 53%, #d7e3f6 53% 55%, transparent 55%), linear-gradient(90deg, transparent 0 59%, #d7e3f6 59% 61%, transparent 61%), linear-gradient(180deg, transparent 0 78%, #d7e3f6 78% 80%, transparent 80%); }
.demo-widget.pill { right:1.7rem; bottom:2rem; width:8.6rem; height:5rem; border-radius:1rem; background: radial-gradient(circle at 25% 35%, #f7d65a 0 16%, transparent 17%), linear-gradient(180deg, #f4f1e9, #e0dfd6); }
.demo-copy h2,
.demo-section h2,
.demo-contact h2 { max-width: 14ch; font-size: clamp(2rem, 3vw, 3.1rem); text-transform: uppercase; margin:0; }
.demo-benefits { display:grid; gap:1rem; margin-top:2rem; }
.demo-benefits article { display:grid; grid-template-columns:3rem 1fr; gap:1rem; align-items:start; padding:1rem 0; border-top:1px solid var(–line); }
.demo-benefits article:first-child { border-top: 0; padding-top: 0; }
.demo-benefits span { display:grid; place-items:center; width:3rem; height:3rem; border-radius:.8rem; background: rgba(226,249,15,.12); color: var(–accent); font-weight:700; }
.demo-products { padding:1rem 0 5rem; }
.demo-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:1.2rem; }
.demo-card.product { padding:1.5rem; border-radius:1.25rem; background: linear-gradient(180deg, rgba(33,33,33,.95), rgba(22,22,22,.95)); border:1px solid var(–line); box-shadow: var(–shadow); }
.demo-contact { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:2rem; margin-bottom:3rem; border-radius:1.5rem; border:1px solid var(–line); background: linear-gradient(135deg, rgba(226,249,15,.08), rgba(255,255,255,.03)); box-shadow: var(–shadow); }
@media (max-width: 1100px) {
.demo-hero, .demo-showcase, .demo-grid { grid-template-columns: 1fr; }
.demo-hero { min-height:auto; padding-top:1rem; }
.demo-art { min-height:34rem; }
.demo-photo { order:2; min-height:auto; }
.demo-copy { order:1; }
}
@media (max-width: 760px) {
.demo-header { flex-direction:column; align-items:flex-start; gap:1rem; }
.demo-nav { flex-wrap:wrap; gap:1rem 1.25rem; }
.demo-hero h1, .demo-copy h2, .demo-section h2, .demo-contact h2 { max-width:none; font-size:clamp(2.1rem, 8vw, 3rem); }
.demo-art { min-height:28rem; }
.demo-screen.main { inset:18% 0 12% 8%; transform: rotateX(12deg) rotateY(-14deg); }
.demo-contact { flex-direction:column; align-items:flex-start; }
}
Flash Sale: Up to 50% Off
Enterprise-Grade Architecture
Speed up business with production-ready apps
Koderstory builds practical full-stack app kits for teams who want to launch faster, control their own stack, and keep every workflow adaptable.
Own the system. Avoid SaaS lock-in.
Build from a ready foundation and keep full control over your workflow.
This test page mirrors the original vibe with a dark visual language, neon accent, and an editorial layout, but the content is adjusted for a demo environment.
01No recurring seat pressure
Keep usage predictable with a stack you can host on your own server or VPS.
Deploy anywhere
Move the app to your infrastructure and adapt it as the business grows.
Customize fast
Update UI, workflow, and integrations without rebuilding the whole system.
Our Products
Everything you need to prototype a real business platform.
Project management
Task board for delivery teams
Plan sprints, track milestones, and keep the entire team on the same page.
CRM
Simple pipeline with sharp focus
Capture leads, follow up quickly, and turn the customer journey into a repeatable flow.
Inventory
Operational visibility without spreadsheet chaos
Monitor stock movement, reduce overhead, and see what matters in one dashboard.