Skip to content

We use analytics cookies only with your consent. No advertising and no tracking beyond this site. More about privacy

HR · HrvatskiEN
Start a project

Colophon

How this site is made.

A colophon is an old printer’s habit: a note at the back of a book on what it was set in, and how. This is ours.

Type

Mona Sans

All text and headings

A variable typeface with width (75–125) and weight (200–900) axes. When a heading appears, it settles from a narrower cut into its full width.

Designer
GitHub

Fragment Mono

Labels, indexes and metadata

A monospace for everything that is a label rather than a sentence.

Test line
wdth 75

Đurđevac Čakovec Šibenik Žminj

wdth 100

Đurđevac Čakovec Šibenik Žminj

wdth 125

Đurđevac Čakovec Šibenik Žminj

Both typefaces are served from our own domain, with the full set of Croatian diacritics.

Technology

Framework
Next.js 16.3 and React 19.2
Language
TypeScript
Styling
Tailwind CSS 4
Translations
next-intl, Croatian and English
Motion
GSAP with ScrollTrigger and SplitText; three.js (WebGL) for the particle scene on the home page; Lenis for smooth scrolling on desktop
Email
Resend
Hosting
Vercel

Pages are generated ahead of time and served from a CDN. Only the parts that are genuinely interactive ship JavaScript.

Speed

We don’t promise speed; we budget for it. This is the budget we set ourselves for mobile, at the 75th percentile of real visits:

LCPLargest Contentful Paint
≤ 2.0 s
INPInteraction to Next Paint
≤ 150 ms
CLSCumulative Layout Shift
≤ 0.05
  • The headline is in the HTML from the first frame and never waits for an animation.
  • Images in AVIF and WebP, always with dimensions, so nothing jumps around.
  • Typefaces load only the Latin subsets the site actually uses.
  • We animate only position, opacity and clipping, so the browser never has to lay the page out again.

We measure with Google’s tools (PageSpeed Insights and the Chrome UX Report), not our own.

Accessibility

We aim for WCAG 2.2, level AA.

  • Everything works with a keyboard, and focus is always visible.
  • Text has a contrast ratio of at least 4.5 : 1, and small text is never under 14 px.
  • A skip link, clear landmarks and a single H1 on every page.
  • Touch targets are at least 44 px.
  • Nothing is available only through motion or only with a mouse.

If something doesn’t work as it should, let us know at info@emnaweb.com. We treat it as a bug, not a wish.

Motion

Motion shows; it doesn’t decorate. Headings settle, lines draw, and content reveals itself once, when you reach it. If your system is set to reduce motion, the animations don’t run.

You can also switch them off here. We remember the choice only in your browser.

Without animations the page is complete: nothing hides and nothing waits.

Grid

Everything sits on a 12-column grid, 8 columns on tablets and 4 on phones, with margins that grow with the screen.

Credits

Design and development
EMNA Web Solutions, Croatia
Typefaces
Mona Sans (GitHub) and Fragment Mono
Animation
GSAP, three.js
Smooth scrolling
Lenis (darkroom.engineering)
Images
No stock photography or illustration
Symbols
Just one: Λ. The arrows come from the typeface.