q-import { /packages/qhtml7/site/layoutGS.qhtml nocache }
q-datafault-site-page sitePage {
navigation {
datafault-nav-link { href: "/" label: "Home" }
datafault-nav-link { href: "/qhtml/qhtml-home" label: "QHTML" }
datafault-nav-link { href: "/projects" label: "Projects" }
datafault-nav-link { href: "/tools/RouteUI/index.html" label: "RouteUI" }
datafault-nav-link { href: "/freedom" label: "Freedom" }
}
content {
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: 60vw
height: auto
flex: 0 0 auto
gap: 12px
}
q-style titleSideCol {
width: 10vw
min-width: 148px
height: auto
flex: 0 0 auto
gap: 12px
}
q-style titleWideSideCol {
width: 15vw
min-width: 190px
height: auto
flex: 0 0 auto
gap: 12px
}
q-style sidebarCol {
width: 20vw
min-width: 250px
height: auto
flex: 0 0 auto
gap: 12px
}
q-style mainCol {
width: 70vw
height: auto
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 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 accentText {
color: #00ff99
}
q-style badgeRow {
display: flex
align-items: center
flex-wrap: wrap
gap: 8px
}
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 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 stack {
display: flex
flex-direction: column
gap: 14px
}
q-style tightStack {
display: flex
flex-direction: column
gap: 8px
}
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: 13px
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 quoteText {
margin: 0
color: #ffffff
font-size: 18px
line-height: 1.45
font-weight: 750
}
q-style footerContent {
display: grid
grid-template-columns: minmax(0, 1fr) auto
align-items: center
gap: 20px
}
q-theme dataFaultTheme {
section.df-page { pageShell }
q-layout.df-root { layoutRoot }
q-row.df-title-row { titleRow }
q-row.df-body-row { bodyRow }
q-row.df-footer-row { footerRow }
q-col.df-title-main { titleMainCol }
q-col.df-title-side { titleSideCol }
q-col.df-title-wide-side { titleWideSideCol }
q-col.df-sidebar { sidebarCol }
q-col.df-main { mainCol }
div.panel { panel }
div.panel-soft { panelSoft }
div.title-panel { titlePanel }
div.metric-panel { metricPanel panelSoft }
div.badge-row { badgeRow }
span.badge { badge }
div.card-grid { cardGrid }
div.two-grid { twoGrid }
div.stack { stack }
div.tight-stack { tightStack }
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 }
span.accent { accentText }
blockquote.quote { quoteText }
}
q-component df-panel {
div.panel {
slot { content }
}
}
q-component df-card {
q-property iconText: "AI"
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 df-check {
div.check-row {
span.check-icon { text { ✓ } }
p.small { slot { content } }
}
}
q-component df-button {
q-property href: "#"
q-property classes: ""
a {
class: "btn ${this.classes}"
href: "${this.href}"
slot { content }
}
}
dataFaultTheme {
section.df-page {
q-layout.df-root {
width: "100%"
gap: "12px"
q-row.df-title-row {
width: "100%"
flex: "0 0 auto"
gap: "12px"
q-col.df-title-main {
width: "70vw"
flex: "0 0 auto"
gap: "12px"
div.title-panel {
div.tight-stack {
p.kicker { text { datafault.net } }
h1.hero-title { text { Secure systems. Custom software. Practical engineering. } }
}
div.badge-row {
span.badge { text { QHTML } }
span.badge { text { Security } }
span.badge { text { Automation } }
}
}
}
q-col.df-title-side {
width: "10vw"
flex: "0 0 auto"
gap: "12px"
div.metric-panel {
p.metric-value { text { Full Stack } }
p.small { text { Data-aware tooling } }
}
}
}
q-row.df-body-row {
width: "100%"
flex: "0 0 auto"
gap: "12px"
q-col.df-sidebar {
width: "20vw"
flex: "0 0 auto"
gap: "12px"
div.stack {
df-panel {
content {
div.tight-stack {
p.kicker { text { Studio Focus } }
h2.section-title { text { Built for serious projects. } }
p.copy { text { DataFault is a technology studio and engineering lab for custom web systems, automation, search tools, QHTML components, and security-conscious infrastructure. } }
}
}
}
div.panel-soft {
div.tight-stack {
df-check { content { text { Custom components and layouts for professional sites and tools. } } }
df-check { content { text { Search, indexing, and automation workflows for real content. } } }
df-check { content { text { Security-minded development and infrastructure awareness. } } }
df-check { content { text { Clean deployment patterns with fewer unnecessary moving parts. } } }
}
}
}
}
q-col.df-main {
width: "70vw"
flex: "0 0 auto"
gap: "12px"
div {
div.stack {
div.tight-stack {
p.kicker { text { What DataFault Builds } }
h2.section-title { text { Professional tools with engineering depth under the hood. } }
p.copy { text { The work combines practical business presentation with technical substance: searchable static sites, custom components, secure deployment patterns, visual tooling, automation, and infrastructure-aware web applications. } }
}
div.card-grid {
df-card {
iconText: "AI"
classes: "accent"
title { text { Data-aware automation } }
body { text { Search utilities, indexing pipelines, analysis layers, and AI-assisted workflows that turn operational data into useful decisions. } }
}
df-card {
iconText: "UI"
title { text { Custom web interfaces } }
body { text { QHTML components, business pages, dashboards, editors, and internal tools built around reusable layouts instead of disposable page clutter. } }
}
df-card {
iconText: "OPS"
title { text { Infrastructure-minded delivery } }
body { text { Web output is designed with deployment, routing, static generation, server boundaries, and long-term maintainability in mind. } }
}
}
div.two-grid {
df-card {
iconText: "✓"
title { text { Security-focused engineering } }
body { text { Dependency review, minimized public surfaces, careful server and client boundaries, and safer defaults are treated as part of the design. } }
}
df-card {
iconText: "✓"
title { text { Practical architecture } }
body { text { Systems are planned around data flow, runtime behavior, operational constraints, failure modes, and what it will take to safely change things later. } }
}
df-card {
iconText: "✓"
title { text { Deep technical range } }
body { text { Projects can span QHTML, JavaScript, static site tooling, search indexing, Linux services, Nginx routing, automation scripts, and custom UI systems. } }
}
df-card {
iconText: "✓"
title { text { Controlled complexity } }
body { text { The goal is to put complexity in the right layer, make it reusable, and prevent it from leaking everywhere else. } }
}
}
}
}
}
}
q-row.df-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 { Need a sharper technical foundation? } }
blockquote.quote { text { A business website, internal tool, or automation system should be more than a skin over fragile code. It should be a controlled system with a clear purpose, clean structure, and room to grow. } }
p.small { text { From QHTML components to search, security, routing, deployment, and automation, the goal is practical software that remains maintainable after launch. } }
}
div.action-row {
df-button {
href: "/tools/search/"
content { text { Explore Tools } }
}
df-button {
href: "/contact"
classes: "ghost"
content { text { Start a Conversation } }
}
}
}
span { text { Copyright datafault.net 2026. } }
}
}
}
}
}
}
}
}