Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A dark teal-tinted industrial photograph supports a dense hero with very large condensed white uppercase headline at left, orange emphasized words, small supporting text, metric blocks and paired actions. A compact collage video tile sits at right; dark header with orange line and compact navigation above.
- Type
- Huge very heavy condensed uppercase title with orange emphases; small condensed uppercase kicker and regular sans body. Exact painted font identity unknown.
- Color and surface
- Deep teal photo overlay, white/orange type and orange actions, dark gray lower section.
- Components
- Use dark teal-tinted documentary imagery beneath an oversized condensed uppercase left headline with orange emphasis, compact metrics/actions and a right collage tile.
What makes it work
- Dark teal-tinted documentary field
- Oversized condensed white headline with orange emphasis
- Compact metrics and paired actions
- Right image collage tile
On a new subjectFor a public emergency preparedness service, use an original teal-tinted field photograph under a condensed white and orange headline, verified proof blocks and a small right collage of training images.
Measured
Fonts loadedFont Awesome 6 Brands, Font Awesome 6 Free, Barlow Condensed, Barlow
H1100px / 900 / -2px
Body text16px
Page background#ffffff
Text color#353031
Page height11,032px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- Dense promotional hero uses a dark teal field/photo wash, enormous white condensed uppercase statement with two orange emphasis words, and a much smaller uppercase two-line phrase inserted into the final heading row. A thin orange rule separates the header from the hero. Compact tracked condensed navigation, orange rectangular actions and a right-side thumbnail montage with a circular play button repeat the same visual language. Fine outlined statistics cells and a circular award badge sit below the text. The next section switches to warm charcoal, keeping white/orange condensed headings and a ruled list of small orange icons.
- Responsive
- Hero heading100px/95px desktop changes64px/60.8px tablet and46.8px/44.46px phone. Inserted phrase45px/40.5px becomes26.88px/24.192px tablet and19.656px/17.69px phone. Desktop is text left/preview right; tablet stacks copy, statistics, badge, paired actions then preview. Phone retains readable headline/paragraph above consent but lower stats/media/actions are covered or outside the screenshot. Phone header replaces links with an outlined menu button and140x32px identity. Tablet retains a crowded link row whose Work With Us action is clipped at the right edge; this is an observed limitation, not a recommended navigation rule. Paragraph remains20px/32px narrow, with24px side inset.
- Scroll
- Actual scrollY750 keeps the75px header fixed. Hero actions appear near y106 above the warm-charcoal section beginning near y244. Left68px/64.6px heavy condensed headline uses an orange phrase; right42px/39.9px title precedes five ruled rows with orange icons and16px body copy. A dashed orange looping path enters below. Consent remains lower left, hiding some paragraph text/path. Only the first following section is seen, not the11032px full desktop page.
