Viktor Oddy - Hero Website

22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:T3214,--- ## Global Setup **Fonts (Google Fonts, preconnect both `fonts.googleapis.com` and `fonts.gstatic.com`):** - `IBM Plex Sans` weights 400, 500 - `IBM Plex Mono` weights 400, 500 **CSS variables on `:root`:** ```css :root { color-scheme: dark; --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; --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace; } ``` **Resets:** Universal `box-sizing: border-box`. `html { scroll-behavior: smooth; }`. Body: `margin: 0`, background `var(--bg)`, color `var(--ink)`, `font-family: var(--font-sans)`, `font-size: 1rem`, `font-weight: 400`, `line-height: 1.375`, `letter-spacing: 0.0175rem`, antialiased. Anchors: `color: inherit; text-decoration: none;`. All headings/paragraphs: `margin-top: 0`. **Shared eyebrow style:** ```css .eyebrow { margin: 0 0 16px; color: var(--accent); font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.18; letter-spacing: 0.04rem; text-transform: uppercase; } ``` **Shared h2 base:** ```css h2 { max-width: 920px; margin-bottom: 0; font-size: clamp(25px, 4vw, 52px); line-height: 1.08; letter-spacing: 0.005rem; font-weight: 400; } ``` **Shared h3 base:** ```css h3 { margin-bottom: 14px; font-size: 24px; line-height: 1.2; letter-spacing: 0.0125rem; font-weight: 400; } ``` --- ## Section: `.security-section` `

` **Outer container:** ```css .security-section { padding: clamp(72px, 8vw, 116px) clamp(20px, 5vw, 72px); border-top: 1px solid rgba(255, 240, 199, 0.1); background: radial-gradient(circle at 88% 20%, rgba(234, 208, 154, 0.12), transparent 22rem), radial-gradient(circle at 16% 82%, rgba(255, 216, 121, 0.07), transparent 26rem), #120f0a; } ``` The background is a dark warm brown (`#120f0a`) with two subtle radial glows: a warm gold top-right and a dimmer gold bottom-left. --- ### Part 1: `.security-heading` (two-column header) ```html

Security

Modern encryption and compliance controls without slowing the team down.

Role-based access, customer-managed keys, immutable retention, and regional storage policies give business clients a cloud layer that can satisfy procurement, IT, and legal from the first deployment.

``` ```css .security-heading { display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(280px, 0.42fr); gap: clamp(28px, 5vw, 64px); align-items: end; width: min(100%, 1320px); margin: 0 auto clamp(36px, 5vw, 64px); } .security-heading h2 { max-width: 820px; } .security-heading > p { margin-bottom: 0; color: rgba(255, 244, 213, 0.68); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; } ``` The left column has the eyebrow + h2 stacked. The right column has the body paragraph, aligned to the bottom of the left column (`align-items: end`). --- ### Part 2: `.security-card-grid` (3 cards in a row) ```html

...

``` ```css .security-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 22px); width: min(100%, 1320px); margin-inline: auto; } ``` **Shared card base:** ```css .security-card { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 464px; overflow: hidden; border: 1px solid rgba(255, 247, 222, 0.17); border-radius: 0; background: linear-gradient(180deg, rgba(255, 247, 222, 0.035), rgba(255, 247, 222, 0.012)), #0f0c08; } ``` Cards are tall rectangles with sharp corners (no border-radius). Background is a near-black warm tone with a very subtle top-to-bottom fade. Border is a faint warm white. Each card is a 2-row grid: copy on top, visual below filling the remaining space. **Card copy area:** ```css .security-card-copy { padding: 20px 22px 0; } .security-card h3 { margin-bottom: 6px; color: rgba(255, 247, 222, 0.9); font-size: 16px; line-height: 1.25; } .security-card p { max-width: 330px; margin-bottom: 0; color: rgba(255, 247, 222, 0.52); font-size: 15px; line-height: 1.35; } ``` **Shared visual area min-height:** ```css .security-api-visual, .compliance-list, .economics-visual { position: relative; min-height: 300px; } ``` --- ### Card 1: "Full policy control" (`.api-card`) ```html

Full policy control

First-class API access for storage pools, keys, regions, and retention rules. No vendor lock-in to proprietary workflows.

-> nimbus auth login
Enter code
VAULT-9AMP

-> policy attach
workspace/client-vault

openapi: 3.0.0
info:
  title: Nimbus API
paths:
  /storage/pools:
  /keys:
  /regions:
  /retention:

``` This card has two overlapping panels: a dark terminal window (bottom-left) and a golden spec card (top-right). **Terminal window (`.api-window`):** ```css .api-window { position: absolute; left: 26px; bottom: 28px; width: min(58%, 230px); min-height: 184px; border: 1px solid rgba(255, 247, 222, 0.13); background: rgba(8, 7, 5, 0.86); } .api-window > span { display: inline-block; width: 9px; height: 9px; margin: 10px 0 0 7px; border-radius: 50%; background: rgba(255, 247, 222, 0.28); } .api-window pre { padding: 62px 16px 16px; } .api-window pre, .api-spec pre { margin: 0; color: rgba(255, 247, 222, 0.6); font-family: var(--font-mono); font-size: 11px; line-height: 1.42; letter-spacing: 0; white-space: pre-wrap; } ``` The 3 `` elements are macOS-style dots positioned at the top-left of the window. The `pre` text sits below them with large top padding (62px) to create space below the dots. **API spec card (`.api-spec`):** ```css .api-spec { position: absolute; top: 56px; right: 26px; width: min(58%, 238px); padding: 16px 18px; border: 1px solid rgba(234, 208, 154, 0.38); background: rgba(64, 52, 30, 0.86); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3); } .api-spec pre { color: var(--accent); } ``` This panel is a warm-brown card with a golden border, overlapping the terminal from the top-right. Text is in accent gold. --- ### Card 2: "Full compliance" (`.compliance-card`) ```html

