{"id":354,"date":"2026-04-27T12:08:16","date_gmt":"2026-04-27T10:08:16","guid":{"rendered":"https:\/\/opd.hr\/goldenglobe\/?page_id=354"},"modified":"2026-05-12T14:10:54","modified_gmt":"2026-05-12T12:10:54","slug":"viva","status":"publish","type":"page","link":"https:\/\/goldenglobe.hr\/bmibramac\/viva\/","title":{"rendered":"Viva &#8211; BMI Bramac"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"354\" class=\"elementor elementor-354\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-050dfb0 e-con-full e-flex e-con e-parent\" data-id=\"050dfb0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d8de9f elementor-widget elementor-widget-html\" data-id=\"3d8de9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================\r\n   VIVA NOVO \u2013 PRODUCT PAGE\r\n   Elementor HTML Widget\r\n   With color selector \/ close-up image switcher\r\n========================================= *\/\r\n\r\n.viva-page {\r\n  --bmi-blue: #009FDF;\r\n  --bmi-blue-rgb: 0, 159, 223;\r\n  --bramac-red: #d22630;\r\n  --dark: #141618;\r\n  --text: #202020;\r\n  --muted: #6b6b6b;\r\n  --line: rgba(0,0,0,0.08);\r\n  --cream: #f8f5f2;\r\n  --card: rgba(255,255,255,0.88);\r\n\r\n  color: var(--text);\r\n  font-family: inherit;\r\n  overflow: hidden;\r\n}\r\n\r\n.viva-page * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.viva-inner {\r\n  width: min(1240px, 100%);\r\n  margin: 0 auto;\r\n}\r\n\r\n.viva-eyebrow {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin-bottom: 18px;\r\n  color: var(--bmi-blue);\r\n  font-size: 13px;\r\n  font-weight: 850;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.viva-eyebrow::before {\r\n  content: \"\";\r\n  width: 42px;\r\n  height: 3px;\r\n  border-radius: 999px;\r\n  background: var(--bmi-blue);\r\n}\r\n\r\n\/* =========================\r\n   1. HERO\r\n========================= *\/\r\n\r\n.viva-hero {\r\n  position: relative;\r\n  min-height: 760px;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: clamp(80px, 9vw, 140px) 20px;\r\n  background: #111;\r\n  color: #fff;\r\n  overflow: hidden;\r\n}\r\n\r\n.viva-hero__bg {\r\n  position: absolute;\r\n  inset: 0;\r\n}\r\n\r\n.viva-hero__bg img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n  transform: scale(1.02);\r\n}\r\n\r\n.viva-hero__bg::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background:\r\n    linear-gradient(90deg, rgba(10,12,14,0.90) 0%, rgba(10,12,14,0.64) 42%, rgba(10,12,14,0.22) 100%),\r\n    linear-gradient(0deg, rgba(10,12,14,0.38), transparent 48%);\r\n}\r\n\r\n.viva-hero__content {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 740px;\r\n}\r\n\r\n.viva-hero__badge {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  margin-bottom: 18px;\r\n  padding: 8px 12px;\r\n  border-radius: 999px;\r\n  background: rgba(255,255,255,0.12);\r\n  border: 1px solid rgba(255,255,255,0.18);\r\n  color: rgba(255,255,255,0.84);\r\n  font-size: 12px;\r\n  font-weight: 850;\r\n  letter-spacing: 0.11em;\r\n  text-transform: uppercase;\r\n  backdrop-filter: blur(12px);\r\n}\r\n\r\n.viva-hero__title {\r\n  margin: 0;\r\n  color: #fff;\r\n  font-size: clamp(56px, 8vw, 116px);\r\n  line-height: 0.88;\r\n  letter-spacing: -0.07em;\r\n  font-weight: 900;\r\n}\r\n\r\n.viva-hero__lead {\r\n  margin: 26px 0 0;\r\n  max-width: 620px;\r\n  color: rgba(255,255,255,0.78);\r\n  font-size: clamp(18px, 1.6vw, 23px);\r\n  line-height: 1.65;\r\n}\r\n\r\n.viva-hero__features {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n  margin: 32px 0 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}\r\n\r\n.viva-hero__features li {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  min-height: 42px;\r\n  padding: 10px 14px;\r\n  border-radius: 999px;\r\n  background: rgba(255,255,255,0.11);\r\n  border: 1px solid rgba(255,255,255,0.14);\r\n  color: #fff;\r\n  font-size: 13px;\r\n  font-weight: 800;\r\n  backdrop-filter: blur(12px);\r\n}\r\n\r\n.viva-hero__actions {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 12px;\r\n  margin-top: 34px;\r\n}\r\n\r\n.viva-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 54px;\r\n  padding: 15px 24px;\r\n  border-radius: 999px;\r\n  font-size: 14px;\r\n  font-weight: 900;\r\n  text-decoration: none;\r\n  transition: 0.25s ease;\r\n}\r\n\r\n.viva-btn--primary {\r\n  background: var(--bmi-blue);\r\n  color: #fff;\r\n  box-shadow: 0 18px 42px rgba(var(--bmi-blue-rgb),0.28);\r\n}\r\n\r\n.viva-btn--primary:hover {\r\n  transform: translateY(-3px);\r\n  color: #fff;\r\n  box-shadow: 0 24px 54px rgba(var(--bmi-blue-rgb),0.36);\r\n}\r\n\r\n.viva-btn--secondary {\r\n  background: rgba(255,255,255,0.12);\r\n  border: 1px solid rgba(255,255,255,0.20);\r\n  color: #fff;\r\n  backdrop-filter: blur(12px);\r\n}\r\n\r\n.viva-btn--secondary:hover {\r\n  transform: translateY(-3px);\r\n  background: rgba(255,255,255,0.18);\r\n  color: #fff;\r\n}\r\n\r\n.viva-hero__sample {\r\n  position: absolute;\r\n  z-index: 3;\r\n  right: clamp(20px, 6vw, 90px);\r\n  bottom: clamp(20px, 6vw, 80px);\r\n  width: min(330px, 34vw);\r\n  padding: 18px;\r\n  border-radius: 28px;\r\n  background: rgba(255,255,255,0.14);\r\n  border: 1px solid rgba(255,255,255,0.20);\r\n  backdrop-filter: blur(18px);\r\n  box-shadow: 0 30px 90px rgba(0,0,0,0.34);\r\n}\r\n\r\n.viva-hero__sample img {\r\n  display: block;\r\n  width: 100%;\r\n  border-radius: 20px;\r\n  object-fit: cover;\r\n}\r\n\r\n.viva-hero__sample span {\r\n  display: block;\r\n  margin-top: 12px;\r\n  color: rgba(255,255,255,0.80);\r\n  font-size: 12px;\r\n  font-weight: 850;\r\n  letter-spacing: 0.09em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n\/* =========================\r\n   2. DETAILS\r\n========================= *\/\r\n\r\n.viva-details {\r\n  position: relative;\r\n  padding: clamp(78px, 8vw, 130px) 20px;\r\n  background:\r\n    radial-gradient(circle at 10% 12%, rgba(var(--bmi-blue-rgb),0.09), transparent 30%),\r\n    linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);\r\n}\r\n\r\n.viva-details__header {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);\r\n  gap: 34px;\r\n  align-items: end;\r\n  margin-bottom: clamp(36px, 5vw, 64px);\r\n}\r\n\r\n.viva-title {\r\n  margin: 0;\r\n  color: var(--dark);\r\n  font-size: clamp(42px, 6vw, 82px);\r\n  line-height: 0.92;\r\n  letter-spacing: -0.06em;\r\n  font-weight: 850;\r\n}\r\n\r\n.viva-intro {\r\n  margin: 0;\r\n  color: var(--muted);\r\n  font-size: clamp(16px, 1.4vw, 19px);\r\n  line-height: 1.7;\r\n}\r\n\r\n.viva-details__grid {\r\n  position: relative;\r\n  display: grid;\r\n  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);\r\n  gap: 28px;\r\n  align-items: start;\r\n}\r\n\r\n.viva-color-input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* Product showcase with color image switch *\/\r\n.viva-showcase {\r\n  position: relative;\r\n  overflow: hidden;\r\n  height: clamp(430px, 48vw, 630px);\r\n  border-radius: 34px;\r\n  background:\r\n    radial-gradient(circle at 50% 42%, rgba(0,159,223,0.08), transparent 42%),\r\n    linear-gradient(135deg, #f7f4f1 0%, #ece7e1 100%);\r\n  box-shadow: 0 30px 90px rgba(24,22,21,0.14);\r\n  scroll-margin-top: 90px;\r\n}\r\n\r\n.viva-showcase::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: auto 0 0 0;\r\n  height: 42%;\r\n  background: linear-gradient(0deg, rgba(0,0,0,0.18), transparent);\r\n  pointer-events: none;\r\n  z-index: 2;\r\n}\r\n\r\n.viva-showcase__slide {\r\n  position: absolute;\r\n  inset: 0;\r\n  opacity: 0;\r\n  transform: translateY(12px) scale(0.985);\r\n  pointer-events: none;\r\n  transition:\r\n    opacity 0.38s ease,\r\n    transform 0.38s ease;\r\n}\r\n\r\n.viva-showcase__slide img {\r\n  width: 100%;\r\n  height: 100%;\r\n  padding: clamp(28px, 4vw, 58px);\r\n  object-fit: contain;\r\n  object-position: top;\r\n  display: block;\r\n  transition: transform 0.8s ease;\r\n}\r\n\r\n.viva-showcase:hover .viva-showcase__slide img {\r\n  transform: scale(1.035);\r\n}\r\n\r\n#viva-color-antik:checked ~ .viva-showcase .viva-showcase__slide--antik,\r\n#viva-color-crvena:checked ~ .viva-showcase .viva-showcase__slide--crvena,\r\n#viva-color-smeda:checked ~ .viva-showcase .viva-showcase__slide--smeda,\r\n#viva-color-antracit:checked ~ .viva-showcase .viva-showcase__slide--antracit {\r\n  opacity: 1;\r\n  transform: translateY(0) scale(1);\r\n  pointer-events: auto;\r\n}\r\n\r\n.viva-showcase__caption {\r\n  position: absolute;\r\n  z-index: 3;\r\n  left: 24px;\r\n  right: 24px;\r\n  bottom: 24px;\r\n  padding: 20px;\r\n  border-radius: 22px;\r\n  background: rgba(20,20,20,0.56);\r\n  border: 1px solid rgba(255,255,255,0.14);\r\n  backdrop-filter: blur(14px);\r\n  color: #fff;\r\n}\r\n\r\n.viva-showcase__caption strong {\r\n  display: block;\r\n  margin-bottom: 6px;\r\n  font-size: 22px;\r\n  line-height: 1.2;\r\n  letter-spacing: -0.03em;\r\n}\r\n\r\n.viva-showcase__caption span {\r\n  color: rgba(255,255,255,0.72);\r\n  font-size: 14px;\r\n  line-height: 1.55;\r\n}\r\n\r\n.viva-info-card {\r\n  padding: clamp(28px, 4vw, 46px);\r\n  border: 1px solid var(--line);\r\n  border-radius: 34px;\r\n  background: var(--card);\r\n  backdrop-filter: blur(12px);\r\n  box-shadow: 0 28px 80px rgba(24,22,21,0.10);\r\n}\r\n\r\n.viva-info-card__label {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  margin-bottom: 16px;\r\n  padding: 8px 12px;\r\n  border-radius: 999px;\r\n  background: rgba(var(--bmi-blue-rgb),0.10);\r\n  color: var(--bmi-blue);\r\n  font-size: 11px;\r\n  font-weight: 900;\r\n  letter-spacing: 0.1em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.viva-info-card h3 {\r\n  margin: 0 0 16px;\r\n  color: var(--dark);\r\n  font-size: clamp(30px, 3vw, 44px);\r\n  line-height: 0.98;\r\n  letter-spacing: -0.055em;\r\n  font-weight: 900;\r\n}\r\n\r\n.viva-info-card p {\r\n  margin: 0;\r\n  color: var(--muted);\r\n  font-size: 16px;\r\n  line-height: 1.7;\r\n}\r\n\r\n.viva-swatches {\r\n  margin-top: 28px;\r\n}\r\n\r\n.viva-swatches__title,\r\n.viva-specs__title {\r\n  margin: 0 0 12px;\r\n  color: #222;\r\n  font-size: 12px;\r\n  font-weight: 900;\r\n  letter-spacing: 0.09em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.viva-swatches__list {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n}\r\n\r\n.viva-swatch {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 9px;\r\n  min-height: 42px;\r\n  padding: 8px 13px 8px 8px;\r\n  border-radius: 999px;\r\n  background: #fff;\r\n  border: 1px solid rgba(0,0,0,0.08);\r\n  color: #333;\r\n  font-size: 13px;\r\n  font-weight: 850;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition:\r\n    transform 0.2s ease,\r\n    border-color 0.2s ease,\r\n    box-shadow 0.2s ease,\r\n    background 0.2s ease;\r\n}\r\n\r\n.viva-swatch:hover {\r\n  transform: translateY(-2px);\r\n  border-color: rgba(var(--bmi-blue-rgb),0.35);\r\n  box-shadow: 0 10px 24px rgba(0,0,0,0.08);\r\n}\r\n\r\n.viva-swatch::before {\r\n  content: \"\";\r\n  width: 24px;\r\n  height: 24px;\r\n  border-radius: 999px;\r\n  background: var(--swatch);\r\n  box-shadow:\r\n    inset 0 0 0 1px rgba(255,255,255,0.28),\r\n    0 5px 14px rgba(0,0,0,0.16);\r\n}\r\n\r\n#viva-color-antik:checked ~ .viva-info-card label[for=\"viva-color-antik\"],\r\n#viva-color-crvena:checked ~ .viva-info-card label[for=\"viva-color-crvena\"],\r\n#viva-color-smeda:checked ~ .viva-info-card label[for=\"viva-color-smeda\"],\r\n#viva-color-antracit:checked ~ .viva-info-card label[for=\"viva-color-antracit\"] {\r\n  border-color: rgba(var(--bmi-blue-rgb),0.55);\r\n  background: rgba(var(--bmi-blue-rgb),0.08);\r\n  box-shadow:\r\n    0 12px 28px rgba(var(--bmi-blue-rgb),0.12),\r\n    inset 0 0 0 1px rgba(var(--bmi-blue-rgb),0.08);\r\n}\r\n\r\n.viva-color-note {\r\n  margin-top: 10px !important;\r\n  color: #777 !important;\r\n  font-size: 13px !important;\r\n  line-height: 1.5 !important;\r\n}\r\n\r\n.viva-specs {\r\n  margin-top: 30px;\r\n}\r\n\r\n.viva-specs__grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, minmax(0,1fr));\r\n  gap: 11px;\r\n}\r\n\r\n.viva-spec {\r\n  padding: 16px;\r\n  border-radius: 18px;\r\n  background: #f5f1ed;\r\n  border: 1px solid rgba(0,0,0,0.04);\r\n}\r\n\r\n.viva-spec span {\r\n  display: block;\r\n  margin-bottom: 6px;\r\n  color: #777;\r\n  font-size: 10px;\r\n  font-weight: 900;\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.viva-spec strong {\r\n  color: #1b1b1b;\r\n  font-size: 15px;\r\n  line-height: 1.35;\r\n  font-weight: 900;\r\n}\r\n\r\n.viva-benefits {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0,1fr));\r\n  gap: 14px;\r\n  margin-top: 24px;\r\n}\r\n\r\n.viva-benefit {\r\n  padding: 18px;\r\n  border-radius: 20px;\r\n  background: rgba(0,159,223,0.08);\r\n  border: 1px solid rgba(0,159,223,0.14);\r\n}\r\n\r\n.viva-benefit strong {\r\n  display: block;\r\n  margin-bottom: 6px;\r\n  color: var(--dark);\r\n  font-size: 14px;\r\n  font-weight: 900;\r\n}\r\n\r\n.viva-benefit span {\r\n  color: var(--muted);\r\n  font-size: 13px;\r\n  line-height: 1.45;\r\n}\r\n\r\n\/* =========================\r\n   3. INSPIRATION + CTA\r\n========================= *\/\r\n\r\n.viva-cta {\r\n  position: relative;\r\n  padding: clamp(78px, 8vw, 130px) 20px;\r\n  background:\r\n    radial-gradient(circle at 12% 16%, rgba(255,255,255,0.18), transparent 28%),\r\n    linear-gradient(135deg, #0f1113 0%, #181b1f 55%, #101214 100%);\r\n  color: #fff;\r\n  overflow: hidden;\r\n}\r\n\r\n.viva-cta::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image:\r\n    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);\r\n  background-size: 54px 54px;\r\n  opacity: 0.20;\r\n  pointer-events: none;\r\n}\r\n\r\n.viva-cta .viva-inner {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.viva-cta__header {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);\r\n  gap: 34px;\r\n  align-items: end;\r\n  margin-bottom: clamp(36px, 5vw, 62px);\r\n}\r\n\r\n.viva-cta .viva-title {\r\n  color: #fff;\r\n}\r\n\r\n.viva-cta .viva-intro {\r\n  color: rgba(255,255,255,0.70);\r\n}\r\n\r\n.viva-gallery {\r\n  display: grid;\r\n  grid-template-columns: 1.2fr 0.8fr 0.8fr;\r\n  gap: 18px;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.viva-gallery__item {\r\n  position: relative;\r\n  min-height: 340px;\r\n  overflow: hidden;\r\n  border-radius: 28px;\r\n  background: #222;\r\n  box-shadow: 0 28px 80px rgba(0,0,0,0.28);\r\n}\r\n\r\n.viva-gallery__item:first-child {\r\n  min-height: 460px;\r\n}\r\n\r\n.viva-gallery__item img {\r\n  width: 100%;\r\n  height: 100%;\r\n  min-height: inherit;\r\n  object-fit: cover;\r\n  display: block;\r\n  transition: transform 1s ease;\r\n}\r\n\r\n.viva-gallery__item:hover img {\r\n  transform: scale(1.055);\r\n}\r\n\r\n.viva-gallery__item::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(0deg, rgba(0,0,0,0.18), transparent 18%);\r\n}\r\n\r\n.viva-gallery__label {\r\n  position: absolute;\r\n  z-index: 2;\r\n  left: 18px;\r\n  right: 18px;\r\n  bottom: 18px;\r\n  color: #fff;\r\n}\r\n\r\n.viva-gallery__label strong {\r\n  display: block;\r\n  margin-bottom: 5px;\r\n  font-size: 20px;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.03em;\r\n}\r\n\r\n.viva-gallery__label span {\r\n  display: block;\r\n  color: rgba(255,255,255,0.72);\r\n  font-size: 13px;\r\n  line-height: 1.45;\r\n}\r\n\r\n.viva-final {\r\n  display: grid;\r\n  grid-template-columns: minmax(0, 1fr) minmax(330px, 460px);\r\n  gap: 24px;\r\n  align-items: stretch;\r\n}\r\n\r\n.viva-final__text,\r\n.viva-form-card {\r\n  border: 1px solid rgba(255,255,255,0.12);\r\n  border-radius: 30px;\r\n  background: rgba(255,255,255,0.07);\r\n  backdrop-filter: blur(16px);\r\n  box-shadow: 0 28px 80px rgba(0,0,0,0.25);\r\n}\r\n\r\n.viva-final__text {\r\n  padding: clamp(28px, 4vw, 42px);\r\n}\r\n\r\n.viva-final__text h3 {\r\n  margin: 0 0 14px;\r\n  color: #fff;\r\n  font-size: clamp(30px, 4vw, 54px);\r\n  line-height: 0.96;\r\n  letter-spacing: -0.055em;\r\n  font-weight: 900;\r\n}\r\n\r\n.viva-final__text p {\r\n  margin: 0;\r\n  max-width: 720px;\r\n  color: rgba(255,255,255,0.72);\r\n  font-size: 16px;\r\n  line-height: 1.7;\r\n}\r\n\r\n.viva-final__chips {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 10px;\r\n  margin-top: 26px;\r\n}\r\n\r\n.viva-final__chips span {\r\n  display: inline-flex;\r\n  padding: 9px 12px;\r\n  border-radius: 999px;\r\n  background: rgba(0,159,223,0.14);\r\n  border: 1px solid rgba(0,159,223,0.22);\r\n  color: #fff;\r\n  font-size: 13px;\r\n  font-weight: 850;\r\n}\r\n\r\n.viva-form-card {\r\n  padding: 26px;\r\n  background: rgba(255,255,255,0.94);\r\n  color: var(--dark);\r\n}\r\n\r\n.viva-form-card h3 {\r\n  margin: 0 0 10px;\r\n  color: var(--dark);\r\n  font-size: 30px;\r\n  line-height: 1;\r\n  letter-spacing: -0.045em;\r\n  font-weight: 900;\r\n}\r\n\r\n.viva-form-card p {\r\n  margin: 0 0 20px;\r\n  color: #666;\r\n  font-size: 14px;\r\n  line-height: 1.55;\r\n}\r\n\r\n.viva-form {\r\n  display: grid;\r\n  gap: 12px;\r\n}\r\n\r\n.viva-form input,\r\n.viva-form textarea {\r\n  width: 100%;\r\n  min-height: 48px;\r\n  border: 1px solid rgba(0,0,0,0.10);\r\n  border-radius: 15px;\r\n  background: #fff;\r\n  padding: 13px 14px;\r\n  color: #161616;\r\n  font-family: inherit;\r\n  font-size: 14px;\r\n  outline: none;\r\n  transition: 0.2s ease;\r\n}\r\n\r\n.viva-form textarea {\r\n  min-height: 110px;\r\n  resize: vertical;\r\n}\r\n\r\n.viva-form input:focus,\r\n.viva-form textarea:focus {\r\n  border-color: var(--bmi-blue);\r\n  box-shadow: 0 0 0 4px rgba(var(--bmi-blue-rgb),0.12);\r\n}\r\n\r\n.viva-form button {\r\n  min-height: 52px;\r\n  border: 0;\r\n  border-radius: 999px;\r\n  background: var(--bramac-red);\r\n  color: #fff;\r\n  padding: 14px 20px;\r\n  font-family: inherit;\r\n  font-size: 14px;\r\n  font-weight: 950;\r\n  cursor: pointer;\r\n  transition: 0.25s ease;\r\n  box-shadow: 0 18px 42px rgba(210,38,48,0.28);\r\n}\r\n\r\n.viva-form button:hover {\r\n  transform: translateY(-2px);\r\n  background: #ad1f27;\r\n  box-shadow: 0 24px 50px rgba(210,38,48,0.36);\r\n}\r\n\r\n.viva-form__note {\r\n  margin: 8px 0 0 !important;\r\n  color: #777 !important;\r\n  font-size: 12px !important;\r\n  text-align: center;\r\n}\r\n\r\n\/* Responsive *\/\r\n\r\n@media (max-width: 1100px) {\r\n  .viva-hero {\r\n    min-height: 720px;\r\n  }\r\n\r\n  .viva-hero__sample {\r\n    display: none;\r\n  }\r\n\r\n  .viva-details__grid,\r\n  .viva-final {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .viva-gallery {\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n\r\n  .viva-gallery__item:first-child {\r\n    grid-column: span 2;\r\n  }\r\n}\r\n\r\n@media (max-width: 780px) {\r\n  .viva-details__header,\r\n  .viva-cta__header {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .viva-benefits {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .viva-gallery {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .viva-gallery__item:first-child {\r\n    grid-column: span 1;\r\n  }\r\n}\r\n\r\n@media (max-width: 620px) {\r\n  .viva-hero,\r\n  .viva-details,\r\n  .viva-cta {\r\n    padding-left: 16px;\r\n    padding-right: 16px;\r\n  }\r\n\r\n  .viva-hero {\r\n    min-height: 680px;\r\n  }\r\n\r\n  .viva-hero__title {\r\n    font-size: clamp(54px, 17vw, 78px);\r\n  }\r\n\r\n  .viva-hero__actions {\r\n    display: grid;\r\n  }\r\n\r\n  .viva-btn {\r\n    width: 100%;\r\n  }\r\n\r\n  .viva-specs__grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .viva-showcase {\r\n    height: 550px;\r\n  }\r\n\r\n  .viva-showcase__slide img {\r\n    min-height: 0;\r\n    padding: 28px;\r\n  }\r\n\r\n  .viva-showcase__caption {\r\n    left: 16px;\r\n    right: 16px;\r\n    bottom: 16px;\r\n    padding: 16px;\r\n  }\r\n\r\n  .viva-showcase__caption strong {\r\n    font-size: 19px;\r\n  }\r\n\r\n  .viva-gallery__item,\r\n  .viva-gallery__item:first-child {\r\n    min-height: 300px;\r\n  }\r\n\r\n  .viva-hero__lead {\r\n    max-width: 100%;\r\n    width: 290px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"viva-page\">\r\n\r\n  <!-- SECTION 1: HERO -->\r\n  <section class=\"viva-hero\">\r\n    <div class=\"viva-hero__bg\">\r\n      <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-crijep.webp\" alt=\"Viva Novo crijep na krovu ku\u0107e\">\r\n    <\/div>\r\n\r\n    <div class=\"viva-inner\">\r\n      <div class=\"viva-hero__content\">\r\n        <div class=\"viva-hero__badge\">BMI Bramac crijep<\/div>\r\n\r\n        <h1 class=\"viva-hero__title\">Viva Novo<\/h1>\r\n\r\n        <p class=\"viva-hero__lead\">\r\n          Klasi\u010dan biber izgled u suvremenoj izvedbi za krovove koji tra\u017ee smiren ritam, tradiciju i elegantan karakter.\r\n        <\/p>\r\n\r\n        <ul class=\"viva-hero__features\">\r\n          <li>Biber estetika<\/li>\r\n          <li>Efekt naran\u010dine kore<\/li>\r\n          <li>Tradicionalan stil<\/li>\r\n        <\/ul>\r\n\r\n        <div class=\"viva-hero__actions\">\r\n          <a class=\"viva-btn viva-btn--primary\" href=\"#viva-ponuda\">Zatra\u017eite ponudu<\/a>\r\n          <a class=\"viva-btn viva-btn--secondary\" href=\"#viva-detalji\">Pogledajte detalje<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"viva-hero__sample\">\r\n      <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-antik.webp\" alt=\"Close-up Viva Novo antik\">\r\n      <span>Boja: Antik<\/span>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 2: DETAILS -->\r\n  <section class=\"viva-details\" id=\"viva-detalji\">\r\n    <div class=\"viva-inner\">\r\n\r\n      <div class=\"viva-details__header\">\r\n        <div>\r\n          <div class=\"viva-eyebrow\">Dizajn i tehni\u010dki podaci<\/div>\r\n          <h2 class=\"viva-title\">Biber karakter u suvremenoj izvedbi.<\/h2>\r\n        <\/div>\r\n\r\n        <p class=\"viva-intro\">\r\n          Viva Novo donosi prepoznatljiv izgled klasi\u010dnog biber crijepa, ali u suvremenom formatu i izvedbi koja krovu daje miran, ritmi\u010dan i skladan dojam.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"viva-details__grid\">\r\n\r\n        <!-- Color radio controls -->\r\n        <input class=\"viva-color-input\" type=\"radio\" name=\"viva-color\" id=\"viva-color-antik\" checked>\r\n        <input class=\"viva-color-input\" type=\"radio\" name=\"viva-color\" id=\"viva-color-crvena\">\r\n        <input class=\"viva-color-input\" type=\"radio\" name=\"viva-color\" id=\"viva-color-smeda\">\r\n        <input class=\"viva-color-input\" type=\"radio\" name=\"viva-color\" id=\"viva-color-antracit\">\r\n\r\n        <!-- Product image switcher -->\r\n        <div class=\"viva-showcase\">\r\n\r\n          <div class=\"viva-showcase__slide viva-showcase__slide--antik\">\r\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-antik.webp\" alt=\"Viva Novo antik\">\r\n            <div class=\"viva-showcase__caption\">\r\n              <strong>Antik<\/strong>\r\n              <span>Topao i prirodan ton koji nagla\u0161ava tradicionalni karakter biber crijepa.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"viva-showcase__slide viva-showcase__slide--crvena\">\r\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-crvena.webp\" alt=\"Viva Novo crvena\">\r\n            <div class=\"viva-showcase__caption\">\r\n              <strong>Crvena<\/strong>\r\n              <span>Klasi\u010dna i topla boja koja nagla\u0161ava tradicionalni biber karakter krova.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"viva-showcase__slide viva-showcase__slide--smeda\">\r\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-smeda.webp\" alt=\"Viva Novo sme\u0111a\">\r\n            <div class=\"viva-showcase__caption\">\r\n              <strong>Tamno sme\u0111a<\/strong>\r\n              <span>Prirodan, smiren ton za ku\u0107e koje \u017eele toplinu, sklad i nenametljiv izgled krova.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"viva-showcase__slide viva-showcase__slide--antracit\">\r\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-antracit.webp\" alt=\"Viva Novo antracit\">\r\n            <div class=\"viva-showcase__caption\">\r\n              <strong>Antracit<\/strong>\r\n              <span>Elegantna tamna varijanta koja biber estetici daje moderniji i profinjeniji karakter.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"viva-info-card\">\r\n          <div class=\"viva-info-card__label\">Viva Novo<\/div>\r\n\r\n          <h3>Crijep za ku\u0107e koje \u017eele tradicionalan ritam i smiren izgled krova.<\/h3>\r\n\r\n          <p>\r\n            Viva Novo je idealan za objekte koji \u017eele vizualnost biber crijepa, ali u prakti\u010dnoj i suvremenoj izvedbi. Njegov skladan ritam posebno dobro pristaje tradicionalnim ku\u0107ama, renovacijama i objektima koji tra\u017ee elegantan, miran krovni izgled.\r\n          <\/p>\r\n\r\n          <div class=\"viva-swatches\">\r\n            <div class=\"viva-swatches__title\">Odaberite boju crijepa<\/div>\r\n            <div class=\"viva-swatches__list\">\r\n              <label class=\"viva-swatch\" for=\"viva-color-antik\" style=\"--swatch:#6f4b3b;\">Antik<\/label>\r\n              <label class=\"viva-swatch\" for=\"viva-color-crvena\" style=\"--swatch:#c74b30;\">Crvena<\/label>\r\n              <label class=\"viva-swatch\" for=\"viva-color-smeda\" style=\"--swatch:#5a3a2f;\">Tamno sme\u0111a<\/label>\r\n              <label class=\"viva-swatch\" for=\"viva-color-antracit\" style=\"--swatch:#232323;\">Antracit<\/label>\r\n            <\/div>\r\n\r\n            <p class=\"viva-color-note\">\r\n              Klikom na boju mijenja se close-up prikaz crijepa.\r\n            <\/p>\r\n          <\/div>\r\n\r\n          <div class=\"viva-specs\">\r\n            <div class=\"viva-specs__title\">Tehni\u010dki podaci<\/div>\r\n\r\n            <div class=\"viva-specs__grid\">\r\n              <div class=\"viva-spec\">\r\n                <span>Veli\u010dina<\/span>\r\n                <strong>330 \u00d7 420 mm<\/strong>\r\n              <\/div>\r\n\r\n              <div class=\"viva-spec\">\r\n                <span>Te\u017eina<\/span>\r\n                <strong>4,7 kg\/kom<\/strong>\r\n              <\/div>\r\n\r\n              <div class=\"viva-spec\">\r\n                <span>Potro\u0161nja<\/span>\r\n                <strong>cca 9,8 kom\/m\u00b2<\/strong>\r\n              <\/div>\r\n\r\n              <div class=\"viva-spec\">\r\n                <span>Razmak letava<\/span>\r\n                <strong>31,5 \u2013 34 cm<\/strong>\r\n              <\/div>\r\n\r\n              <div class=\"viva-spec\">\r\n                <span>Minimalni preklop<\/span>\r\n                <strong>80 mm<\/strong>\r\n              <\/div>\r\n\r\n              <div class=\"viva-spec\">\r\n                <span>Pokrovna \u0161irina<\/span>\r\n                <strong>300 mm<\/strong>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"viva-benefits\">\r\n            <div class=\"viva-benefit\">\r\n              <strong>Biber izgled<\/strong>\r\n              <span>Prepoznatljiv tradicionalni ritam krova.<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"viva-benefit\">\r\n              <strong>Smirena estetika<\/strong>\r\n              <span>Elegantna forma za skladan izgled ku\u0107e.<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"viva-benefit\">\r\n              <strong>BMI sustav<\/strong>\r\n              <span>Dio cjelovitog krovnog rje\u0161enja.<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 3: INSPIRATION + CTA -->\r\n  <section class=\"viva-cta\" id=\"viva-ponuda\">\r\n    <div class=\"viva-inner\">\r\n\r\n      <div class=\"viva-cta__header\">\r\n        <div>\r\n          <div class=\"viva-eyebrow\">Inspiracija i ponuda<\/div>\r\n          <h2 class=\"viva-title\">Zamislite Viva Novo na svom krovu.<\/h2>\r\n        <\/div>\r\n\r\n        <p class=\"viva-intro\">\r\n          Najbolje pristaje tradicionalnim objektima, renovacijama i ku\u0107ama koje \u017eele smiren, ritmi\u010dan i elegantan izgled krova.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"viva-gallery\">\r\n        <div class=\"viva-gallery__item\">\r\n          <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-antracit-2.webp\" alt=\"Ku\u0107a s Viva Novo crijepom\">\r\n          <div class=\"viva-gallery__label\">\r\n            <strong>Biber estetika<\/strong>\r\n            <span>Prepoznatljiv ritam krova koji ku\u0107i daje tradicionalan karakter.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"viva-gallery__item\">\r\n          <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-antracit-1.webp\" alt=\"Viva Novo crijep na tradicionalnoj ku\u0107i\">\r\n          <div class=\"viva-gallery__label\">\r\n            <strong>Za renovacije<\/strong>\r\n            <span>Odli\u010dan izbor za objekte koji \u017eele zadr\u017eati smiren i skladan izgled.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"viva-gallery__item\">\r\n          <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Viva-crijep.webp\" alt=\"Detalj krova s Viva Novo crijepom\">\r\n          <div class=\"viva-gallery__label\">\r\n            <strong>Tradicionalan ritam<\/strong>\r\n            <span>Krovna ploha koja djeluje uredno, elegantno i trajno.<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"viva-final\">\r\n        <div class=\"viva-final__text\">\r\n          <h3>Je li Viva Novo pravi izbor za va\u0161 objekt?<\/h3>\r\n          <p>\r\n            Po\u0161aljite nam osnovne informacije o krovu i pomo\u0107i \u0107emo vam odabrati odgovaraju\u0107u boju, koli\u010dinu, dodatne krovne elemente i rje\u0161enje koje najbolje odgovara va\u0161oj ku\u0107i.\r\n          <\/p>\r\n\r\n          <div class=\"viva-final__chips\">\r\n            <span>Tradicionalne ku\u0107e<\/span>\r\n            <span>Renovacije<\/span>\r\n            <span>Biber estetika<\/span>\r\n            <span>Smiren izgled krova<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"viva-form-card\">\r\n          <h3>Zatra\u017eite ponudu<\/h3>\r\n          <p>Po\u0161aljite upit za Viva Novo i javit \u0107emo vam se sa savjetom ili ponudom.<\/p>\r\n\r\n          <form class=\"viva-form\" action=\"#\" method=\"post\">\r\n            <input type=\"hidden\" name=\"proizvod\" value=\"Viva Novo\">\r\n\r\n            <input type=\"text\" name=\"ime_prezime\" placeholder=\"Ime i prezime *\" required>\r\n            <input type=\"tel\" name=\"telefon\" placeholder=\"Telefon *\" required>\r\n            <input type=\"email\" name=\"email\" placeholder=\"Email *\" required>\r\n            <input type=\"text\" name=\"adresa\" placeholder=\"Grad *\">\r\n            <textarea name=\"poruka\" placeholder=\"Napi\u0161ite povr\u0161inu krova, tip objekta ili pitanje za Viva Novo.\"><\/textarea>\r\n\r\n            <button type=\"submit\">Po\u0161aljite upit za Viva Novo<\/button>\r\n\r\n            <p class=\"viva-form__note\">\r\n              Ili nas nazovite direktno: +385 98 210 069\r\n            <\/p>\r\n          <\/form>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  const vivaSection = document.querySelector('.viva-page');\r\n  if (!vivaSection) return;\r\n\r\n  const colorInputs = vivaSection.querySelectorAll('input[name=\"viva-color\"]');\r\n  const showcase = vivaSection.querySelector('.viva-showcase');\r\n\r\n  if (!colorInputs.length || !showcase) return;\r\n\r\n  function isMobile() {\r\n    return window.matchMedia('(max-width: 780px)').matches;\r\n  }\r\n\r\n  function scrollToShowcase() {\r\n    if (!isMobile()) return;\r\n\r\n    setTimeout(function () {\r\n      const headerOffset = 90;\r\n      const showcaseTop = showcase.getBoundingClientRect().top + window.pageYOffset;\r\n      const targetPosition = showcaseTop - headerOffset;\r\n\r\n      window.scrollTo({\r\n        top: targetPosition,\r\n        behavior: 'smooth'\r\n      });\r\n    }, 120);\r\n  }\r\n\r\n  colorInputs.forEach(function (input) {\r\n    input.addEventListener('change', scrollToShowcase);\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e03cf11 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"e03cf11\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b823f41 bmi-elementor-hidden-form elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"b823f41\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;button_width&quot;:&quot;100&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"354\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"b823f41\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"Viva &#8211; BMI Bramac\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"354\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-above\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tIme i prezime\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Ime i prezime\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_e1cef1c elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_e1cef1c\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tKontakt broj\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[field_e1cef1c]\" id=\"form-field-field_e1cef1c\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Kontakt broj\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tEmail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Email\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_7373df8 elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_7373df8\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tGrad\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[field_7373df8]\" id=\"form-field-field_7373df8\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Grad\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_82f297e elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_82f297e\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tVrsta upita\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[field_82f297e]\" id=\"form-field-field_82f297e\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Vrsta upita\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-field_adb360b elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-field_adb360b\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tPovr\u0161ina krova m2:\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[field_adb360b]\" id=\"form-field-field_adb360b\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Povr\u0161ina krova m2:\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-message\" class=\"elementor-field-label\">\n\t\t\t\t\t\t\t\tPoruka\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<textarea class=\"elementor-field-textual elementor-field  elementor-size-sm\" name=\"form_fields[message]\" id=\"form-field-message\" rows=\"4\" placeholder=\"Poruka\"><\/textarea>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Send<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9cb166f elementor-widget elementor-widget-html\" data-id=\"9cb166f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* Skriva Elementor formu, ali je ostavlja aktivnom za slanje *\/\r\n  .bmi-elementor-hidden-form,\r\n  form[name=\"New Form\"] {\r\n    position: absolute !important;\r\n    left: -99999px !important;\r\n    top: auto !important;\r\n    width: 1px !important;\r\n    height: 1px !important;\r\n    overflow: hidden !important;\r\n    opacity: 0 !important;\r\n    pointer-events: none !important;\r\n  }\r\n\r\n  .viva-form__response {\r\n    margin-top: 14px;\r\n    font-size: 14px;\r\n    line-height: 1.5;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .viva-form__response.is-success {\r\n    color: #157347;\r\n  }\r\n\r\n  .viva-form__response.is-error {\r\n    color: #b42318;\r\n  }\r\n\r\n  .viva-form__response.is-loading {\r\n    color: #555;\r\n  }\r\n\r\n  .viva-form button[type=\"submit\"].is-loading {\r\n    opacity: 0.7;\r\n    cursor: wait;\r\n    pointer-events: none;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  \/\/ 1. Prona\u0111i novu custom formu (viva-form)\r\n  const customForm = document.querySelector('form.viva-form');\r\n\r\n  \/\/ 2. Prona\u0111i Elementor formu\r\n  const elementorForm =\r\n    document.querySelector('.bmi-elementor-hidden-form form.elementor-form') ||\r\n    document.querySelector('form.elementor-form[name=\"New Form\"]') ||\r\n    document.querySelector('form.elementor-form');\r\n\r\n  if (!customForm) {\r\n    console.warn('HTML viva-forma nije prona\u0111ena.');\r\n    return;\r\n  }\r\n\r\n  if (!elementorForm) {\r\n    console.warn('Elementor forma nije prona\u0111ena.');\r\n    return;\r\n  }\r\n\r\n  const customSubmit = customForm.querySelector('button[type=\"submit\"]');\r\n\r\n  \/\/ Kreiraj prostor za poruke ako ne postoji\r\n  let responseBox = customForm.querySelector('.viva-form__response');\r\n\r\n  if (!responseBox) {\r\n    responseBox = document.createElement('p');\r\n    responseBox.className = 'viva-form__response';\r\n    responseBox.setAttribute('aria-live', 'polite');\r\n\r\n    if (customSubmit) {\r\n      customSubmit.insertAdjacentElement('afterend', responseBox);\r\n    } else {\r\n      customForm.appendChild(responseBox);\r\n    }\r\n  }\r\n\r\n  elementorForm.setAttribute('aria-hidden', 'true');\r\n\r\n  elementorForm.querySelectorAll('input, textarea, select, button').forEach(function (field) {\r\n    field.setAttribute('tabindex', '-1');\r\n  });\r\n\r\n  \/\/ Funkcija za preuzimanje vrijednosti iz HTML forme\r\n  function getCustomValue(selector) {\r\n    const field = customForm.querySelector(selector);\r\n    return field ? field.value.trim() : '';\r\n  }\r\n\r\n  \/\/ Funkcija za upisivanje vrijednosti u Elementor formu\r\n  function setElementorValue(selector, value) {\r\n    const field = elementorForm.querySelector(selector);\r\n\r\n    if (!field) {\r\n      console.warn('Elementor polje nije prona\u0111eno:', selector);\r\n      return;\r\n    }\r\n\r\n    field.value = value;\r\n    field.dispatchEvent(new Event('input', { bubbles: true }));\r\n    field.dispatchEvent(new Event('change', { bubbles: true }));\r\n  }\r\n\r\n  function showMessage(message, type) {\r\n    responseBox.textContent = message;\r\n    responseBox.className = 'viva-form__response'; \/\/ reset klasa\r\n\r\n    if (type) {\r\n      responseBox.classList.add('is-' + type);\r\n    }\r\n  }\r\n\r\n  function lockSubmit() {\r\n    if (!customSubmit) return;\r\n    customSubmit.disabled = true;\r\n    customSubmit.classList.add('is-loading');\r\n  }\r\n\r\n  function unlockSubmit() {\r\n    if (!customSubmit) return;\r\n    customSubmit.disabled = false;\r\n    customSubmit.classList.remove('is-loading');\r\n  }\r\n\r\n  \/\/ Akcija pri slanju (Submit)\r\n  customForm.addEventListener('submit', function (event) {\r\n    event.preventDefault();\r\n\r\n    if (!customForm.checkValidity()) {\r\n      customForm.reportValidity();\r\n      return;\r\n    }\r\n\r\n    \/\/ Povla\u010denje podataka iz Viva Novo HTML forme\r\n    const imePrezime = getCustomValue('input[name=\"ime_prezime\"]');\r\n    const telefon    = getCustomValue('input[name=\"telefon\"]');\r\n    const email      = getCustomValue('input[name=\"email\"]');\r\n    const adresa     = getCustomValue('input[name=\"adresa\"]');\r\n    const proizvod   = getCustomValue('input[name=\"proizvod\"]'); \/\/ Hidden field\r\n    const poruka     = getCustomValue('textarea[name=\"poruka\"]');\r\n\r\n    \/\/ Upisivanje u Elementor formu prema ID-evima\r\n    setElementorValue('#form-field-name', imePrezime);\r\n    setElementorValue('#form-field-field_e1cef1c', telefon);\r\n    setElementorValue('#form-field-email', email);\r\n    setElementorValue('#form-field-field_7373df8', adresa); \/\/ Adresa ide u polje Grad\r\n    setElementorValue('#form-field-field_82f297e', proizvod); \/\/ Skriveni naziv proizvoda ide u Vrstu upita\r\n    setElementorValue('#form-field-field_adb360b', ''); \/\/ Prazno jer korisnik to pi\u0161e u polje \"poruka\"\r\n    setElementorValue('#form-field-message', poruka);\r\n\r\n    showMessage('\u0160aljemo va\u0161 upit...', 'loading');\r\n    lockSubmit();\r\n\r\n    const elementorSubmit = elementorForm.querySelector('button[type=\"submit\"]');\r\n\r\n    if (!elementorSubmit) {\r\n      showMessage('Gre\u0161ka: Elementor submit gumb nije prona\u0111en.', 'error');\r\n      unlockSubmit();\r\n      return;\r\n    }\r\n\r\n    elementorSubmit.click();\r\n  });\r\n\r\n  \/\/ Pra\u0107enje odgovora Elementor forme (Mutation Observer za Ajax response)\r\n  const observer = new MutationObserver(function () {\r\n    const successMessage = elementorForm.querySelector('.elementor-message-success');\r\n    const errorMessage =\r\n      elementorForm.querySelector('.elementor-message-danger') ||\r\n      elementorForm.querySelector('.elementor-error');\r\n\r\n    if (successMessage) {\r\n      showMessage('Hvala! Va\u0161 upit je uspje\u0161no poslan. Javit \u0107emo vam se uskoro.', 'success');\r\n      customForm.reset();\r\n      unlockSubmit();\r\n    }\r\n\r\n    if (errorMessage) {\r\n      showMessage(\r\n        errorMessage.textContent.trim() || 'Do\u0161lo je do gre\u0161ke prilikom slanja. Molimo poku\u0161ajte ponovno.',\r\n        'error'\r\n      );\r\n      unlockSubmit();\r\n    }\r\n  });\r\n\r\n  observer.observe(elementorForm, {\r\n    childList: true,\r\n    subtree: true\r\n  });\r\n\r\n  \/\/ Fallback pra\u0107enje pomo\u0107u jQuery doga\u0111aja iz Elementora\r\n  if (window.jQuery) {\r\n    jQuery(document).on('submit_success', function (event) {\r\n      const submittedForm = event.target;\r\n\r\n      if (submittedForm === elementorForm || elementorForm.contains(submittedForm)) {\r\n        showMessage('Hvala! Va\u0161 upit je uspje\u0161no poslan. Javit \u0107emo vam se uskoro.', 'success');\r\n        customForm.reset();\r\n        unlockSubmit();\r\n      }\r\n    });\r\n\r\n    jQuery(document).on('submit_error', function (event) {\r\n      const submittedForm = event.target;\r\n\r\n      if (submittedForm === elementorForm || elementorForm.contains(submittedForm)) {\r\n        showMessage('Do\u0161lo je do gre\u0161ke prilikom slanja. Molimo poku\u0161ajte ponovno.', 'error');\r\n        unlockSubmit();\r\n      }\r\n    });\r\n  }\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BMI Bramac crijep Viva Novo Klasi\u010dan biber izgled u suvremenoj izvedbi za krovove koji tra\u017ee smiren ritam, tradiciju i elegantan karakter. Biber estetika Efekt naran\u010dine kore Tradicionalan stil Zatra\u017eite ponudu Pogledajte detalje Boja: Antik Dizajn i tehni\u010dki podaci Biber karakter u suvremenoj izvedbi. Viva Novo donosi prepoznatljiv izgled klasi\u010dnog biber crijepa, ali u suvremenom formatu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-354","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/pages\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":37,"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/pages\/354\/revisions"}],"predecessor-version":[{"id":707,"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/pages\/354\/revisions\/707"}],"wp:attachment":[{"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/media?parent=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}