Spaces:
Running
Running
| # UI Visual Standards — Corner Store Parallax & Floating Composition | |
| *Mapping-and-Inventory v22.2171 | RESONANCE_HARDENING* | |
| This document records the visual design language of the Corner Store Wix | |
| storefront and codifies it as a reusable CSS/layout template for all | |
| fleet-facing Truth Teller portals and Gradio faceplates. | |
| --- | |
| ## 1. Design Principles | |
| | Principle | Value | | |
| |---|---| | |
| | **Primary sensation** | Floating — content layers appear suspended in deep space | | |
| | **Target refresh** | 144 Hz smooth scroll and parallax | | |
| | **Colour palette** | Deep black `#000000`, electric cyan `#00FFFF`, gold accent `#FFD700` | | |
| | **Typography** | Monospace stack: `'Courier New', Courier, monospace` | | |
| | **Depth layers** | 3 discrete Z-index bands (background, mid, foreground) | | |
| --- | |
| ## 2. Parallax Depth Settings | |
| The parallax effect is achieved with three stacked layers scrolling at | |
| different rates, producing the "floating" spatial sensation. | |
| | Layer | Z-index | Scroll speed (relative) | CSS class | | |
| |---|---|---|---| | |
| | Background (stars / void) | `0` | `0.2×` | `.layer-bg` | | |
| | Mid-ground (content cards) | `1` | `0.6×` | `.layer-mid` | | |
| | Foreground (nav / HUD) | `2` | `1.0×` | `.layer-fg` | | |
| ### CSS Template | |
| ```css | |
| /* ── Corner Store Parallax Foundation ─────────────────────────────────── */ | |
| :root { | |
| --color-void: #000000; | |
| --color-cyan: #00FFFF; | |
| --color-gold: #FFD700; | |
| --color-panel: rgba(0, 255, 255, 0.05); | |
| --color-border: rgba(0, 255, 255, 0.2); | |
| --font-mono: 'Courier New', Courier, monospace; | |
| --transition: 0.3s ease; | |
| --border-radius: 8px; | |
| } | |
| /* Viewport reset */ | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: var(--color-void); | |
| color: var(--color-cyan); | |
| font-family: var(--font-mono); | |
| overflow-x: hidden; | |
| } | |
| /* Parallax container */ | |
| .parallax-root { | |
| position: relative; | |
| height: 100vh; | |
| overflow: hidden; | |
| perspective: 1px; | |
| } | |
| /* Layer — background (stars / ambient) */ | |
| .layer-bg { | |
| position: absolute; | |
| inset: 0; | |
| transform: translateZ(-0.8px) scale(1.8); | |
| background-image: | |
| radial-gradient(circle, rgba(0,255,255,0.08) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| will-change: transform; | |
| } | |
| /* Layer — mid-ground (product cards / content) */ | |
| .layer-mid { | |
| position: absolute; | |
| inset: 0; | |
| transform: translateZ(-0.4px) scale(1.4); | |
| will-change: transform; | |
| } | |
| /* Layer — foreground (HUD / navigation) */ | |
| .layer-fg { | |
| position: relative; | |
| z-index: 2; | |
| will-change: transform; | |
| } | |
| /* Floating card — used for product panels and Truth Teller portals */ | |
| .floating-card { | |
| background: var(--color-panel); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| box-shadow: | |
| 0 0 20px rgba(0, 255, 255, 0.1), | |
| 0 0 60px rgba(0, 255, 255, 0.04); | |
| transition: box-shadow var(--transition), transform var(--transition); | |
| backdrop-filter: blur(4px); | |
| } | |
| .floating-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: | |
| 0 0 40px rgba(0, 255, 255, 0.25), | |
| 0 0 80px rgba(0, 255, 255, 0.10); | |
| } | |
| /* Gold accent rule — used below section headings */ | |
| .accent-rule { | |
| border: none; | |
| border-top: 1px solid var(--color-gold); | |
| opacity: 0.4; | |
| margin: 0.5rem 0 1.5rem; | |
| } | |
| /* CTA button */ | |
| .btn-sovereign { | |
| display: inline-block; | |
| padding: 0.6rem 1.4rem; | |
| background: transparent; | |
| color: var(--color-cyan); | |
| border: 1px solid var(--color-cyan); | |
| border-radius: var(--border-radius); | |
| font-family: var(--font-mono); | |
| letter-spacing: 0.1em; | |
| cursor: pointer; | |
| transition: background var(--transition), color var(--transition); | |
| } | |
| .btn-sovereign:hover { | |
| background: var(--color-cyan); | |
| color: var(--color-void); | |
| } | |
| ``` | |
| --- | |
| ## 3. Product Page Logic (Fridge / Storage Units) | |
| Each product panel maps to the `.floating-card` component above. | |
| ``` | |
| ┌────────────────────────────────────────────────────────────────┐ | |
| │ .floating-card │ | |
| │ ┌──────────────────┐ ┌─────────────────────────────────────┐ │ | |
| │ │ Product image │ │ Product title (cyan, 1.1rem) │ │ | |
| │ │ (layer-mid bg) │ │ Short description (0.85rem) │ │ | |
| │ └──────────────────┘ │ Price (gold accent) │ │ | |
| │ │ [ Add to Cart ] .btn-sovereign │ │ | |
| │ └─────────────────────────────────────┘ │ | |
| └────────────────────────────────────────────────────────────────┘ | |
| ``` | |
| - **Grid layout**: `display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem;` | |
| - **Image container**: `border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border);` | |
| - **Price**: `color: var(--color-gold); font-size: 1.2rem;` | |
| --- | |
| ## 4. Truth Teller Portal Adaptation | |
| When deploying the visual language to a Gradio faceplate or other node | |
| portal, apply these inline overrides to the Gradio `css=` parameter: | |
| ```python | |
| TRUTH_TELLER_CSS = """ | |
| body, .gradio-container { | |
| background: #000000 !important; | |
| color: #00FFFF !important; | |
| font-family: 'Courier New', Courier, monospace !important; | |
| } | |
| .gr-button { | |
| background: transparent !important; | |
| border: 1px solid #00FFFF !important; | |
| color: #00FFFF !important; | |
| border-radius: 8px !important; | |
| } | |
| .gr-button:hover { | |
| background: #00FFFF !important; | |
| color: #000000 !important; | |
| } | |
| .gr-box, .gr-panel { | |
| background: rgba(0,255,255,0.05) !important; | |
| border: 1px solid rgba(0,255,255,0.2) !important; | |
| border-radius: 8px !important; | |
| box-shadow: 0 0 20px rgba(0,255,255,0.1) !important; | |
| } | |
| """ | |
| ``` | |
| --- | |
| ## 5. Texture-by-Texture Build History | |
| | Step | Element | Setting | | |
| |---|---|---| | |
| | 1 | Viewport | `background: #000000`, `overflow: hidden` | | |
| | 2 | Stars layer | Radial-gradient dot pattern, 60 px grid, `translateZ(-0.8px)` | | |
| | 3 | Mid layer | Content cards, `translateZ(-0.4px)` | | |
| | 4 | Foreground | HUD/nav, `translateZ(0)` | | |
| | 5 | Cards | `backdrop-filter: blur(4px)`, cyan glow shadow | | |
| | 6 | Hover effect | `-4px` lift, increased glow | | |
| | 7 | Typography | Monospace, cyan primary, gold accent for prices | | |
| | 8 | Buttons | Transparent background, cyan border, invert on hover | | |
| --- | |
| ## 6. Node Deployment Checklist | |
| Before deploying these standards to a new fleet node: | |
| - [ ] Import `TRUTH_TELLER_CSS` string into the Gradio `gr.Blocks(css=…)` call | |
| - [ ] Ensure `.floating-card` is applied to all panel-type components | |
| - [ ] Verify 144 Hz: `scroll-behavior: smooth` on `html`, no blocking JS on scroll | |
| - [ ] Test parallax on mobile: replace `translateZ` with `background-attachment: fixed` fallback | |
| - [ ] Confirm colour contrast: cyan `#00FFFF` on black `#000000` passes WCAG AA | |
| --- | |
| *Last updated: 2026-04-16 | Spec: v22.2171 RESONANCE_HARDENING* | |