Design manual

Globalni stilovi & komponente

Živi vodič izgrađen stvarnim idx- klasama teme. Ono što vidiš ovde je 1:1 ono što se koristi na sajtu — koristi ovu stranicu kao referencu i za responsive proveru (smanji prozor / otvori na telefonu).

01 — Boje

Paleta

Jedini izvor istine su dve brand varijable; sve žuto na sajtu prati --idx-yellow i njen RGB.

Yellow#ffcc00 · –idx-yellow
Black#000000 · –idx-black
Dark#161616 · –idx-dark
Brown#32281B · –idx-brown
Cream#F8F4F1 · –idx-cream
Gray#757575 · –idx-gray
Body#666666 · –idx-body
White#FFFFFF · –idx-white

02 — Tipografija

Naslovi i tekst

Font: Open Sans. Osnovna težina naslova je 500; podebljani delovi su eksplicitan <strong> (700). Body je 14px / line-height 1.7, pasus 16px. Bazni font-size je 14px, pa se hero naslovi definisani u em računaju na tu bazu (page-hero h1 = 4em = 56px).

Eyebrow labela

.idx-eyebrow14px · 2px spacing · uppercase

Naslov H1

h156px / 500 / lh 1.15

Naslov H2

h244px / 500

Naslov H3

h324px / 500

Naslov H4

h420px / 500

Display naslov XL

.idx-h2-xlclamp(34px, 5vw, 64px)
Display statement
.idx-displayclamp(30px, 4.5vw, 58px)

Ovo je standardni pasus (<p>) u body sivoj boji — koristi se za opise i tekst sekcija na celom sajtu. Sadrži podebljani i iskošeni primer.

p16px · #666666 · lh 1.7

Type scale po breakpointima

Stvarne computed veličine (px) izmerene na tri širine. Kolone: Desktop (>1350px) · Sm-desktop (861–1349px) · Mobil (≤767px). clamp(...) = fluidno skaliranje sa viewport-om.

Element Klasa / selektor Desktop Sm-desktop Mobil
GLOBALNI TEKST
Body (base)body141414
Pasusp161316
Eyebrow.idx-eyebrow141414
Naslov H1h156~43 · clamp(34,4.1vw,52)34
Naslov H2h244~34 · clamp(26,3.2vw,40)28
Naslov H3h3242024
Naslov H4h4201820
Display XL.idx-h2-xl64 · clamp(34,5vw,64)~4135
Display statement.idx-display58 · clamp(30,4.5vw,58)~3660
HERO / SEKCIJE
Hero naslov (Početna).idx-hero h156 · clamp(42px, 5.3vw, 56px)~5040
Page-hero naslov.idx-page-hero h14em (56px)4em (56px)40
Strip (Sigurnost…).idx-strip--display7vw7vw~55
Hero lead (pasus).idx-hero__lead1613skriven
Blur-box pasus.idx-blur-box p151315
KOMPONENTE
Menu link.idx-nav__list a16 · clamp(15,1.1vw,17)14pilule (overlay)
Dugme.idx-btn161416
Detalj — naslov.idx-detail-row h3262626
„Karakteristike:“p:nth-of-type(2)242424
Spec stavka.idx-specs li161616
Katalog — art / naslov.idx-catalog-card h6/h515 / 1715 / 1715 / 17
Varijanta — broj.idx-variant h4181818
FAQ pitanje.idx-faq summary201416
Availability badge.idx-avail-badge181413
Breadcrumbs.idx-breadcrumbs141414
Footer tekst.idx-footer / .idx-footer p151415

Sekcijski strip (display)

.idx-strip.idx-strip–display7vw · Open Sans · crna traka

03 — Dugmad

Buttons

Svi radijusi su var(--idx-radius) = 10px. Primarni hover: žuta → tamna (rgba(0,0,0,.6)) sa žutim tekstom. Pređi mišem da vidiš stanja.

Primarno dugme → Veliko (–lg) → Outline
Dark dugme → Outline na crnom Belo / submit
.idx-btn.idx-btn–lg.idx-btn–dark.idx-btn–outline.idx-btn–white

Link dugmad (strelica + underline)

Tekstualni linkovi sa strelicom i tankim podvlačenjem. Hover: podvlaka postaje žuta i strelica klizne udesno.

Pogledaj proizvode→
.idx-card-link
INDEX VM PODRŠKA→
.idx-card-link–narrow
Detaljnije
.idx-more (catalog)
.idx-footer__col ul aborder-bottom rgba(255,204,0,.2)

Frosted CTA pravilo: providna dugmad i availability badge koriste blagu providnost sa backdrop-filter: blur(6px), uz postojeci brand border i radius. Efekat je globalan i vazi za hero CTA dugmad, outline dugmad, telefonsku CTA varijantu i badge komponente.

04 — Blur box

Glassmorphism panel

Koristi se preko hero slika. Poluprozirna siva + backdrop-filter: blur(15px), beli tekst.

Naslov u blur boxu
Poluprozirni panel sa zamućenom pozadinom za tekst preko slike proizvoda.

.idx-blur-boxrgba(117,117,117,.3)blur(15px)radius 20px

05 — Image zoom (varijante)

Interaktivne kartice proizvoda