Full compliance

SOC 2, ISO 27001, and GDPR-ready controls help teams satisfy audits, procurement reviews, and data residency requirements.

``` 3 stacked compliance badge rows, each with a checkmark circle, a standard label, and a description. ```css .compliance-list { display: grid; align-content: center; gap: 12px; padding: 0 28px 30px; } .compliance-row { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 52px; padding: 10px 14px 10px 10px; border: 1px solid rgba(234, 208, 154, 0.28); background: rgba(48, 39, 23, 0.84); } ``` Each row is a 2-column grid (icon column + text column) with 2 implicit rows (small label on top, strong description below). The `` spans both rows via `grid-row: 1 / 3`. **Checkmark circle (pure CSS):** ```css .compliance-row span { grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); } .compliance-row span::before { content: ""; display: block; width: 7px; height: 4px; margin: 6px 0 0 5px; border-bottom: 2px solid #211a0e; border-left: 2px solid #211a0e; transform: rotate(-45deg); } ``` A gold circle with a dark checkmark made from two CSS borders rotated -45deg. **Text labels:** ```css .compliance-row small { color: rgba(234, 208, 154, 0.58); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05rem; text-transform: uppercase; } .compliance-row strong { color: var(--accent); font-size: 14px; font-weight: 400; } ``` --- ### Card 3: "Ownership and predictable economics" (`.economics-card`) ```html

Ownership and predictable economics

Reserved capacity, clear transfer lanes, and audit-ready billing make storage spend easy to forecast across business units.

1111111111111111111111111111
1111111111000000111111111111
1111111100011110001111111111
1111111000111111000111111111
1111111000111111000111111111
1111111100000000001111111111
1111110000001100000011111111
1111100000001100000001111111
1111110000000000000011111111
1111111111111111111111111111

Reserved tier24 TiB

Transfer laneEU Central

RevisionQ603

``` This card has a binary art pattern (a lock icon formed from 0s and 1s) above a 3-row data table. **Binary map:** ```css .economics-visual { display: grid; align-content: end; justify-items: center; gap: 18px; padding: 0 26px 30px; } .binary-map { margin: 0; color: rgba(234, 208, 154, 0.72); font-family: var(--font-mono); font-size: clamp(10px, 0.9vw, 12px); line-height: 1.18; letter-spacing: 0; } ``` The binary text is a 28-character-wide, 10-line block of 1s and 0s that visually forms a padlock shape. The 0s carve out the lock body and shackle. Displayed in gold monospace. **Asset table:** ```css .asset-table { width: min(100%, 302px); border: 1px solid rgba(255, 247, 222, 0.15); } .asset-table div { display: grid; grid-template-columns: 1fr 1fr; min-height: 32px; border-bottom: 1px solid rgba(255, 247, 222, 0.09); } .asset-table div:last-child { border-bottom: 0; } .asset-table span, .asset-table strong { align-self: center; padding: 0 12px; color: rgba(255, 247, 222, 0.56); font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.035rem; text-transform: uppercase; } .asset-table strong { color: rgba(255, 247, 222, 0.78); text-transform: none; } ``` A minimal bordered table with label/value columns. Labels are muted uppercase mono, values are brighter mono. --- ## Responsive Breakpoints ### `@media (max-width: 820px)` ```css .security-heading { grid-template-columns: 1fr; } .security-card-grid { grid-template-columns: 1fr; } .security-card { min-height: 420px; } ``` At 820px: Heading becomes single column (h2 above paragraph). Cards stack vertically. Card min-height reduces slightly. ### `@media (max-width: 520px)` ```css .security-section { padding-inline: 18px; } .security-card-copy { padding: 18px 18px 0; } .security-card p { max-width: none; } .api-window { left: 18px; width: 62%; } .api-spec { right: 18px; width: 60%; } .compliance-list, .economics-visual { padding-inline: 18px; } ``` At 520px: Tighter padding throughout. API window and spec card widen proportionally. Card descriptions remove max-width constraint. --- ## Project structure ``` index.html (section markup + font links) styles.css (all styles + media queries) script.js (empty or minimal — no JS needed for this section) package.json (vite ^5.4.2, "type": "module", scripts: dev/build/preview) vite.config.js (default export) ```24:T1291,Build a single interactive product card that swaps between a still photo (light mode) and a looping video (dark mode), with a slow crossfade between them. **Font** - Use `Neue Montreal` (custom `@font-face`, weights 400/500/700, `.woff2`), falling back to `sans-serif`. Load Material Icons from `https://fonts.googleapis.com/icon?family=Material+Icons`. **Container / card chrome** - The card lives in a grid `.cards` (`display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.2vw,20px); align-items:stretch;`). - Each card is wrapped in `.card-frame`: - `aspect-ratio:319 / 404;` - `border-radius:clamp(18px,1.7vw,28px);` - `overflow:hidden; background:#0e0d0c;` - `box-shadow:0 36px 70px -34px rgba(28,18,8,.42), 0 4px 14px -8px rgba(0,0,0,.18);` **Card internals** - `.direct-card`: `position:relative; width:100%; height:100%; overflow:hidden; background:#1a1714; isolation:isolate;` - A fixed-size artboard `.direct-card__artboard` (`#directCardTwoArtboard`) that is scaled to fit: - `position:absolute; top:50%; left:50%; width:660px; height:836px; border-radius:30px; overflow:hidden; background:#1a1714; isolation:isolate; container-type:inline-size; transform:translate(-50%,-50%) scale(var(--direct-scale,1)); transform-origin:center center;` - Compute `--direct-scale` in JS as `Math.min(card.clientWidth/660, card.clientHeight/836)` and recompute on load and `resize`. **Media layers (inside the artboard, in this order)** 1. Image `.direct-card__photo`: - `src="https://res.cloudinary.com/dgupuutfn/image/upload/v1780913983/room2_pihyox.png"` - `data-night-src="https://res.cloudinary.com/dgupuutfn/image/upload/v1780913982/room2_night_qc4qeq.png"` - `alt="Living room interior"` - CSS: `position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; z-index:0;` 2. Video `.direct2-video`: - `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260609_072414_1e4448ec-537f-4f94-b56b-19e00c1550e8.mp4"` - attributes: `muted loop playsinline preload="auto"` - CSS: same box as photo (`position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; z-index:0;`) plus `opacity:0; pointer-events:none; transition:opacity 4.5s cubic-bezier(0.22, 1, 0.36, 1);` 3. Gradient scrim `.direct2-grade`: - `position:absolute; inset:0; z-index:1; pointer-events:none;` - `background:linear-gradient(to top, rgba(8,6,4,.92) 0%, rgba(8,6,4,.6) 13%, rgba(8,6,4,.1) 28%, rgba(8,6,4,0) 42%), linear-gradient(to bottom, rgba(20,14,8,.34) 0%, rgba(20,14,8,0) 20%);` **Footer block `.direct-footer`** (`position:absolute; z-index:4; left:6.2%; right:6.2%; bottom:5.4%; color:#fff;`): - `.direct-footer__head` (`display:flex; align-items:center; gap:3%; margin-bottom:3.2%;`) containing: - `.direct-footer__icon` round badge: `flex:none; width:9.6%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;` with inline style `background:#3fae6b; color:#fff; box-shadow:0 10px 24px -10px rgba(63,174,107,.6);`, holding `construction` (icon sized `font-size:clamp(15px,5.6cqw,34px); line-height:1;`). - `.direct-footer__title` text "Build the room in real time": `font-weight:700; line-height:1.05; letter-spacing:-.6px; white-space:nowrap; font-size:clamp(18px,5.6cqw,36px);` - `.direct-footer__desc` text "Move pieces, explore finishes, and align with your studio on one shared canvas.": `color:#d7d2c9; font-weight:500; line-height:1.28; max-width:100%; font-size:clamp(13px,4.2cqw,27px);` (All footer text uses container query units `cqw`, so the artboard must set `container-type:inline-size`.) **Dark-mode behavior** - A `body.is-night` class toggles dark mode (driven by a theme switch elsewhere on the page). - When `body.is-night` is set: `.direct2-video { opacity:1; }` (fades in over 4.5s; the photo stays beneath). In light mode the video is `opacity:0`. - In the toggle handler, also `video.play()` (catch/ignore promise rejection) when entering night and `video.pause()` when leaving. - The still photo additionally swaps its `src` to `data-night-src` on entering night and back on day, with a matching `opacity 4.5s cubic-bezier(0.22, 1, 0.36, 1)` crossfade (fade to 0, swap on `load`, fade back to 1). **Responsiveness** - `@media (max-width:920px)`: page scrolls normally (`html,body{height:auto;overflow-y:auto;}`), `.cards` becomes `grid-template-columns:repeat(2,1fr); gap:clamp(16px,3vw,24px);`. - `@media (max-width:540px)`: `.cards` becomes a single column, `max-width:380px; margin:0 auto;`. - The artboard scale (`--direct-scale`) keeps the 660×836 internal layout perfectly proportioned at any card size.25:T10c2,--- **Prompt:** Create a full-viewport services section (100vh) with a solid gray background (`#C5C5C5`), vertically centered content, containing a counter label, a heading/subtext row, and a 3-column card grid with video thumbnails. **Section layout:** - `position: relative; z-index: 2; background-color: #C5C5C5` - `display: flex; flex-direction: column; justify-content: center` - `height: 100vh` - Padding: `70px 32px 80px 32px` **Content (top to bottom):** **1. Counter label:** - Text: `"003 / 005"` - `font-size: 11px; letter-spacing: 0.08em; color: #666; margin-bottom: 20px` - Fade-up animation with `delay: 0` **2. Heading + subtext row:** - A flex row (`display: flex; gap: 48px; align-items: flex-start; margin-bottom: 32px`) - **Left column** (heading): `flex-shrink: 0; width: 32%` - `