Live capture at 1440px, 2026-10-24
How it’s built
- Layout
- A pale blue-gray page has a long rounded white header with identity, centered text links and project/language/search/menu controls. A deep-blue rounded hero places an outlined agency/location tag above a large left two-line German headline, one phrase bright blue, then explanation and paired filled/outlined pills. Fine cyan network lines/nodes span the open right side; a white client-logo strip follows.
- Type
- Large clean sans heading with blue phrase, medium sans copy and compact navigation; exact fonts unknown.
- Color and surface
- Pale cool field, white header/logo strip, deep cobalt hero, cyan fine network lines, white/blue type and dark-blue actions.
- Components
- Rounded header, location tag, headline/support, paired actions, right-side node-line graphic and logo strip.
What makes it work
- Pale page gutters separating broad rounded light-header and deep-blue hero bands
- Large left headline/support with one contrasting phrase
- Fine cyan connected lines/nodes across the right side
- Paired filled and outlined actions
On a new subjectFor a municipal drinking-water service, stack a broad rounded light header and rounded deep-blue hero with visible pale gutters. Place a large left safety message and short explanation opposite fine cyan network lines/nodes, with paired filled/outlined resident actions; replace agency claims and logos without implying a live diagram.
Measured
Fonts loadedFont Awesome 5 Free, Font Awesome 5 Brands, Inter
H172px / 515 / -1.44px
Body text16.96px
Page background#d9dde4
Text color#14151a
Page height9,395px
Computed CSS at 1440px, 2026-10-24.
Live behavior
- Today
- Cool light-gray surround with a floating rounded white navigation panel and a large separate rounded navy hero. Medium-weight white sans heading uses a cyan/blue emphasized word; a small tracked uppercase capsule label sits above. Fine cyan crossing strands and luminous dots occupy the right side behind the copy. White solid and pale-outline pill actions sit beneath the gray-white paragraph. Lower content uses white and pale-blue rounded sections, a monochrome client strip and a large rounded portrait. Consent overlays the bottom.
- Responsive
- Desktop navigation panel measures1381.812x76px at21.594,21.594 with28px corners; tablet/phone top panel has60px height and18px corners. Narrow header retains identity, language links, search and menu, while desktop link row/project action is not visible. Main display changes72px/80.64px to56px/62.72px tablet and35.1px/39.312px phone, weight515/tracking-0.02em. Tablet actions stack into wide pills; phone action locations are measured below but fully covered by consent, so their visible treatment is unobserved. Phone hero title wraps four lines and its paragraph is partly occluded. Phone document width375px within390px viewport includes a scrollbar.
- Scroll
- At actual scrollY750, the hero bottom is followed by a white rounded logo band and pale-blue rounded about section. The latter pairs a left45.68px/52.9888px heading, blue emphasized word and16.96px/27.984px gray prose with a large right monochrome portrait. Consent remains fixed and covers the lower content. Logo images move horizontally across captures; sampled textual logo names are not visibly painted words in this frame and are excluded from typography.
