Referencia

Design system

Élő referencia a corpinus.hu vizuális nyelvéhez — színek, tipográfia, térközök, gombok és a ténylegesen használt komponensek (fejléc, lábléc, kártyák, karusszel). Nem statikus leírás: minden elem ugyanazzal a kóddal jelenik meg itt, mint az élő oldalon.

Alapok

Színek

#faf9f6

Alap háttér (--c-bg)

text

#1c1b18

Alapszöveg, sötét felületek, gombok (--c-text)

accent

#5e4633

Eyebrow-feliratok, kiemelt anyaglabel (--c-accent)

dark section

#211e19

Kapcsolat szekció háttere

cream text

#efebe2

Világos szöveg sötét háttéren

amber hover

#c8a87e

Hover szín gombokon, linkeken

muted 1

#6b665c

Törzsszöveg, másodlagos leírás

muted 2

#8a857b

Eyebrow / mono felirat világos háttéren

muted 3

#3a362f

Anyaglista értékek

muted 4

#a5a096

Lábléc apró felirat

Alapok

Tipográfia

Fraunces (serif) — címsorok

Aa Előbb az anyag 54/330

Aa Az anyag diktál 40/340

Aa Kivitelezői partner 30/350

Aa Fogasfal és pad 24/360

Aa Kártyacím 19/regular

Hanken Grotesk (sans) — törzsszöveg

Aa Beszéljünk a tervéről — bevezető szöveg 17/regular

Aa Törzsszöveg / leírás 15/regular (muted)

Aa Anyaglista érték 14/regular

IBM Plex Mono — feliratok, számozás

01 — Beépített bútor

Válogatás / eyebrow

Alapok

Térköz skála

8px

12px

16px

24px

32px

40px

56px

64px

96px

120px

140px

Komponensek

Gombok és linkek

cp-cta-dark

cp-nav-link (hover)cp-contact-link (hover)

Komponensek

Munkakártya és karusszel

A `WorkCarousel` komponens élesben fut itt is: minden munka egy mozaik-elrendezésű képblokkból és szöveges kártyából áll, automatikusan lapoz 7 másodpercenként, egérrel megállítható, és a nyilakkal körkörösen léptethető.

DEMO — MINTA MUNKA

Munkakártya mintázat

Egy nagy fő kép + két kisebb részletkép mozaikban, mellette címke, cím és rövid leírás.

A projekt története

Mozgás

Animáció

Scroll reveal

Minden data-reveal elem — így ez a doboz is — halványan alulról úszik be, amikor a viewportba ér (IntersectionObserver, 1s ease-out, egyszeri lejátszás).

Fejléc scroll-viselkedés

Legfelül átlátszó; 24px után sötét, elmosott sávot kap. Lefelé görgetve (120px után) eltűnik, felfelé görgetve azonnal visszacsúszik.

Karusszel automatikus lapozás

7 másodpercenként lép a következő munkára, végtelenítve. Megáll, amíg az egér a karusszelen van.