# Canyon Flight Hero — Style Reference

> Flying over red-rock canyons: a full-bleed aerial film under a pale grey bar, the name ghosted in warm grey across the rock.

**Theme:** light

Values come from a headless Chrome render at 1440×900 (computed styles, loaded fonts, first-viewport color share and DOM boxes from `tools/computed_style.py`, plus a selector probe of the header, hero, bio, image-and-text sections, buttons and footer), the 1440×900 and full-page screenshots, three screenshots scrolled to y=1450, 2250 and 3300, and two narrow captures at 790px and 810px to locate the header breakpoint. It is a Squarespace 7.1 site (Fluid Engine grid, `sqs-` classes); site styles are generated by Squarespace and were read through computed values rather than a hand-written stylesheet. Poppins 300 and 500 load. The hero is a Squarespace background video (an `iframe.background-video` over a still `img.custom-fallback-image`), so the hero frame differs between captures; the 1440×900 capture shows a red-rock canyon with two paramotor wings. The page is 4049px tall at 1440 wide.

## Overview

A photographer's home page that happens to belong to an AI researcher. A fixed pale grey (#f7f7f7) header, 102px tall, carries "Richard Socher" in Poppins 32px/500 black at the left, five light 16px nav items (Thoughts, Publications, Aerial Photos, Photos, Misc) and four 24px black social glyphs (Twitter, Instagram, mail, YouTube) at the right; it slides away when scrolling down. Under it, a full-bleed hero (594px at 1440×900, including the header's space) plays aerial paramotor footage cropped to cover, with the name repeated at 64px/500 in warm grey #a8a6a1, centred near the bottom of the frame and left semi-transparent-looking against the rock. Below, on #f7f7f7, a 897px column of light Poppins 16px/1.8 text: a short intro with dark-blue #04467c underlined links, a "Bio:" paragraph block, a bulleted "More info" list and an embedded YouTube podcast. Then three white sections alternate a 618×412px landscape photo with a centred text block (35.2px/500 heading, 16px/300 line, a warm-grey #a8a6a1 button with 6.4px radius): Publications, Paramotor Photography, Photography. A plain charcoal #38383b footer band closes the page.

## First Viewport

Color share (8-color quantization of the 1440×900 shot): pale grey #f7f7f7 34.6% plus #fafafa 2.8%, #f5f7f8 2.8%, #f8f7f7 1.1%, #f9f8f4 0.5% (header and bio section); canyon reds and shadows #4f2614 29.5% and #261d1a 23.3% (hero footage); warm grey #a7a1a1 5.5% (hero title, sky, anti-aliased text). Link blue is under 1%.

Anatomy in DOM order (desktop 1440px):

1. **Fixed header** (`header.header`, y=0, 1440×102px): #f7f7f7, position fixed; hides on scroll down.
2. **Site title** (`.header-title-text a`, x=43, y=28): Poppins 32px/500, line-height 1.4, #000000, no underline.
3. **Nav** (`.header-nav-list`, x=743–1196, y=35): five items Poppins 16px/300 #000000, padding 1.6px 0, about 23px apart; "Misc" is a folder button with a dropdown.
4. **Social icons** (`a.header-icon`, x=1232, 1279, 1326, 1373, y=39): 24px filled black SVGs, first 36px after the nav, then 23px gaps. Header ends at y=102.
5. **Hero** (`section.page-section` 1, y=0–594, padding-top 102px): background video iframe 1440×810px and fallback image 1440×960px, both cropped to cover; content wrapper max-width 1200px, padding 190px 43px 43px.
6. **Hero title** (`h1`, y=472, centred over x=120–1320): Poppins 64px/500, line-height 1.23, #a8a6a1, margin-top 32px; an empty `h4` (19.2px/500 #a8a6a1) sits 59px above it. Hero ends at y=594; gap 43px.
7. **Bio column** (`.sqs-block-content`, x=271, y=637, 897px wide): Poppins 16px/300, line-height 1.8 (28.8px), #000000; links #04467c underlined; paragraph spacing 16px.

## Tokens — Colors

| Name | Value | Token | Applies to (rendered elements) |
|---|---|---|---|
| Mist Grey | #f7f7f7 | (Squarespace theme) | fixed header, hero placeholder, bio section background |
| Ink | #000000 | (theme) | site title, nav, social icons, body text, section headings |
| Warm Grey | #a8a6a1 | (theme accent) | hero title, primary buttons fill |
| Button Text | #ffffff | (theme) | primary button labels, footer text |
| Deep Link Blue | #04467c | (theme) | inline links in the bio, underlined |
| Paper | #ffffff | (theme) | image-and-text sections (Publications, Paramotor Photography, Photography) |
| Charcoal | #38383b | (theme) | footer band |
| Canyon Red | #4f2614 | (footage) | dominant hero colour in the capture |
| Canyon Shadow | #261d1a | (footage) | hero shadows |

