Krat Adventure Wilderness

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

# Krat — Adventure Wilderness Template

A premium cinematic wilderness landing page built with Tailwind CSS. The visual direction follows the supplied reference: deep navy canvas, saturated blue surfaces, warm orange/yellow imagery, oversized display type, small technical labels, generous negative space, and an intentionally asymmetric editorial grid.

## Structure

```text
krat-adventure/
├── pages/
│   └── index.html
├── preview.html
├── metadata.json
└── README.md
```

There are no local asset, CSS, or JavaScript directories. Tailwind is loaded through the CDN; photography is referenced from fixed Unsplash image URLs and interaction code is scoped to the page. `preview.html` is the template gallery shell (overview + sections index + design-system summary); `pages/index.html` is the live single-page site.

## Design language

- Deep navy `#070A38` foundation
- Electric royal-blue surfaces
- Warm sun-yellow and ember-orange accents
- Space Grotesk display typography with Inter body copy
- JetBrains Mono for technical labels and metadata
- Oversized editorial headings and strong vertical rhythm
- Asymmetrical adventure cards with staggered positioning
- Cinematic image overlays rather than conventional cards
- Full-screen navigation overlay
- Fine rules, coordinates, route numbers, and field-note metadata

## Sections

| Section | Purpose |
| --- | --- |
| Hero | Full-screen campaign introduction with oversized KRAT wordmark |
| Adventures | Three staggered route cards |
| The Wild | Editorial image/text feature section |
| Expedition | Featured expedition with statistics |
| Journal | Three staggered field-note articles |
| CTA | Large conversion section |
| Footer | Minimal navigation and location metadata |

## Responsive & accessibility

The page is mobile-first and designed from 320px through 1920px+. Desktop compositions use asymmetric grids and staggered cards; mobile switches to a deliberate vertical editorial flow. It includes semantic landmarks, a skip link, labelled navigation controls, visible keyboard focus, descriptive image alt text, an accessible menu button, Escape-to-close behavior, and reduced-motion support.

## Usage

Open `index.html` directly or serve the directory with a static server. No build step is required.

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

# AGENTS.md — Krat Adventure Wilderness

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

## What this template is

A premium cinematic wilderness landing page built with Tailwind CSS. The visual direction follows a supplied reference: deep navy canvas, saturated blue surfaces, warm orange/yellow imagery, oversized display type, small technical labels, generous negative space, and an intentionally asymmetric editorial grid.



## Design system

Deep navy `#070A38` foundation, electric royal-blue surfaces, warm sun-yellow and ember-orange accents, Space Grotesk display type + Inter body copy, JetBrains Mono technical labels/metadata, oversized editorial headings, asymmetrical adventure cards with staggered positioning, cinematic image overlays, a full-screen navigation overlay, fine rules, coordinates, route numbers and field-note metadata.



## File layout

```
krat-adventure/
├── pages/
│   └── index.html        # Live single-page site
├── preview.html          # Template gallery shell (overview + sections index)
├── metadata.json
└── README.md
```

No local asset, CSS, or JavaScript directories. Tailwind is loaded through the CDN; photography is referenced from fixed Unsplash image URLsand interaction code is scoped to the page..



## Sections

Hero (full-screen campaign introduction with oversized KRAT wordmark), Adventures (three staggered route cards), The Wild(editorial image/text feature), Expedition(featured expedition with statistics), Journal(three staggered field-note articles), CTA(large conversion section), Footer(minimal navigation and location metadata).



## How to adapt it

1. **Swap the destination**: replace the KRAT product copy, Unsplash photography URLs, routes, journal entries and statistics.
2. **Re-theme**: edit the color values in the page's inline `tailwind.config` (navy/blue/warm accent ramp).
3. **Add a section**: add a `<section>` to `pages/index.html` with matching editorial rhythm; keep the full-screen navigation overlay pattern.



## Do not

- Do not introduce a framework or local asset directories;the template is CDN + Unsplash by design.



## Quality bar

Semantic landmarks, a skip link, labelled navigation controls, visible keyboard focus, descriptive image alt text, an accessible menu button, Escape-to-close behavior, reduced-motion support. Validate with `python3 scripts/tooling/validators/validate.py` after changes.