/* Web Site Name: Fibas Web Site URL: https://www.fibas.hr/ Author: EGO MEDIA Author URL: http://www.egomedia.hr/ Description: Fibas - Flooring and More Version: 1.0 License: Copyright © 2025 Ego Media, Tezacka 47, 22000 Sibenik - Croatia License URI: http://www.egomedia.hr/restricted/ Tags: css, egomedia, ego, media, fibas, flooring, and more Text Domain: fibas-hr Start Date: 07.02.2025. Release Date: 17.05.2025. Last update: 12.11.2025. Note: © 2025 Ego Media ---------------------------------------------------------------*/ /****************************************************** /// Dodatni stilovi ******************************************************/ :root { --bg: #262626; --bar: #dcdcd2; --speed: 2s; --bars: 7; } /****************************************************** /// Preloader - laminat v.2 ******************************************************/ #preloader { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity .5s ease; z-index: 9999; } #preloader.hidden { opacity: 0; pointer-events: none; } .wrapper { width: 30vmin; height: 30vmin; perspective: 1000vmin; position: relative;} .bars { position: absolute; inset: 0; padding: 3.5vmin 1.5vmin; display: flex; flex-direction: column; justify-content: space-between; animation: mirror1 calc(var(--speed) * 2) ease infinite; } .bars + .bars { transform: rotate(90deg) rotateX(180deg); animation-name: mirror2; animation-delay: calc(var(--speed)/2) !important; } .bar { flex: 1; margin: 1vmin 0; background: linear-gradient(90deg, transparent 33%, var(--bar) 33% 67%, transparent 67%); background-size: 300%; background-position-x: -203%; animation: grow var(--speed) ease-in-out infinite alternate; } .bar:nth-child(n) { animation-delay: calc(var(--speed) * -(n-1) * 0.02); } .bars:nth-child(2) .bar:nth-child(n) { animation-delay: calc(calc(var(--speed) * -(n-1) * 0.02) - var(--speed)/2); } @keyframes mirror1 { 0%,47%,100% { transform: rotate(180deg) rotateX(0deg); } 47.01%,99.98% { transform: rotate(180deg) rotateX(180deg); } } @keyframes mirror2 { 0%,47%,100% { transform: rotate(90deg) rotateX(180deg); } 47.01%,99.98% { transform: rotate(90deg) rotateX(0deg); } } @keyframes grow { 0%,25% { background-position-x: -297%; } 45%,55% { background-position-x: -250%; } 75%,100% { background-position-x: -203%; } } #preloader.hidden + #main-content { display: block; } /****************************************************** /// OAC ******************************************************/ .oac { position: fixed; direction: rtl; z-index: 999999; right: 15px; bottom: 15px; user-select: none; --oac-primary: #f6c45a; --oac-secondary: #2d2825; --oac-hover: #ffffff; --oac-bg: #2d2825; --oac-text: #fff; --oac-radius: 10px 0 0 10px; --oac-shadow: 0 -25px 85px rgba(0, 114, 186, .4); --oac-border: 4px solid rgba(62, 91, 159, 0.5); --oac-menu-width: 70px; --oac-button-w: 64px; --oac-button-h: 44px; --oac-icon: 24px; --oac-gap-y: 15px; --oac-collapsed: 48px; --oac-collapsed-radius: 8px; --oac-anim-duration: 500ms; --oac-anim-easing: ease; } .oac .oac-container, .oac .oac-menu { border-radius: 8px; } /****************************************************** /// Trigger Button (external launcher) ******************************************************/ .oac-trigger-btn{ position: fixed; right: 8px; bottom: 18px; z-index: 1000000; width: 42px; height: 42px; border: 0; border-radius: 999px; background: #3e5b9f; color: #2d2825; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .12s ease, background .12s ease; } .oac-trigger-btn:hover{ transform: scale(1.04); background: #f6c45a; } .oac-trigger-btn:active{ transform: scale(.98); } .oac-trigger-btn svg{ width: 22px; height: 22px; fill: #2d2825; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } .oac .oac-container{ position: relative; overflow: hidden; box-sizing: border-box; transition: transform var(--oac-anim-duration) var(--oac-anim-easing), opacity var(--oac-anim-duration) var(--oac-anim-easing), width var(--oac-anim-duration) var(--oac-anim-easing), height var(--oac-anim-duration) var(--oac-anim-easing), background-color var(--oac-anim-duration) var(--oac-anim-easing), color var(--oac-anim-duration) var(--oac-anim-easing), border-radius var(--oac-anim-duration) var(--oac-anim-easing); will-change: transform, opacity; } .oac.oac-expanded .oac-container{ width: var(--oac-menu-width); height: auto; color: #3e5b9f; display: flex; flex-wrap: wrap; transform: translate3d(0,0,0); text-align: center; } .oac.oac-collapsed .oac-container{ width: var(--oac-collapsed); height: var(--oac-collapsed); border-radius: var(--oac-collapsed-radius); color: #2d2825; font-weight: 600; } .oac .oac-menu{ width: var(--oac-menu-width); background: var(--oac-primary); display: flex; flex-direction: column; align-items: center; padding: 0 0 60px 0; transition: transform var(--oac-anim-duration) var(--oac-anim-easing), opacity var(--oac-anim-duration) var(--oac-anim-easing); } .oac .oac-menu-button{ box-sizing: border-box; width: var(--oac-button-w); height: var(--oac-button-h); cursor: pointer; position: relative; border-radius: 8px; background: transparent; fill: var(--oac-secondary); margin: var(--oac-gap-y) 0; padding: 0; display: grid; place-items: center; transition: background-color .15s ease, fill .12s ease, transform .1s ease; } .oac .oac-menu-button span{ position: relative; text-align: center; margin: 0 auto; color: #2d2825; width: 100%; bottom: -3px; font-weight: 400; font-size: 8.5px; text-transform: uppercase; font-family: "Asap Condensed", sans-serif; transform: scale(1); transition: opacity .15s ease, transform .3s ease; } .oac .oac-menu-button:hover span { opacity:.5; transform: scale(.9); } .oac .oac-menu-button svg { display: block; width: var(--oac-icon); height: var(--oac-icon); margin: 0 auto; color: #2d2825; fill: currentColor; z-index: 1; max-width: 100%; max-height: 100%; } .oac .oac-menu-button:hover svg { color: var(--oac-secondary); fill: var(--oac-secondary); } .oac .oac-menu-button:active svg { transform: scale(.95); } .oac .oac-menu-button:focus-visible svg{ outline: 2px solid #fff; outline-offset: 2px; } .oac.oac-icons-s{ --oac-button-w: 40px; --oac-button-h: 36px; --oac-icon: 18px; --oac-menu-width: 56px; } .oac.oac-icons-m{ --oac-button-w: 50px; --oac-button-h: 22px; --oac-icon: 25px; --oac-menu-width: 65px; } .oac.oac-icons-l{ --oac-button-w: 72px; --oac-button-h: 56px; --oac-icon: 32px; --oac-menu-width: 84px; } .oac .oac-menu-button.oac-zoom-out-button{ margin-top: calc(var(--oac-gap-y) * 2); } .oac .oac-menu-button.oac-reset-button { margin-bottom: calc(var(--oac-gap-y) * 2); } .oac-expand-button, .oac-close-button { cursor: pointer; position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: transparent; transition: background-color .15s ease, transform .12s ease; } .oac-expand-button { right: 5px; } .oac-close-button { bottom: 10px; background: var(--oac-secondary); } .oac-expand-button svg { width: 44px; height: 44px; fill: transparent; background: var(--oac-primary); color: #2d2825; border-radius: 50%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .oac-close-button svg { width: 25px; height: 25px; } .oac-expand-button:hover, .oac-close-button:hover { background: var(--oac-secondary); transform: scale(1); } .oac-expand-button:hover svg, .oac-close-button:hover svg { background: var(--oac-secondary); color: var(--oac-primary); } .oac-expand-button:active, .oac-close-button:active { transform: scale(1.05); } .oac-expand-button:focus-visible, .oac-close-button:focus-visible { outline: none; } .oac.oac-collapsed[data-anim="fade"] .oac-menu{ opacity: 0; pointer-events: none; } .oac.oac-expanded [data-anim="fade"] .oac-menu{ opacity: 1; pointer-events: auto; } .oac.oac-collapsed[data-anim="scale"] .oac-menu{ transform: scale(.9); opacity: 0; pointer-events: none; } .oac.oac-expanded [data-anim="scale"] .oac-menu{ transform: scale(1); opacity: 1; pointer-events: auto; } .oac[data-anim="slide"] .oac-menu{ opacity: 1; } .oac.oac-collapsed[data-anim="slide"][data-orientation="right"] .oac-menu{ transform: translateX(100%); pointer-events: none; } .oac.oac-collapsed[data-anim="slide"][data-orientation="left"] .oac-menu{ transform: translateX(-100%); pointer-events: none; } .oac.oac-collapsed[data-anim="slide"][data-orientation="top"] .oac-menu{ transform: translateY(-100%); pointer-events: none; } .oac.oac-collapsed[data-anim="slide"][data-orientation="bottom"] .oac-menu{ transform: translateY(100%); pointer-events: none; } .oac.oac-expanded[data-anim="slide"] .oac-menu{ transform: translate3d(0,0,0); } .oac .oac-menu-button svg, .oac-close-button svg { transition: transform .25s ease, fill .25s ease, color .25s ease, opacity .25s ease; will-change: transform; } .oac .oac-menu-button:hover svg, .oac-close-button:hover svg { transform: scale(1.15) rotate(3deg); } @keyframes buzz { 50%{transform:translateX(3px) rotate(2deg)} 100%{transform:translateX(-3px) rotate(-2deg)} } @keyframes buzz-out { 10%{transform:translateX(3px) rotate(2deg)} 20%{transform:translateX(-3px) rotate(-2deg)} 30%{transform:translateX(3px) rotate(2deg)} 40%{transform:translateX(-3px) rotate(-2deg)} 50%{transform:translateX(2px) rotate(1deg)} 60%{transform:translateX(-2px) rotate(-1deg)} 70%{transform:translateX(2px) rotate(1deg)} 80%{transform:translateX(-2px) rotate(-1deg)} 90%{transform:translateX(1px) rotate(0)} 100%{transform:translateX(-1px) rotate(0)} } @keyframes pop { 50% { transform: scale(1.5); } } @keyframes wobble { 16.65%{transform:translateY(6px)} 33.3%{transform:translateY(-5px)} 49.95%{transform:translateY(4px)} 66.6%{transform:translateY(-2px)} 83.25%{transform:translateY(1px)} 100%{transform:translateY(0)} } @keyframes pinPulse { 0%{transform:scale(.1);opacity:0} 50%{opacity:1} 100%{transform:scale(1.2)} } .oac .oac-menu-button:hover .oac-icon-buzz, .oac .oac-menu-button:focus .oac-icon-buzz, .oac .oac-menu-button:active .oac-icon-buzz, .oac-close-button:hover .oac-icon-buzz, .oac-icon-buzz:hover, .oac-icon-buzz:focus, .oac-icon-buzz:active { animation: buzz .15s linear infinite; } .oac .oac-menu-button:hover .oac-icon-buzz-out, .oac .oac-menu-button:focus .oac-icon-buzz-out, .oac .oac-menu-button:active .oac-icon-buzz-out, .oac-close-button:hover .oac-icon-buzz-out, .oac-icon-buzz-out:hover, .oac-icon-buzz-out:focus, .oac-icon-buzz-out:active { animation: buzz-out .75s linear 1; } .oac .oac-menu-button:hover .oac-icon-pop, .oac .oac-menu-button:focus .oac-icon-pop, .oac .oac-menu-button:active .oac-icon-pop, .oac-close-button:hover .oac-icon-pop, .oac-icon-pop:hover, .oac-icon-pop:focus, .oac-icon-pop:active { animation: pop .3s linear 1; } .oac .oac-menu-button:hover .oac-icon-wobble, .oac .oac-menu-button:focus .oac-icon-wobble, .oac .oac-menu-button:active .oac-icon-wobble, .oac-close-button:hover .oac-icon-wobble, .oac-icon-wobble:hover, .oac-icon-wobble:focus, .oac-icon-wobble:active { animation: wobble 1s ease-in-out 1; } .oac-icon-pulse { animation: pinPulse .4s ease 1; } .oac-cursor-workaround{ position: fixed; width: 46px; height: 46px; border-radius: 50%; border: 3px solid currentColor; pointer-events: none; z-index: 2147483647; transform: translate(-50%, -50%); display: none; } .oac-cursor-overlay, .oac-cursor-overlay *{ cursor: none !important; } .oac-cursor *, .oac-cursor:hover{ cursor: url(data:image/png;base64,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), default; } html.oac-highlighted-links a, body.oac-highlighted-links a{ text-decoration: underline !important; text-underline-offset: .15em; } body.oac-highlighted-links a:focus-visible{ outline: 2px dashed currentColor; outline-offset: 2px; } body.oac-highlighted-links a:visited{ opacity: .95; } html.oac-inverted .oac{ filter: invert(1) hue-rotate(180deg); } html.oac-inverted img, html.oac-inverted video, html.oac-inverted canvas, html.oac-inverted picture{ filter: invert(1) hue-rotate(180deg); } @media (max-width: 991px){ .oac{ bottom: 5px; } } .oac.oac-trigger-tl{ top: 15px; left: 14px; right: auto; bottom: auto; } .oac.oac-trigger-tr{ top: 15px; right: 14px; left: auto; bottom: auto; } .oac.oac-trigger-bl{ bottom: 15px; left: 14px; right: auto; top: auto; } .oac.oac-trigger-br{ bottom: 20px; right: 8px; left: auto; top: auto; } .oac.oac-size-toolbar .oac-container{ width: 60px; } .oac.oac-size-sidebar .oac-container{ width: 320px; height: 85%; } .oac.oac-size-fullscreen{ inset: 0; } .oac.oac-size-fullscreen .oac-container{ position: fixed; inset: 0; width: 100vw; height: 100vh; border-radius: 0 !important; background: rgba(0,0,0,0.3); } .oac[data-orientation="right"] .oac-container{ right: 0; bottom: -10px; } .oac[data-orientation="left"] .oac-container{ left: 0; } .oac[data-orientation="top"] .oac-container{ top: 0; width: 100%; height: auto; } .oac[data-orientation="bottom"] .oac-container{ bottom: 0; width: 100%; height: auto; } @media (prefers-reduced-motion: reduce) { .oac .oac-menu-button svg, .oac-expand-button svg, .oac-close-button svg { transition: none; } .oac-icon-buzz, .oac-icon-buzz-out, .oac-icon-pop, .oac-icon-wobble, .oac-icon-pulse { animation: none !important; } } /****************************************************** /// Na vrh ******************************************************/ .progress-wrap { position: fixed; bottom: 130px; right: 16px; height: 42px; width: 42px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; background-color: #2d2825; } .progress-wrap:hover { animation: pulse 2s infinite; } .progress-wrap.active-progress { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .progress-wrap:hover::after { opacity: 0; } .progress-wrap::before { position: absolute; content: "\f106"; line-height: 44px; font-family: "fontawesome"; text-align: center; text-align: center; font-size: 30px; opacity: 1; color: #f6c45a; background: #f6c45a; -webkit-background-clip: text; -webkit-text-fill-color: #f6c45a; left: -3px; top: 0; height: 48px; width: 48px; cursor: pointer; display: block; z-index: 2; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap:hover::before { opacity: 0.7; color: #fff; } .progress-wrap svg path { fill: none; } .progress-wrap svg.progress-circle path { stroke: #fff; stroke-width: 6px; box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; } .progress-wrap:hover svg.progress-circle path { opacity: 0.7; stroke: #f6c45a; } @media screen and (max-width: 996px) { .progress-wrap.active-progress { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); box-shadow: none; } .progress-wrap { position: fixed; bottom: 10px; right: 65px; height: 36px; width: 36px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; background-color: #ffffff; } .progress-wrap::before { line-height: 50px; line-height: 38px; font-size: 32px; color: #2d2825; -webkit-text-fill-color: #2d2825; background: transparent; left: 0; top: 0; height: 36px; width: 36px; } .progress-wrap svg.progress-circle path { stroke: #2d2825; } } /****************************************************** /// Lista želja i usporedbe ******************************************************/ #wishlistSidebar, #compareSidebar { position: fixed; top: 0; right: -80%; width: 80%; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.2); transition: right 0.3s ease-in-out; /* overflow-y: auto; */ padding: 20px 20px 20px 30px; z-index: 9999999;font-family: 'Montserrat'; } #wishlistSidebar.active, #compareSidebar.active { right: 0; } #wishlistSidebar.active::after, #compareSidebar.active::after { content: ''; position: fixed; top: 0; left: 0; width: 20%; height: 100%; background: rgba(0, 0, 0, 0.6); transition: background 0.7s ease; z-index: 99999; cursor: pointer; } .sidebar-header { display: flex; position: relative; justify-content: space-between; align-items: center; padding: 10px 0 20px 0; border-bottom: 2px solid #babac0;} .sidebar-header h4 { font-size: 38px; font-weight: 800; padding: 0; margin:0; } .sidebar-header h4 span { position: relative; display:block; text-align: left; font-size: 15px; font-weight: 700; text-transform:uppercase; padding: 0; margin: 10px 0 0 0; } .sidebar-header .slanje-liste-mailom { display: flex; align-items: center; justify-content: flex-end; padding: 0 15px; } .sidebar-header .input-field { width: 260px; padding: 8px 12px; font-size: 15px; transition: width 0.45s ease; box-sizing: border-box; display: inline-block; } .sidebar-header .input-field:hover, .sidebar-header .input-field:focus { width: 400px; transition: 400ms linear all; } .sidebar-header .btn-1b.mali { margin-left: 12px; padding: 13px 10px !important; cursor: pointer; width: 160px; display: inline-block; font-size: 13px; line-height: 17px; } .sidebar-item { position: relative; display: flex; align-items: center; padding: 10px 0; } .sidebar-thumb { width: 120px; height: 120px; margin-right: 0; border-radius: 5px; } .sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .sidebar-item p { position: relative; font-size: 16px; font-weight: 600; line-height: 18px; text-align: left; padding: 10px 0; } .sidebar-item p span { display: block; } .sidebar-close { position: relative; display: block; top: -40px; right: -20px; width: 60px; height: 60px; line-height: 60px; font-size: 35px; font-weight: 800; cursor: pointer; z-index: 9999999; background-color: #ffc658; color: #2D2825; border-bottom-left-radius: 10px; transition: all 0.8s ease-in-out; } .sidebar-close:hover { background-color: #2D2825; color: #ffc658; } @keyframes bounceIn { 0% { transform: scale(0.9); opacity: 0.3; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } } .animated-add { animation: bounceIn 0.3s ease-in-out; } .wishlist-btn.active, .compare-btn.active { transform: scale(1); transition: all 0.2s ease-in-out; } .wishlist-btn.active i { color: red; } .compare-btn.active i { color: blue; } @keyframes flyToCounter { 0% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-20px) scale(1.2); opacity: 0.8; } 100% { transform: translateY(-40px) scale(0.8); opacity: 0; } } .floating-counter { position: absolute; font-size: 14px; color: white; background: red; border-radius: 50%; padding: 5px 10px; animation: flyToCounter 0.6s ease-out; } .count { position: absolute; top: 2px; right: 4px; font-size: 12px; font-weight: 700; height: 19px; width: 19px; border-radius: 50%; background: #ffc658; color: #2D2825; text-align: center; } .wishlist-container, .compare-container { padding-right: 0 !important; } .proizvod:has(button.active) { opacity: 0.5; pointer-events: none; transition: 0.5s ease-in; } .proizvod:has(button.active)::before { font-family: 'fontawesome'; position: absolute; top: 0; padding-top: 50%; font-size: 130px; left: 0; width: 100%; height: 100%; z-index: 99999; display: block; font-weight: bold; transition: 0.5s ease-out; } .proizvod:has(button.compare-btn.active)::before { font-family: 'fontawesome'; content: '\f074'; background: rgba(255, 255, 255, 0.94); color: #2D2825; border: 15px inset #2D2825; } .proizvod:has(button.wishlist-btn.active)::before { content: '\f004'; background: rgba(255, 255, 255, 0.94); color: red; border: 5px inset red; } .proizvod.remove-item:has(button.compare-btn), .proizvod.remove-item:has(button.wishlist-btn) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); display: none; opacity: 0; visibility: hidden; z-index: -1; } .proizvod.remove-item:has(button.compare-btn.active), .proizvod.remove-item:has(button.wishlist-btn.active) { display: block; opacity: 1; visibility: visible; z-index: 99999; } .proizvod > button.remove-item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%) scale(0.95); opacity: 0; visibility: hidden; z-index: -1; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; will-change: opacity, transform; } .proizvod:has(button.compare-btn.active, button.wishlist-btn.active) button.remove-item, .proizvod-item:has(button.compare-btn.active, button.wishlist-btn.active) button.remove-item { transform: translate(-50%, 50%) scale(1); opacity: 1; visibility: visible; z-index: 10000; pointer-events: auto; transition: opacity 0.3s ease, transform 0.3s ease; } .proizvod-item:has(button.compare-btn, button.wishlist-btn) button.remove-item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%) scale(0.95); opacity: 0; visibility: hidden; z-index: -1; pointer-events: none; transition: opacity 0.3s ease-out, transform 0.3s ease-out; will-change: opacity, transform; } .table.table-striped { margin-top: 2rem; margin-bottom: 5.9rem; } .table.table-striped td, .table.table-striped th { padding: 1.1rem 1.2rem; } .table.table-size thead tr th, .table.table-size tbody tr td { border: 0; color: #21293c; font-size: 1.4rem; letter-spacing: 0.005em; text-transform: uppercase; } .table.table-size thead tr th { padding: 2.8rem 1.5rem 1.7rem; background-color: #f4f4f2; font-weight: 600; } .table.table-size tbody tr td { padding: 1.1rem 1.5rem; background-color: #fff; font-weight: 700; } .table.table-size tbody tr:nth-child(2n) td { background-color: #ebebeb; } .btn-remove { position: absolute; top: 10px; right: -8px; width: 25px; height: 25px; border-radius: 50%; color: #474747; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); text-align: center; line-height: 26px; } .btn-remove:hover, .btn-remove:focus { color: #08C; } .icon-cancel:before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; } tbody .product-col { font-size: 0; } thead tr:nth-of-type(odd) { background-color: transparent; } tr:nth-of-type(odd) { background-color: #eee; } .table.table-wishlist tr th, .table.table-wishlist tr td { vertical-align: middle; } .table.table-wishlist tr th { border: 0; color: #222529; font-size: 13px; font-weight: 700; line-height: 22px; text-transform: uppercase; text-align: center; } .table.table-wishlist tr td { border: 1px solid #e7e7e7; text-align: center; } .table.table-wishlist tr td.gumbi { width: 100px; } .table.table-wishlist tr td.product-col { padding: 2rem 0.8rem 1.8rem 0; } .table.table-wishlist tr.product-action-row td { padding: 0 0 2.2rem; border: 0; } .product-row .slika-thumb img { border: 0px solid #ccc; -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); } .product-row .slika-proizvoda-thumb { position: relative; display: table-cell; padding-right: 0; margin-bottom: 0; vertical-align: middle; } .product-col .naziv { margin-bottom: 1px; display: table-cell; vertical-align: middle; position: relative; padding: 10px 15px; margin-bottom: 0; vertical-align: middle; min-width: 200px; } .product-row h5.naziv { margin-bottom: 0; padding: 0; text-transform: uppercase; font-weight: 800; line-height: 20px; font-size: 16px; text-align: left; } .product-row h5.naziv p { margin-bottom: 0; padding: 0;} .product-row h5.naziv a { color: #2D2825; } .product-row h5.naziv:hover a { color: #2D2825; opacity: .5; } .table.table-wishlist .product-title a { } .table.table-wishlist .product-single-qty { margin: 0.5rem 4px 0.5rem 1px; } .form-control, .table.table-wishlist .product-single-qty .form-control { height: 48px; width: 44px; font-size: 1.6rem; font-weight: 700; } .table.table-wishlist .subtotal-price { color: #222529; font-size: 1.6rem; font-weight: 600; } .table.table-wishlist .btn-remove { right: -2px; top: -4px; font-size: 15px; color: #2D2825 !important; background-color: #ffc107 !important; border-color: #ffc107 !important; } .table.table-wishlist tfoot td { padding: 2rem 0.8rem 1rem; } .table.table-wishlist tfoot .btn { padding: 1.2rem 2.4rem 1.3rem 2.5rem; font-family: "Open Sans", sans-serif; font-size: 1.3rem; font-weight: 700; height: 43px; letter-spacing: -0.018em; } .table.table-wishlist tfoot .btn + .btn { margin-left: 1rem; } .table.table-wishlist .bootstrap-touchspin.input-group { margin: 0 auto; } .wishlist-title { margin-top: 5.3rem; margin-bottom: 2.8rem; } .wishlist-table-container { margin-bottom: 0; } .wishlist-table-container .table-title { padding: 1rem 0; font-size: 1.3em; font-weight: 400; letter-spacing: -0.7px; line-height: 1.42857; text-transform: uppercase; } .wishlist-table-container .btn { -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); width: 33px; height: 33px; border: 1px solid #eee; position: relative; top: -8px; padding: 0; font-size: 15px; line-height: 34px; text-indent: 0; } .remove-item { color: #fff !important; background-color: #d50000 !important; border-color: #d50000 !important; } .link-btn { color: #2D2825 !important; background-color: #ffc107 !important; border-color: #ffc107 !important; background-color: #ffc107 !important; } .remove-item:hover, .link-btn:hover { background-color: #babac0!important; color: #2D2825 !important; border-color: #babac0 !important; } .table.table-wishlist tr th {padding: 8px 6px;background-color: #ddd;text-align: center;} .table.table-wishlist tr th.thumbnail-col { background-color: transparent; width: 20%; } .table.table-wishlist tr th.product-col { width: 29%; } .table.table-wishlist tr th.price-col { width: 13%; } .table.table-wishlist tr th.status-col { width: 19%; } .table.table-wishlist tr td {padding: 8px 12px;/* -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); */} tbody tr { transition: background 0.25s ease; } tbody tr:hover { background: #ebebeb; } .table.table-wishlist .product-price { color: inherit; font-size: 1.4rem; font-weight: 400; } .product-row h5 span.sku-sifra { background: #dddddd; color: #2D2825; font-size: 10px; line-height: 11px; font-weight: 600; margin: 8px 0 0; padding: 3px 5px; border-radius: 5px; display: block; -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); } .product-row .aktualna-cijena { margin-bottom: 0; } .product-row .stanje-lagera { position: relative; top: 10px; right: 10px; color: #222529; } .product-row .lager-boja-broj { margin: -4px 10px 0 5px; width: 18px; height: 18px; border-radius: 50%; font-size: 15px; z-index: 999999; } .product-row .lager-boja { display: inline-block; vertical-align: middle; margin: -4px 10px 0 5px; width: 18px; height: 18px; border-radius: 50%; font-size: 15px; } .product-row .lager-boja:first-of-type { margin-left: 10px; } .product-row .lager-boja.dostupno { background: #85ad00; } .product-row .lager-boja.novo { background: #ffc658; } .product-row .lager-boja.nedostupno { background: #d50000; } .product-row p { font-size: 14px; font-weight: 600; line-height: 17px; } .box-content .table-wishlist, .box-content .table-cart { margin-bottom: 1em; font-size: 100%; border-collapse: collapse; width: 100%; } .box-content .table-wishlist .wishlist-empty, .box-content .table-cart .wishlist-empty { margin-bottom: 1rem; text-align: center; } .box-content .btn-go-shop { padding: 16px 0; margin-top: 2rem; border: none; text-transform: uppercase; text-align: center; min-width: 200px; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; background-color: #353a40; color: #fff; } .box-content .btn-go-shop:hover { background-color: #08C; color: #fff; } i.wishlist-empty { font-size: 100px; color: #d3d3d4; } @media (max-width: 1199px) { .wishlist-table-container .btn { width: 100%; } .wishlist-table-container .btn:first-child { margin-bottom: 1rem; } #wishlistSidebar, #compareSidebar { overflow-y: auto; } } @media (max-width: 992px) { .sidebar-header { display: block; } .sidebar-header .input-field { max-width: 160px; } .sidebar-header .input-field:hover, .sidebar-header .input-field:focus { max-width: 160px; } .sidebar-header .slanje-liste-mailom { display: block; width: 100%; padding: 0; } .sidebar-close { position: absolute; top: -20px; right: -20px; } .sidebar-header .btn-1b.mali { width: auto; top:0; } .sidebar-header h4 { font-size: 25px; } .sidebar-header h4 span { font-size: 12px; margin-bottom: 10px; } .sidebar-content p.text-muted { margin: 10px 0; font-size: 10px; font-style: italic; } .table.table-wishlist tr td span.hide { display: inline-block; opacity: 1; visibility: visible; } .remove-item.btn, .compare-btn, .link-btn.btn { display: inline-block; width: 55px; height: 55px; font-size: 26px; line-height: 1.5; } .wishlist-table-container .btn { display: inline-block; width: 55px; height: 55px; font-size: 26px; line-height: 2; } .wishlist-table-container .btn:first-child { margin-bottom: 0rem; } } @media (max-width: 767px) { #wishlistSidebar, #compareSidebar { width: 100%; right: -100%; } #wishlistSidebar.active, #compareSidebar.active { right: 0; } #wishlistSidebar.active::after, #compareSidebar.active::after { width: 0; } .wishlist-table-container { border-top: 4px solid #08C; } .table.table-wishlist { border: 1px solid #e7e7e7; border-top: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); display: block; } .table.table-wishlist tbody { display: block; } .table.table-wishlist thead { display: none; } .table.table-wishlist tr td { padding: 0.5rem 1rem; border-top: 0; } .table.table-wishlist tr td.product-col { padding-bottom: 0.5rem; } .table.table-wishlist .product-row { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem 0; border-top: 2px solid #ddd; } .table.table-wishlist .product-row:first-child { border-top: 0; } .table.table-wishlist .product-col { flex-direction: column; justify-content: center; text-align: center; } .table.table-wishlist .product-col .slika-proizvoda-thumb { margin-bottom: 1rem; } } /****************************************************** /// JS notifikacije 1 ******************************************************/ #notifikacija-container { position: fixed; top: 20px; right: 20px; z-index: 99999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } #notify-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; backdrop-filter: blur(4px); background-color: rgba(0, 0, 0, 0.2); z-index: 9998; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } #notify-backdrop.active { opacity: 1; pointer-events: auto; } .notifikacija { background: #f8f9fa; color: #000; padding: 12px 18px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: auto; cursor: pointer; font-size: 15px; line-height: 1.4em; } .notifikacija.success { background-color: #d4edda; color: #155724; } .notifikacija.error { background-color: #f8d7da; color: #721c24; } .notifikacija.warning { background-color: #fff3cd; color: #856404; } .notifikacija.info { background-color: #d1ecf1; color: #0c5460; } .notifikacija_loader { margin-top: 6px; height: 4px; width: 100%; background: rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; border-radius: 999px; } .notifikacija_loader::after { content: ''; position: absolute; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); animation: loader-bar 4s linear forwards; } @keyframes loader-bar { from { transform: translateX(-100%); } to { transform: translateX(0); } } .notifikacija .icon { margin-right: 6px; display: inline-block; animation: popIn 0.3s ease; } @keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .notifikacija { opacity: 0; transform: translateY(-8px); transition: opacity .4s ease, transform .4s ease; } .notifikacija.show { opacity: 1; transform: translateY(0); } /****************************************************** /// JS notifikacije 2 ******************************************************/ #notification-container { border: 1px solid red; height: 80px; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: 9999999999; width: 300px; display: block; } .notification { opacity: 0; transform: translateX(100%); transition: transform 0.5s ease, opacity 0.5s ease; margin-bottom: 10px; padding: 15px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); font-family: sans-serif; background: #fff; border: 1px solid #ccc; } .notification button { margin: 5px 0 0 5px; } .notification.show { opacity: 1; transform: translateX(0); } .notification-success { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; } .notification-warning { background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; } .notification-alert { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } .notification-info { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; } .notification { opacity: 1 !important; transform: translateX(0) !important; } /* notifikacije i Magnific popup */ .notification-message { background-color: #fff; border: 1px solid #b5d1f1; color: #2D2825; padding: 20px; border-radius: 5px; max-width: 800px; margin: 0 auto; text-align: center; font-family: sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);} .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; overflow: hidden; position: fixed; background: #0b0b0b; opacity: .8; } .mfp-wrap { z-index: 999999; } .mfp-fade.mfp-bg { opacity: 0; transition: opacity 0.7s ease-out; } .mfp-fade.mfp-wrap { opacity: 0; transition: opacity 0.7s ease-out; } .mfp-fade.mfp-bg.mfp-ready{ opacity: 0.9 } .mfp-fade.mfp-wrap.mfp-ready { opacity: 1; } /* Custom modal */ .modal-message { max-width: 800px; margin: 0 auto; border-radius: 0; overflow: hidden; } .modal-message .modal-dialog { max-width: 760px; margin: 20px; border-radius: 0; padding: 0; background-color: rgba(0, 0, 0, 0.05); } .modal-message .modal-header { padding: 20px; border-bottom: 0px solid #dee2e6; border-radius: 0; } .modal-message .modal-header h3 { margin: 0; font-size: 24px; } .modal-content-text { padding: 20px 50px 20px 20px; margin: 0; line-height: 22px; } .modal-message .modal-title { font-size: 23px; color: #2D2825; margin: 5px 0; font-weight: 800; } .modal-message .modal-subtitle { font-size: 16px; color: #2D2825; text-transform: uppercase; margin: 5px 0; font-weight: 700; } .modal-message .modal-main-content p { font-size: 15px; color: #2D2825; font-weight: 500; line-height: 27px; } .modal-message .btn, .modal-message .btn-2.mali, .modal-message .btn-2b.mali, .modal-message .btn-1b.mali { text-transform: uppercase; font-size: 13px; margin: 5px 10px 5px 0; } .modal-content { width: 100%; border: 0px solid rgba(0, 0, 0, .2); border-radius: 0; } .modal-message .modal-body { padding: 0; }