{"id":296,"date":"2026-04-27T11:07:35","date_gmt":"2026-04-27T09:07:35","guid":{"rendered":"https:\/\/opd.hr\/goldenglobe\/?page_id=296"},"modified":"2026-05-12T13:59:33","modified_gmt":"2026-05-12T11:59:33","slug":"romer","status":"publish","type":"page","link":"https:\/\/goldenglobe.hr\/bmibramac\/romer\/","title":{"rendered":"Romer crijep &#8211; BMI Bramac"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"296\" class=\"elementor elementor-296\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b54de1f e-con-full e-flex e-con e-parent\" data-id=\"b54de1f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-149e5d6 elementor-widget elementor-widget-html\" data-id=\"149e5d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ========================================\n   ROMER \u2013 PRODUCT PAGE\n   Elementor HTML Widget\n   With color selector \/ close-up image switcher\n========================================= *\/\n\n.romer-page {\n  --bmi-blue: #009FDF;\n  --bmi-blue-rgb: 0, 159, 223;\n  --bramac-red: #d22630;\n  --dark: #141618;\n  --text: #202020;\n  --muted: #6b6b6b;\n  --line: rgba(0,0,0,0.08);\n  --cream: #f8f5f2;\n  --card: rgba(255,255,255,0.88);\n\n  color: var(--text);\n  font-family: inherit;\n  overflow: hidden;\n}\n\n.romer-page * {\n  box-sizing: border-box;\n}\n\n.romer-inner {\n  width: min(1240px, 100%);\n  margin: 0 auto;\n}\n\n.romer-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 18px;\n  color: var(--bmi-blue);\n  font-size: 13px;\n  font-weight: 850;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.romer-eyebrow::before {\n  content: \"\";\n  width: 42px;\n  height: 3px;\n  border-radius: 999px;\n  background: var(--bmi-blue);\n}\n\n\/* =========================\n   1. HERO\n========================= *\/\n\n.romer-hero {\n  position: relative;\n  min-height: 760px;\n  display: flex;\n  align-items: center;\n  padding: clamp(80px, 9vw, 140px) 20px;\n  background: #111;\n  color: #fff;\n  overflow: hidden;\n}\n\n.romer-hero__bg {\n  position: absolute;\n  inset: 0;\n}\n\n.romer-hero__bg img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transform: scale(1.02);\n}\n\n.romer-hero__bg::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\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%),\n    linear-gradient(0deg, rgba(10,12,14,0.38), transparent 48%);\n}\n\n.romer-hero__content {\n  position: relative;\n  z-index: 2;\n  max-width: 740px;\n}\n\n.romer-hero__badge {\n  display: inline-flex;\n  width: fit-content;\n  margin-bottom: 18px;\n  padding: 8px 12px;\n  border-radius: 999px;\n  background: rgba(255,255,255,0.12);\n  border: 1px solid rgba(255,255,255,0.18);\n  color: rgba(255,255,255,0.84);\n  font-size: 12px;\n  font-weight: 850;\n  letter-spacing: 0.11em;\n  text-transform: uppercase;\n  backdrop-filter: blur(12px);\n}\n\n.romer-hero__title {\n  margin: 0;\n  color: #fff;\n  font-size: clamp(56px, 8vw, 116px);\n  line-height: 0.88;\n  letter-spacing: -0.07em;\n  font-weight: 900;\n}\n\n.romer-hero__lead {\n  margin: 26px 0 0;\n  max-width: 620px;\n  color: rgba(255,255,255,0.78);\n  font-size: clamp(18px, 1.6vw, 23px);\n  line-height: 1.65;\n}\n\n.romer-hero__features {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin: 32px 0 0;\n  padding: 0;\n  list-style: none;\n}\n\n.romer-hero__features li {\n  display: inline-flex;\n  align-items: center;\n  min-height: 42px;\n  padding: 10px 14px;\n  border-radius: 999px;\n  background: rgba(255,255,255,0.11);\n  border: 1px solid rgba(255,255,255,0.14);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 800;\n  backdrop-filter: blur(12px);\n}\n\n.romer-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-top: 34px;\n}\n\n.romer-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 54px;\n  padding: 15px 24px;\n  border-radius: 999px;\n  font-size: 14px;\n  font-weight: 900;\n  text-decoration: none;\n  transition: 0.25s ease;\n}\n\n.romer-btn--primary {\n  background: var(--bmi-blue);\n  color: #fff;\n  box-shadow: 0 18px 42px rgba(var(--bmi-blue-rgb),0.28);\n}\n\n.romer-btn--primary:hover {\n  transform: translateY(-3px);\n  color: #fff;\n  box-shadow: 0 24px 54px rgba(var(--bmi-blue-rgb),0.36);\n}\n\n.romer-btn--secondary {\n  background: rgba(255,255,255,0.12);\n  border: 1px solid rgba(255,255,255,0.20);\n  color: #fff;\n  backdrop-filter: blur(12px);\n}\n\n.romer-btn--secondary:hover {\n  transform: translateY(-3px);\n  background: rgba(255,255,255,0.18);\n  color: #fff;\n}\n\n.romer-hero__sample {\n  position: absolute;\n  z-index: 3;\n  right: clamp(20px, 6vw, 90px);\n  bottom: clamp(20px, 6vw, 80px);\n  width: min(330px, 34vw);\n  padding: 18px;\n  border-radius: 28px;\n  background: rgba(255,255,255,0.14);\n  border: 1px solid rgba(255,255,255,0.20);\n  backdrop-filter: blur(18px);\n  box-shadow: 0 30px 90px rgba(0,0,0,0.34);\n}\n\n.romer-hero__sample img {\n  display: block;\n  width: 100%;\n  border-radius: 20px;\n  object-fit: cover;\n}\n\n.romer-hero__sample span {\n  display: block;\n  margin-top: 12px;\n  color: rgba(255,255,255,0.80);\n  font-size: 12px;\n  font-weight: 850;\n  letter-spacing: 0.09em;\n  text-transform: uppercase;\n}\n\n\/* =========================\n   2. DETAILS\n========================= *\/\n\n.romer-details {\n  position: relative;\n  padding: clamp(78px, 8vw, 130px) 20px;\n  background:\n    radial-gradient(circle at 10% 12%, rgba(var(--bmi-blue-rgb),0.09), transparent 30%),\n    linear-gradient(135deg, #ffffff 0%, var(--cream) 100%);\n}\n\n.romer-details__header {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);\n  gap: 34px;\n  align-items: end;\n  margin-bottom: clamp(36px, 5vw, 64px);\n}\n\n.romer-title {\n  margin: 0;\n  color: var(--dark);\n  font-size: clamp(42px, 6vw, 82px);\n  line-height: 0.92;\n  letter-spacing: -0.06em;\n  font-weight: 850;\n}\n\n.romer-intro {\n  margin: 0;\n  color: var(--muted);\n  font-size: clamp(16px, 1.4vw, 19px);\n  line-height: 1.7;\n}\n\n.romer-details__grid {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);\n  gap: 28px;\n  align-items: start;\n}\n\n.romer-color-input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n\/* Product showcase with color image switch *\/\n.romer-showcase {\n  position: relative;\n  overflow: hidden;\n  height: clamp(430px, 48vw, 630px);\n  border-radius: 34px;\n  background:\n    radial-gradient(circle at 50% 42%, rgba(0,159,223,0.08), transparent 42%),\n    linear-gradient(135deg, #f7f4f1 0%, #ece7e1 100%);\n  box-shadow: 0 30px 90px rgba(24,22,21,0.14);\n  scroll-margin-top: 90px;\n}\n\n.romer-showcase::after {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: 42%;\n  background: linear-gradient(0deg, rgba(0,0,0,0.18), transparent);\n  pointer-events: none;\n  z-index: 2;\n}\n\n.romer-showcase__slide {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  transform: translateY(12px) scale(0.985);\n  pointer-events: none;\n  transition:\n    opacity 0.38s ease,\n    transform 0.38s ease;\n}\n\n.romer-showcase__slide img {\n  width: 100%;\n  height: 100%;\n  padding: clamp(28px, 4vw, 58px);\n  object-fit: contain;\n  object-position: top;\n  display: block;\n  transition: transform 0.8s ease;\n}\n\n.romer-showcase:hover .romer-showcase__slide img {\n  transform: scale(1.035);\n}\n\n#romer-color-crvena:checked ~ .romer-showcase .romer-showcase__slide--crvena,\n#romer-color-rubin:checked ~ .romer-showcase .romer-showcase__slide--rubin,\n#romer-color-antik:checked ~ .romer-showcase .romer-showcase__slide--antik,\n#romer-color-tamno:checked ~ .romer-showcase .romer-showcase__slide--tamno,\n#romer-color-antracit:checked ~ .romer-showcase .romer-showcase__slide--antracit {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n  pointer-events: auto;\n}\n\n.romer-showcase__caption {\n  position: absolute;\n  z-index: 3;\n  left: 24px;\n  right: 24px;\n  bottom: 24px;\n  padding: 20px;\n  border-radius: 22px;\n  background: rgba(20,20,20,0.56);\n  border: 1px solid rgba(255,255,255,0.14);\n  backdrop-filter: blur(14px);\n  color: #fff;\n}\n\n.romer-showcase__caption strong {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 22px;\n  line-height: 1.2;\n  letter-spacing: -0.03em;\n}\n\n.romer-showcase__caption span {\n  color: rgba(255,255,255,0.72);\n  font-size: 14px;\n  line-height: 1.55;\n}\n\n.romer-info-card {\n  padding: clamp(28px, 4vw, 46px);\n  border: 1px solid var(--line);\n  border-radius: 34px;\n  background: var(--card);\n  backdrop-filter: blur(12px);\n  box-shadow: 0 28px 80px rgba(24,22,21,0.10);\n}\n\n.romer-info-card__label {\n  display: inline-flex;\n  width: fit-content;\n  margin-bottom: 16px;\n  padding: 8px 12px;\n  border-radius: 999px;\n  background: rgba(var(--bmi-blue-rgb),0.10);\n  color: var(--bmi-blue);\n  font-size: 11px;\n  font-weight: 900;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n.romer-info-card h3 {\n  margin: 0 0 16px;\n  color: var(--dark);\n  font-size: clamp(30px, 3vw, 44px);\n  line-height: 0.98;\n  letter-spacing: -0.055em;\n  font-weight: 900;\n}\n\n.romer-info-card p {\n  margin: 0;\n  color: var(--muted);\n  font-size: 16px;\n  line-height: 1.7;\n}\n\n.romer-swatches {\n  margin-top: 28px;\n}\n\n.romer-swatches__title,\n.romer-specs__title {\n  margin: 0 0 12px;\n  color: #222;\n  font-size: 12px;\n  font-weight: 900;\n  letter-spacing: 0.09em;\n  text-transform: uppercase;\n}\n\n.romer-swatches__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.romer-swatch {\n  display: inline-flex;\n  align-items: center;\n  gap: 9px;\n  min-height: 42px;\n  padding: 8px 13px 8px 8px;\n  border-radius: 999px;\n  background: #fff;\n  border: 1px solid rgba(0,0,0,0.08);\n  color: #333;\n  font-size: 13px;\n  font-weight: 850;\n  cursor: pointer;\n  user-select: none;\n  transition:\n    transform 0.2s ease,\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background 0.2s ease;\n}\n\n.romer-swatch:hover {\n  transform: translateY(-2px);\n  border-color: rgba(var(--bmi-blue-rgb),0.35);\n  box-shadow: 0 10px 24px rgba(0,0,0,0.08);\n}\n\n.romer-swatch::before {\n  content: \"\";\n  width: 24px;\n  height: 24px;\n  border-radius: 999px;\n  background: var(--swatch);\n  box-shadow:\n    inset 0 0 0 1px rgba(255,255,255,0.28),\n    0 5px 14px rgba(0,0,0,0.16);\n}\n\n#romer-color-crvena:checked ~ .romer-info-card label[for=\"romer-color-crvena\"],\n#romer-color-rubin:checked ~ .romer-info-card label[for=\"romer-color-rubin\"],\n#romer-color-antik:checked ~ .romer-info-card label[for=\"romer-color-antik\"],\n#romer-color-tamno:checked ~ .romer-info-card label[for=\"romer-color-tamno\"],\n#romer-color-antracit:checked ~ .romer-info-card label[for=\"romer-color-antracit\"] {\n  border-color: rgba(var(--bmi-blue-rgb),0.55);\n  background: rgba(var(--bmi-blue-rgb),0.08);\n  box-shadow:\n    0 12px 28px rgba(var(--bmi-blue-rgb),0.12),\n    inset 0 0 0 1px rgba(var(--bmi-blue-rgb),0.08);\n}\n\n.romer-color-note {\n  margin-top: 10px !important;\n  color: #777 !important;\n  font-size: 13px !important;\n  line-height: 1.5 !important;\n}\n\n.romer-specs {\n  margin-top: 30px;\n}\n\n.romer-specs__grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0,1fr));\n  gap: 11px;\n}\n\n.romer-spec {\n  padding: 16px;\n  border-radius: 18px;\n  background: #f5f1ed;\n  border: 1px solid rgba(0,0,0,0.04);\n}\n\n.romer-spec span {\n  display: block;\n  margin-bottom: 6px;\n  color: #777;\n  font-size: 10px;\n  font-weight: 900;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.romer-spec strong {\n  color: #1b1b1b;\n  font-size: 15px;\n  line-height: 1.35;\n  font-weight: 900;\n}\n\n.romer-benefits {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0,1fr));\n  gap: 14px;\n  margin-top: 24px;\n}\n\n.romer-benefit {\n  padding: 18px;\n  border-radius: 20px;\n  background: rgba(0,159,223,0.08);\n  border: 1px solid rgba(0,159,223,0.14);\n}\n\n.romer-benefit strong {\n  display: block;\n  margin-bottom: 6px;\n  color: var(--dark);\n  font-size: 14px;\n  font-weight: 900;\n}\n\n.romer-benefit span {\n  color: var(--muted);\n  font-size: 13px;\n  line-height: 1.45;\n}\n\n\/* =========================\n   3. INSPIRATION + CTA\n========================= *\/\n\n.romer-cta {\n  position: relative;\n  padding: clamp(78px, 8vw, 130px) 20px;\n  background:\n    radial-gradient(circle at 12% 16%, rgba(255,255,255,0.18), transparent 28%),\n    linear-gradient(135deg, #0f1113 0%, #181b1f 55%, #101214 100%);\n  color: #fff;\n  overflow: hidden;\n}\n\n.romer-cta::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);\n  background-size: 54px 54px;\n  opacity: 0.20;\n  pointer-events: none;\n}\n\n.romer-cta .romer-inner {\n  position: relative;\n  z-index: 1;\n}\n\n.romer-cta__header {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);\n  gap: 34px;\n  align-items: end;\n  margin-bottom: clamp(36px, 5vw, 62px);\n}\n\n.romer-cta .romer-title {\n  color: #fff;\n}\n\n.romer-cta .romer-intro {\n  color: rgba(255,255,255,0.70);\n}\n\n.romer-gallery {\n  display: grid;\n  grid-template-columns: 1.2fr 0.8fr 0.8fr;\n  gap: 18px;\n  margin-bottom: 30px;\n}\n\n.romer-gallery__item {\n  position: relative;\n  min-height: 340px;\n  overflow: hidden;\n  border-radius: 28px;\n  background: #222;\n  box-shadow: 0 28px 80px rgba(0,0,0,0.28);\n}\n\n.romer-gallery__item:first-child {\n  min-height: 460px;\n}\n\n.romer-gallery__item img {\n  width: 100%;\n  height: 100%;\n  min-height: inherit;\n  object-fit: cover;\n  display: block;\n  transition: transform 1s ease;\n}\n\n.romer-gallery__item:hover img {\n  transform: scale(1.055);\n}\n\n.romer-gallery__item::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(0deg, rgba(0,0,0,0.18), transparent 18%);\n}\n\n.romer-gallery__label {\n  position: absolute;\n  z-index: 2;\n  left: 18px;\n  right: 18px;\n  bottom: 18px;\n  color: #fff;\n}\n\n.romer-gallery__label strong {\n  display: block;\n  margin-bottom: 5px;\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.03em;\n}\n\n.romer-gallery__label span {\n  display: block;\n  color: rgba(255,255,255,0.72);\n  font-size: 13px;\n  line-height: 1.45;\n}\n\n.romer-final {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(330px, 460px);\n  gap: 24px;\n  align-items: stretch;\n}\n\n.romer-final__text,\n.romer-form-card {\n  border: 1px solid rgba(255,255,255,0.12);\n  border-radius: 30px;\n  background: rgba(255,255,255,0.07);\n  backdrop-filter: blur(16px);\n  box-shadow: 0 28px 80px rgba(0,0,0,0.25);\n}\n\n.romer-final__text {\n  padding: clamp(28px, 4vw, 42px);\n}\n\n.romer-final__text h3 {\n  margin: 0 0 14px;\n  color: #fff;\n  font-size: clamp(30px, 4vw, 54px);\n  line-height: 0.96;\n  letter-spacing: -0.055em;\n  font-weight: 900;\n}\n\n.romer-final__text p {\n  margin: 0;\n  max-width: 720px;\n  color: rgba(255,255,255,0.72);\n  font-size: 16px;\n  line-height: 1.7;\n}\n\n.romer-final__chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin-top: 26px;\n}\n\n.romer-final__chips span {\n  display: inline-flex;\n  padding: 9px 12px;\n  border-radius: 999px;\n  background: rgba(0,159,223,0.14);\n  border: 1px solid rgba(0,159,223,0.22);\n  color: #fff;\n  font-size: 13px;\n  font-weight: 850;\n}\n\n.romer-form-card {\n  padding: 26px;\n  background: rgba(255,255,255,0.94);\n  color: var(--dark);\n}\n\n.romer-form-card h3 {\n  margin: 0 0 10px;\n  color: var(--dark);\n  font-size: 30px;\n  line-height: 1;\n  letter-spacing: -0.045em;\n  font-weight: 900;\n}\n\n.romer-form-card p {\n  margin: 0 0 20px;\n  color: #666;\n  font-size: 14px;\n  line-height: 1.55;\n}\n\n.romer-form {\n  display: grid;\n  gap: 12px;\n}\n\n.romer-form input,\n.romer-form textarea {\n  width: 100%;\n  min-height: 48px;\n  border: 1px solid rgba(0,0,0,0.10);\n  border-radius: 15px;\n  background: #fff;\n  padding: 13px 14px;\n  color: #161616;\n  font-family: inherit;\n  font-size: 14px;\n  outline: none;\n  transition: 0.2s ease;\n}\n\n.romer-form textarea {\n  min-height: 110px;\n  resize: vertical;\n}\n\n.romer-form input:focus,\n.romer-form textarea:focus {\n  border-color: var(--bmi-blue);\n  box-shadow: 0 0 0 4px rgba(var(--bmi-blue-rgb),0.12);\n}\n\n.romer-form button {\n  min-height: 52px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--bramac-red);\n  color: #fff;\n  padding: 14px 20px;\n  font-family: inherit;\n  font-size: 14px;\n  font-weight: 950;\n  cursor: pointer;\n  transition: 0.25s ease;\n  box-shadow: 0 18px 42px rgba(210,38,48,0.28);\n}\n\n.romer-form button:hover {\n  transform: translateY(-2px);\n  background: #ad1f27;\n  box-shadow: 0 24px 50px rgba(210,38,48,0.36);\n}\n\n.romer-form__note {\n  margin: 8px 0 0 !important;\n  color: #777 !important;\n  font-size: 12px !important;\n  text-align: center;\n}\n\n\/* Responsive *\/\n\n@media (max-width: 1100px) {\n  .romer-hero {\n    min-height: 720px;\n  }\n\n  .romer-hero__sample {\n    display: none;\n  }\n\n  .romer-details__grid,\n  .romer-final {\n    grid-template-columns: 1fr;\n  }\n\n  .romer-gallery {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .romer-gallery__item:first-child {\n    grid-column: span 2;\n  }\n}\n\n@media (max-width: 780px) {\n  .romer-details__header,\n  .romer-cta__header {\n    grid-template-columns: 1fr;\n  }\n\n  .romer-benefits {\n    grid-template-columns: 1fr;\n  }\n\n  .romer-gallery {\n    grid-template-columns: 1fr;\n  }\n\n  .romer-gallery__item:first-child {\n    grid-column: span 1;\n  }\n}\n\n@media (max-width: 620px) {\n  .romer-hero,\n  .romer-details,\n  .romer-cta {\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n\n  .romer-hero {\n    min-height: 680px;\n  }\n\n  .romer-hero__title {\n    font-size: clamp(54px, 17vw, 78px);\n  }\n\n  .romer-hero__actions {\n    display: grid;\n  }\n\n  .romer-btn {\n    width: 100%;\n  }\n\n  .romer-specs__grid {\n    grid-template-columns: 1fr;\n  }\n\n  .romer-showcase {\n    height: 550px;\n  }\n\n  .romer-showcase__slide img {\n    min-height: 0;\n    padding: 28px;\n  }\n\n  .romer-showcase__caption {\n    left: 16px;\n    right: 16px;\n    bottom: 16px;\n    padding: 16px;\n  }\n\n  .romer-showcase__caption strong {\n    font-size: 19px;\n  }\n\n  .romer-gallery__item,\n  .romer-gallery__item:first-child {\n    min-height: 300px;\n  }\n\n  .romer-hero__lead {\n    max-width: 100%;\n    width: 290px;\n  }\n}\n<\/style>\n\n<div class=\"romer-page\">\n\n  <!-- SECTION 1: HERO -->\n  <section class=\"romer-hero\">\n    <div class=\"romer-hero__bg\">\n      <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-Crijep-Bramac-Novo-Crvena-2.webp\" alt=\"Romer crijep na krovu ku\u0107e\">\n    <\/div>\n\n    <div class=\"romer-inner\">\n      <div class=\"romer-hero__content\">\n        <div class=\"romer-hero__badge\">BMI Bramac crijep<\/div>\n\n        <h1 class=\"romer-hero__title\">Romer<\/h1>\n\n        <p class=\"romer-hero__lead\">\n          Nagla\u0161ene linije i tradicionalni karakter za krov koji ima ritam, toplinu i sna\u017ean vizualni dojam.\n        <\/p>\n\n        <ul class=\"romer-hero__features\">\n          <li>Tradicionalni profil<\/li>\n          <li>Dinami\u010dna linija krova<\/li>\n          <li>Mediteranski karakter<\/li>\n        <\/ul>\n\n        <div class=\"romer-hero__actions\">\n          <a class=\"romer-btn romer-btn--primary\" href=\"#romer-ponuda\">Zatra\u017eite ponudu<\/a>\n          <a class=\"romer-btn romer-btn--secondary\" href=\"#romer-detalji\">Pogledajte detalje<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"romer-hero__sample\">\n      <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-Crvena.webp\" alt=\"Close-up Romer crvena\">\n      <span>Boje: Crvena, Rubin crvena, Antik, Tamno sme\u0111a i Antracit<\/span>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 2: DETAILS -->\n  <section class=\"romer-details\" id=\"romer-detalji\">\n    <div class=\"romer-inner\">\n\n      <div class=\"romer-details__header\">\n        <div>\n          <div class=\"romer-eyebrow\">Dizajn i tehni\u010dki podaci<\/div>\n          <h2 class=\"romer-title\">Izra\u017een profil za krovove s karakterom.<\/h2>\n        <\/div>\n\n        <p class=\"romer-intro\">\n          Romer je izbor za ku\u0107e koje \u017eele toplinu tradicionalnog krova, nagla\u0161enu optiku i sna\u017eniji estetski dojam koji se posebno dobro uklapa u mediteransku i klasi\u010dnu arhitekturu.\n        <\/p>\n      <\/div>\n\n      <div class=\"romer-details__grid\">\n\n        <!-- Color radio controls -->\n        <input class=\"romer-color-input\" type=\"radio\" name=\"romer-color\" id=\"romer-color-crvena\" checked>\n        <input class=\"romer-color-input\" type=\"radio\" name=\"romer-color\" id=\"romer-color-rubin\">\n        <input class=\"romer-color-input\" type=\"radio\" name=\"romer-color\" id=\"romer-color-antik\">\n        <input class=\"romer-color-input\" type=\"radio\" name=\"romer-color\" id=\"romer-color-tamno\">\n        <input class=\"romer-color-input\" type=\"radio\" name=\"romer-color\" id=\"romer-color-antracit\">\n\n        <!-- Product image switcher -->\n        <div class=\"romer-showcase\">\n          <div class=\"romer-showcase__slide romer-showcase__slide--crvena\">\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-Crvena.webp\" alt=\"Romer crvena\">\n            <div class=\"romer-showcase__caption\">\n              <strong>Crvena<\/strong>\n              <span>Klasi\u010dna boja koja isti\u010de tradicionalni karakter i toplinu krova.<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"romer-showcase__slide romer-showcase__slide--rubin\">\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/05\/Rubin-crvena.webp\" alt=\"Romer rubin crvena\">\n            <div class=\"romer-showcase__caption\">\n              <strong>Rubin crvena<\/strong>\n              <span>Dublja crvena nijansa za topliji, izra\u017eeniji i elegantniji dojam krova.<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"romer-showcase__slide romer-showcase__slide--antik\">\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-antik.webp\" alt=\"Romer antik\">\n            <div class=\"romer-showcase__caption\">\n              <strong>Antik<\/strong>\n              <span>Topla, rustikalna nijansa koja krovu daje prirodan i tradicionalan izgled.<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"romer-showcase__slide romer-showcase__slide--tamno\">\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-smeda.webp\" alt=\"Romer tamno sme\u0111a\">\n            <div class=\"romer-showcase__caption\">\n              <strong>Tamno sme\u0111a<\/strong>\n              <span>Duboka sme\u0111a nijansa za elegantan, smiren i profinjen karakter krova.<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"romer-showcase__slide romer-showcase__slide--antracit\">\n            <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-antracit.webp\" alt=\"Romer antracit\">\n            <div class=\"romer-showcase__caption\">\n              <strong>Antracit<\/strong>\n              <span>Elegantnija, tamnija interpretacija tradicionalnog profila za ozbiljniji dojam krova.<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"romer-info-card\">\n          <div class=\"romer-info-card__label\">Romer<\/div>\n\n          <h3>Crijep za ku\u0107e koje tra\u017ee izra\u017een, topao i tradicionalan izgled.<\/h3>\n\n          <p>\n            Romer svojim nagla\u0161enim profilom daje krovu dinamiku i prepoznatljiv karakter. Odli\u010dan je izbor za objekte kojima krov treba biti sna\u017ean vizualni element, posebno kod ku\u0107a tradicionalnog, ju\u017enja\u010dkog ili mediteranskog stila.\n          <\/p>\n\n          <div class=\"romer-swatches\">\n            <div class=\"romer-swatches__title\">Odaberite boju crijepa<\/div>\n            <div class=\"romer-swatches__list\">\n              <label class=\"romer-swatch\" for=\"romer-color-crvena\" style=\"--swatch:#c74b31;\">Crvena<\/label>\n              <label class=\"romer-swatch\" for=\"romer-color-rubin\" style=\"--swatch:#8f1f2c;\">Rubin crvena<\/label>\n              <label class=\"romer-swatch\" for=\"romer-color-antik\" style=\"--swatch:#825546;\">Antik<\/label>\n              <label class=\"romer-swatch\" for=\"romer-color-tamno\" style=\"--swatch:#5a3a2f;\">Tamno sme\u0111a<\/label>\n              <label class=\"romer-swatch\" for=\"romer-color-antracit\" style=\"--swatch:#232323;\">Antracit<\/label>\n            <\/div>\n\n            <p class=\"romer-color-note\">\n              Klikom na boju mijenja se close-up prikaz crijepa.\n            <\/p>\n          <\/div>\n\n          <div class=\"romer-specs\">\n            <div class=\"romer-specs__title\">Tehni\u010dki podaci<\/div>\n\n            <div class=\"romer-specs__grid\">\n              <div class=\"romer-spec\">\n                <span>Veli\u010dina<\/span>\n                <strong>330 \u00d7 420 mm<\/strong>\n              <\/div>\n\n              <div class=\"romer-spec\">\n                <span>Te\u017eina<\/span>\n                <strong>4,4 kg\/kom<\/strong>\n              <\/div>\n\n              <div class=\"romer-spec\">\n                <span>Potro\u0161nja<\/span>\n                <strong>cca 9,8 kom\/m\u00b2<\/strong>\n              <\/div>\n\n              <div class=\"romer-spec\">\n                <span>Razmak letava<\/span>\n                <strong>31,5 \u2013 34 cm<\/strong>\n              <\/div>\n\n              <div class=\"romer-spec\">\n                <span>Profil<\/span>\n                <strong>Nagla\u0161eni tradicionalni<\/strong>\n              <\/div>\n\n              <div class=\"romer-spec\">\n                <span>Karakter krova<\/span>\n                <strong>Topao i dinami\u010dan<\/strong>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"romer-benefits\">\n            <div class=\"romer-benefit\">\n              <strong>Izra\u017eena optika<\/strong>\n              <span>Profil koji krovu daje ritam i dubinu.<\/span>\n            <\/div>\n\n            <div class=\"romer-benefit\">\n              <strong>Tradicionalni stil<\/strong>\n              <span>Odli\u010dan za ku\u0107e s toplim i mediteranskim karakterom.<\/span>\n            <\/div>\n\n            <div class=\"romer-benefit\">\n              <strong>BMI sustav<\/strong>\n              <span>Dio cjelovitog krovnog rje\u0161enja.<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SECTION 3: INSPIRATION + CTA -->\n  <section class=\"romer-cta\" id=\"romer-ponuda\">\n    <div class=\"romer-inner\">\n\n      <div class=\"romer-cta__header\">\n        <div>\n          <div class=\"romer-eyebrow\">Inspiracija i ponuda<\/div>\n          <h2 class=\"romer-title\">Zamislite Romer na svom krovu.<\/h2>\n        <\/div>\n\n        <p class=\"romer-intro\">\n          Najbolje pristaje tradicionalnim ku\u0107ama, mediteranskoj arhitekturi i objektima kojima krov treba dati toplinu, dinamiku i sna\u017eniji karakter.\n        <\/p>\n      <\/div>\n\n      <div class=\"romer-gallery\">\n        <div class=\"romer-gallery__item\">\n          <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-crijep-1-1.webp\" alt=\"Ku\u0107a s Romer crijepom\">\n          <div class=\"romer-gallery__label\">\n            <strong>Tradicionalni karakter<\/strong>\n            <span>Krov koji ku\u0107i daje toplinu i prepoznatljiv izgled.<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"romer-gallery__item\">\n          <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-crijep-3-1.webp\" alt=\"Romer crijep na mediteranskoj ku\u0107i\">\n          <div class=\"romer-gallery__label\">\n            <strong>Mediteranski dojam<\/strong>\n            <span>Izra\u017een profil koji se posebno dobro uklapa u ju\u017enja\u010dki stil.<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"romer-gallery__item\">\n          <img decoding=\"async\" src=\"https:\/\/goldenglobe.hr\/bmibramac\/wp-content\/uploads\/2026\/04\/Romer-crijep-2-1.webp\" alt=\"Detalj krova s Romer crijepom\">\n          <div class=\"romer-gallery__label\">\n            <strong>Dinami\u010dna linija krova<\/strong>\n            <span>Profil koji krovu daje ritam, dubinu i vizualnu snagu.<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"romer-final\">\n        <div class=\"romer-final__text\">\n          <h3>Je li Romer pravi izbor za va\u0161 objekt?<\/h3>\n          <p>\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.\n          <\/p>\n\n          <div class=\"romer-final__chips\">\n            <span>Tradicionalne ku\u0107e<\/span>\n            <span>Mediteranski stil<\/span>\n            <span>Krovovi s karakterom<\/span>\n            <span>Renovacije<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"romer-form-card\">\n          <h3>Zatra\u017eite ponudu<\/h3>\n          <p>Po\u0161aljite upit za Romer i javit \u0107emo vam se sa savjetom ili ponudom.<\/p>\n\n          <form class=\"romer-form\" action=\"#\" method=\"post\">\n            <input type=\"hidden\" name=\"proizvod\" value=\"Romer\">\n\n            <input type=\"text\" name=\"ime_prezime\" placeholder=\"Ime i prezime *\" required>\n            <input type=\"tel\" name=\"telefon\" placeholder=\"Telefon *\" required>\n            <input type=\"email\" name=\"email\" placeholder=\"Email *\" required>\n            <input type=\"text\" name=\"adresa\" placeholder=\"Grad *\">\n            <textarea name=\"poruka\" placeholder=\"Napi\u0161ite povr\u0161inu krova, tip objekta ili pitanje za Romer.\"><\/textarea>\n\n            <button type=\"submit\">Po\u0161aljite upit za Romer<\/button>\n\n            <p class=\"romer-form__note\">\n              Ili nas nazovite direktno: +385 98 210 069\n            <\/p>\n          <\/form>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n(function () {\n  const romerSection = document.querySelector('.romer-page');\n  if (!romerSection) return;\n\n  const colorInputs = romerSection.querySelectorAll('input[name=\"romer-color\"]');\n  const showcase = romerSection.querySelector('.romer-showcase');\n\n  if (!colorInputs.length || !showcase) return;\n\n  function isMobile() {\n    return window.matchMedia('(max-width: 780px)').matches;\n  }\n\n  function scrollToShowcase() {\n    if (!isMobile()) return;\n\n    setTimeout(function () {\n      const headerOffset = 90;\n      const showcaseTop = showcase.getBoundingClientRect().top + window.pageYOffset;\n      const targetPosition = showcaseTop - headerOffset;\n\n      window.scrollTo({\n        top: targetPosition,\n        behavior: 'smooth'\n      });\n    }, 120);\n  }\n\n  colorInputs.forEach(function (input) {\n    input.addEventListener('change', scrollToShowcase);\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3540e0d elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"3540e0d\" 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-e1ff389 bmi-elementor-hidden-form elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"e1ff389\" 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=\"296\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"e1ff389\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"Romer crijep &#8211; BMI Bramac\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"296\"\/>\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-eb60ec1 elementor-widget elementor-widget-html\" data-id=\"eb60ec1\" 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  .romer-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  .romer-form__response.is-success {\r\n    color: #157347;\r\n  }\r\n\r\n  .romer-form__response.is-error {\r\n    color: #b42318;\r\n  }\r\n\r\n  .romer-form__response.is-loading {\r\n    color: #555;\r\n  }\r\n\r\n  .romer-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 (romer-form)\r\n  const customForm = document.querySelector('form.romer-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 romer-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('.romer-form__response');\r\n\r\n  if (!responseBox) {\r\n    responseBox = document.createElement('p');\r\n    responseBox.className = 'romer-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 = 'romer-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 Romer 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 Romer Nagla\u0161ene linije i tradicionalni karakter za krov koji ima ritam, toplinu i sna\u017ean vizualni dojam. Tradicionalni profil Dinami\u010dna linija krova Mediteranski karakter Zatra\u017eite ponudu Pogledajte detalje Boje: Crvena, Rubin crvena, Antik, Tamno sme\u0111a i Antracit Dizajn i tehni\u010dki podaci Izra\u017een profil za krovove s karakterom. Romer je izbor za ku\u0107e koje [&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-296","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/pages\/296","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=296"}],"version-history":[{"count":43,"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/pages\/296\/revisions"}],"predecessor-version":[{"id":671,"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/pages\/296\/revisions\/671"}],"wp:attachment":[{"href":"https:\/\/goldenglobe.hr\/bmibramac\/wp-json\/wp\/v2\/media?parent=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}