nimbus-grid

What this skill does

# Nimbus Grid — Secure cloud storage marketing site

Produce a single-page marketing site for **Nimbus Grid**, a fictional secure cloud-storage capacity platform, with a dark warm-gold aesthetic. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data only; do not rewrite the CSS or invent a new visual language. The seed already encodes every token, section layout, scroll behavior, and animation described below.

This is the authoritative build brief. The named colors, fonts, shader URL, section structure, and JS-driven animations are **locked**.

## Stack

- Default output: a single self-contained HTML file (the `example.html` seed). It already includes everything inline — no images, no frameworks; every visual is CSS / SVG / text.
- If the user explicitly asks for the Vite multi-file project from the original prompt, split into `index.html`, `styles.css`, `script.js`, `package.json` (`vite ^5.4.2`, `type:module`, scripts `dev`/`build`/`preview`), `vite.config.js` (default). Port the seed **faithfully** — same tokens, same markup, same JS. Build with `npm run build`. Do not change the design while porting.

## Fonts

Load from Google Fonts with preconnect to both `fonts.googleapis.com` and `fonts.gstatic.com`:
- **IBM Plex Sans** weights 400, 500 — body and headings.
- **IBM Plex Mono** weights 400, 500 — labels, code, nav, eyebrows, CTAs.

## CSS variables (`:root`) — locked

```
--bg: #17130d;
--ink: #fff4d5;
--muted: #dacaa1;
--line: rgba(255,240,199,0.28);
--glass: rgba(255,239,199,0.16);
--glass-strong: rgba(255,239,199,0.24);
--accent: #ead09a;
--accent-2: #ffd879;
--deep: #4d3f24;
--radius: 8px;
color-scheme: dark;
```

Body: background `radial-gradient(circle at top left, rgba(255,216,121,0.18), transparent 28rem) + var(--bg)`, ink `#fff4d5`, IBM Plex Sans, `font-size:1rem`, `line-height:1.375`, `letter-spacing:0.0175rem`, antialiased. `<meta name="theme-color" content="#17130d">`. `html { scroll-behavior: smooth }`. Universal `box-sizing:border-box`. Anchors inherit color, no underline.

## Section 1 — Hero (`.hero`, `min-height:100svh`)

- Animated shader: `<iframe class="shader-bg" src="https://fragcoord.xyz/embed/c6zisyc6?viewport=1422x800" allow="autoplay; fullscreen" referrerpolicy="no-referrer">`, absolutely centered with `transform: translate(-50%,-50%) scale(var(--shader-scale,5))`, `z-index:-3`, `pointer-events:none`. **Keep this exact shader URL.**
- `.shader-fallback` behind it (`z-index:-4`): radial + linear warm-gold gradient `#846f43 → #f0d27c → #fff2be` so the page still reads if the shader fails.
- JS: on load + debounced resize (180ms), recompute viewport so the iframe matches window aspect, capped at 1422×800; `scale = max(innerWidth/w, (innerHeight+110)/h)`.
- `.site-header` (flex row, `min-height:42px`): brand `NIMBUS GRID` in a glass pill (`padding:9px 12px`, 1px ink-translucent border, `backdrop-filter: blur(18px) saturate(1.35)`, Plex Mono 12px uppercase, inset highlight + soft shadow); right nav `Technology / Security / Capacity / Operations` (Plex Mono 12px uppercase, 0.04rem ls, ink-translucent, hover brightens); `.header-cta` "Get Started" same glass pill, hover lifts 1px + brightens.
- `.console-card` (top-left, `width:min(396px,42vw)`, `rgba(13,16,19,0.88)`, 5px radius, blurred backdrop):
  - Tabs row `grid-template-columns: repeat(3,minmax(0,77px)) 1fr auto`: `CLI`, `API`, `Console`, then window controls (small square + wide bar). Active tab = accent color + 2px accent underline.
  - Three panes, only the active shown, `min-height:153px`, Plex Mono 11px:
    - **CLI**: `<pre>` `$ nimbus storage create \ --workspace prod-web \ --tier encrypted-fast \ --region eu-central` (`$` accent), then typed output line `storage pool web-db-test queued` (accent).
    - **API**: `POST /v1/storage/pools` JSON `{name:"web-db-test", tier:"encrypted-fast", quota:"8 TiB"}`, typed output `202 accepted: provisioning policy attached`.
    - **Console**: form slots — `Instance name = web-db-test` (typed), `Image = ubuntu-24.04-noble`, two-column `Memory = 8 GiB` / `CPUs = 2`. Each `.console-input` is a 33px outlined dark slot; select-style ones append a `▾`.
  - **Typewriter**: per active pane, type each `[data-typed]` one char every 42ms with a blinking `::after` caret (1px bar, `cursor-blink` 1s `steps(2,start)`).
