Future Studio

Summary

The same markup as demo2 (banner, two photo walls, values, Client Map, People) with one extra stylesheet and script on top that change its mood to a cool, technical "DEPO 2.0". The comments in the CSS call it "Future Studio (v2 — Refined)" and describe the aim: restrained futurism, a deep ground, accents, readability — a graphite instead of pure black, a muted indigo instead of acid cyan, no neon grid or noise. It is a test of how far a skin alone can move the existing home.

Prompt

The brief this page was built from.

Take the demo2 home page (banner, two photo walls, values, Client Map, People) and, without
touching its markup, add one stylesheet and one script that move its mood to a cool, technical
"DEPO 2.0 — Future Studio": restrained futurism, readability first.

- Graphite #0d0e16 instead of pure black, a second ground #12131e, glass surfaces with indigo
  hairlines, a muted indigo accent #6c8cff and violet #b46cff; brand gold stays in the titles.
- No neon grid, no noise. The banner photo darkened and desaturated under an indigo glow, the
  intro in a blurred glass panel; captions and names in a letter-spaced system monospace.
- A test of how far a skin alone can move the existing home.

Look

Type: as demo2 — Lato for body text, Lazurski in gold for section titles and value names — plus the system monospace stack (ui-monospace, SF Mono, Menlo) for photo captions and people's names, letter-spaced 0.1em.
Palette: #0d0e16 graphite ground, #12131e second ground, rgba(22,24,38,.7) glass surface, rgba(120,160,255,.1) hairline borders, #6c8cff indigo accent, #b46cff violet accent, #e8ebf4 soft white text, #8b90a5 dim text; brand gold #ffb500 stays in the titles.
Layout: demo2's order unchanged; the banner photo is darkened and desaturated with an indigo radial glow and the intro sits in a blurred glass panel; tiles, value cards, the Client Map list and People cards get 1 px glow borders on glass.
Motion: a 2 px indigo-to-violet progress bar at the top scales with scroll; on fine pointers an 8 px glowing dot replaces the cursor and eases after the pointer (rAF, factor 0.2), growing into a 40 px ring over links, tiles and cards; sections fade up once with IntersectionObserver; tiles and cards lift 3 px with a coloured shadow on hover; demo1.js wall drift and the site's animated background still run. Reduced motion turns off the animations, reveals and cursor.

Built with

Part	What
HTML	public/demo3/index.html (demo2's markup plus two files)
CSS	public/demo3/css/demo3.css on top of public/demo3/css/demo2.css, public/demo3/css/demo1.css and `/demo3/css/*`
JS	public/demo3/js/demo3.js — vanilla (progress bar, cursor, section reveal) + public/demo3/js/demo1.js; site `ellipses.js`, `site.js`, `app.js`, `i18n.js`
Libraries	none
Fonts	Lato, Lazurski, Poppins from `/demo3/fonts/`; system monospace
Images	same as demo2: banner, logo, `/_img/photos/photo-01…30.jpg`, `/_img/site/first-page/` portraits

Borrowed

Everything demo2 borrows: the real DEPO header and footer, the live home's values / Client Map / People blocks, the site-asset snapshot (/demo3/css/, /demo3/js/, /demo3/fonts/, /_img/site/) (front at commit 43a7a8b^), DEPO gallery covers.
No third-party code; the source of the skin itself was not recorded.

Config

None — static page.

Notes

The custom cursor hides the system cursor on every link and button (cursor: none), which some visitors find disorienting; the dot keeps a rAF loop running all the time.