# Prism Creative

An original three-page creative studio website with a dark editorial hero, playful vector artwork, expressive typography, asymmetric project presentations, and a local project brief builder. All brands, studio details, and projects are fictional. No client commissions are implied.

## Open the site

Open `index.html` in a modern browser, or serve this folder with any static web server. All links, styles, scripts, and artwork use relative paths. No build step, packages, fonts, external images, network requests, or credentials are needed.

- `index.html` — Studio introduction, selected work, creative process, and presentation gallery.
- `work.html` — Three concept projects with category filters, native case study dialogs, and a story selector.
- `contact.html` — Local brief builder with native validation, text preview, and `.txt` download.
- `styles.css` — Responsive styles, palette, layout, patterns, animation, and reduced motion support.
- `app.js` — Accessible mobile navigation, filtering, native dialog viewers, motion controls, and local brief export.

## Included original SVG artwork

Each SVG is self-contained, editable, has a `viewBox`, `title`, and `desc`, and uses only native SVG shapes and system text. Presentation files use a 1600 × 900 canvas.

1. `assets/hero-illustration.svg` — The curious arch character, orbit, sphere, and striped prism.
2. `assets/project-orbit.svg` — Odd Company identity presentation: tote, poster, and packaging.
3. `assets/project-editorial.svg` — Off Hours journal and field notebook presentation.
4. `assets/project-system.svg` — Common Ground six-part illustration system.
5. `assets/background-spectrum.svg` — Dark ink, lavender, and coral background wash.
6. `assets/pattern-prism.svg` — Repeating geometric arch, star, and checker pattern.
7. `assets/slide-opener.svg` — Creative direction presentation cover.
8. `assets/slide-process.svg` — Three-part creative process presentation graphic.

## Make it yours

Edit the CSS custom properties at the start of `styles.css` to change the core palette. Replace the fictional project and studio copy in the three HTML files. Update the `caseStudies` object in `app.js` to match your case study stories. The page markup contains useful project descriptions independently of the dialogs.

Open an SVG in a vector editor, or edit its shapes and colors directly. SVG text uses system Arial/Georgia and stays editable; convert text to paths in a vector editor if exact typography must remain identical on every machine. The repeat pattern is set on `.pattern-panel`; `.cta-band` uses the spectrum background. Both can be reused independently.

The contact page is a planning tool. It has no submission destination and does not send email. The disabled submit button is enabled only after the JavaScript handler prevents submission. User text is displayed using `textContent` and exported with a local `Blob`. Notes are held in memory only and disappear on page reload or navigation. Connect a real form service only after deliberately replacing this behavior and adding appropriate privacy details.

## Controls and accessibility

The mobile menu supports Escape, outside click, and link selection. The current page is identified with `aria-current`. Project filter buttons expose their pressed state and announce the visible count. Native dialogs support Escape, close buttons, backdrop clicks, and browser focus containment; opening controls regain focus on close. The case study selector changes the active story. Presentation viewers support previous/next buttons and Left/Right arrows, with direct SVG downloads. The project brief has native required field validation, a character counter, a preview with a return-to-edit control, and a text download.

The motion button pauses decorative movement and reveals. Device reduced-motion preferences are honored in CSS and JavaScript. Without JavaScript, navigation remains visible, project stories remain available in native details, and presentation images open directly. The brief submit remains disabled.

## Before publication

Replace the fictional studio identity and copyright copy. Review original concept project labels if substituting real work. Supply your own legal and privacy text if collecting visitor data. Verify your edited content at small and large widths, and check that all local paths remain inside this folder. Keep the three HTML pages together with `styles.css`, `app.js`, and `assets` when uploading to a static host.