Agency

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

# Agency Template (Vanilla)

A premium, **dark-first** editorial agency website template built for DevSnips
with semantic HTML, CSS (Pico CSS foundation), and vanilla JavaScript. The
template is split into modular files — `code.html` (HTML structure) +
`style.css` (the design system) + `script.js` (navigation, scroll reveal, and
scrollspy interactions) — with `preview.html` as a self-contained single-file
preview of the UI so you can open it directly and see exactly how the template
looks.

**Technology:** vanilla
**Category:** templates
**Subcategory:** agency
**Type:** single-page (one-page agency marketing site)

## Files

```
Agency/
├── code.html               # HTML structure (links style.css + script.js) — the modular source
├── style.css               # the design system (Pico CSS foundation + DevSnips --ds-* tokens)
├── script.js               # mobile nav + scroll reveal + scrollspy (vanilla JS, no deps)
├── preview.html            # single-file preview of the UI (inlines style.css + script.js) — open this to see it
├── metadata.json           # DevSnips registration metadata
└── README.md               # This file
```

No `assets/` directory is required. The template uses no local images, icons,
fonts, or other binary assets. All imagery is loaded from Unsplash URLs and all
fonts and the Pico CSS base are loaded from CDNs (see **Dependencies**).

## Preview

Open `preview.html` directly in a browser to see the template — it is a
self-contained single-file preview that inlines the CSS and JS:

```bash
cd "Vanilla/Templates/agency"
python3 -m http.server 8080
# visit http://localhost:8080/preview.html
```

For development and customization, work with the split files — open `code.html`
(which references `style.css` and `script.js` relatively) in the same served
folder. The whole template runs without a build step. The only external requests
are Google Fonts (Inter), Pico CSS, and the Unsplash images, all from CDNs.

Per the shared `design-tokens.md` convention, the template folder contains
exactly **one** `preview.html`. It is the canonical preview shown by the DevSnips
website. It is fully responsive, uses the template's real CSS/JS, uses relative
paths, and loads correctly when opened directly.

### Architecture

The template is split into three modular files plus a single-file preview:

- **`code.html`** — the HTML shell (header, hero, about, services, work, case
  study, process, capabilities, team, testimonials, insights, CTA, footer) that
  links `style.css` and `script.js`. This is the modular source you customize.
- **`style.css`** — the entire design system: Pico CSS overrides, the `--ds-*`
  token block, base/typography/button styles, every section style, the
  responsive breakpoints, and the reduced-motion guard.
- **`script.js`** — the runtime: mobile navigation toggle, IntersectionObserver
  scroll-reveal animations, and scrollspy active-nav state. No dependencies.
- **`preview.html`** — a self-contained single-file preview that inlines
  `style.css` and `script.js` into the `code.html` structure, so it can be opened
  directly with no build step and renders identically to the modular version.

## Sections

The page is composed of these sections, in order:

1. **Header** — sticky nav bar with logo, anchor links, a primary CTA, and a
   mobile menu toggle (below 768px).
2. **Hero** — large-typography headline with an asymmetric two-column text +
   image grid and a meta row (projects, contributors, client rating).
3. **About** — split heading + paragraph with a two-up statistics grid
   (projects delivered, core contributors).
4. **Services** — editorial numbered list of six service offerings.
5. **Selected Work** — alternating image/content project layouts (two projects).
6. **Case Study** — featured case study with Challenge / Approach / Solution /
   Results and a 16:9 image.
7. **Process** — five-step horizontal grid (Discover, Define, Design, Build,
   Refine).
8. **Capabilities** — four-up grid (Visual Identity, Interaction Design,
   Accessibility, Performance).
9. **Team** — four-up team grid with square portraits.
10. **Testimonials** — three-up testimonial cards with blockquotes and citations.
11. **Insights** — three-up blog/insights cards with category, date, and read
    time meta.
12. **CTA** — centered contact call-to-action.
13. **Footer** — four-column footer (brand, navigation, resources, community)
    with a bottom bar.

## Design system

The template extends the shared DevSnips `--ds-*` token system (defined in
[`design-tokens.md`](../design-tokens.md)) and overlays Pico CSS defaults.

- **Palette** — black `#000000` background, white text, one lime accent
  `#ccff00`, gray-100 `#f4f4f4`, gray-600 `#666666`, gray-900 `#121212`. The theme
  is **dark-first and fixed** — there is no light-mode toggle.
- **Typography** — Inter (400 / 600 / 800 / 900) from Google Fonts; oversized
  `clamp()`-based hero and CTA headlines, an uppercase eyebrow label, and a
  tight `letter-spacing` on headings.
- **Geometry** — `0px` radius (square corners), `1px solid #222` hairline
  borders, no rounded surfaces and no drop shadows — a flat, editorial grid.
- **Spacing** — a base-4 `--ds-space-*` ramp (0.25rem → 4rem).
- **Motion** — a single `0.3s cubic-bezier(0.4, 0, 0.2, 1)` transition token;
  IntersectionObserver scroll-reveal fades sections in. All motion is gated by
  `@media (prefers-reduced-motion: reduce)`.

To re-theme the template, edit the `--ds-*` custom properties at the top of
`style.css` (`:root`). Pico CSS variables (`--pico-*`) are re-pointed at the
`--ds-*` tokens so Pico inherits the theme automatically.

## Usage

