@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"); /* ========================================================================== Font – Montserrat (Font.pdf: Montserrat i podgrupe) Učitava se iz HTML (link u ) i ovde @import kao rezerva uz custom.css ========================================================================== */ /* Font-weight vrednosti prema Font.pdf i CSS standardu (100–900) */ :root { /* Porodica fonta */ --bs-font-sans-serif: 'Montserrat', sans-serif; --bs-body-font-family: 'Montserrat', sans-serif; --bs-primary-font-family: 'Montserrat', sans-serif; --bs-secondary-font-family: 'Montserrat', sans-serif; /* Težine – standardne numeričke vrednosti (Font.pdf: Light, Regular, Medium, Semibold, Bold) */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Aliasi za kompatibilnost sa Bootstrap fw-* (koriste iste brojeve) */ --fw-light: var(--font-weight-light); --fw-normal: var(--font-weight-regular); --fw-medium: var(--font-weight-medium); --fw-semibold: var(--font-weight-semibold); --fw-bold: var(--font-weight-bold); } body, .font-primary, h1, h2, h3, h4, h5, h6, .navbar-nav .nav-link, .navbar-nav .dropdown-item, .offcanvas .navbar-nav .nav-link, .offcanvas .navbar-nav .dropdown-item { font-family: var(--bs-body-font-family) !important; } /* Glavni meni – Medium, uppercase (Font.pdf str. 1, 3) */ #header .navbar-nav .nav-link, #header .navbar-nav .dropdown-item, .offcanvas .navbar-nav .nav-link, .offcanvas .navbar-nav .dropdown-item { font-size: 0.875rem !important; font-weight: var(--font-weight-medium) !important; text-transform: uppercase !important; letter-spacing: 0px !important; } /* Desktop meni: ikonica Početna u istoj vertikalnoj ravni kao tekst (navbar-nav inače align-items: stretch) */ @media (min-width: 1200px) { #header .main-header .d-none.d-xl-flex .navbar-nav { align-items: center; } #header .main-header .d-none.d-xl-flex .navbar-nav .nav-link .header-nav-icon-home { line-height: 1; font-size: 1.125rem; vertical-align: 0; } /* Sticky header ostaje vidljiv i pri skrolovanju nadole (header-sticky-smart inače sakriva) */ #header.header-sticky-smart .sticky-area.header-hidden { transform: none !important; } } /* Desno od menija: piktogrami (ikonica + labela, vertikalne linije) */ .header-desktop-menu-row { min-height: 1px; /* prostor da apsolutno pozicionirani piktogrami ne preklapaju meni */ padding-inline-end: 11rem; } .header-picto-nav { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 2; display: flex; align-items: stretch; } .header-picto-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.15rem 0.85rem; min-width: 4.25rem; max-width: 6.5rem; border-left: 1px solid var(--bs-border-color); font-family: var(--bs-body-font-family); font-size: 0.625rem; font-weight: var(--font-weight-medium); line-height: 1.15; text-transform: none; letter-spacing: 0; text-decoration: none; transition: color 0.2s ease; } .header-picto-link:first-child { border-left: none; padding-left: 0; } .header-picto-link:hover, .header-picto-link:focus-visible { color: var(--bs-primary) !important; } .header-picto-icon { font-size: 1.35rem; line-height: 1; font-weight: 400 !important; } .header-picto-label { display: block; text-align: center; hyphens: auto; text-transform: uppercase; font-size: 13px; } /* Mobilni meni: isti linkovi ispod liste */ .header-picto-nav--mobile { position: static; transform: none; justify-content: space-between; padding: 0 0.25rem; } .header-picto-nav--mobile .header-picto-link { flex: 1; min-width: 0; padding: 0.5rem 0.35rem; border-left: 1px solid var(--bs-border-color); font-size: 0.65rem; } .header-picto-nav--mobile .header-picto-link:first-child { border-left: none; } /* Naslovi sekcija i hero – Medium, uppercase (Font.pdf str. 1, 3) */ h1, h2, .fs-56px, .fs-36px, section h3.font-primary { font-weight: var(--font-weight-medium) !important; text-transform: uppercase !important; } /* Naslov "Naše kolekcije" / "Naši proizvodi" – Regular, uppercase (Font.pdf str. 2, 3) */ h3.fs-3.mb-0.fw-normal.font-primary, #shop-category-overlay h3.font-primary { font-weight: var(--font-weight-regular) !important; text-transform: uppercase !important; } /* Naslov "Izdvajamo iz ponude" – Regular, uppercase (Font.pdf str. 2, 3) */ h2.mb-5.fw-normal { font-weight: var(--font-weight-regular) !important; text-transform: uppercase !important; } /* Naslov proizvoda na stranici proizvoda (npr. Ležaj Aria, Ugaona garnitura ADA L) – Bold, uppercase */ h1.mb-4.pb-2.fs-4 { font-weight: var(--font-weight-bold) !important; text-transform: uppercase !important; } /* Badge kategorije na stranici proizvoda (npr. "ugaone garniture") – Regular, lowercase */ .badge.text-bg-primary.fw-semibold { font-weight: var(--font-weight-regular) !important; text-transform: lowercase !important; } /* Label "Dimenzije:" na stranici proizvoda – Semibold */ span.text-body-emphasis.fw-semibold.fs-14px { font-weight: var(--font-weight-semibold) !important; } /* Specifikacije proizvoda (Val opruga, lift mehanizam...) – Regular */ span.ps-4.fw-semibold.fs-14px { font-weight: var(--font-weight-regular) !important; } /* Naslovi kartica proizvoda (lista) – Regular, uppercase (Font.pdf str. 2, 3) */ .card-title.font-primary, .product-title .card-title, .product-title .card-title a, .product-title a.text-decoration-none.text-reset.fw-semibold { font-weight: var(--font-weight-regular) !important; text-transform: uppercase !important; } /* Naslovi kartica kategorija (baneri: Ležajevi, Ugaone garniture...) – Regular, uppercase (Font.pdf str. 2, 3) */ .card-img-overlay .card-title { font-weight: var(--font-weight-regular) !important; text-transform: uppercase !important; } /* Dugmad – Semibold (Font.pdf str. 4) */ .btn:not(.btn-link) { font-weight: var(--font-weight-semibold) !important; text-transform: none !important; } /* Dugme "Pogledaj proizvode" (slider) – Montserrat regular */ a.btn[href="proizvodi.html"] { font-weight: var(--font-weight-regular) !important; } /* Breadcrumb – uppercase (Font.pdf str. 2, 3) */ .breadcrumb, .breadcrumb-item { text-transform: uppercase !important; } /* Breadcrumb – linkovi (Početna, Ležajevi...) – Light */ .breadcrumb-item a { font-weight: 500; text-transform: uppercase !important; color: #000; } /* Breadcrumb – aktivna stavka (trenutna stranica) – Regular */ .breadcrumb-item.active { font-weight: var(--font-weight-regular) !important; text-transform: uppercase !important; font-weight: 600 !important; } /* Body / paragrafi – Regular (Font.pdf str. 1, 2, 3) */ p, .fs-6, .fs-12px, .fs-xl-12px { font-weight: var(--font-weight-regular) !important; } /* "Pronađi svoj" (slider) – Montserrat regular, lowercase (Font.pdf) */ p.mb-8.fw-semibold.fs-12px { font-weight: var(--font-weight-regular) !important; text-transform: lowercase !important; } /* Footer – zaglavlja kolona (4 kolone) */ .footer .footer-col-heading { font-weight: var(--font-weight-semibold) !important; color: #111 !important; text-transform: uppercase !important; letter-spacing: 0.06em; font-size: 1rem; margin-bottom: 1rem; } .footer .footer-nav-li { padding: 0.28rem 0; } /* Footer – glavni linkovi (tamniji, čitljiviji) */ .footer .footer-main-link { color: #1a1a1a !important; font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: color 0.2s ease; letter-spacing: 0px; } .footer .footer-main-link:hover, .footer .footer-main-link:focus-visible { color: var(--bs-primary) !important; } .footer .footer-contact-icon { color: var(--bs-primary); font-size: 1.15rem; line-height: 1.2; } /* Tema .text-body-emphasis = 2.125rem – u kontaktu adresa mora kao telefon/mejl */ .footer .footer-contact-block .text-body-emphasis { font-size: 0.9rem !important; line-height: 1.45 !important; font-weight: 500; } /* Footer – newsletter (bez posebne pozadine, boje teme) */ .footer .footer-newsletter-card { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; } .footer .footer-newsletter-card-title { color: #111 !important; font-weight: var(--font-weight-semibold) !important; font-size: 0.8125rem; line-height: 1.35; margin: 0 0 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .footer .footer-newsletter-card-text { color: #1a1a1a; font-size: 0.9rem; line-height: 1.55; font-weight: 500 !important; margin: 0 0 1.125rem; opacity: 1; color: #1a1a1a !important; } .footer .footer-newsletter-form { gap: 0.65rem; position: relative; } .footer .footer-newsletter-input { border: 1px solid var(--bs-border-color); border-radius: 999px; padding: 0.8rem 1.35rem; font-size: 0.9375rem; width: 100%; background-color: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); } .footer .footer-newsletter-input::placeholder { color: var(--bs-secondary-color, #6c757d); opacity: 1; } .footer .footer-newsletter-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.22); } .footer .footer-newsletter-submit { width: 100%; border: none; border-radius: 999px; background-color: var(--bs-primary); color: #fff !important; font-weight: var(--font-weight-bold) !important; font-size: 0.9375rem; padding: 0.8rem 1.25rem; transition: filter 0.2s ease, opacity 0.2s ease; text-transform: uppercase; } .footer .footer-newsletter-submit:hover { filter: brightness(0.95); color: #fff !important; } .footer .footer-newsletter-submit:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } /* Footer – ostalo (starije stranice / kompatibilnost) */ .footer h3.mb-6.font-primary.fw-normal { font-weight: var(--font-weight-regular) !important; } .footer p.fs-xl-12px.fw-semibold { font-weight: 500; } .footer h3.fs-5.mb-6 { font-weight: var(--font-weight-medium) !important; text-transform: uppercase !important; } .footer p.fs-5.mb-6 { font-weight: var(--font-weight-semibold) !important; color: #111 !important; text-transform: uppercase !important; } .footer .list-unstyled a:not(.footer-main-link), .footer a.text-body.fw-semibold { font-weight: var(--font-weight-regular) !important; } /* Link "Pogledaj sve" na karticama kategorija – Light, lowercase (Font.pdf str. 2, 4) */ .btn-link.text-white, .card-img-overlay .btn-link { font-weight: var(--font-weight-light) !important; text-transform: lowercase !important; } /* ========================================================================== Utility klase za font-weight (koriste :root varijable – Font.pdf standard) Korišćenje: .font-light, .font-regular, .font-medium, .font-semibold, .font-bold ========================================================================== */ .font-light, .fw-light { font-weight: var(--font-weight-light) !important; } .font-regular, .fw-normal { font-weight: var(--font-weight-regular) !important; } .font-medium, .fw-medium { font-weight: var(--font-weight-medium) !important; } .font-semibold, .fw-semibold { font-weight: var(--font-weight-semibold) !important; } .font-bold, .fw-bold { font-weight: var(--font-weight-bold) !important; } /* Hero kartica – globalna max širina */ .hero-card { max-width: 450px; } /* Hero na mobilu – slajdovi imaju height: auto pa se urušavaju, dajemo min-height */ @media (max-width: 1199.98px) { .hero-header-07 .vh-100, .hero-header-07 .slick-slide > div { min-height: 70vh !important; } .hero-header-07 .slick-list, .hero-header-07 .slick-track { min-height: 70vh !important; } } /* Footer – socijalne ikonice (upadljivije, moderan izgled) */ .footer .list-inline.fs-23px { font-size: 1.55rem !important; } .footer .list-inline.fs-23px a { display: inline-flex; align-items: center; justify-content: center; width: 3.15rem; height: 3.15rem; border: 2px solid var(--bs-border-color); border-radius: 50%; color: #1a1a1a !important; background-color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); text-decoration: none; transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .footer .list-inline.fs-23px a:hover { transform: translateY(-5px); border-color: var(--bs-primary); color: #fff !important; background-color: var(--bs-primary); box-shadow: 0 14px 28px rgba(var(--bs-primary-rgb), 0.35), 0 6px 10px rgba(0, 0, 0, 0.08); } .footer .list-inline.fs-23px a:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .footer .list-inline.fs-23px a, .footer .list-inline.fs-23px a:hover { transition: none; transform: none; } } /* Sekcija "Izdvajamo iz ponude" – strelice uvek vidljive (i na mobilu) */ #our_best_sellers_1 .slick-slider .slick-arrow { display: flex !important; z-index: 2; } #our_best_sellers_1 .slick-slider .slick-arrow.slick-hidden { display: none !important; } /* Kategorijske stranice – SEO uvod ispod H1 */ .category-seo-text { text-align: center; } .category-seo-text .category-seo-h2 { line-height: 1.35; font-size: 24px; text-transform: none !important; color: #000; text-align: center; margin-bottom: 30px; font-family: 'Gotham A' !important; font-weight: 500 !important; text-transform: uppercase !important; } .category-seo-text .category-seo-h3 { line-height: 1.35; margin-top: 0.5rem; text-transform: uppercase; margin-bottom: 20px !important; margin-top: 30px !important; } /* Izbor štofova – akordeon kategorija: dugme + bez data-bs-parent da bi isti klik (minus) zatvorio panel */ #stofovi-kategorije .accordion-header .stofovi-accordion-trigger { background: transparent; border: 0; color: inherit; font: inherit; padding: 0; margin: 0; cursor: pointer; text-align: left; width: 100%; -webkit-appearance: none; appearance: none; text-transform: uppercase; } #stofovi-kategorije .accordion-header .stofovi-accordion-trigger:focus-visible { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: 2px; }