/** * ============================================================ * MaskeZaMob.rs — Design System Tokens * ============================================================ * * Izvor: Lovable.dev prototip (Plus Jakarta Sans, plava paleta) * Autor: Frontend Agent * Verzija: 1.0 * Datum: 2026-05-14 * * PRAVILA: * - Sve boje se koriste ISKLJUČIVO preko ovih varijabli * - Nikad hardkodovati hex vrednost u komponentama * - Flatsome --primary-color se mapira na naš --mzm-accent * - Child theme style.css importuje ovaj fajl * * STRUKTURA: * 1. Boje (Colors) * 2. Tipografija (Typography) * 3. Razmaci (Spacing) * 4. Borderi i radijusi (Borders & Radii) * 5. Senke (Shadows) * 6. Prelazi (Transitions) * 7. Breakpoints (referenca — Flatsome koristi sopstvene) * 8. Z-index skala * ============================================================ */ :root { /* ========================================================== * 1. BOJE (Colors) * ========================================================== * Lovable HSL → HEX konverzija, grupisano po nameni. * Imenovanje: --mzm-{grupa}-{varijanta} * ========================================================== */ /* --- Navy (primarna tamna) --- */ --mzm-navy: #0e1629; /* hsl(222, 47%, 11%) — Naslovi, header tekst, hero BG */ --mzm-navy-light: #232c42; /* hsl(222, 30%, 20%) — Hero gradijent, footer BG */ /* --- Accent / CTA (plava) --- */ --mzm-accent: #3c83f5; /* hsl(217, 91%, 60%) — Dugmad, linkovi, fokus ring */ --mzm-accent-hover: #0a5adb; /* hsl(217, 91%, 45%) — Hover na CTA dugmadima */ --mzm-accent-light: #e6effd; /* hsl(217, 91%, 95%) — Badge pozadina, light CTA */ /* --- Pozadine (Backgrounds) --- */ --mzm-bg: #ffffff; /* Čista bela — main background */ --mzm-surface: #f5f6f8; /* hsl(220, 20%, 97%) — Naizmenične sekcije */ --mzm-surface-hover: #eceef2; /* hsl(220, 20%, 94%) — Kartica hover */ --mzm-trust-bg: #f1f4f8; /* hsl(210, 33%, 96%) — Trust bar pozadina */ /* --- Tekst (Text) --- */ --mzm-text-primary: #0e1629; /* Isti kao navy — glavni tekst, naslovi */ --mzm-text-secondary: #64748b; /* hsl(215, 16%, 47%) — Sekundarni, opisi */ --mzm-text-on-dark: #f7f9fb; /* hsl(210, 40%, 98%) — Tekst na tamnoj pozadini */ --mzm-text-on-accent: #ffffff; /* Beli tekst na CTA dugmadima */ /* --- Borderi (Borders) --- */ --mzm-border: #e0e7ef; /* hsl(214, 32%, 91%) — Kartice, input polja, razdvajači */ /* --- Status boje --- */ --mzm-success: #22c55e; /* Badge "NOVO", uspeh poruke */ --mzm-success-light: #dcfce7; /* Pozadina za uspeh alert */ --mzm-error: #ee4343; /* hsl(0, 84%, 60%) — Greške, obavezna polja */ --mzm-error-light: #fde8e8; /* Pozadina za error alert */ --mzm-warning: #f59e0b; /* Upozorenja, niska zaliha */ --mzm-warning-light: #fef3c7; /* Pozadina za warning alert */ --mzm-info: #3c83f5; /* Isti kao accent — info poruke */ /* --- Budi Human (humanitarna sekcija) --- */ --mzm-human-bg: #0e1629; /* Navy pozadina za Budi Human CTA */ --mzm-human-accent: #3c83f5; /* Accent za Budi Human dugmad */ /* --- WooCommerce specifične --- */ --mzm-price: #3c83f5; /* Cena — accent plava (bilo #0e1629 do 04.09.2026.) */ --mzm-price-old: #64748b; /* Stara cena — muted, precrtana */ --mzm-sale-badge: #ee4343; /* Akcija badge */ /* ⚠️ `--mzm-new-badge: #22c55e` je OBRISAN 12.08.2026. * * Bio je jedina zelena vrednost u paleti i praktično se nije video — grid je * za „NOVO" koristio accent, a karusel jeste zelenu, ali je ta sekcija bila * retko gledana. Kad je 12.08. dobila mesto na početnoj, zelena je odmah * zapala za oko kao strano telo. * * Tri oznake na kartici kategorije i njihove boje: * NOVO --mzm-accent #3c83f5 * POPULARNO --mzm-navy #0e1629 * AKCIJA --mzm-sale-badge #ee4343 * * Spisak vrsta je u `mzm_badge_vrste()`, `inc/mzm-pop-kategorije.php`. */ --mzm-cart-count: #3c83f5; /* Broj stavki u korpi */ --mzm-add-to-cart: #3c83f5; /* "Dodaj u korpu" dugme */ --mzm-add-to-cart-hover: #0a5adb; /* Hover state */ /* ========================================================== * 2. TIPOGRAFIJA (Typography) * ========================================================== * Font: Plus Jakarta Sans (Google Fonts) * Fallback: system-ui, -apple-system, sans-serif * * Flatsome napomena: Flatsome ima sopstveni font sistem. * Plus Jakarta Sans se postavlja u Flatsome → Theme Options → * Typography → Custom Fonts ili preko child theme enqueue. * ========================================================== */ --mzm-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* Veličine — fluid sa clamp() */ --mzm-text-xs: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem); /* 11-12px */ --mzm-text-sm: clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem); /* 12-14px */ --mzm-text-base: clamp(0.875rem, 0.825rem + 0.2vw, 1rem); /* 14-16px */ --mzm-text-lg: clamp(1rem, 0.925rem + 0.25vw, 1.125rem); /* 16-18px */ --mzm-text-xl: clamp(1.125rem, 1rem + 0.35vw, 1.375rem); /* 18-22px */ --mzm-text-2xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem); /* 20-26px */ --mzm-text-3xl: clamp(1.5rem, 1.25rem + 0.75vw, 2rem); /* 24-32px */ --mzm-text-4xl: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); /* 28-40px */ /* Težine */ --mzm-font-regular: 400; --mzm-font-medium: 500; --mzm-font-semibold: 600; --mzm-font-bold: 700; --mzm-font-extrabold: 800; /* Line height */ --mzm-leading-tight: 1.2; /* Naslovi */ --mzm-leading-normal: 1.5; /* Body tekst */ --mzm-leading-relaxed: 1.65; /* Duži tekstualni blokovi */ /* Letter spacing */ --mzm-tracking-tight: -0.02em; /* Naslovi */ --mzm-tracking-normal: 0; /* Body */ /* ========================================================== * 3. RAZMACI (Spacing) * ========================================================== * 4px bazni grid. Fluid gde je prikladno. * ========================================================== */ --mzm-space-1: 0.25rem; /* 4px */ --mzm-space-2: 0.5rem; /* 8px */ --mzm-space-3: 0.75rem; /* 12px */ --mzm-space-4: 1rem; /* 16px */ --mzm-space-5: 1.25rem; /* 20px */ --mzm-space-6: 1.5rem; /* 24px */ --mzm-space-8: 2rem; /* 32px */ --mzm-space-10: 2.5rem; /* 40px */ --mzm-space-12: 3rem; /* 48px */ --mzm-space-16: 4rem; /* 64px */ --mzm-space-20: 5rem; /* 80px */ /* Fluid sekcijski razmaci */ --mzm-section-gap: clamp(2.5rem, 2rem + 2vw, 5rem); /* 40-80px */ --mzm-section-padding: clamp(1.5rem, 1rem + 2vw, 4rem); /* 24-64px */ /* ========================================================== * KUTIJA SADRŽAJA — jedna širina za ceo sajt (F-043, 10.08.2026.) * ========================================================== * Ovde je do 10.08. stajalo: * * --mzm-container-max: 1400px; ← nekorišćen * --mzm-container-padding: 1rem; ← nekorišćen * * Nijedan fajl ih nije čitao (`grep` po `css/`, `inc/`, `*.php` — nula * pogodaka). Bili su namera iz Lovable faze koja nikad nije sprovedena, a * u međuvremenu je svaka komponenta izabrala svoju širinu: * * .section-content 1290px (homepage) * .row kutija 1282.5px (arhiva listing) * .mzm-catgrid-wrap 1200px (grid podkategorija) * .projekat__*-inner 1200px (footer, Budi Human) * .mzm-trust-bar 1400px (trust bar) * * Pet širina znači pet levih ivica. Na strani sa grid modom razlika između * breadcrumbs-a i mreže modela je 49.75px na 1440 — dovoljno da se vidi * golim okom, a nedovoljno da liči na grešku, pa je stajala mesecima. * * Footer, „Budi Human" i trust bar su 10.08. namerno OSTAVLJENI na svojim * širinama (1200 / 1200 / 1400). Trust bar je već jednom meren (148 → 115px) * i ne ulazi u isti prolaz. To je otvorena stavka, ne previd. * * KOJA JE LINIJA PRAVA (odlučeno 10.08.2026.) * * Prva verzija ovog tokena je bila 1282.5px — izmerena širina Flatsome-ovog * `.row`, preuzeta iz `F-039`. Bila je pogrešna referenca. * * `F-039` je gledao samo arhivu; header nije bio u kadru. Na 1440 je ispalo: * * header (logo, meni) sadržaj 1190px leva ivica 125px * homepage sekcije sadržaj 1190px leva ivica 125px * arhiva sadržaj 1267.5px leva ivica 86.25px * * Dakle arhiva je štrčala 38.75px preko linije koju drži logo i meni, a ne * obrnuto. Isti kvar kao `F-035`, samo sa druge strane: tamo je štrčao meni * preko sadržaja, ovde sadržaj preko menija. Rešenje je isto — suziti ono * što štrči, jer referenca je vrh strane. * * Referenca je zato Flatsome-ov `.container`: `max-width: 1290px` uz bočni * ladder iz `_layout.css`. * * ⚠️ 1290px NIJE izabrana vrednost nego Flatsome-ova, iz * Customize → Layout → Site width. Ako se tamo promeni, ovaj broj se menja * s njom, inače se ivice tiho raziđu: * * getComputedStyle(document.querySelector('.container')).maxWidth * * `--mzm-sadrzaj-pad` je Flatsome-ova osnovna vrednost ispod 1000px; * iznad nje padding preuzima ladder u `_layout.css`. * * ⚠️ Ko god uvodi nov omotač pune širine — čita OVE tokene, ne bira broj. * ========================================================== */ --mzm-sadrzaj-max: 1290px; --mzm-sadrzaj-pad: 15px; /* ========================================================== * 4. BORDERI I RADIJUSI (Borders & Radii) * ========================================================== * Lovable koristi --radius: 0.75rem (12px) kao bazu. * ========================================================== */ --mzm-radius-sm: 0.375rem; /* 6px — mali elementi, badge */ --mzm-radius-md: 0.5rem; /* 8px — input polja, mali dugmadi */ --mzm-radius-lg: 0.75rem; /* 12px — kartice, paneli (Lovable default) */ --mzm-radius-xl: 1rem; /* 16px — modali, hero kartice */ --mzm-radius-full: 9999px; /* Pill shape — tagovi, badge */ --mzm-border-width: 1px; /* ========================================================== * 5. SENKE (Shadows) * ========================================================== * Suptilne, plavo-tonske senke (usklađene sa navy paletom). * ========================================================== */ --mzm-shadow-sm: 0 1px 2px rgba(14, 22, 41, 0.05); --mzm-shadow-md: 0 2px 8px rgba(14, 22, 41, 0.08); --mzm-shadow-lg: 0 4px 16px rgba(14, 22, 41, 0.1); --mzm-shadow-xl: 0 8px 32px rgba(14, 22, 41, 0.12); --mzm-shadow-card: 0 1px 3px rgba(14, 22, 41, 0.06), 0 1px 2px rgba(14, 22, 41, 0.04); --mzm-shadow-card-hover: 0 4px 12px rgba(14, 22, 41, 0.1), 0 2px 4px rgba(14, 22, 41, 0.06); /* ========================================================== * 6. PRELAZI (Transitions) * ========================================================== */ --mzm-transition-fast: 150ms ease; --mzm-transition-base: 200ms ease; --mzm-transition-slow: 300ms ease; --mzm-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ========================================================== * 7. BREAKPOINTS (referenca) * ========================================================== * Flatsome koristi sopstvene breakpoints, ali ovo je referenca * za custom media queries u child theme-u. * * Flatsome defaults: * $small: 480px * $medium: 849px * $large: 990px * * Naši (za custom komponente izvan Flatsome grida): * sm: 640px * md: 768px * lg: 1024px * xl: 1280px * 2xl: 1400px (container max) * ========================================================== */ /* ========================================================== * 8. Z-INDEX SKALA * ========================================================== */ --mzm-z-dropdown: 10; --mzm-z-sticky: 20; --mzm-z-overlay: 30; --mzm-z-modal: 40; --mzm-z-toast: 50; } /* ============================================================== * FLATSOME INTEGRATION * ============================================================== * Mapiranje naših tokena na Flatsome CSS varijable. * Ovo omogućava da Flatsome komponente (dugmad, linkovi, itd.) * automatski koriste naše boje. * ============================================================== */ :root { /* Flatsome theme color mapping */ --primary-color: var(--mzm-accent); } /* ============================================================== * UTILITY KLASE (sa mzm__ prefiksom) * ============================================================== * Koriste se u UX Builder-u i PHP template-ima. * ============================================================== */ /* --- Pozadine --- */ .mzm__bg-surface { background-color: var(--mzm-surface); } .mzm__bg-trust { background-color: var(--mzm-trust-bg); } .mzm__bg-navy { background-color: var(--mzm-navy); color: var(--mzm-text-on-dark); } .mzm__bg-navy-light { background-color: var(--mzm-navy-light); color: var(--mzm-text-on-dark); } .mzm__bg-accent-light { background-color: var(--mzm-accent-light); } /* --- Tekst --- */ .mzm__text-primary { color: var(--mzm-text-primary); } .mzm__text-secondary { color: var(--mzm-text-secondary); } .mzm__text-accent { color: var(--mzm-accent); } .mzm__text-on-dark { color: var(--mzm-text-on-dark); } /* --- Badge-evi --- */ .mzm__badge { display: inline-flex; align-items: center; padding: var(--mzm-space-1) var(--mzm-space-2); border-radius: var(--mzm-radius-full); font-size: var(--mzm-text-xs); font-weight: var(--mzm-font-semibold); line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; } .mzm__badge--new { background-color: var(--mzm-success); color: #ffffff; } .mzm__badge--sale { background-color: var(--mzm-sale-badge); color: #ffffff; } .mzm__badge--popular { background-color: var(--mzm-accent); color: #ffffff; } /* ============================================================== * GLOBAL RESETS / BASE (child theme specifično) * ============================================================== */ body { font-family: var(--mzm-font-family); color: var(--mzm-text-primary); background-color: var(--mzm-bg); line-height: var(--mzm-leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--mzm-font-family); letter-spacing: var(--mzm-tracking-tight); line-height: var(--mzm-leading-tight); }