Klikni sliku → fokusira se (širi se) i radi zoom 1.1 unutar rama. Klik van boxa vraća na početno. Žuta traka je uvek iste visine.

501.01

501.01

Beli

501.03

501.03

Crni

.idx-variant-pair.idx-variant.idx-vimg (overflow:hidden)focus → scale(1.1)

06 — Form polja

Kontakt forma

Tamna polja na crnoj sekciji, radijus 16px (textarea 20px), focus border žuti. Topic „radio“ su okrugli sa žutom checked kvačicom.

Tema

Pošalji

.idx-contact-form input#1a1a1a · border #2a2a2aradius 10px (–idx-radius)focus: border žuti

07 — Tokeni

Radijusi & kontejner

–idx-radius: 10px blur-box radius: 20px input radius: 10px textarea radius: 10px –idx-container: 85% –idx-container-max: 1440px

08 — Katalog kartice

Grid proizvoda

Zajednički okvir sa vertikalnim separatorima. Hover: slika zoom 1.06, „Detaljnije“ podvlaka pocrni i strelica klizne. Grid je 3 kolone (varijanta --4 za 4).

Moddus
Art. 101.xx
Modularni program

Kratak opis proizvoda u dve linije radi poravnanja.

Detaljnije OG Max
Art. 501.xx
OG Max IP44

Nadgradni sistem za zahtevne uslove.

Detaljnije Priključni program
Art. 102.xx
Priključni program

Sigurno povezivanje uređaja.

Detaljnije
.idx-catalog-grid.idx-catalog-card.idx-zoom-image (hover scale 1.06).idx-more

09 — Detalj proizvoda

Detail row + specifikacije

Dvokolonski red: varijante lijevo, tekst desno. Naslov uppercase 26px, podnaslov italic 18px sivi, „Karakteristike“ 24px, lista sa žutim bulletima i podebljanom vrednošću nakon dvotačke.

501.01

501.01

Beli

501.03

501.03

Crni

Monofazna OG zidna priključnica

Robusno i sigurno rešenje za fiksnu zidnu montažu.

Karakteristike:

  • Nominalna struja/napon: 16A / 250V
  • Kontakt za uzemljenje
  • Standard: IEC 60884-1
  • Dostupna u 2 boje: bela (501.01), crna (501.03)
.idx-detail-row.idx-specsh3 uppercase 26pxsubtitle italic #757575

10 — Breadcrumbs & badge

Navigacijski trag i badge

Breadcrumbs žive na tamnom hero-u (samo prvi link je klikabilan). Availability badge je puni žuti blok.

Početna→Proizvodi→OG Max IP44

Dostupno za poručivanje od 2027. godine
.idx-breadcrumbs.idx-bc-sep.idx-bc-current.idx-avail-badge

11 — FAQ akordeon

Pitanja i odgovori

Klik otvara uz animaciju (theme main.js); otvaranje jednog zatvara prethodni. Ikonica ↓ / ↑.

Da li je moguća veleprodaja?

Da — kontaktirajte nas za uslove saradnje i cjenovnik za veleprodaju.

Koji je rok isporuke?

Standardni proizvodi su na stanju; specifične varijante po dogovoru.

Da li postoji tehnička podrška?

Da, dostupna je tehnička dokumentacija i podrška za montažu.

.idx-faqdetails / summary.idx-faq__body

12 — Responsive

Breakpointi & ponašanje

Tema koristi mobile-aware pristup. Smanji prozor ili otvori na telefonu — indikator dolje desno pokazuje trenutnu širinu i aktivni breakpoint. Sve komponente iznad su žive, pa se ovde realno testira lom.

Breakpoint Šta se mijenja
≤ 1450px (od 861)Mega dropdown: kompaktan single-row, max-width 1000px, aspect 9/11
≤ 980pxSekcijski razmaci i tipografija se smanjuju
≤ 900pxCatalog grid → 1 kolona; detail-row → 1 kolona; variant-pair visina 300px
≤ 860pxHamburger meni; fullscreen overlay; „Proizvodi“ → žute pilule (button stil)
≤ 767pxTelefonska tipografija: h1 34 / h2 28; strip i display se smanjuju
≤ 600pxForma i footer → 1 kolona; topic lista → 1 kolona

Referentne širine za proveru: 37576890012801440

13 — Product menu modal (mega)

Breakpointi, veličine & razmere

Dropdown „Proizvodi“ mijenja kontejner, broj kolona, aspect-ratio kartice i radijus po širini ekrana. Kutije dolje pokazuju stvarne razmere (w:h) kartice na svakom nivou.

Breakpoint Kontejner Raspored Aspect-ratio Radijus
> 1450px
desktop		min(1200px, 92vw)4 kartice u redu · gap 6px9 / 12.8 (≈0.70)12px
861–1450px
compact		max 1000px, centriran4 u redu · gap 4px · manji font9 / 11 (≈0.82)12px
≤ 860px
overlay		100% (list max 460px)1 kolona — žute pilule (button stil)auto (visina po sadržaju)10px --idx-radius

Razmere kartice (stvarni aspect-ratio)

Desktop
9 / 12.8
Compact
9 / 11
Pilula (overlay)
auto · radius 10px
.idx-mega.idx-products-grida.idx-cardcaret ::before (beli trouglić)
– · –