q-style pageShell {
width: 100%
min-height: 100vh
box-sizing: border-box
padding: 18px
color: #f8fafc
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
}
q-style layoutRoot { width: 100%; height: 100%; gap: 12px }
q-style titleRow { width: 100%; height: 10vh; min-height: 108px; flex: 0 0 auto; gap: 12px }
q-style bodyRow { width: 100%; height: 80vh; min-height: 640px; flex: 0 0 auto; gap: 12px }
q-style footerRow { width: 100%; height: 30vh; min-height: 260px; flex: 0 0 auto; gap: 12px }
q-style titleMainCol { width: 70vw; flex: 0 0 auto; gap: 12px }
q-style titleSideCol { width: 10vw; min-width: 148px; flex: 0 0 auto; gap: 12px }
q-style sidebarCol { width: 20vw; min-width: 250px; flex: 0 0 auto; gap: 12px }
q-style mainCol { width: 70vw; flex: 0 0 auto; gap: 12px }
q-style panel {
box-sizing: border-box
height: 100%
width: 100%
padding: 20px
border: 1px solid rgba(0, 255, 153, 0.30)
border-radius: 18px
background: rgba(7, 18, 14, 0.88)
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36)
overflow: hidden
}
q-style panelSoft {
box-sizing: border-box
width: 100%
padding: 18px
border: 1px solid rgba(148, 163, 184, 0.26)
border-radius: 16px
background: rgba(15, 23, 42, 0.50)
}
q-style titlePanel { display: flex; align-items: center; justify-content: space-between; gap: 18px }
q-style metricPanel { display: flex; flex-direction: column; justify-content: center; gap: 4px }
q-style stack { display: flex; flex-direction: column; gap: 14px }
q-style tightStack { display: flex; flex-direction: column; gap: 8px }
q-style cardGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
q-style twoGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
q-style badgeRow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px }
q-style kicker {
margin: 0
color: #00ff99
font-size: 13px
font-weight: 900
letter-spacing: 0.14em
text-transform: uppercase
}
q-style h1Title {
margin: 0
color: #ffffff
font-size: clamp(26px, 3.4vw, 44px)
line-height: 1
letter-spacing: 0
font-weight: 950
}
q-style h2Title { margin: 0; color: #ffffff; font-size: 24px; line-height: 1.12; font-weight: 900 }
q-style h3Title { margin: 0; color: #ffffff; font-size: 18px; line-height: 1.18; font-weight: 850 }
q-style copy { margin: 0; color: #cbd5e1; line-height: 1.6; font-size: 15px }
q-style smallCopy { margin: 0; color: #94a3b8; line-height: 1.45; font-size: 13px }
q-style metricValue { margin: 0; color: #ffffff; font-size: 26px; line-height: 1; font-weight: 950 }
q-style badge {
display: inline-flex
align-items: center
min-height: 28px
padding: 0 10px
border: 1px solid rgba(0, 255, 153, 0.34)
border-radius: 999px
color: #d1fae5
background: rgba(0, 255, 153, 0.08)
font-size: 12px
font-weight: 800
}
q-style card {
box-sizing: border-box
min-height: 160px
padding: 18px
border: 1px solid rgba(148, 163, 184, 0.26)
border-radius: 16px
background: rgba(2, 6, 23, 0.46)
}
q-style accentCard {
border-color: rgba(0, 255, 153, 0.44)
box-shadow: 0 18px 44px rgba(0, 255, 153, 0.10)
}
q-style icon {
display: inline-grid
place-items: center
width: 38px
height: 38px
border: 1px solid rgba(0, 255, 153, 0.38)
border-radius: 12px
color: #00ff99
background: rgba(0, 255, 153, 0.08)
font-size: 15px
font-weight: 950
}
q-style checkRow { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start }
q-style checkIcon { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(0, 255, 153, 0.42); border-radius: 999px; color: #00ff99; font-size: 13px; font-weight: 950 }
q-style actionRow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px }
q-style button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid rgba(0, 255, 153, 0.46); border-radius: 999px; color: #001b10; background: #00ff99; text-decoration: none; font-weight: 900 }
q-style ghostButton { color: #d1fae5; background: transparent; border-color: rgba(148, 163, 184, 0.42) }
q-style footerContent { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px }
q-theme cmsTheme {
section.cms-page { pageShell }
q-layout.cms-root { layoutRoot }
q-row.cms-title-row { titleRow }
q-row.cms-body-row { bodyRow }
q-row.cms-footer-row { footerRow }
q-col.cms-title-main { titleMainCol }
q-col.cms-title-side { titleSideCol }
q-col.cms-sidebar { sidebarCol }
q-col.cms-main { mainCol }
div.panel { panel }
div.panel-soft { panelSoft }
div.title-panel { titlePanel }
div.metric-panel { metricPanel panelSoft }
div.stack { stack }
div.tight-stack { tightStack }
div.card-grid { cardGrid }
div.two-grid { twoGrid }
div.badge-row { badgeRow }
span.badge { badge }
article.card { card }
article.card.accent { accentCard }
span.icon { icon }
div.check-row { checkRow }
span.check-icon { checkIcon }
div.action-row { actionRow }
a.btn { button }
a.btn.ghost { ghostButton }
div.footer-content { footerContent }
p.kicker { kicker }
h1.hero-title { h1Title }
h2.section-title { h2Title }
h3.card-title { h3Title }
p.copy { copy }
p.small { smallCopy }
p.metric-value { metricValue }
}
q-component cms-card {
q-property iconText: "CMS"
q-property classes: ""
article {
class: "card ${this.classes}"
div.tight-stack {
span.icon { text { ${this.iconText} } }
h3.card-title { slot { title } }
p.copy { slot { body } }
}
}
}
q-component cms-check {
div.check-row {
span.check-icon { text { ✓ } }
p.small { slot { content } }
}
}
q-component cms-button {
q-property href: "#"
q-property classes: ""
a {
class: "btn ${this.classes}"
href: "${this.href}"
slot { content }
}
}
cmsTheme {
section.cms-page {
q-layout.cms-root {
width: "100%"
gap: "12px"
q-row.cms-title-row {
width: "100%"
flex: "0 0 auto"
gap: "12px"
q-col.cms-title-main {
width: "70vw"
flex: "0 0 auto"
gap: "12px"
div.title-panel {
div.tight-stack {
p.kicker { text { CMS Security Hardening } }
h1.hero-title { text { Keep the CMS. Remove the easy attack surface. } }
}
div.badge-row {
span.badge { text { WordPress } }
span.badge { text { Drupal } }
span.badge { text { Joomla } }
span.badge { text { ConcreteCMS } }
}
}
}
q-col.cms-title-side {
width: "10vw"
flex: "0 0 auto"
gap: "12px"
div.metric-panel {
p.metric-value { text { Quiet } }
p.small { text { Fewer automated incidents } }
}
}
}
q-row.cms-body-row {
width: "100%"
flex: "0 0 auto"
gap: "12px"
q-col.cms-sidebar {
width: "20vw"
flex: "0 0 auto"
gap: "12px"
div.stack {
div.panel {
div.tight-stack {
p.kicker { text { What Changes } }
h2.section-title { text { Harden delivery without disrupting editors. } }
p.copy { text { Use the CMS you want without redesigns or rewrites. The public surface gets quieter while content teams keep the same authoring workflow. } }
}
}
div.panel-soft {
div.tight-stack {
cms-check { content { text { Same URLs, content model, and editorial process. } } }
cms-check { content { text { Less plugin dependence for core security posture. } } }
cms-check { content { text { Automated scans and commodity exploit attempts become less useful. } } }
cms-check { content { text { Updates can happen deliberately instead of under pressure. } } }
}
}
}
}
q-col.cms-main {
width: "70vw"
flex: "0 0 auto"
gap: "12px"
div.panel {
div.stack {
div.tight-stack {
p.kicker { text { Platform Work } }
h2.section-title { text { Practical CMS hardening and extension work in one structure. } }
p.copy { text { The same delivery layer can support security hardening, custom blocks, cleaner publishing workflows, headless endpoints, and search/indexing integrations. } }
}
div.card-grid {
cms-card {
iconText: "🛡"
classes: "accent"
title { text { Harden public delivery } }
body { text { Reduce exposed paths, quiet bot traffic, add safer headers and routing, and make common exploit attempts ineffective before they touch application code. } }
}
cms-card {
iconText: "🧩"
title { text { Custom blocks and plugins } }
body { text { Build maintainable ConcreteCMS blocks, WordPress plugins, schemas, forms, previews, and editor-facing tools that fit the site instead of fighting it. } }
}
cms-card {
iconText: "🔎"
title { text { Search and API layers } }
body { text { Add headless endpoints, indexing pipelines, content sync, and structured data flows without turning the CMS into a fragile custom app. } }
}
}
div.two-grid {
cms-card {
iconText: "✓"
title { text { Stable publishing } }
body { text { Editors keep familiar controls while the front-end delivery path becomes faster, more predictable, and easier to cache safely. } }
}
cms-card {
iconText: "✓"
title { text { Governance built in } }
body { text { Role-aware controls, migration-safe updates, versioned releases, and rollback paths keep the CMS manageable as requirements grow. } }
}
}
}
}
}
}
q-row.cms-footer-row {
width: "100%"
flex: "0 0 auto"
gap: "12px"
q-col {
width: "100%"
flex: "1 1 0"
gap: "12px"
div.panel {
div.footer-content {
div.stack {
p.kicker { text { Next Step } }
h2.section-title { text { Secure the platform without replacing it. } }
p.copy { text { Start with a surface review, map the editorial workflow, then harden delivery and extension points in the smallest sequence that reduces risk without blocking publishing. } }
}
div.action-row {
cms-button {
href: "/contact"
content { text { Secure my CMS } }
}
cms-button {
href: "/tools/search/"
classes: "ghost"
content { text { Explore tools } }
}
}
}
}
}
}
}
}
}