q-style uiuxWrapStyle { position: relative; color: #eaf0ff; font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: linear-gradient(180deg, #0b1328, #070b14); border: 1px solid #1f2a4a; border-radius: 20px; overflow: hidden; padding: 36px; box-sizing: border-box; } q-style headerStyle { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; } q-style emojiStyle { font-size: 36px; } q-style titleStyle { margin: 0; font-size: 34px; font-weight: 800; } q-style subStyle { margin: 0; color: #a9b3d0; } q-style chipStyle { display: inline-flex; align-items: center; border: 1px solid #1f2a4a; padding: 6px 10px; border-radius: 999px; font-size: 12px; color: #a9b3d0; background: rgba(255,255,255,.04); } q-style heroStyle { margin-top: 14px; position: relative; border: 1px solid #1f2a4a; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-radius: 16px; overflow: hidden; padding: 28px; } q-style heroInnerStyle { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: center; } q-style h3Style { margin: 0 0 8px 0; font-size: 22px; } q-style paragraphStyle { margin: 0 0 12px 0; color: #a9b3d0; } q-style ctaStyle { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } q-style buttonStyle { appearance: none; border: 0; padding: 12px 16px; border-radius: 14px; cursor: pointer; font-weight: 800; background: linear-gradient(180deg, #72f3c5, #2dd4a5); color: #062317; box-shadow: 0 10px 30px rgba(0,0,0,.35); } q-style buttonAltStyle { background: linear-gradient(180deg, #0b1224, rgba(255,255,255,.04)); color: #eaf0ff; border: 1px solid #1f2a4a; } q-style toggleStyle { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #1f2a4a; border-radius: 12px; padding: 8px 10px; background: rgba(255,255,255,.04); color: #a9b3d0; } q-style rangeStyle { width: 140px; } q-style beforeAfterStyle { position: relative; border: 1px solid #1f2a4a; border-radius: 14px; overflow: hidden; min-height: 240px; background: linear-gradient(135deg, #131c33, #0a1022); } q-style imageStyle { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } q-style afterImageStyle { clip-path: inset(0 0 0 50%); } q-style imageRangeStyle { position: absolute; left: 10px; right: 10px; bottom: 8px; } q-style fullRangeStyle { width: 100%; } q-style gridStyle { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 16px; } q-style cardStyle { grid-column: span 4; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid #1f2a4a; border-radius: 14px; padding: 18px; } q-style cardTitleStyle { margin: 0 0 6px 0; font-size: 16px; } q-style miniStyle { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } q-style tabsStyle { margin-top: 18px; border: 1px solid #1f2a4a; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); } q-style tabbarStyle { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid #1f2a4a; padding: 10px; background: rgba(0,0,0,.08); } q-style tabButtonStyle { border: 1px solid #1f2a4a; border-radius: 10px; padding: 8px 12px; background: transparent; color: #eaf0ff; cursor: pointer; font-weight: 700; } q-style activeTabButtonStyle { background: linear-gradient(180deg, #80a7ff, #6b8cff); color: #03102a; } q-style tabPanelStyle { padding: 14px; } q-style hiddenPanelStyle { display: none; } q-style playStyle { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } q-style controlsStyle { border: 1px dashed #1f2a4a; border-radius: 12px; padding: 12px; display: grid; gap: 10px; } q-style labelStyle { display: grid; gap: 6px; color: #a9b3d0; font-size: 12px; } q-style demoStyle { border: 1px solid #1f2a4a; border-radius: 16px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06)); display: grid; gap: 12px; } q-style carouselStyle { position: relative; border: 1px solid #1f2a4a; border-radius: 14px; overflow: hidden; } q-style slidesStyle { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; transition: transform .35s ease; } q-style slideStyle { padding: 18px; display: grid; gap: 10px; } q-style dotsStyle { display: flex; gap: 6px; justify-content: center; padding: 10px; } q-style dotStyle { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #1f2a4a; background: transparent; cursor: pointer; } q-style activeDotStyle { background: #80a7ff; } q-style marqueeStyle { overflow: hidden; border: 1px solid #1f2a4a; border-radius: 12px; background: rgba(255,255,255,.04); padding: 10px; } q-style codeStyle { white-space: pre-wrap; color: #9f9; background: #070b14; border: 1px solid #1f2a4a; border-radius: 12px; padding: 14px; overflow: auto; } q-style ctaPanelStyle { margin-top: 14px; border: 1px solid #1f2a4a; border-radius: 14px; padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.04)); display: grid; gap: 10px; } q-style fieldStyle { width: 100%; background: #0b1224; border: 1px solid #1f2a4a; color: #eaf0ff; border-radius: 10px; padding: 10px; box-sizing: border-box; } q-style mobileStackStyle { width: 100%; } q-theme uiuxTheme { .uiux-wrap { uiuxWrapStyle } .uiux-header { headerStyle } .emoji { emojiStyle } .title { titleStyle } .sub { subStyle } .chip { chipStyle } .hero { heroStyle } .hero-inner { heroInnerStyle } h3 { h3Style } p { paragraphStyle } .cta { ctaStyle } .btn { buttonStyle } .btn.alt { buttonAltStyle } .toggle { toggleStyle } input.range { rangeStyle } .before-after { beforeAfterStyle } img.compare-image { imageStyle } img.after { afterImageStyle } .image-range { imageRangeStyle } input.full-range { fullRangeStyle } .grid { gridStyle } .card { cardStyle } .card-title { cardTitleStyle } .mini { miniStyle } .tabs { tabsStyle } .tabbar { tabbarStyle } button.tab-button { tabButtonStyle } button.active-tab { activeTabButtonStyle } .tab-panel { tabPanelStyle } .hidden-panel { hiddenPanelStyle } .play { playStyle } .controls { controlsStyle } label.control-label { labelStyle } .demo { demoStyle } .carousel { carouselStyle } .slides { slidesStyle } .slide { slideStyle } .dots { dotsStyle } button.dot { dotStyle } button.active-dot { activeDotStyle } .marquee { marqueeStyle } pre.code { codeStyle } .cta-panel { ctaPanelStyle } input.field { fieldStyle } textarea.field { fieldStyle } .mobile-stack { mobileStackStyle } } q-component uiux-chip { span.chip { slot { content } } } q-component uiux-feature-card { div.card { h4.card-title { slot title { } } p { slot body { } } div.mini { slot tags { } } } } q-component uiux-hero-control { span.toggle { slot { content } } } uiuxTheme { section.uiux-wrap { id: "uiuxRoot" header.uiux-header { span.emoji { text { 🎨 } } div { h2.title { text { UI/UX Customization } } p.sub { text { We extend front-end components with bespoke QHTML7 structure, production-ready styling, and focused micro-interactions tuned to your brand, CMS, and performance goals. } } } uiux-chip { content { text { CMS, Web Apps, Design Systems } } } } div.hero { div.hero-inner { div { h3 { text { Pixel-perfect meets production-ready } } p { text { From theme overhauls and interactive docs to high-performing component libraries, we craft interfaces that feel fast, alive, and maintainable. } } div.cta { button.btn { id: "sparkBtn" onclick { document.querySelector("#uiuxRoot").style.boxShadow = "0 0 0 3px rgba(114,243,197,.35), 0 18px 54px rgba(114,243,197,.22)"; } text { Trigger Delight } } button.btn.alt { id: "themeBtn" onclick { document.querySelector("#uiuxRoot").style.background = "linear-gradient(180deg, #f8faff, #ffffff)"; document.querySelector("#uiuxRoot").style.color = "#0a1022"; } text { Light Theme } } uiux-hero-control { content { label.control-label { text { Radius } input.range { id: "radiusRange" type: "range" min: "4" max: "28" value: "16" oninput { document.querySelector("#uiuxRoot").style.borderRadius = this.value + "px"; document.querySelector("#liveRadius").textContent = "--radius: " + this.value + "px"; } } } } } uiux-hero-control { content { label.control-label { text { Accent } input.range { id: "hueRange" type: "range" min: "120" max: "260" value: "160" oninput { document.querySelector("#sparkBtn").style.background = "linear-gradient(180deg, hsl(" + this.value + " 85% 70%), hsl(" + this.value + " 70% 48%))"; document.querySelector("#boomBtn").style.background = "linear-gradient(180deg, hsl(" + this.value + " 85% 70%), hsl(" + this.value + " 70% 48%))"; document.querySelector("#liveAccent").textContent = "accent: hsl(" + this.value + " 85% 70%)"; } } } } } } } div.before-after { img.compare-image { src: "https://images.unsplash.com/photo-1542751110-97427bbecf20?w=1400&q=80&auto=format&fit=crop" alt: "Before interface reference" } img.compare-image.after { id: "uiuxAfter" src: "https://images.unsplash.com/photo-1526256262350-7da7584cf5eb?w=1400&q=80&auto=format&fit=crop" alt: "After interface reference" } div.image-range { input.full-range { id: "baRange" type: "range" min: "0" max: "100" value: "50" oninput { document.querySelector("#uiuxAfter").style.clipPath = "inset(0 0 0 " + this.value + "%)"; } } } } } } div.grid { uiux-feature-card { title { text { Component Theming } } body { text { Tokens, dark mode, density, and motion tuned per brand. } } tags { uiux-chip { content { text { Design Tokens } } } uiux-chip { content { text { Dark/Light } } } uiux-chip { content { text { Motion Curves } } } } } uiux-feature-card { title { text { Interactive Patterns } } body { text { Tabs, drawers, riff-on-hover, type-ahead, and live previews. } } tags { uiux-chip { content { text { ARIA + WCAG } } } uiux-chip { content { text { Micro-copy } } } uiux-chip { content { text { Latency under 100ms } } } } } uiux-feature-card { title { text { CMS-Ready Snippets } } body { text { Drop-in blocks for ConcreteCMS, WordPress, and headless pages. } } tags { uiux-chip { content { text { ConcreteCMS } } } uiux-chip { content { text { WordPress } } } uiux-chip { content { text { Headless } } } } } } section.tabs { div.tabbar { button.tab-button.active-tab { onclick { document.querySelector("#panel-playground").style.display = "block"; document.querySelector("#panel-patterns").style.display = "none"; document.querySelector("#panel-cases").style.display = "none"; document.querySelector("#panel-code").style.display = "none"; } text { Playground } } button.tab-button { onclick { document.querySelector("#panel-playground").style.display = "none"; document.querySelector("#panel-patterns").style.display = "block"; document.querySelector("#panel-cases").style.display = "none"; document.querySelector("#panel-code").style.display = "none"; } text { Patterns } } button.tab-button { onclick { document.querySelector("#panel-playground").style.display = "none"; document.querySelector("#panel-patterns").style.display = "none"; document.querySelector("#panel-cases").style.display = "block"; document.querySelector("#panel-code").style.display = "none"; } text { Case Studies } } button.tab-button { onclick { document.querySelector("#panel-playground").style.display = "none"; document.querySelector("#panel-patterns").style.display = "none"; document.querySelector("#panel-cases").style.display = "none"; document.querySelector("#panel-code").style.display = "block"; } text { Code and Copy } } } div.tab-panel { id: "panel-playground" div.play { div.controls { h4.card-title { text { Tune the look } } label.control-label { text { Font size } input.full-range { type: "range" min: "14" max: "20" value: "16" oninput { document.querySelector("#uiuxRoot").style.fontSize = this.value + "px"; document.querySelector("#liveFont").textContent = "font: " + this.value + "px"; } } } label.control-label { text { Shadow depth } input.full-range { type: "range" min: "0" max: "40" value: "30" oninput { document.querySelector("#uiuxDemo").style.boxShadow = "0 " + Math.round(this.value / 3) + "px " + this.value + "px rgba(0,0,0,.35)"; } } } div.mini { uiux-chip { content { span { id: "liveRadius"; text { --radius: 16px } } } } uiux-chip { content { span { id: "liveAccent"; text { accent: mint } } } } uiux-chip { content { span { id: "liveFont"; text { font: 16px } } } } } } div.demo { id: "uiuxDemo" h4.card-title { text { Live Preview } } p { text { Buttons, chips, and cards pick up the page controls directly. } } button.btn { id: "boomBtn" onclick { this.textContent = "Interaction Fired"; } text { Primary Button } } div.mini { uiux-chip { content { text { Chip } } } uiux-chip { content { text { Badge } } } uiux-chip { content { text { Tokenized } } } } } } } div.tab-panel.hidden-panel { id: "panel-patterns" div.grid { uiux-feature-card { title { text { Accessible Tabs } } body { text { Focus states, readable labels, and clear panel ownership. } } tags { uiux-chip { content { text { Navigation } } } } } uiux-feature-card { title { text { Command Palette } } body { text { Quick search and actions across dense application interfaces. } } tags { uiux-chip { content { text { Productivity } } } } } uiux-feature-card { title { text { Async Feedback } } body { text { Skeletons, optimistic updates, and visible progress for speed. } } tags { uiux-chip { content { text { Perceived Speed } } } } } } div.marquee { div.mini { uiux-chip { content { text { Tooltips } } } uiux-chip { content { text { Drawers } } } uiux-chip { content { text { Accordions } } } uiux-chip { content { text { Context Menus } } } uiux-chip { content { text { Data Grids } } } uiux-chip { content { text { Onboarding } } } uiux-chip { content { text { Empty States } } } uiux-chip { content { text { Undo } } } } } } div.tab-panel.hidden-panel { id: "panel-cases" div.carousel { div.slides { id: "uiuxSlides" div.slide { h4.card-title { text { Design System Lift } } p { text { Scaled to 45+ apps with tokens, theming, and lintable patterns. } } } div.slide { h4.card-title { text { Interactive Docs } } p { text { Live examples, copy-paste code, and automated QA previews. } } } div.slide { h4.card-title { text { E-commerce UX } } p { text { Checkout drop-off cut 18 percent via micro-copy and layout refactors. } } } } div.dots { button.dot.active-dot { onclick { document.querySelector("#uiuxSlides").style.transform = "translateX(0%)"; } } button.dot { onclick { document.querySelector("#uiuxSlides").style.transform = "translateX(-100%)"; } } button.dot { onclick { document.querySelector("#uiuxSlides").style.transform = "translateX(-200%)"; } } } } } div.tab-panel.hidden-panel { id: "panel-code" h4.card-title { text { Grab a starter button } } pre.code { id: "codeBlock" text { Call to Action .btn { padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg,#72f3c5,#2dd4a5); color: #062317; } } } button.btn.alt { onclick { navigator.clipboard.writeText(document.querySelector("#codeBlock").innerText); this.textContent = "Copied"; } text { Copy HTML } } } } section.cta-panel { h4.card-title { text { Have a component or page in mind? } } p.sub { text { Send a quick note with your goals and a link or screenshot. We will reply with options and a starter mock. } } form { id: "ctaForm" onsubmit { event.preventDefault(); window.location.href = "mailto:hello@datafault.net?subject=UI%2FUX%20customization%20inquiry&body=Topic:%20" + encodeURIComponent(document.querySelector("#ctaTopic").value) + "%0A%0ANotes:%0A" + encodeURIComponent(document.querySelector("#ctaNotes").value); } input.field { id: "ctaTopic" placeholder: "What do you want customized?" } textarea.field { id: "ctaNotes" rows: "3" placeholder: "Notes, links, or constraints" } button.btn { type: "submit" text { Start the conversation } } } } } }