/* ── Self-contained token system ── */
.swp-wrap {
–swp-bg: #0f1117;
–swp-surface: #1a1d27;
–swp-surface2: #252836;
–swp-border: rgba(255,255,255,0.08);
–swp-text: #f1f5f9;
–swp-muted: #94a3b8;
–swp-dim: #64748b;
–swp-violet: #818cf8;
–swp-violet-dk: #6366f1;
–swp-green: #10b981;
–swp-amber: #f59e0b;
–swp-red: #f87171;
–swp-glow: rgba(99,102,241,0.22);
/* Terminal code panel */
–swp-term-bg: #0d1117;
–swp-term-text: #57f287;
–swp-term-border: rgba(87,242,135,0.18);
}
/* ── Reset all heading/text overrides from parent theme ── */
.swp-wrap,
.swp-wrap h1,
.swp-wrap h2,
.swp-wrap h3,
.swp-wrap p,
.swp-wrap span,
.swp-wrap button {
color: var(–swp-text) !important;
-webkit-text-fill-color: var(–swp-text) !important;
background-image: none !important;
background-clip: unset !important;
-webkit-background-clip: unset !important;
}
/* ── Outer wrapper ── */
.swp-wrap {
max-width: 860px;
margin: 0 auto;
padding: 60px 24px;
font-family: inherit;
text-align: center;
}
/* ── Hero heading ── */
.swp-heading {
font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
font-weight: 900 !important;
margin: 0 0 1rem !important;
letter-spacing: -0.5px;
line-height: 1.2;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Violet accent on last word */
.swp-heading .swp-accent {
color: var(–swp-violet) !important;
-webkit-text-fill-color: var(–swp-violet) !important;
}
/* ── Sub-text ── */
.swp-sub {
font-size: 1.05rem !important;
color: var(–swp-muted) !important;
-webkit-text-fill-color: var(–swp-muted) !important;
max-width: 580px;
margin: 0 auto 2rem;
line-height: 1.75;
}
/* ── Free badge ── */
.swp-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(16,185,129,0.12);
border: 1px solid rgba(16,185,129,0.3);
color: var(–swp-green) !important;
-webkit-text-fill-color: var(–swp-green) !important;
font-size: 0.82rem; font-weight: 800;
padding: 5px 14px; border-radius: 20px;
margin-bottom: 2.5rem;
}
/* ── iframe container ── */
.swp-frame-wrap {
position: relative;
border-radius: 20px; overflow: hidden;
border: 1px solid var(–swp-border);
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
margin-bottom: 2.5rem;
background: var(–swp-surface);
}
.swp-frame-wrap::before {
content: ”;
position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
background: linear-gradient(90deg, var(–swp-violet), var(–swp-green), var(–swp-amber));
}
/* Fake browser chrome */
.swp-browser-bar {
display: flex; align-items: center; gap: 8px;
padding: 12px 18px;
background: var(–swp-bg);
border-bottom: 1px solid var(–swp-border);
position: relative; z-index: 1;
}
.swp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.swp-dot-r { background: #f87171; }
.swp-dot-y { background: #fbbf24; }
.swp-dot-g { background: var(–swp-green); }
.swp-url-bar {
flex: 1;
background: var(–swp-surface);
border: 1px solid var(–swp-border);
border-radius: 6px;
padding: 5px 12px;
font-size: 0.72rem; font-weight: 600;
color: var(–swp-dim) !important;
-webkit-text-fill-color: var(–swp-dim) !important;
text-align: left; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.swp-frame-wrap iframe {
display: block;
width: 100%; height: 420px;
border: none;
}
/* ── Embed code panel — TERMINAL STYLE ── */
.swp-embed-panel {
background: var(–swp-term-bg);
border: 1px solid var(–swp-term-border);
border-radius: 22px; overflow: hidden;
position: relative;
text-align: left;
}
/* Green top stripe — distinct from violet page accent */
.swp-embed-panel::before {
content: ”;
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(–swp-green), #34d399, var(–swp-violet));
}
/* Terminal window dots row */
.swp-term-bar {
display: flex; align-items: center; gap: 7px;
padding: 12px 20px 0;
}
.swp-term-dot {
width: 10px; height: 10px; border-radius: 50%;
}
.swp-embed-body { padding: 16px 28px 28px; }
.swp-embed-panel h3 {
font-size: 0.92rem !important; font-weight: 800 !important;
margin: 0 0 4px !important;
display: flex; align-items: center; gap: 8px;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.swp-embed-hint {
font-size: 0.78rem;
color: #4b5563 !important;
-webkit-text-fill-color: #4b5563 !important;
margin: 0 0 14px;
}
/* ── Textarea (terminal look) ── */
.swp-code-wrap { position: relative; }
.swp-code-textarea {
width: 100%; box-sizing: border-box;
background: #161b22; /* GitHub dark bg */
border: 1px solid rgba(87,242,135,0.15);
border-radius: 12px;
padding: 16px 16px 52px;
font-family: ‘Courier New’, Consolas, ‘Fira Code’, monospace;
font-size: 0.79rem; line-height: 1.8;
color: var(–swp-term-text) !important; /* bright green — clearly distinct */
-webkit-text-fill-color: var(–swp-term-text) !important;
resize: none;
outline: none;
cursor: text;
transition: border-color 0.2s, box-shadow 0.2s;
min-height: 120px;
}
.swp-code-textarea:focus {
border-color: rgba(87,242,135,0.35);
box-shadow: 0 0 0 3px rgba(87,242,135,0.08);
}
.swp-code-textarea::selection {
background: rgba(87,242,135,0.2);
}
/* Copy button */
.swp-copy-btn {
position: absolute; bottom: 12px; right: 12px;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 18px; border-radius: 50px;
font-size: 0.78rem; font-weight: 800;
cursor: pointer; border: none; outline: none;
background: var(–swp-green);
color: #0a0f0d !important;
-webkit-text-fill-color: #0a0f0d !important;
box-shadow: 0 4px 14px rgba(16,185,129,0.3);
transition: all 0.2s; font-family: inherit;
z-index: 2;
}
.swp-copy-btn:hover {
background: #059669;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(16,185,129,0.4);
}
.swp-copy-btn.copied {
background: var(–swp-violet-dk);
color: #fff !important;
-webkit-text-fill-color: #fff !important;
box-shadow: 0 4px 14px var(–swp-glow);
}
/* ── Feature pills ── */
.swp-pills {
display: flex; gap: 10px; flex-wrap: wrap;
justify-content: center;
margin-top: 2.5rem;
}
.swp-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 20px;
font-size: 0.78rem; font-weight: 700;
background: rgba(255,255,255,0.03);
border: 1px solid var(–swp-border);
color: var(–swp-dim) !important;
-webkit-text-fill-color: var(–swp-dim) !important;
transition: border-color 0.2s, color 0.2s, -webkit-text-fill-color 0.2s;
}
.swp-pill:hover {
border-color: rgba(129,140,248,0.3);
color: var(–swp-text) !important;
-webkit-text-fill-color: var(–swp-text) !important;
}
.swp-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* ── Responsive ── */
@media (max-width: 640px) {
.swp-wrap { padding: 40px 16px; }
.swp-embed-body { padding: 12px 16px 22px; }
.swp-frame-wrap iframe { height: 320px; }
.swp-pills { flex-direction: column; align-items: center; }
}
Embeddable SERP Preview Tool
Stop sending screenshots. Add this live Google Preview widget to your agency client dashboard — free, forever.
100% Free · White-label Friendly
🔒 app.contentserp.in/embed/serp-preview
📋 Copy Embed Code
Paste into any HTML, CMS page builder, or client portal.
Copy Code
(function() {
var btn = document.getElementById(‘swp-copy-btn’);
var label = document.getElementById(‘swp-copy-label’);
var code = document.getElementById(‘swp-embed-code’);
if (!btn || !code) return;
btn.addEventListener(‘click’, function() {
var text = code.value;
function onCopied() {
btn.classList.add(‘copied’);
label.textContent = ‘✅ Copied!’;
setTimeout(function() {
btn.classList.remove(‘copied’);
label.textContent = ‘Copy Code’;
}, 2500);
}
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(onCopied).catch(function() {
code.select(); document.execCommand(‘copy’); onCopied();
});
} else {
code.select(); document.execCommand(‘copy’); onCopied();
}
});
})();
Free SERP Simulator & Snippet Preview Tool for Indian Marketers & Agencies
ContentSERP Free SERP Simulator Widget helps Indian marketers, bloggers, SEO specialists, and digital agencies preview Google desktop and mobile search snippets, measure title tag pixel width, and test meta description truncation in real time before publishing.
Title Tag Pixel Width Check
Calculate exact title pixel width to prevent Google search result truncation on desktop and mobile screens.
Desktop & Mobile Snippet Simulation
Simulate real-time Google India SERP appearance for organic titles, URLs, and meta description snippets.
10 Free Trial Credits
Embed live SERP preview widgets and access AI content tools with 10 free trial credits upon registration.