## Tokens — Typography

| Family | Declared | Rendered (fonts_loaded) | Substitute |
|---|---|---|---|
| Sans (everything) | Poppins (Squarespace font loader) | Poppins 300, 500 | Poppins (Google Fonts); otherwise Outfit |

| Role | Selector | Size / weight / line-height | Color |
|---|---|---|---|
| Site title | `.header-title-text a` | 32px / 500 / 1.4 | #000000 |
| Nav item | `.header-nav-item a` | 16px / 300 / 1.8 | #000000 |
| Hero title | `section h1` | 64px / 500 / 1.23, centred | #a8a6a1 |
| Section heading | `h3` | 35.2px / 500 / 1.33, centred | #000000 |
| Body | `.sqs-block-content p`, `li` | 16px / 300 / 1.8 | #000000 |
| Link | `.sqs-block-content a` | 16px / 300, underline | #04467c |
| Button | `a.sqs-button-element--primary` | 16px / 500, letter-spacing 0.02em | #ffffff on #a8a6a1 |
| Footer | `footer p` | 16px / 300, centred | #ffffff |

## Tokens — Spacing & Shapes

| Element | Radius | Border | Shadow |
|---|---|---|---|
| Primary button | 6.4px | none | none |
| Section photos | 0 | none | none |
| Header | 0 | none | none |
| YouTube embed | 0 | none | none |

## Layout Metrics

- **Header**: fixed, full width, 102px tall, side padding about 43px (3vw); title left, nav and icons right.
- **Hero**: full-bleed section, 594px tall at 1440×900 (it grows with viewport height; the full-page capture with a tall viewport shows a much taller hero); padding-top 102px for the header; content wrapper max-width 1200px, padding 190px 43.2px 43.2px.
- **Bio section**: #f7f7f7, padding 43.2px 0 129.6px; Fluid Engine 24-column grid with 11px gaps; the text block spans x=271–1168 (897px); paragraphs margin 16px 0; list items 29px tall with 8px gaps.
- **Image-and-text sections**: white, padding 57.6px 43.2px inside a 1200px wrapper (x=120–1320); photo 618×412px (3:2) on one side, text centred in the other half; sides alternate (photo left, right, left); each section 527px tall.
- **Buttons**: padding 19.2px 32px, about 63px tall.
- **Footer**: #38383b band, 180px tall, centred 16px white text.

| Breakpoint | Gutter | Body size | Title size | Grid change |
|---|---|---|---|---|
| <800px | about 48px header padding | 16px | site title 32px | header collapses to title plus a two-line hamburger; nav and social icons move into the overlay menu; Fluid Engine switches to its mobile grid and image-and-text pairs stack |
| ≥800px | about 43px (3vw) | 16px | hero 64px | full header; nav wraps to two lines just above the breakpoint (seen at 810px) |

## Components

- **Fixed light header**: #f7f7f7 bar, 102px; Poppins 32px/500 title left; 16px/300 nav right with a "Misc" dropdown; four 24px black filled social icons; hides on scroll down and returns on scroll up.
- **Video hero**: full-bleed autoplaying background video with a still fallback, cropped to cover; centred 64px/500 name in #a8a6a1 near the bottom; no overlay tint, no buttons.
- **Light bio column**: Poppins 16px/300 at 1.8 line-height, #000000, #04467c underlined links, disc bullets indented 40px, an embedded 16:9 YouTube player at column width.
- **Image-and-text row**: 618×412px landscape photo, square corners; opposite half has a centred 35.2px/500 heading, a 16px/300 line and a primary button.
- **Primary button**: #a8a6a1 fill, #ffffff Poppins 16px/500 label with 0.02em tracking, 6.4px radius, padding 19.2px 32px, no border or shadow.
- **Footer band**: flat #38383b, 180px tall, white text centred.

## Page Modules

| Module | Present | How it is styled |
|---|---|---|
| Site title / navigation | yes | fixed pale header with nav and social icons |
| Photographic hero | yes | full-bleed aerial video with ghosted name |
| Bio | yes | light Poppins column with blue links |
| More info / press links | yes | bulleted list in the bio |
| Podcast video | yes | embedded YouTube player |
| Publications | present but non-standard | a teaser row with a photo and a button linking to a separate page |
| Photography teasers | yes | two more image-and-text rows |
| Portrait | absent from the source | none on the home page |
| News | absent from the source | none |
| Footer | yes | charcoal band |

## Adapting to Other Content