Copy the `Agency/` folder into your project and open `code.html` (serving the
folder over HTTP so the relative `style.css` and `script.js` load), or copy the
HTML, CSS, and JavaScript into an existing project. No build step or backend is
required. To swap images, replace the Unsplash `src` URLs in `code.html` (and in
`preview.html` if you keep it in sync) with your own.

## Responsive behavior

The layout is responsive by composition with three breakpoints:

- **≤ 768px** — the nav links collapse into a dropdown menu toggled by the menu
  button (`aria-expanded`), the primary CTA hides, the hero and project grids
  stack to one column, the about/case-study grids stack, and the process /
  capabilities / team / testimonials / insights / footer grids reflow to 1–2
  columns. Headline `clamp()` ranges shrink for narrow screens.
- **769–1024px** — the hero and about grids collapse to single columns, the
  process grid becomes 3-up, capabilities 2-up, team 2-up, testimonials 2-up,
  insights 2-up, and the footer 2-up.
- **> 1024px** — the full multi-column editorial layout is restored.

`overflow-x: hidden` on `body` plus fluid `clamp()` typography and
`max-width: 1400px` containers keep the page free of horizontal overflow from
320px to 1920px.

## Accessibility

- Semantic HTML landmarks (`header`, `nav`, `main`, `section`, `article`,
  `footer`) and a single `h1`.
- Skip-to-content link revealed on focus.
- Mobile navigation uses `aria-expanded` and `aria-controls`; the menu button
  label/icon swaps between `☰` and `✕`.
- `aria-current="location"` is set on the active scrollspy navigation link.
- `:focus-visible` outline (2px accent) on all interactive controls.
- `prefers-reduced-motion: reduce` disables smooth scroll, scroll-reveal
  transforms, and all CSS transitions/animations.
- Descriptive `alt` text on all images; decorative ordering uses CSS `order`
  rather than DOM reordering.

## Dependencies

- **Pico CSS** (`@picocss/pico@2`) — loaded from `cdn.jsdelivr.net` (CDN).
- **Google Fonts** — Inter (400 / 600 / 800 / 900), loaded from
  `fonts.googleapis.com`.
- **Unsplash** — imagery loaded from `images.unsplash.com` URLs (CDN).

No npm packages, build tools, bundlers, or JavaScript frameworks are required.
The vanilla JavaScript in `script.js` has no runtime dependencies.

## Browser support

Chrome, Firefox, Safari, and Edge (modern evergreen browsers). Uses standard
CSS Grid, custom properties, `clamp()`, `backdrop-filter`, and
`IntersectionObserver` — all supported in current evergreen browsers.

## Customization

- **Colors / typography / spacing** — edit the `--ds-*` tokens in the `:root`
  block of `style.css`.
- **Content** — edit the HTML in `code.html` (and mirror to `preview.html` to
  keep the preview in sync, or regenerate it by inlining `style.css` +
  `script.js` into `code.html`).
- **Sections** — add or remove `<section class="ds-…">` blocks in `code.html`;
  add `ds-reveal` to opt a section into scroll reveal, and ensure any
  `section[id]` you want in the scrollspy nav has a matching `#id` link in the
  header nav list.
- **Images** — replace the Unsplash `src` URLs with your own assets.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# AGENTS.md — Agency

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A dark-first editorial creative-agency marketing template: 13 sections (header, hero, about, services, selected work, case study, process, capabilities, team, testimonials, insights, CTA, footer) with mobile nav, scroll-reveal, and scrollspy.

## Design system

Built on the shared [`design-tokens.md`](../design-tokens.md) `--ds-*` token system (Pico CSS + `--ds-*` tokens, Pico's `--pico-*` vars re-pointed at `--ds-*`). **Dark-first, fixed** theme (no light toggle): black bg, white text, single lime accent. Inter type. Square radii, 1px hairline borders, no drop shadows.

## File layout

```
Agency/
├── pages/
│   ├── code.html      # HTML structure (links style.css + script.js)
│   ├── style.css      # the design system (--ds-* tokens, dark-first)
│   └── script.js      # mobile nav + scroll reveal + scrollspy
├── preview.html       # self-contained preview (inlines CSS+JS)
├── metadata.json
└── README.md
```

No `assets/`—all imagery is Unsplash CDN URLs; fonts + Pico CSS are CDN.

## How to adapt it

1. **Swap content / imagery**: edit `pages/code.html`; replace Unsplash URLs with the client's imagery.
2. **Rebrand**: edit the `--ds-*` tokens in `pages/style.css` `:root` (the accent is `--ds-color-accent`).
3. **Add a section**: add a `<section>` to `code.html` with a `.ds-reveal` child and an `id` (scrollspy + reveal pick it up automatically).
4. **Rebuild the preview**: regenerate `preview.html` by inlining `style.css` and `script.js` into `code.html`.

## Do not

- Do not add a light-mode toggle&mdash;the dark-first theme is deliberate and fixed.
- Do not replace the lime accent with violet/neon. Keep one controlled accent.
- Do not introduce rounded surfaces or drop shadows; the flat editorial grid is the design language.

## Quality bar

`aria-expanded` + `aria-controls` mobile menu, `aria-current` scrollspy, `:focus-visible` accent ring, descriptive alt text, reduced-motion guard. The head inline `<script>document.documentElement.classList.add('js')</script>` gates reveal (no-JS falls back to visible). Run `python3 scripts/qa/resources/qa_vanilla.py` after changes.

## Gotcha

`script.js` and the inlined `preview.html` script block contain example code strings with literal `<script>` tags&mdash;escape the closing tag as `<\/script>` in JS source inside `preview.html`.