/* * poly-shared.css * Ekstraktovano iz legacy/components/head.php (shared Webflow dizajn CSS). * Koristi se za NOVE (Elementor) stranice koje ne renderiraju legacy head. * Legacy stranice i dalje nose ovaj CSS inline u svom . */ /* Hide Webflow badge in the bottom-right corner */ .w-webflow-badge { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Static logo layout overrides (prevents rotation, increases size to 2x) */ .poly-logo-static { height: 80px !important; width: auto !important; max-width: none !important; transform: none !important; animation: none !important; transition: none !important; } /* Custom style for Katalog button (light background) */ .katalog-button { background-color: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; border-radius: 10px !important; padding: 4px 4px 4px 20px !important; text-decoration: none !important; transition: transform .35s, background-color .35s !important; position: relative !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; height: 52px !important; /* Match green-button height */ box-sizing: border-box !important; } .katalog-button:hover { background-color: #f4fbf6 !important; transform: translateY(-2px) !important; } .katalog-button .button-text-color { color: var(--_color---secondary) !important; margin-right: 12px !important; } .katalog-button .arrow-wrap-color { background-color: var(--_color---primary) !important; } /* Support for 4th item in Products sticky scroll */ .work-wrap-block._04 { z-index: 1; position: absolute; inset: 0%; opacity: 0; } .work-card-block._04 { z-index: 0; position: absolute; inset: 0%; } .steps-height { height: 480vh !important; } /* Dynamic height fix to restore equal padding */ .work-cards-wrapper { height: auto !important; } .work-card-block._01 { position: relative !important; width: 100%; } /* Adjust POLY letters sizing and position to prevent clipping */ .big-letters { bottom: calc(2vw + 15px) !important; /* Lifts the text up further by 15px */ } .big-letter, .big-letter.s { text-transform: uppercase !important; font-size: 14vw !important; /* Reduced from 18vw so it fits nicely */ line-height: 1.1 !important; padding-bottom: 0 !important; } /* Fix typing animation width crop for longer words */ .hero-type-1, .hero-type-2, .hero-type-3 { font-size: 0.85em !important; letter-spacing: -0.02em !important; } /* Hexagon Clusters for Hero */ .hex-cluster { position: absolute; z-index: 1; color: var(--_color---gray-t); opacity: 0.8; pointer-events: none; will-change: transform; /* Bulletproof vertical centering and height bounding */ top: 50%; transform: translateY(-50%); height: 70%; /* Ensures it never overflows the hero section */ display: flex; align-items: center; } .hex-cluster svg use { pointer-events: visiblePainted; transition: stroke 0.4s ease; } .hex-cluster:hover { color: var(--_color---primary); } .hex-cluster svg use:hover { stroke: var(--_color---primary); } .hex-cluster.left-cluster { left: 1%; } .hex-cluster.right-cluster { right: 1%; } .hex-cluster svg { height: 100%; /* Scales naturally to the 70% bounded height */ width: auto; max-width: 35vw; /* Prevents it from getting too wide horizontally */ stroke: currentColor; fill: none; stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round; } @media screen and (max-width: 767px) { .hex-cluster { opacity: 0.3; } } @media screen and (min-width: 1440px) { } /* Megamenu Dropdown */ .nav-dropdown-wrapper { position: relative; display: inline-block; } .nav-dropdown-content { display: none; position: absolute; background-color: var(--_color---white); min-width: 260px; box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.15); z-index: 100; border-radius: 12px; padding: 12px 0; top: 100%; left: 50%; transform: translateX(-50%); } .nav-dropdown-wrapper:hover .nav-dropdown-content { display: block; animation: menuFadeIn 0.3s ease-out; } .dropdown-link { color: var(--_color---dark); padding: 14px 24px; text-decoration: none; display: block; font-weight: 500; font-size: 16px; transition: background-color 0.2s, color 0.2s; } .dropdown-link:hover { background-color: #f7f7f7; color: var(--_color---primary); } @keyframes menuFadeIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Alignment fixes for Products cards */ .inner-project-content { height: 100% !important; display: flex !important; flex-direction: column !important; } .project-button-wrap.hero { margin-top: auto !important; /* Pushes button exactly to the bottom */ margin-bottom: 0 !important; } .inner-card-wrap { height: 100% !important; display: flex !important; } .card-image-2 { height: 100% !important; object-fit: cover !important; width: 100% !important; } /* Desktop Header Layout swap */ @media screen and (min-width: 992px) { .nav-menu { justify-self: start !important; } .logo-link { justify-self: center !important; } .navbar-button-wrap { justify-self: end !important; } } /* General styling for 'za' in hero title and mobile menu buttons */ .desktop-only-za { display: inline !important; } .mobile-only-za { display: none !important; } .mobile-menu-buttons { display: none !important; /* Hide inside header row on desktop */ } /* General overflow prevention to avoid horizontal scrolling */ html, body { max-width: 100% !important; overflow-x: clip !important; } .page-wrapper { max-width: 100% !important; overflow-x: clip !important; } /* CUSTOM MOBILE RESPONSIVE OVERRIDES */ @media screen and (max-width: 991px) { /* 1. Header Layout on Mobile: Logo left, Burger right, hide inline buttons */ .nav-layout { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 10px 0 !important; } .logo-link { order: 1 !important; margin-left: 0 !important; display: block !important; position: relative !important; z-index: 10001 !important; /* Above backdrop */ } .navbar-button-wrap { order: 2 !important; display: flex !important; align-items: center !important; margin-right: 0 !important; z-index: 10001 !important; /* Above backdrop */ } .desktop-button { display: none !important; /* Hide button row on mobile */ } /* Burger menu button styling and position */ .navbar2-menu-button { display: flex !important; z-index: 10002 !important; /* Floating above menu container */ position: relative !important; margin-right: 15px !important; /* Shifted additionally to the left by 15px */ background-color: transparent !important; } /* Toggle visibility of burger lines and cross icon */ .navbar2-menu-button .menu-cross-wrap { opacity: 0 !important; transition: opacity 0.3s ease !important; } .navbar2-menu-button .menu-3-line-wrap { opacity: 1 !important; transition: opacity 0.3s ease !important; } body.mobile-menu-active .navbar2-menu-button .menu-cross-wrap { opacity: 1 !important; } body.mobile-menu-active .navbar2-menu-button .menu-3-line-wrap { opacity: 0 !important; } /* 2. Custom slide-in mobile menu panel from the right */ .w-nav-menu { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 80% !important; max-width: 320px !important; height: 100vh !important; background-color: #ffffff !important; box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important; z-index: 9999 !important; display: flex !important; flex-direction: column !important; padding: 95px 24px 40px 24px !important; box-sizing: border-box !important; overflow-y: auto !important; /* Transform transition for premium slide-in animation */ transform: translateX(100%) !important; visibility: hidden !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s !important; } body.mobile-menu-active .w-nav-menu { transform: translateX(0) !important; visibility: visible !important; } .nav-middle { display: flex !important; flex-direction: column !important; gap: 16px !important; align-items: stretch !important; width: 100% !important; text-align: left !important; } .nav-link { padding: 12px 0 !important; width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } .nav-link .meta-scramble { display: none !important; /* Hide scrambled text on mobile */ } .nav-link .meta-normal { font-size: 18px !important; font-weight: 600 !important; color: #1a1a1a !important; text-transform: uppercase !important; display: block !important; } /* Custom style to nest megamenu elements directly under Products */ .nav-dropdown-wrapper { width: 100% !important; display: block !important; } .nav-dropdown-content { display: block !important; position: static !important; transform: none !important; box-shadow: none !important; background-color: #f7fcf8 !important; border-radius: 8px !important; padding: 6px 16px !important; margin-top: 6px !important; border-left: 3px solid var(--_color---primary) !important; min-width: unset !important; width: 100% !important; box-sizing: border-box !important; } .dropdown-link { padding: 10px 0 !important; font-size: 15px !important; font-weight: 500 !important; color: #4a4a4a !important; border-bottom: none !important; text-align: left !important; } /* Semi-transparent dark blur backdrop using custom overlay */ .mobile-menu-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background-color: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px) !important; z-index: 9998 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.4s ease !important; } body.mobile-menu-active .mobile-menu-overlay { opacity: 1 !important; pointer-events: auto !important; } /* Disable Webflow's default nav-overlay to avoid conflicts */ .w-nav-overlay { display: none !important; } /* Mobile menu buttons stacking layout */ .mobile-menu-buttons { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; margin-top: 24px !important; padding-bottom: 20px !important; } .mobile-menu-buttons .katalog-button, .mobile-menu-buttons .green-button { display: flex !important; width: 100% !important; justify-content: space-between !important; align-items: center !important; box-sizing: border-box !important; margin: 0 !important; } } /* 3. Hero text wraps & centering on mobile layout */ @media screen and (max-width: 767px) { .section.hero { overflow: hidden !important; /* Prevent horizontal scroll from clusters */ } .heading-1 { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .home-hero-title { display: block !important; text-align: center !important; font-size: 2.2rem !important; /* Proportional text size */ line-height: 1.2 !important; width: 100% !important; } .heading-inner-spant { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 4px !important; margin-top: 10px !important; width: 100% !important; } /* Line 2: 'za grijanje i' wrapping configuration */ .heading-inner-spant > div { display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; width: 100% !important; } .heading-inner-spant > div .hero-sapn { font-size: 2.2rem !important; } /* Mobile 'za' display configuration */ .mobile-only-za { display: inline !important; color: #fff !important; font-weight: normal !important; font-size: 2.2rem !important; margin-right: 10px !important; } /* Perfect, matching spacing left & right of 'i' */ .heading-inner-spant > div span[style*="color: #fff"] { font-size: 2.2rem !important; margin: 0 12px !important; /* Identical and clean margins */ display: inline-block !important; } /* Line 3: typing animations container */ .typing-title-move { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 2.5rem !important; } .typing-title { text-align: center !important; width: 100% !important; } .typing-title span { font-size: 2.2rem !important; } .heading_subtext-wrap { margin: 15px auto 0 auto !important; } .heading_subtext { font-size: 0.95rem !important; line-height: 1.45 !important; } } /* 4. Centar za grijanje (Heating Center) stacked columns layout and tag overflow prevention */ @media screen and (max-width: 767px) { .section.price { overflow: hidden !important; /* Prevent horizontal scroll */ } .section-tag-wrap.white { white-space: nowrap !important; } .section-tag-text.white { font-size: 11px !important; /* Decreased font size on mobile */ white-space: nowrap !important; /* Prevent 'E' from breaking to next line */ } .pricing-plan-wrap { grid-template-columns: 1fr !important; /* Turn grid into single column (rows) */ grid-column-gap: 32px !important; grid-row-gap: 32px !important; padding: 24px !important; max-width: 480px !important; margin: 0 auto !important; } .pricing-list-content { padding-top: 24px !important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; /* Nice visual separator */ } }