- **A publication list**: keep it off the hero page as the source does, or add a #ffffff section with a 1200px wrapper and 16px/300 entries: title as a #04467c underlined link, authors and venue below in the same weight; no thumbnails, the photography carries the imagery.
- **More authors**: inline in 16px/300, own name in 500.
- **News**: a bulleted list in the bio column, same 16px/1.8 type, with the date first.
- **A results table**: Poppins 14px/300 black on white, 1px #f7f7f7 row bands, headings 500; keep it inside the 897px column.
- **Different hero media**: any landscape photograph or video works; keep the title in a light warm grey such as #a8a6a1 so it sits in the image instead of on it.

## Do's and Don'ts

- Do let the hero be a full-bleed landscape photograph or film with only the name on it.
- Do keep body text light (300) Poppins at 16px with 1.8 line-height.
- Do keep buttons flat #a8a6a1 with white 500 labels and a 6.4px radius.
- Don't add a dark overlay or a text box to the hero.
- Don't round or frame the section photos.
- Don't introduce a second accent; links are the only blue.

## Surfaces

Pale grey #f7f7f7 header and bio section, white image-and-text sections, a charcoal #38383b footer; the hero is pure image.

## Imagery

Aerial landscape photography and paramotor footage (red-rock canyons, eroded badlands, green glacial valleys, a lone tree under a violet sky); a YouTube podcast thumbnail. No portrait and no research figures on the home page.

## Layout

Fixed header, full-bleed video hero, a centred 897px bio column on grey, three alternating photo-and-text rows inside a 1200px wrapper, charcoal footer. About 4049px tall at 1440 wide.

## Agent Prompt Guide

Quick colors: header and bio #f7f7f7, text #000000, hero title and buttons #a8a6a1, button text #ffffff, link #04467c, sections #ffffff, footer #38383b.

1. "Build a fixed header: full width, 102px tall, background #f7f7f7, about 43px side padding; left the name in Poppins 32px/500 #000000; right five nav links in Poppins 16px/300 #000000 about 23px apart, then four 24px filled black social icons 23px apart; hide on scroll down."
2. "Make a full-bleed hero: a background video (with a still fallback) cropped to cover the full width and about 594px tall at 900px viewport height; centred near the bottom the name in Poppins 64px/500 #a8a6a1; no overlay."
3. "Create an image-and-text row inside a 1200px wrapper with padding 57.6px 43.2px on #ffffff: a 618×412px photo with square corners on one side; on the other, centred, a Poppins 35.2px/500 #000000 heading, a 16px/300 line and a button with #a8a6a1 fill, #ffffff 16px/500 label, 6.4px radius and padding 19.2px 32px."

## Similar Pages

- Squarespace 7.1 personal sites with a video hero and alternating image-and-text sections.
- Researcher homepages that lead with photography rather than research.

## Quick Start

```css
:root {
  --mist: #f7f7f7;
  --ink: #000000;
  --warm-grey: #a8a6a1;
  --link: #04467c;
  --paper: #ffffff;
  --charcoal: #38383b;
  --font-sans: "Poppins", sans-serif;
}
body { font: 300 16px/1.8 var(--font-sans); color: var(--ink); margin: 0; }
.header { position: fixed; top: 0; left: 0; right: 0; height: 102px; background: var(--mist); display: flex; align-items: center; justify-content: space-between; padding: 0 43px; }
.hero { position: relative; min-height: 594px; background: #261d1a center / cover; display: flex; align-items: flex-end; justify-content: center; }
.hero h1 { font: 500 64px/1.23 var(--font-sans); color: var(--warm-grey); }
.bio { background: var(--mist); padding: 43px 0 130px; } .bio .col { max-width: 897px; margin: 0 auto; }
.bio a { color: var(--link); text-decoration: underline; }
.button { background: var(--warm-grey); color: #ffffff; font: 500 16px var(--font-sans); letter-spacing: .02em; border-radius: 6.4px; padding: 19.2px 32px; }
footer { background: var(--charcoal); color: #ffffff; min-height: 180px; }
```

## Provenance

- **URL**: https://www.socher.org/
- **Person**: Richard Socher (NLP, deep learning).
- **Venue / award**: ACL 2023 Test of Time Award, "Recursive Deep Models for Semantic Compositionality Over a Sentiment Treebank" (2013, first author). https://www.aclweb.org/portal/content/announcement-2023-acl-test-time-paper-award
- **Selection reason**: award rule (first/last author); chosen for the full-bleed landscape hero with the name overlaid, a photographic-hero style the other picks lack.
- **Template credit**: Squarespace 7.1 (Fluid Engine); no named template on the page.
- **Evidence used**: tools/computed_style.py render at 1440×900 (computed styles, fonts_loaded, color share, DOM boxes), a selector probe of header, hero, bio, sections, buttons and footer, the 1440×900 and full-page screenshots, three scrolled captures and two narrow captures at 790px and 810px, on 2026-10-28.