- Hero copy (bottom-left): H1 "Cloud space that scales with your business systems." (Plex Sans 400, `clamp(29px,3.5vw,56px)`, line-height 1, max-width 18ch); paragraph "Nimbus Grid sells secure cloud storage capacity for companies that need fast onboarding, predictable throughput, encrypted collaboration, and modern data residency controls." (`clamp(12px,1.125vw,16.5px)`, max-width 720px). A blurred dark radial `::before` (filter blur 26px) keeps copy readable over the shader.

## Section 2 — Platform accordion (`#platform`, scroll-driven)

`min-height:420svh`, near-black `#050604` with subtle gold radial top-right.

- `.accordion-inner` `position:sticky; top:0`, full-viewport height, grid `0.22fr | 0.78fr`.
- `.accordion-nav`: four Plex Mono 11px uppercase pill labels each prefixed by a 7px square dot: `Programmable infra`, `Data residency`, `Elastic scaling`, `Unified visibility`. Active = accent color, shifts right 2px.
- `.accordion-stack` (height `min(80svh,820px)`): four `.accordion-card` panels `position:absolute; inset:0`, each a two-column grid (copy + visual) on black with a 1px ink top border.
  - Card 1 — Programmable infra: code window `01 storage_pool = { 02 name = "client-vault" 03 region = "eu-central" 04 quota = "24 TiB" 05 policy = encrypted_fast 06 }`.
  - Card 2 — Data residency: `Region policy / EU Central locked / US East allowed / AP Southeast review / Retention 7 years`.
  - Card 3 — Elastic scaling: `Capacity forecast / Used 18.4 TiB / Reserved 24 TiB / Burst ready / Next tier approved`.
  - Card 4 — Unified visibility: `Operations view / Sync health stable / Cold data 14% / Policy drift 0 / Audit export live`.
  - Each visual: warm gold gradient backdrop `linear-gradient(135deg, rgba(234,208,154,0.92), rgba(106,91,52,0.68))` + radial highlight, centered dark code window with 3 dot-spans, 8px radius, deep shadow.
- Scroll JS: track `getBoundingClientRect()` → progress 0..1 over `(height − viewport)`; active card index = round(progress·(n−1)). Card N translateY animates from off-bottom (`stackHeight + collapsedHeight`) up to `index * collapsedHeight` (collapsed = 84px desktop / 96px mobile), clamped per segment, written to `--card-y` (transform) and `--card-clip-bottom` (clip-path inset) so the active card reveals while previous cards stay as header strips. Clicking a tab smooth-scrolls to that card's segment.

## Section 3 — Pricing (`#pricing`)

Dark olive `#11120f` with light top wash + soft cyan radial blur `rgba(151,211,235,0.14)` from top-left.

- Top grid (max-width 1320px, `0.38 | 0.62`): left eyebrow `Pricing` (accent, Plex Mono 16px uppercase) + H2 "Only pay for cloud storage your teams actually use." (`clamp(34px,4vw,68px)`, line-height 1) + paragraph "Scale capacity up for active projects and cool it down when workspaces go quiet. Nimbus Grid keeps storage, transfer, and policy costs visible before they become invoices."
- Right `.pricing-table`: header "Storage costs" + billing toggle pill (`Per month` muted, `Per GiB` active = accent pill with `#241d0f` text). Five 1px-separated rows (`1fr | auto`), right values in Plex Mono:
  - Encrypted active storage — `$0.021 / GiB / month`
  - Warm collaboration tier — `$0.012 / GiB / month`
  - Cold retained archive — `$0.004 / GiB / month`
  - Regional accelerated transfer — `$0.018 / GiB moved`
  - Customer-managed key vault — `included`
- Pricing bars — full-bleed (`width:100vw; margin-left:calc(50% - 50vw)`), 12-column grid, `height:480px`, bars bottom-aligned. Each bar `height: var(--bar-height) + var(--bar-morph,0px)`, `min-height:120px`,