/* ================================================== LICENSO — FINAL PREMIUM PRODUCT CARDS ================================================== */ .products{ position:relative; isolation:isolate; overflow:hidden; padding:120px 0 90px; background: radial-gradient( circle at 5% 35%, rgba(112,186,255,.10), transparent 31% ), radial-gradient( circle at 94% 58%, rgba(207,127,255,.09), transparent 32% ), linear-gradient( 180deg, #ffffff 0%, #fafbff 50%, #ffffff 100% ); } .products .container{ position:relative; z-index:2; } .products-grid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:36px !important; margin-top:70px !important; align-items:stretch !important; } /* ================================================== GLAVNA KARTICA ================================================== */ .products-grid .product-card{ position:relative !important; isolation:isolate !important; overflow:hidden !important; width:100% !important; height:700px !important; min-height:700px !important; padding:34px 28px 27px !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; border-radius:40px !important; background: /* hladno plavo svetlo uz levu ivicu */ radial-gradient( ellipse at -7% 46%, rgba(111,193,255,.16) 0%, rgba(111,193,255,.065) 27%, transparent 52% ), /* beli sjaj gore */ radial-gradient( ellipse at 50% -8%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.40) 25%, transparent 55% ), /* roze-ljubičasto svetlo dole desno */ radial-gradient( ellipse at 108% 84%, rgba(235,154,255,.23) 0%, rgba(200,117,255,.13) 30%, rgba(111,141,255,.055) 53%, transparent 73% ), /* bela glass površina */ linear-gradient( 145deg, rgba(255,255,255,.985) 0%, rgba(254,254,255,.955) 42%, rgba(250,251,255,.91) 73%, rgba(253,249,255,.87) 100% ) !important; backdrop-filter: blur(32px) saturate(155%) !important; -webkit-backdrop-filter: blur(32px) saturate(155%) !important; border: 1px solid rgba(194,203,232,.62) !important; outline: 1px solid rgba(255,255,255,.68) !important; outline-offset:-3px !important; box-shadow: /* spoljna senka */ 0 32px 76px rgba(40,49,90,.10), /* ljubičasti halo ispod */ 0 16px 38px rgba(112,82,255,.07), /* sjaj gornje ivice */ inset 0 3px 2px rgba(255,255,255,1), /* sjaj leve ivice */ inset 3px 0 2px rgba(255,255,255,.98), /* sjaj desne ivice */ inset -2px 0 3px rgba(213,196,255,.33), /* sjaj donje ivice */ inset 0 -3px 4px rgba(126,142,255,.14), /* unutrašnji haze po celom okviru */ inset 0 0 42px rgba(255,255,255,.42), /* beli okvir spolja */ 0 0 0 1px rgba(255,255,255,.68), /* veoma blag plavi halo */ 0 0 28px rgba(119,145,255,.09) !important; transform:none !important; transition: transform .35s ease, box-shadow .35s ease !important; } /* ================================================== ROZE-LJUBIČASTI GLOW DOLE DESNO ================================================== */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; right:-190px !important; bottom:-160px !important; width:550px !important; height:465px !important; border-radius:50% !important; background: radial-gradient( ellipse at 34% 27%, rgba(255,255,255,.66) 0%, rgba(255,255,255,.32) 18%, rgba(252,226,255,.26) 31%, rgba(234,169,255,.20) 43%, rgba(194,126,255,.13) 56%, rgba(111,145,255,.06) 68%, transparent 79% ) !important; filter:blur(13px) !important; opacity:.78 !important; pointer-events:none !important; z-index:0 !important; } /* Isključujemo sve stare ::before refleksije */ /* Sadržaj iznad efekata */ .products-grid .product-card > *{ position:relative !important; z-index:5 !important; } /* ================================================== BELI KVADRATIĆI — REFLEKSIJA PROZORA ================================================== */ .products-grid .window-reflection{ position:absolute !important; top:18px !important; left:17px !important; width:132px !important; height:315px !important; display:grid !important; grid-template-columns: 42px 42px !important; grid-template-rows: 76px 76px 76px !important; gap:11px !important; margin:0 !important; padding:0 !important; opacity:.40 !important; transform: rotate(-1deg) skewY(1deg) !important; filter: blur(.35px) !important; pointer-events:none !important; z-index:1 !important; -webkit-mask-image: linear-gradient( 90deg, #000 0%, rgba(0,0,0,.94) 52%, rgba(0,0,0,.43) 78%, transparent 100% ); mask-image: linear-gradient( 90deg, #000 0%, rgba(0,0,0,.94) 52%, rgba(0,0,0,.43) 78%, transparent 100% ); } /* ================================================== ZAKRIVLJENI BELI ODSJAJ DOLE ================================================== */ .glass-reflection{ position:absolute; top:0; left:0; width:150px; height:210px; pointer-events:none; overflow:hidden; opacity:.55; z-index:0; } /* uspravna refleksija */ .glass-reflection::before{ content:""; position:absolute; top:-15px; left:45px; width:24px; height:185px; border-radius:20px; background:linear-gradient( 180deg, rgba(255,255,255,.85), rgba(222,226,255,.38), rgba(255,255,255,.08) ); filter:blur(1px); transform:rotate(1deg); } /* dve kose staklene linije */ .glass-reflection::after{ content:""; position:absolute; top:54px; left:-35px; width:155px; height:22px; border-radius:20px; background:linear-gradient( 90deg, rgba(255,255,255,.25), rgba(220,225,255,.62), rgba(255,255,255,.12) ); box-shadow: 42px 55px 0 -3px rgba(225,229,255,.42); transform:rotate(34deg); filter:blur(.6px); } /* ================================================== POPUST ================================================== */ .products-grid .discount{ position:absolute !important; top:25px !important; right:25px !important; left:auto !important; bottom:auto !important; min-width:94px !important; width:auto !important; height:48px !important; margin:0 !important; padding:0 19px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; color:#ffffff !important; font-size:17px !important; line-height:1 !important; font-weight:700 !important; background: linear-gradient( 135deg, #654cff 0%, #7d3eff 54%, #9233ed 100% ) !important; border: 1px solid rgba(255,255,255,.43) !important; box-shadow: 0 14px 29px rgba(104,59,242,.31), 0 5px 16px rgba(119,67,255,.16), inset 0 1px 1px rgba(255,255,255,.42) !important; transform:none !important; z-index:20 !important; } /* ================================================== LOGO KOCKA ================================================== */ .products-grid .product-logo{ position:relative !important; width:158px !important; height:158px !important; margin:42px auto 31px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; border-radius:46px !important; background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(248,249,253,.89) ) !important; border: 1px solid rgba(213,219,238,.62) !important; box-shadow: 0 25px 54px rgba(44,54,102,.13), 0 8px 20px rgba(56,66,112,.05), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(127,139,187,.06) !important; z-index:10 !important; } .products-grid .product-logo::before{ content:"" !important; position:absolute !important; inset:8px !important; border-radius:39px !important; background: radial-gradient( circle at 31% 22%, rgba(255,255,255,.90), rgba(255,255,255,.13) 52%, transparent 74% ) !important; pointer-events:none !important; } .products-grid .product-logo::after{ content:"" !important; position:absolute !important; left:50% !important; bottom:-14px !important; width:112px !important; height:45px !important; transform:translateX(-50%) !important; border-radius:50% !important; background: rgba(50,59,111,.13) !important; filter:blur(18px) !important; z-index:-1 !important; } .products-grid .product-logo img{ position:relative !important; z-index:2 !important; width:94px !important; height:94px !important; object-fit:contain !important; filter: drop-shadow( 0 11px 18px rgba(39,47,91,.14) ) !important; } /* ================================================== NASLOV I OPIS ================================================== */ .products-grid .product-title{ width:100% !important; max-width:340px !important; margin:0 auto !important; color:#08101f !important; font-size:35px !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:-1.9px !important; } .products-grid .product-card:first-child .product-title{ max-width:290px !important; } .products-grid .product-description{ width:100% !important; max-width:355px !important; min-height:65px !important; margin:17px auto 0 !important; color:#667187 !important; font-size:14.5px !important; line-height:1.58 !important; font-weight:450 !important; } /* ================================================== TAGOVI ================================================== */ .products-grid .product-tags{ width:100% !important; margin-top:19px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; flex-wrap:nowrap !important; } .products-grid .product-tag{ min-height:42px !important; padding:9px 11px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; border-radius:14px !important; color:#273149 !important; font-size:10.5px !important; line-height:1 !important; font-weight:650 !important; white-space:nowrap !important; background: linear-gradient( 145deg, rgba(255,255,255,.93), rgba(248,248,253,.66) ) !important; backdrop-filter:blur(15px) !important; -webkit-backdrop-filter:blur(15px) !important; border: 1px solid rgba(255,255,255,.98) !important; box-shadow: 0 9px 22px rgba(42,51,89,.06), inset 0 1px 0 rgba(255,255,255,1) !important; } .products-grid .product-tag i{ color:#784cff !important; font-size:14px !important; } /* ================================================== LINIJA I CENA ================================================== */ .products-grid .product-divider{ width:100% !important; height:1px !important; margin:22px 0 21px !important; background: rgba(122,133,166,.14) !important; } .products-grid .price{ width:100% !important; margin:0 0 20px !important; padding:0 6px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; align-items:flex-start !important; text-align:left !important; } .products-grid .price span{ order:1 !important; padding:0 !important; color:#9299aa !important; font-size:17px !important; line-height:1 !important; font-weight:600 !important; text-decoration:line-through !important; text-decoration-thickness:2px !important; } .products-grid .price strong{ order:2 !important; color:#071020 !important; font-size:52px !important; line-height:.95 !important; font-weight:850 !important; letter-spacing:-2.9px !important; } /* ================================================== DUGME ================================================== */ .products-grid .buy-btn{ position:relative !important; width:100% !important; height:64px !important; min-height:64px !important; margin-top:auto !important; padding:0 23px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; flex-shrink:0 !important; overflow:hidden !important; border:none !important; border-radius:22px !important; color:#ffffff !important; font-family:inherit !important; font-size:19px !important; line-height:1 !important; font-weight:800 !important; cursor:pointer !important; background: linear-gradient( 108deg, #5086ff 0%, #6265ff 41%, #794cff 67%, #982eff 100% ) !important; box-shadow: 0 20px 43px rgba(99,72,255,.30), 0 8px 23px rgba(99,120,255,.12), inset 0 1px 1px rgba(255,255,255,.44) !important; } .products-grid .buy-btn i{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; height:auto !important; min-width:20px !important; flex:0 0 auto !important; font-size:19px !important; line-height:1 !important; transform:none !important; } /* ================================================== HOVER ================================================== */ .products-grid .product-card:hover{ transform:translateY(-6px) !important; box-shadow: 0 40px 90px rgba(40,49,90,.13), 0 17px 40px rgba(113,82,255,.08), inset 0 3px 2px rgba(255,255,255,1), inset 3px 0 2px rgba(255,255,255,.98), inset -2px 0 3px rgba(213,196,255,.33), inset 0 -3px 4px rgba(126,142,255,.14) !important; } .products-grid .product-card:hover .product-logo{ transform:translateY(-3px) !important; } .products-grid .buy-btn:hover{ transform:translateY(-2px) !important; box-shadow: 0 26px 55px rgba(99,72,255,.39), 0 9px 24px rgba(99,120,255,.15), inset 0 1px 1px rgba(255,255,255,.46) !important; } /* ================================================== RESPONSIVE ================================================== */ @media(max-width:1200px){ .products-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } @media(max-width:760px){ .products{ padding:90px 0 60px; } .products-grid{ grid-template-columns:1fr !important; gap:30px !important; } .products-grid .product-card{ height:700px !important; min-height:700px !important; } } /* ================================================== FINALNA KOREKCIJA — PROZOR I SJAJ IVICA ================================================== */ /* JAČI, ALI I DALJE NEŽAN SJAJ PO CELOJ IVICI */ .products-grid .product-card{ border:1px solid rgba(198,207,236,.78) !important; outline:1px solid rgba(255,255,255,.82) !important; outline-offset:-3px !important; box-shadow: 0 32px 76px rgba(40,49,90,.10), 0 16px 40px rgba(113,82,255,.075), inset 0 3px 3px rgba(255,255,255,1), inset 3px 0 3px rgba(255,255,255,1), inset -3px 0 4px rgba(208,192,255,.38), inset 0 -3px 5px rgba(128,145,255,.17), inset 0 0 52px rgba(255,255,255,.48), 0 0 0 1px rgba(255,255,255,.76), 0 0 32px rgba(117,140,255,.11) !important; } /* ================================================== PROZORSKI KVADRATIĆI — VIDLJIVI KAO NA REFERENCI ================================================== */ .products-grid .window-reflection{ top:14px !important; left:14px !important; width:150px !important; height:345px !important; grid-template-columns:46px 46px !important; grid-template-rows:82px 82px 82px !important; gap:12px !important; opacity:.74 !important; filter:blur(.25px) !important; transform: perspective(500px) rotateY(-7deg) rotateZ(-1deg) !important; -webkit-mask-image: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 58%, rgba(0,0,0,.58) 80%, transparent 100% ) !important; mask-image: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 58%, rgba(0,0,0,.58) 80%, transparent 100% ) !important; } /* SVAKO POLJE PROZORA */ /* REFLEKSIJA OSTAJE IZA LOGOA I TEKSTA */ .products-grid .product-logo{ position:relative !important; z-index:10 !important; } .products-grid .discount{ position:absolute !important; top:18px !important; right:18px !important; left:auto !important; bottom:auto !important; z-index:20 !important; } .products-grid .product-title, .products-grid .product-description, .products-grid .product-tags, .products-grid .product-divider, .products-grid .price, .products-grid .buy-btn{ position:relative; z-index:6 !important; } /* ================================================== BELI KOSO SEČENI PROZORSKI ODSJAJ ================================================== */ .products-grid .product-card .window-reflection{ position:absolute !important; top:6px !important; left:7px !important; width:150px !important; height:365px !important; display:grid !important; grid-template-columns:52px 52px !important; grid-template-rows:86px 86px 86px !important; gap:8px 10px !important; margin:0 !important; padding:0 !important; opacity:.72 !important; transform: skewY(-1deg) rotate(-1deg) !important; filter:blur(.25px) !important; background:transparent !important; pointer-events:none !important; z-index:2 !important; -webkit-mask-image: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.46) 79%, transparent 100% ) !important; mask-image: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.46) 79%, transparent 100% ) !important; } .products-grid .product-card .window-reflection::before{ content:"" !important; position:absolute !important; top:-20px !important; left:-24px !important; width:185px !important; height:390px !important; background: radial-gradient( ellipse at 20% 45%, rgba(255,255,255,.56) 0%, rgba(255,255,255,.22) 42%, transparent 72% ) !important; filter:blur(10px) !important; pointer-events:none !important; z-index:-1 !important; } /* ================================================== POJAČAJ KOSO SEČENE PROZORSKE REFLEKSIJE ================================================== */ .products-grid .product-card .window-reflection{ opacity:1 !important; filter:none !important; -webkit-mask-image:none !important; mask-image:none !important; } /* ================================================== PROZORSKA REFLEKSIJA — KAO NA REFERENCI ================================================== */ .products-grid .product-card .window-reflection{ position:absolute !important; top:0 !important; left:0 !important; width:150px !important; height:390px !important; display:block !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border-radius:40px 0 0 0 !important; background:transparent !important; opacity:.58 !important; filter:blur(.25px) !important; transform:none !important; pointer-events:none !important; z-index:2 !important; mask-image:none !important; -webkit-mask-image:none !important; } /* USPRAVNA LINIJA RAMA */ .products-grid .product-card .window-reflection::before{ content:"" !important; position:absolute !important; top:-16px !important; left:30px !important; width:12px !important; height:420px !important; border-radius:999px !important; background: linear-gradient( 90deg, rgba(255,255,255,.78) 0%, rgba(239,244,255,.62) 38%, rgba(184,203,244,.19) 72%, rgba(255,255,255,.34) 100% ) !important; box-shadow: 3px 0 8px rgba(255,255,255,.48), 7px 0 14px rgba(172,196,245,.08) !important; filter:blur(.3px) !important; } /* DVE KOSE PREČKE */ .products-grid .product-card .window-reflection::after{ content:"" !important; position:absolute !important; top:83px !important; left:-71px !important; width:225px !important; height:12px !important; border-radius:999px !important; background: linear-gradient( 90deg, rgba(255,255,255,.15) 0%, rgba(245,248,255,.72) 28%, rgba(218,229,255,.43) 67%, rgba(175,198,244,.10) 100% ) !important; transform:rotate(31deg) !important; transform-origin:center !important; box-shadow: 0 137px 0 rgba(224,233,255,.38), 0 140px 10px rgba(173,197,245,.06), 0 2px 7px rgba(255,255,255,.42) !important; filter:blur(.3px) !important; } /* BLAGI BELI HAZE OKO REFLEKSIJE */ .products-grid .product-card{ background: radial-gradient( ellipse at 0% 24%, rgba(255,255,255,.70) 0%, rgba(244,249,255,.23) 27%, transparent 48% ), radial-gradient( ellipse at -7% 46%, rgba(111,193,255,.16) 0%, rgba(111,193,255,.065) 27%, transparent 52% ), radial-gradient( ellipse at 50% -8%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.40) 25%, transparent 55% ), radial-gradient( ellipse at 108% 84%, rgba(235,154,255,.23) 0%, rgba(200,117,255,.13) 30%, rgba(111,141,255,.055) 53%, transparent 73% ), linear-gradient( 145deg, rgba(255,255,255,.985) 0%, rgba(254,254,255,.955) 42%, rgba(250,251,255,.91) 73%, rgba(253,249,255,.87) 100% ) !important; } /* SADRŽAJ OSTAJE IZNAD REFLEKSIJE */ .products-grid .product-card .product-logo, .products-grid .product-card .discount{ position:relative !important; z-index:10 !important; } .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:6 !important; } /* ================================================== FINALNA SUptilna REFLEKSIJA PROZORA ================================================== */ .products-grid .product-card .window-reflection{ position:absolute !important; top:0 !important; left:0 !important; width:118px !important; height:285px !important; display:block !important; overflow:hidden !important; margin:0 !important; padding:0 !important; border-radius:40px 0 0 0 !important; background:transparent !important; opacity:.42 !important; filter:blur(.45px) !important; transform:none !important; pointer-events:none !important; z-index:1 !important; mask-image:none !important; -webkit-mask-image:none !important; } /* TANKA USPRAVNA LINIJA */ .products-grid .product-card .window-reflection::before{ content:"" !important; position:absolute !important; top:-12px !important; left:29px !important; width:8px !important; height:305px !important; border-radius:999px !important; background: linear-gradient( 90deg, rgba(255,255,255,.72), rgba(219,230,255,.30), rgba(255,255,255,.18) ) !important; box-shadow: 3px 0 7px rgba(255,255,255,.32) !important; } /* DVE KRATKE KOSE PREČKE */ .products-grid .product-card .window-reflection::after{ content:"" !important; position:absolute !important; top:61px !important; left:-50px !important; width:150px !important; height:8px !important; border-radius:999px !important; background: linear-gradient( 90deg, rgba(255,255,255,.08), rgba(225,234,255,.34), rgba(255,255,255,.20), transparent ) !important; transform:rotate(31deg) !important; transform-origin:center !important; box-shadow: 0 108px 0 rgba(225,234,255,.24) !important; } /* LOGO I SADRŽAJ IZNAD REFLEKSIJE */ .products-grid .product-card .product-logo, .products-grid .product-card .discount{ position:relative !important; z-index:10 !important; } .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:6 !important; } /* ================================================== FINALNI ODSJAJ PROZORA — GORNJI LEVI UGAO ================================================== */ .products-grid .product-card .window-reflection{ position:absolute !important; top:0 !important; left:0 !important; width:145px !important; height:330px !important; display:block !important; overflow:hidden !important; margin:0 !important; padding:0 !important; border-radius:40px 0 0 0 !important; background:transparent !important; opacity:1 !important; filter:none !important; transform:none !important; pointer-events:none !important; z-index:2 !important; } /* USPRAVNI DEO PROZORA */ .products-grid .product-card .window-reflection::before{ content:"" !important; position:absolute !important; top:-20px !important; left:31px !important; width:13px !important; height:370px !important; border-radius:999px !important; background: linear-gradient( 90deg, rgba(255,255,255,.90) 0%, rgba(245,248,255,.72) 34%, rgba(204,218,249,.28) 70%, rgba(255,255,255,.48) 100% ) !important; box-shadow: 4px 0 9px rgba(255,255,255,.54), 8px 0 18px rgba(166,190,241,.12) !important; opacity:.74 !important; } /* DVE KOSE PREČKE */ .products-grid .product-card .window-reflection::after{ content:"" !important; position:absolute !important; top:72px !important; left:-54px !important; width:168px !important; height:12px !important; border-radius:999px !important; background: linear-gradient( 90deg, rgba(255,255,255,.12) 0%, rgba(250,252,255,.82) 30%, rgba(220,231,255,.52) 67%, rgba(182,205,249,.15) 100% ) !important; transform:rotate(31deg) !important; transform-origin:center !important; box-shadow: 0 116px 0 rgba(226,235,255,.46), 0 119px 10px rgba(165,190,241,.09), 0 2px 8px rgba(255,255,255,.48) !important; opacity:.66 !important; } /* LOGO I SADRŽAJ MORAJU BITI IZNAD ODSJAJA */ .products-grid .product-card .product-logo, .products-grid .product-card .discount{ position:relative !important; z-index:20 !important; } .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* ================================================== FINALNA REFLEKSIJA — GORNJI LEVI UGAO KARTICE ================================================== */ /* gasi staru dodatnu refleksiju koja se preklapa */ .products-grid .product-card .glass-reflection{ display:none !important; } /* glavni prostor refleksije */ .products-grid .product-card .window-reflection{ position:absolute !important; top:0 !important; left:0 !important; width:155px !important; height:340px !important; display:block !important; overflow:hidden !important; margin:0 !important; padding:0 !important; border-radius:40px 0 0 0 !important; background:transparent !important; opacity:1 !important; filter:none !important; transform:none !important; pointer-events:none !important; z-index:2 !important; mask-image:none !important; -webkit-mask-image:none !important; } /* gasi prazne span kvadratiće */ .products-grid .product-card .window-reflection span{ display:none !important; } /* uspravna svetla linija */ .products-grid .product-card .window-reflection::before{ content:"" !important; position:absolute !important; top:-24px !important; left:34px !important; width:18px !important; height:390px !important; border-radius:999px !important; background:linear-gradient( 90deg, rgba(255,255,255,.25) 0%, rgba(248,250,255,.88) 35%, rgba(217,228,252,.48) 68%, rgba(255,255,255,.18) 100% ) !important; box-shadow: 3px 0 10px rgba(255,255,255,.65), 8px 0 18px rgba(177,198,242,.14) !important; opacity:.72 !important; filter:blur(.4px) !important; } /* dve kose svetle linije */ .products-grid .product-card .window-reflection::after{ content:"" !important; position:absolute !important; top:78px !important; left:-64px !important; width:190px !important; height:17px !important; border-radius:999px !important; background:linear-gradient( 90deg, rgba(255,255,255,.10) 0%, rgba(250,252,255,.86) 35%, rgba(218,230,255,.52) 70%, rgba(184,205,249,.10) 100% ) !important; transform:rotate(32deg) !important; transform-origin:center !important; box-shadow: 0 120px 0 rgba(226,235,255,.46), 0 123px 12px rgba(170,194,243,.10), 0 3px 9px rgba(255,255,255,.50) !important; opacity:.68 !important; filter:blur(.35px) !important; } /* FINALNA REFLEKSIJA */ .products-grid .product-card .glass-reflection{ display:none !important; } .products-grid .product-card .window-reflection{ position:absolute !important; top:0 !important; left:0 !important; width:155px !important; height:340px !important; display:block !important; overflow:hidden !important; margin:0 !important; padding:0 !important; opacity:1 !important; transform:none !important; filter:none !important; background:transparent !important; border-radius:40px 0 0 0 !important; pointer-events:none !important; z-index:2 !important; mask-image:none !important; -webkit-mask-image:none !important; } .products-grid .product-card .window-reflection span{ display:none !important; } .products-grid .product-card .window-reflection::before{ content:"" !important; position:absolute !important; top:-25px !important; left:37px !important; width:20px !important; height:370px !important; border-radius:999px !important; background:rgba(224,231,252,.55) !important; box-shadow: inset 5px 0 8px rgba(255,255,255,.65), 5px 0 14px rgba(187,204,242,.18) !important; opacity:.72 !important; } .products-grid .product-card .window-reflection::after{ content:"" !important; position:absolute !important; top:71px !important; left:-65px !important; width:205px !important; height:18px !important; border-radius:999px !important; background:rgba(224,231,252,.52) !important; transform:rotate(33deg) !important; box-shadow: 0 116px 0 rgba(224,231,252,.39) !important; opacity:.72 !important; } /* ========================================================== 29.07.2026 — FINAL OVERRIDE: KARTICE KAO NA REFERENTNOJ SLICI Ne menjaj HTML. Ovaj blok mora ostati NA KRAJU card.css fajla. ========================================================== */ .products{ padding:110px 0 95px !important; background: radial-gradient(circle at 6% 32%, rgba(164,211,255,.14), transparent 29%), radial-gradient(circle at 92% 57%, rgba(213,165,255,.12), transparent 31%), linear-gradient(180deg,#fff 0%,#fbfcff 52%,#fff 100%) !important; } .products-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:32px !important; margin-top:62px !important; align-items:stretch !important; } .products-grid .product-card{ position:relative !important; isolation:isolate !important; overflow:hidden !important; width:100% !important; height:690px !important; min-height:690px !important; padding:31px 26px 25px !important; display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; border-radius:39px !important; border:1px solid rgba(202,211,238,.72) !important; outline:1px solid rgba(255,255,255,.92) !important; outline-offset:-4px !important; background: radial-gradient(ellipse at -6% 44%,rgba(133,202,255,.17),transparent 52%), radial-gradient(ellipse at 50% -10%,rgba(255,255,255,1),rgba(255,255,255,.35) 30%,transparent 58%), radial-gradient(ellipse at 106% 93%,rgba(225,164,255,.25),rgba(144,157,255,.10) 48%,transparent 72%), linear-gradient(145deg,rgba(255,255,255,.985),rgba(250,251,255,.91)) !important; backdrop-filter:blur(30px) saturate(155%) !important; -webkit-backdrop-filter:blur(30px) saturate(155%) !important; box-shadow: 0 28px 68px rgba(40,49,91,.10), 0 14px 34px rgba(113,82,255,.075), inset 0 3px 3px rgba(255,255,255,1), inset 3px 0 3px rgba(255,255,255,.98), inset -3px 0 4px rgba(207,190,255,.34), inset 0 -3px 5px rgba(126,145,255,.14), inset 0 0 46px rgba(255,255,255,.46), 0 0 0 1px rgba(255,255,255,.72), 0 0 27px rgba(117,140,255,.09) !important; transform:none !important; } .product-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; background: linear-gradient( 135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 12%, transparent 26% ); mix-blend-mode:screen; } .products-grid .product-card::after{ content:"" !important; position:absolute !important; right:-170px !important; bottom:-155px !important; width:520px !important; height:420px !important; border-radius:50% !important; z-index:0 !important; pointer-events:none !important; background:radial-gradient(ellipse at 34% 27%,rgba(255,255,255,.65),rgba(248,219,255,.28) 30%,rgba(220,151,255,.18) 46%,rgba(118,145,255,.07) 65%,transparent 78%) !important; filter:blur(15px) !important; opacity:.8 !important; } .products-grid .product-card > *{ position:relative !important; z-index:5 !important; } /* refleksija prozora gore levo */ .products-grid .product-card .window-reflection{ position:absolute !important; top:9px !important; left:10px !important; width:126px !important; height:205px !important; display:grid !important; grid-template-columns:42px 42px !important; grid-template-rows:57px 57px 57px !important; gap:7px 9px !important; margin:0 !important; padding:0 !important; z-index:1 !important; opacity:.52 !important; transform:skewY(-3deg) rotate(-2deg) !important; filter:blur(.2px) !important; pointer-events:none !important; -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.28) 85%,transparent 100%) !important; mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 55%,rgba(0,0,0,.28) 85%,transparent 100%) !important; } .products-grid .product-card .window-reflection span{ display:block !important; width:100% !important; height:100% !important; border-radius:3px !important; background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(226,231,255,.34)) !important; box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 2px 8px rgba(197,207,238,.08) !important; } .products-grid .glass-reflection{ display:none !important; } /* popust */ /* logo glass kocka */ .products-grid .product-logo{ width:145px !important; height:145px !important; margin:43px auto 24px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:42px !important; overflow:visible !important; background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(247,248,253,.88)) !important; border:1px solid rgba(215,221,239,.66) !important; box-shadow:0 22px 48px rgba(44,54,102,.12),0 8px 18px rgba(56,66,112,.05),inset 0 2px 2px rgba(255,255,255,1),inset 0 -2px 4px rgba(127,139,187,.06) !important; } .products-grid .product-logo::before{ content:"" !important; position:absolute !important; inset:7px !important; border-radius:35px !important; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.94),rgba(255,255,255,.12) 54%,transparent 74%) !important; pointer-events:none !important; } .products-grid .product-logo::after{ content:"" !important; position:absolute !important; left:50% !important; bottom:-12px !important; width:102px !important; height:38px !important; transform:translateX(-50%) !important; border-radius:50% !important; background:rgba(50,59,111,.12) !important; filter:blur(16px) !important; z-index:-1 !important; } .products-grid .product-logo img{ width:86px !important; height:86px !important; object-fit:contain !important; filter:drop-shadow(0 9px 16px rgba(39,47,91,.13)) !important; } /* tekst */ .products-grid .product-title{ width:100% !important; max-width:330px !important; margin:0 auto !important; color:#07101f !important; font-size:31px !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:-1.65px !important; } .products-grid .product-card:first-child .product-title{ max-width:280px !important; } .products-grid .product-description{ width:100% !important; max-width:340px !important; min-height:62px !important; margin:15px auto 0 !important; color:#687286 !important; font-size:14px !important; line-height:1.55 !important; font-weight:450 !important; } /* feature kapsule */ .products-grid .product-tags{ width:100% !important; margin-top:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; flex-wrap:nowrap !important; } .products-grid .product-tag{ min-height:40px !important; padding:8px 10px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; border-radius:13px !important; color:#2a344b !important; font-size:10px !important; line-height:1 !important; font-weight:650 !important; white-space:nowrap !important; background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(247,248,253,.72)) !important; border:1px solid rgba(255,255,255,.98) !important; box-shadow:0 8px 19px rgba(42,51,89,.055),inset 0 1px 0 rgba(255,255,255,1) !important; } .products-grid .product-tag i{ color:#7448ff !important; font-size:13px !important; } .products-grid .product-divider{ width:100% !important; height:1px !important; margin:20px 0 19px !important; background:rgba(118,130,164,.15) !important; } /* cena */ .products-grid .price{ width:100% !important; margin:0 0 18px !important; padding:0 5px !important; display:flex !important; align-items:flex-end !important; justify-content:flex-start !important; gap:17px !important; } .products-grid .price strong{ color:#06101f !important; font-size:49px !important; line-height:.94 !important; font-weight:850 !important; letter-spacing:-2.7px !important; } .products-grid .price span{ padding-bottom:6px !important; color:#9299aa !important; font-size:17px !important; line-height:1 !important; font-weight:600 !important; text-decoration:line-through !important; text-decoration-thickness:2px !important; } /* dugme */ .products-grid .buy-btn{ width:100% !important; height:61px !important; min-height:61px !important; margin-top:auto !important; padding:0 22px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:11px !important; border:none !important; border-radius:21px !important; color:#fff !important; font-family:inherit !important; font-size:18px !important; line-height:1 !important; font-weight:800 !important; background:linear-gradient(108deg,#4f88ff 0%,#6267ff 42%,#7b4cff 68%,#9a2eff 100%) !important; box-shadow:0 18px 38px rgba(99,72,255,.29),0 7px 20px rgba(99,120,255,.12),inset 0 1px 1px rgba(255,255,255,.44) !important; } .products-grid .buy-btn i{ font-size:18px !important; } .products-grid .product-card:hover{ transform:translateY(-5px) !important; } .products-grid .product-card:hover .product-logo{ transform:none !important; } @media(max-width:1200px){ .products-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media(max-width:760px){ .products{ padding:82px 0 60px !important; } .products-grid{ grid-template-columns:1fr !important; gap:28px !important; margin-top:42px !important; } .products-grid .product-card{ height:auto !important; min-height:650px !important; padding:28px 22px 22px !important; } .products-grid .product-logo{ width:132px !important; height:132px !important; margin-top:38px !important; } .products-grid .product-logo img{ width:78px !important; height:78px !important; } .products-grid .product-title{ font-size:29px !important; } .products-grid .price strong{ font-size:45px !important; } } @media(max-width:390px){ .products-grid .product-tags{ gap:4px !important; } .products-grid .product-tag{ padding:8px 7px !important; gap:4px !important; font-size:9px !important; } } /* ================================================== KORAK 1 — STAKLO, SJAJ I REFLEKSIJA PROZORA ================================================== */ .products-grid .product-card{ position:relative !important; isolation:isolate !important; overflow:hidden !important; border-radius:38px !important; background: /* belo-plavi sjaj gore levo */ radial-gradient( ellipse at 10% 10%, rgba(255,255,255,1) 0%, rgba(246,250,255,.96) 23%, rgba(229,240,255,.50) 44%, transparent 68% ), /* svetlo iza logo dela */ radial-gradient( ellipse at 50% 24%, rgba(255,255,255,.98) 0%, rgba(244,247,255,.65) 35%, transparent 68% ), /* plavo svetlo uz levu ivicu */ radial-gradient( ellipse at -8% 45%, rgba(164,218,255,.36) 0%, rgba(179,213,255,.15) 35%, transparent 62% ), /* ljubičasti sjaj dole desno */ radial-gradient( ellipse at 105% 90%, rgba(231,165,255,.40) 0%, rgba(187,153,255,.23) 33%, rgba(128,171,255,.10) 58%, transparent 77% ), /* osnovna staklena površina */ linear-gradient( 145deg, rgba(255,255,255,.96) 0%, rgba(249,251,255,.88) 48%, rgba(243,246,255,.76) 100% ) !important; border:1px solid rgba(189,202,230,.68) !important; outline:1px solid rgba(255,255,255,.95) !important; outline-offset:-4px !important; box-shadow: /* spoljašnja dubina */ 0 28px 65px rgba(55,67,110,.12), /* plavi halo */ 0 0 36px rgba(149,190,255,.18), /* ljubičasti halo dole */ 0 22px 42px rgba(158,107,255,.12), /* jaka gornja svetla ivica */ inset 0 4px 3px rgba(255,255,255,1), /* leva staklena ivica */ inset 4px 0 3px rgba(255,255,255,.95), /* desna ljubičasta ivica */ inset -3px 0 4px rgba(181,164,255,.25), /* donja plava ivica */ inset 0 -4px 5px rgba(121,157,255,.17), /* unutrašnji haze */ inset 0 0 45px rgba(255,255,255,.45) !important; backdrop-filter:blur(28px) saturate(165%) !important; -webkit-backdrop-filter:blur(28px) saturate(165%) !important; } /* veliki mekani presjaj preko kartice */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: linear-gradient( 118deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 15%, transparent 35% ), radial-gradient( ellipse at 82% 30%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.20) 24%, transparent 47% ) !important; opacity:.95 !important; pointer-events:none !important; z-index:1 !important; } /* ljubičasto-plavi sjaj pri dnu */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:4% !important; right:4% !important; bottom:-36px !important; width:auto !important; height:155px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(180,103,255,.28) 0%, rgba(113,137,255,.20) 40%, transparent 73% ) !important; filter:blur(24px) !important; opacity:1 !important; pointer-events:none !important; z-index:0 !important; } /* sadržaj iznad efekata */ .products-grid .product-card > *:not(.window-reflection):not(.glass-reflection):not(.discount):not(.card-hover-shine){ position:relative !important; z-index:5 !important; } .products-grid .product-card > .discount{ position:absolute !important; top:40px !important; right:40px !important; left:auto !important; bottom:auto !important; margin:0 !important; transform:none !important; z-index:9999 !important; } /* ================================================== KOCKICE U GORNJEM LEVOM UGLU ================================================== */ .products-grid .window-reflection{ position:absolute !important; top:20px !important; left:15px !important; width:150px !important; height:205px !important; display:grid !important; grid-template-columns:repeat(2,48px) !important; grid-template-rows:repeat(3,54px) !important; gap:8px !important; padding:0 !important; margin:0 !important; transform: rotate(17deg) skewX(-7deg) !important; transform-origin:top left !important; opacity:.76 !important; filter: blur(.4px) drop-shadow(0 4px 8px rgba(255,255,255,.72)) !important; pointer-events:none !important; z-index:2 !important; mask-image: linear-gradient( 135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 45%, rgba(0,0,0,.42) 72%, transparent 94% ) !important; -webkit-mask-image: linear-gradient( 135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 45%, rgba(0,0,0,.42) 72%, transparent 94% ) !important; } .products-grid .window-reflection span{ display:block !important; width:48px !important; height:54px !important; border-radius:3px !important; background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(255,255,255,.48) ) !important; border:1px solid rgba(255,255,255,.90) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 5px 15px rgba(255,255,255,.32) !important; } /* dodatna duga refleksija uz levu ivicu */ .products-grid .glass-reflection{ position:absolute !important; top:-10px !important; left:-14px !important; width:150px !important; height:300px !important; opacity:.82 !important; pointer-events:none !important; z-index:2 !important; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.68) 34%, rgba(255,255,255,.18) 49%, transparent 68% ) !important; transform:rotate(-7deg) !important; filter:blur(1px) !important; } /* popust vraćamo gore desno */ /* ================================================== KORAK 2 — PROPORCIJE I RASPORED KAO NA REFERENCI ================================================== */ .products-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:30px !important; margin-top:54px !important; } /* KARTICA — niža i kompaktnija */ .products-grid .product-card{ height:640px !important; min-height:640px !important; padding: 24px 28px 24px !important; border-radius:36px !important; } /* POPUST GORE DESNO */ /* LOGO MANJI I VIŠE GORE */ .products-grid .product-logo{ width:132px !important; height:132px !important; margin: 48px auto 22px !important; border-radius:37px !important; } .products-grid .product-logo::before{ inset:7px !important; border-radius:31px !important; } .products-grid .product-logo img{ width:80px !important; height:80px !important; } /* NASLOV */ .products-grid .product-title{ max-width:330px !important; margin:0 auto !important; font-size:29px !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:-1.5px !important; } .products-grid .product-card:first-child .product-title{ max-width:260px !important; } /* OPIS */ .products-grid .product-description{ max-width:350px !important; min-height:58px !important; margin:13px auto 0 !important; font-size:14px !important; line-height:1.5 !important; } /* TAGOVI VIŠE GORE I MANJI */ .products-grid .product-tags{ margin-top:15px !important; gap:6px !important; } .products-grid .product-tag{ min-height:38px !important; padding: 8px 10px !important; border-radius:13px !important; font-size:10px !important; gap:5px !important; } .products-grid .product-tag i{ font-size:13px !important; } /* LINIJA */ .products-grid .product-divider{ margin: 18px 0 17px !important; } /* CENA MANJA KAO NA SLICI */ .products-grid .price{ margin: 0 0 17px !important; gap:14px !important; } .products-grid .price strong{ font-size:46px !important; line-height:.96 !important; letter-spacing:-2.4px !important; } .products-grid .price span{ padding-bottom:6px !important; font-size:16px !important; } /* DUGME NIŽE I KOMPAKTNIJE */ .products-grid .buy-btn{ height:58px !important; min-height:58px !important; border-radius:19px !important; font-size:17px !important; gap:10px !important; } /* JAČE KOCKICE U GORNJEM LEVOM UGLU */ .products-grid .window-reflection{ top:13px !important; left:11px !important; width:140px !important; height:185px !important; grid-template-columns:repeat(2,44px) !important; grid-template-rows:repeat(3,50px) !important; gap:7px !important; opacity:.92 !important; transform: rotate(18deg) skewX(-8deg) !important; } .products-grid .window-reflection span{ width:44px !important; height:50px !important; background: linear-gradient( 145deg, rgba(255,255,255,1), rgba(255,255,255,.58) ) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 6px 18px rgba(255,255,255,.46) !important; } /* JAČI SJAJ PO GORNJOJ I LEVOJ IVICI */ .products-grid .product-card{ box-shadow: 0 28px 60px rgba(55,67,110,.11), 0 0 34px rgba(149,190,255,.17), 0 18px 38px rgba(158,107,255,.11), inset 0 0 0 1px rgba(255,255,255,.95), inset 0 0 22px rgba(255,255,255,.45), inset 0 5px 4px rgba(255,255,255,1), inset 5px 0 4px rgba(255,255,255,1), inset -3px 0 4px rgba(181,164,255,.24), inset 0 -4px 5px rgba(121,157,255,.18), inset 0 0 45px rgba(255,255,255,.48) !important; }/* ================================================== KORAK 2 — PROPORCIJE I RASPORED KAO NA REFERENCI ================================================== */ .products-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:30px !important; margin-top:54px !important; } /* KARTICA — niža i kompaktnija */ .products-grid .product-card{ height:640px !important; min-height:640px !important; padding: 24px 28px 24px !important; border-radius:36px !important; } /* POPUST GORE DESNO */ /* LOGO MANJI I VIŠE GORE */ .products-grid .product-logo{ width:132px !important; height:132px !important; margin: 48px auto 22px !important; border-radius:37px !important; } .products-grid .product-logo::before{ inset:7px !important; border-radius:31px !important; } .products-grid .product-logo img{ width:80px !important; height:80px !important; } /* NASLOV */ .products-grid .product-title{ max-width:330px !important; margin:0 auto !important; font-size:29px !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:-1.5px !important; } .products-grid .product-card:first-child .product-title{ max-width:260px !important; } /* OPIS */ .products-grid .product-description{ max-width:350px !important; min-height:58px !important; margin:13px auto 0 !important; font-size:14px !important; line-height:1.5 !important; } /* TAGOVI VIŠE GORE I MANJI */ .products-grid .product-tags{ margin-top:15px !important; gap:6px !important; } .products-grid .product-tag{ min-height:38px !important; padding: 8px 10px !important; border-radius:13px !important; font-size:10px !important; gap:5px !important; } .products-grid .product-tag i{ font-size:13px !important; } /* LINIJA */ .products-grid .product-divider{ margin: 18px 0 17px !important; } /* CENA MANJA KAO NA SLICI */ .products-grid .price{ margin: 0 0 17px !important; gap:14px !important; } .products-grid .price strong{ font-size:46px !important; line-height:.96 !important; letter-spacing:-2.4px !important; } .products-grid .price span{ padding-bottom:6px !important; font-size:16px !important; } /* DUGME NIŽE I KOMPAKTNIJE */ .products-grid .buy-btn{ height:58px !important; min-height:58px !important; border-radius:19px !important; font-size:17px !important; gap:10px !important; } /* JAČE KOCKICE U GORNJEM LEVOM UGLU */ .products-grid .window-reflection{ top:13px !important; left:11px !important; width:140px !important; height:185px !important; grid-template-columns:repeat(2,44px) !important; grid-template-rows:repeat(3,50px) !important; gap:7px !important; opacity:.92 !important; transform: rotate(18deg) skewX(-8deg) !important; } .products-grid .window-reflection span{ width:44px !important; height:50px !important; background: linear-gradient( 145deg, rgba(255,255,255,1), rgba(255,255,255,.58) ) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 6px 18px rgba(255,255,255,.46) !important; } /* JAČI SJAJ PO GORNJOJ I LEVOJ IVICI */ .products-grid .product-card{ box-shadow: 0 28px 60px rgba(55,67,110,.11), 0 0 34px rgba(149,190,255,.17), 0 18px 38px rgba(158,107,255,.11), inset 0 5px 4px rgba(255,255,255,1), inset 5px 0 4px rgba(255,255,255,1), inset -3px 0 4px rgba(181,164,255,.24), inset 0 -4px 5px rgba(121,157,255,.18), inset 0 0 45px rgba(255,255,255,.48) !important; } /* ================================================== KORAK 3 — IDENTIČNIJI SJAJ, ODSJAJ I IVICE ================================================== */ /* GLAVNA STAKLENA KARTICA */ .products-grid .product-card{ background: radial-gradient( ellipse at 12% 12%, rgba(255,255,255,1) 0%, rgba(255,255,255,.78) 20%, rgba(228,240,255,.36) 42%, transparent 65% ), radial-gradient( ellipse at 86% 26%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.28) 24%, transparent 52% ), radial-gradient( ellipse at 8% 56%, rgba(173,220,255,.28) 0%, rgba(173,220,255,.08) 40%, transparent 64% ), radial-gradient( ellipse at 92% 86%, rgba(229,163,255,.42) 0%, rgba(191,132,255,.22) 30%, rgba(119,154,255,.09) 57%, transparent 78% ), linear-gradient( 150deg, rgba(255,255,255,.98) 0%, rgba(250,252,255,.90) 46%, rgba(244,247,255,.80) 100% ) !important; border:1px solid rgba(191,204,233,.72) !important; outline:1px solid rgba(255,255,255,.96) !important; outline-offset:-3px !important; box-shadow: 0 24px 60px rgba(58,70,114,.10), 0 0 26px rgba(173,211,255,.16), 0 18px 34px rgba(172,114,255,.10), inset 0 5px 3px rgba(255,255,255,1), inset 4px 0 3px rgba(255,255,255,.98), inset -3px 0 4px rgba(198,181,255,.27), inset 0 -4px 5px rgba(123,153,255,.18), inset 0 0 30px rgba(255,255,255,.46), 0 0 0 1px rgba(255,255,255,.62) !important; } /* ŠIROKI ODSJAJ PREKO CELE KARTICE */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: linear-gradient( 116deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.40) 13%, rgba(255,255,255,.10) 27%, transparent 43% ), linear-gradient( 164deg, transparent 0%, transparent 58%, rgba(255,255,255,.22) 74%, rgba(255,255,255,.05) 100% ), radial-gradient( ellipse at 83% 38%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 23%, transparent 47% ) !important; opacity:.95 !important; pointer-events:none !important; z-index:1 !important; } /* DONJI GLOW */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:8% !important; right:8% !important; bottom:-29px !important; height:118px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(187,108,255,.30) 0%, rgba(115,139,255,.18) 42%, transparent 74% ) !important; filter:blur(22px) !important; opacity:.82 !important; pointer-events:none !important; z-index:0 !important; } /* KOCKICE KAO REFLEKSIJA PROZORA */ .products-grid .window-reflection{ top:8px !important; left:5px !important; width:145px !important; height:190px !important; grid-template-columns:48px 48px !important; grid-template-rows:58px 58px 58px !important; gap:7px !important; transform: rotate(19deg) skewX(-7deg) skewY(1deg) !important; opacity:.82 !important; filter: blur(.55px) drop-shadow(0 7px 16px rgba(255,255,255,.58)) !important; mask-image: linear-gradient( 135deg, #000 0%, rgba(0,0,0,.95) 42%, rgba(0,0,0,.52) 70%, transparent 96% ) !important; -webkit-mask-image: linear-gradient( 135deg, #000 0%, rgba(0,0,0,.95) 42%, rgba(0,0,0,.52) 70%, transparent 96% ) !important; } .products-grid .window-reflection span{ width:48px !important; height:58px !important; border-radius:2px !important; background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(255,255,255,.58) ) !important; border:1px solid rgba(255,255,255,.96) !important; box-shadow: inset 0 1px 2px rgba(255,255,255,1), 0 4px 14px rgba(255,255,255,.34) !important; } /* DUGA BELA REFLEKSIJA U LEVOM UGLU */ .products-grid .glass-reflection{ top:-18px !important; left:-26px !important; width:185px !important; height:250px !important; opacity:.76 !important; background: linear-gradient( 112deg, transparent 8%, rgba(255,255,255,.12) 22%, rgba(255,255,255,.72) 37%, rgba(255,255,255,.26) 48%, transparent 67% ) !important; filter:blur(1.4px) !important; transform:rotate(-4deg) !important; } /* SJAJ NA LOGO KOCKI */ .products-grid .product-logo{ background: radial-gradient( circle at 28% 18%, rgba(255,255,255,1), rgba(255,255,255,.42) 30%, transparent 56% ), linear-gradient( 145deg, rgba(255,255,255,.98), rgba(247,249,255,.88) ) !important; border:1px solid rgba(213,222,242,.76) !important; box-shadow: 0 20px 44px rgba(50,60,105,.12), inset 0 3px 2px rgba(255,255,255,1), inset 3px 0 2px rgba(255,255,255,.96), inset -2px 0 3px rgba(191,177,255,.18), inset 0 -3px 4px rgba(111,145,255,.11), 0 0 20px rgba(255,255,255,.60) !important; } /* SJAJ NA DUGMETU */ .products-grid .buy-btn{ background: linear-gradient( 108deg, #438cf7 0%, #5b72ff 39%, #784fff 67%, #a120f1 100% ) !important; box-shadow: 0 17px 32px rgba(103,73,255,.27), inset 0 2px 1px rgba(255,255,255,.36), inset 0 -2px 3px rgba(68,31,167,.18), 0 0 18px rgba(130,92,255,.13) !important; } /* ========================================================= KORAK 3 — FINALNI SJAJ, IVICE I REFLEKSIJA PROZORA OVAJ BLOK MORA BITI POSLEDNJI U card.css ========================================================= */ /* ========================================================= 1. GLAVNA STAKLENA POVRŠINA I SJAJNE IVICE ========================================================= */ .products-grid .product-card{ position:relative !important; isolation:isolate !important; overflow:hidden !important; border:1px solid rgba(188,202,236,.72) !important; outline:1px solid rgba(255,255,255,.98) !important; outline-offset:-4px !important; background: /* jako belo svetlo gore */ radial-gradient( ellipse at 50% -12%, rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 18%, rgba(243,248,255,.58) 39%, transparent 64% ), /* hladni plavi odsjaj sa leve strane */ radial-gradient( ellipse at -8% 43%, rgba(157,216,255,.34) 0%, rgba(181,220,255,.16) 30%, transparent 57% ), /* beli haze u centru */ radial-gradient( ellipse at 52% 38%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.32) 36%, transparent 67% ), /* ljubičasti glow dole desno */ radial-gradient( ellipse at 108% 94%, rgba(228,155,255,.43) 0%, rgba(191,143,255,.25) 31%, rgba(118,154,255,.12) 56%, transparent 77% ), /* blago ljubičasto svetlo dole levo */ radial-gradient( ellipse at 15% 106%, rgba(130,174,255,.17) 0%, rgba(164,141,255,.09) 38%, transparent 67% ), /* osnovno staklo */ linear-gradient( 145deg, rgba(255,255,255,.985) 0%, rgba(250,252,255,.93) 42%, rgba(245,248,255,.84) 70%, rgba(250,247,255,.87) 100% ) !important; backdrop-filter: blur(30px) saturate(165%) !important; -webkit-backdrop-filter: blur(30px) saturate(165%) !important; box-shadow: /* spoljašnja meka senka */ 0 28px 65px rgba(38,52,91,.11), /* svetloplavi halo oko kartice */ 0 0 34px rgba(137,179,255,.15), /* ljubičasti halo ispod */ 0 22px 42px rgba(128,83,255,.13), /* jaka bela gornja ivica */ inset 0 5px 4px rgba(255,255,255,1), /* jaka bela leva ivica */ inset 5px 0 4px rgba(255,255,255,1), /* blago ljubičasta desna ivica */ inset -4px 0 5px rgba(188,167,255,.30), /* plavo-ljubičasta donja ivica */ inset 0 -5px 6px rgba(119,145,255,.21), /* unutrašnji svetlosni sloj */ inset 0 0 54px rgba(255,255,255,.53), /* dodatna tanka spoljna bela ivica */ 0 0 0 1px rgba(255,255,255,.88) !important; } /* ========================================================= 2. BELI PRESJAJ PREKO POVRŠINE KARTICE ========================================================= */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: /* dijagonalni presjaj gore levo */ linear-gradient( 122deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.32) 16%, rgba(255,255,255,.08) 30%, transparent 44% ), /* presjaj uz desnu stranu */ radial-gradient( ellipse at 91% 27%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.22) 25%, transparent 48% ), /* sitne svetlosne tačke */ radial-gradient( circle at 85% 43%, rgba(255,255,255,.95) 0 2px, rgba(255,255,255,.20) 3px, transparent 6px ), radial-gradient( circle at 89% 54%, rgba(255,255,255,.82) 0 1.5px, transparent 5px ), radial-gradient( circle at 76% 68%, rgba(255,255,255,.60) 0 1px, transparent 4px ) !important; opacity:.90 !important; pointer-events:none !important; z-index:2 !important; } /* ========================================================= 3. LJUBIČASTO-PLAVI GLOW PRI DNU ========================================================= */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:3% !important; right:3% !important; bottom:-43px !important; width:auto !important; height:165px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(190,100,255,.35) 0%, rgba(129,119,255,.25) 34%, rgba(100,161,255,.13) 54%, transparent 75% ) !important; filter:blur(25px) !important; opacity:1 !important; pointer-events:none !important; z-index:1 !important; } /* ========================================================= 4. GASI STARU DODATNU REFLEKSIJU ========================================================= */ .products-grid .product-card .glass-reflection{ display:none !important; } /* ========================================================= 5. KOCKICE — REFLEKSIJA PROZORA GORE LEVO ========================================================= */ .products-grid .product-card .window-reflection{ position:absolute !important; top:4px !important; left:7px !important; width:132px !important; height:200px !important; display:grid !important; grid-template-columns: 46px 46px !important; grid-template-rows: 58px 58px 58px !important; gap:8px !important; margin:0 !important; padding:0 !important; overflow:visible !important; border-radius:0 !important; background:transparent !important; transform: perspective(500px) rotateZ(17deg) skewX(-8deg) !important; transform-origin:top left !important; opacity:.82 !important; filter: blur(.45px) drop-shadow( 0 5px 12px rgba(255,255,255,.65) ) !important; pointer-events:none !important; z-index:3 !important; -webkit-mask-image: linear-gradient( 135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 43%, rgba(0,0,0,.52) 72%, transparent 96% ) !important; mask-image: linear-gradient( 135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 43%, rgba(0,0,0,.52) 72%, transparent 96% ) !important; } /* uklanjamo stare linije koje su ranije pravljene */ .products-grid .product-card .window-reflection::before, .products-grid .product-card .window-reflection::after{ content:none !important; } /* pojedinačne staklene kockice */ .products-grid .product-card .window-reflection span{ display:block !important; width:46px !important; height:58px !important; border-radius:4px !important; background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.82) 38%, rgba(224,235,255,.40) 100% ) !important; border: 1px solid rgba(255,255,255,.95) !important; box-shadow: inset 2px 2px 2px rgba(255,255,255,1), inset -2px -2px 3px rgba(186,204,242,.15), 0 4px 12px rgba(255,255,255,.43) !important; } /* ========================================================= 6. SJAJNI SPOLJNI RUB KAO STAKLENA PLOČA ========================================================= */ .products-grid .product-card{ background-clip: padding-box !important; } .products-grid .product-card:hover{ box-shadow: 0 34px 74px rgba(38,52,91,.13), 0 0 40px rgba(137,179,255,.19), 0 24px 47px rgba(128,83,255,.16), inset 0 5px 4px rgba(255,255,255,1), inset 5px 0 4px rgba(255,255,255,1), inset -4px 0 5px rgba(188,167,255,.34), inset 0 -5px 6px rgba(119,145,255,.24), inset 0 0 56px rgba(255,255,255,.56), 0 0 0 1px rgba(255,255,255,.92) !important; } /* ========================================================= 7. SAV SADRŽAJ OSTAJE IZNAD SJAJA ========================================================= */ .products-grid .product-card .discount, .products-grid .product-card .product-logo, .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* ========================================================= KORAK 4 — JAČE KOCKICE I DUPLA STAKLENA IVICA OVAJ KOD MORA BITI POSLEDNJI U card.css ========================================================= */ /* ========================================================= 1. DUPLA SJAJNA IVICA KARTICE ========================================================= */ .products-grid .product-card{ border: 1px solid rgba(177,195,235,.82) !important; outline: 2px solid rgba(255,255,255,.94) !important; outline-offset: -5px !important; box-shadow: /* meka spoljašnja senka */ 0 28px 68px rgba(43,55,94,.11), /* beli halo oko cele kartice */ 0 0 0 1px rgba(255,255,255,.95), /* svetloplavi halo */ 0 0 28px rgba(144,185,255,.20), /* ljubičasti halo pri dnu */ 0 22px 44px rgba(135,91,255,.15), /* bela gornja ivica */ inset 0 6px 5px rgba(255,255,255,1), /* bela leva ivica */ inset 6px 0 5px rgba(255,255,255,1), /* svetla desna ivica */ inset -5px 0 6px rgba(207,192,255,.38), /* ljubičasto-plava donja ivica */ inset 0 -6px 7px rgba(121,143,255,.25), /* tanka unutrašnja linija */ inset 0 0 0 2px rgba(255,255,255,.55), /* bela magla iznutra */ inset 0 0 55px rgba(255,255,255,.48) !important; } /* dodatni beli presjaj duž gornje ivice */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: /* jaka gornja refleksija */ linear-gradient( 180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.34) 4%, transparent 11% ), /* jaka leva refleksija */ linear-gradient( 90deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.20) 3%, transparent 10% ), /* dijagonalni beli presjaj */ linear-gradient( 125deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.19) 18%, transparent 38% ), /* svetlosne tačke */ radial-gradient( circle at 86% 45%, rgba(255,255,255,1) 0 2px, rgba(255,255,255,.30) 3px, transparent 7px ), radial-gradient( circle at 90% 56%, rgba(255,255,255,.84) 0 1.5px, transparent 5px ) !important; opacity:1 !important; pointer-events:none !important; z-index:2 !important; } /* ========================================================= 2. VELIKE KOCKICE KAO NA REFERENTNOJ SLICI ========================================================= */ .products-grid .product-card .window-reflection{ position:absolute !important; top:-15px !important; left:-12px !important; width:175px !important; height:245px !important; display:grid !important; grid-template-columns: 58px 58px !important; grid-template-rows: 72px 72px 72px !important; gap: 10px 11px !important; margin:0 !important; padding:0 !important; overflow:visible !important; background:transparent !important; transform: rotate(18deg) skewX(-7deg) !important; transform-origin: top left !important; opacity:.82 !important; filter: blur(.25px) drop-shadow( 0 7px 16px rgba(255,255,255,.75) ) !important; pointer-events:none !important; z-index:4 !important; mask-image: linear-gradient( 135deg, #000 0%, rgba(0,0,0,.98) 47%, rgba(0,0,0,.72) 68%, rgba(0,0,0,.25) 88%, transparent 100% ) !important; -webkit-mask-image: linear-gradient( 135deg, #000 0%, rgba(0,0,0,.98) 47%, rgba(0,0,0,.72) 68%, rgba(0,0,0,.25) 88%, transparent 100% ) !important; } /* uklanja stare pseudo-linije */ .products-grid .product-card .window-reflection::before, .products-grid .product-card .window-reflection::after{ content:none !important; } /* pojedinačne svetle kockice */ .products-grid .product-card .window-reflection span{ display:block !important; width:58px !important; height:72px !important; border-radius:4px !important; background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.91) 33%, rgba(229,238,255,.58) 69%, rgba(205,221,255,.27) 100% ) !important; border: 1px solid rgba(255,255,255,1) !important; box-shadow: inset 3px 3px 3px rgba(255,255,255,1), inset -3px -3px 5px rgba(177,201,247,.18), 0 4px 13px rgba(255,255,255,.65), 0 0 18px rgba(220,234,255,.34) !important; } /* ========================================================= 3. BELA MAGLA OKO KOCKICA ========================================================= */ .products-grid .product-card .window-reflection{ background: radial-gradient( ellipse at 37% 38%, rgba(255,255,255,.52) 0%, rgba(255,255,255,.20) 43%, transparent 72% ) !important; } /* ========================================================= 4. JAČI SJAJ DONJE IVICE ========================================================= */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:2% !important; right:2% !important; bottom:-48px !important; width:auto !important; height:175px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(205,117,255,.40) 0%, rgba(147,108,255,.28) 31%, rgba(99,157,255,.16) 53%, transparent 76% ) !important; filter:blur(27px) !important; opacity:1 !important; pointer-events:none !important; z-index:1 !important; } /* sadržaj ostaje iznad refleksija */ .products-grid .product-card .discount, .products-grid .product-card .product-logo, .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* ========================================================= KORAK 5 — PRIBLIŽAVANJE REFERENCI: JAKE STAKLENE IVICE, PRAVE KOCKICE I POPUST DESNO MORA BITI POSLEDNJI BLOK U card.css ========================================================= */ /* ========================================================= KARTICA — MEKŠE STAKLO I JASNIJI SJAJNI RUB ========================================================= */ .products-grid .product-card{ position:relative !important; isolation:isolate !important; overflow:hidden !important; border-radius:36px !important; border: 1px solid rgba(176,193,229,.78) !important; outline: 1px solid rgba(255,255,255,.98) !important; outline-offset: -3px !important; background: /* jaka bela svetlost gore */ radial-gradient( ellipse at 48% -10%, rgba(255,255,255,1) 0%, rgba(255,255,255,.91) 20%, rgba(241,247,255,.54) 42%, transparent 67% ), /* hladan plavi sloj levo */ radial-gradient( ellipse at -7% 44%, rgba(155,211,255,.30) 0%, rgba(174,218,255,.14) 33%, transparent 59% ), /* svetla magla u sredini */ radial-gradient( ellipse at 50% 42%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.26) 39%, transparent 70% ), /* ljubičasti sjaj dole desno */ radial-gradient( ellipse at 105% 91%, rgba(229,158,255,.39) 0%, rgba(194,146,255,.23) 35%, rgba(118,155,255,.10) 58%, transparent 78% ), /* osnovna površina */ linear-gradient( 145deg, rgba(255,255,255,.985) 0%, rgba(250,252,255,.93) 47%, rgba(245,248,255,.85) 74%, rgba(251,247,255,.87) 100% ) !important; box-shadow: /* dubina */ 0 25px 58px rgba(45,57,96,.10), /* blagi plavi halo */ 0 0 30px rgba(133,177,255,.15), /* ljubičasto svetlo ispod */ 0 20px 40px rgba(135,91,255,.12), /* sjaj gornje ivice */ inset 0 4px 3px rgba(255,255,255,1), /* sjaj leve ivice */ inset 4px 0 3px rgba(255,255,255,1), /* sjaj desne ivice */ inset -3px 0 4px rgba(190,174,255,.31), /* sjaj donje ivice */ inset 0 -4px 5px rgba(122,145,255,.23), /* unutrašnji stakleni okvir */ inset 0 0 0 2px rgba(255,255,255,.43), /* unutrašnja magla */ inset 0 0 48px rgba(255,255,255,.48), /* spoljašnja bela linija */ 0 0 0 1px rgba(255,255,255,.86) !important; } /* ========================================================= PRESJAJ PREKO POVRŠINE ========================================================= */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: /* sjaj tik uz vrh */ linear-gradient( 180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.24) 5%, transparent 13% ), /* sjaj tik uz levu ivicu */ linear-gradient( 90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.18) 4%, transparent 11% ), /* široki dijagonalni presjaj */ linear-gradient( 125deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 18%, transparent 38% ), /* svetle tačke kao na referenci */ radial-gradient( circle at 86% 45%, rgba(255,255,255,.95) 0 2px, rgba(255,255,255,.20) 3px, transparent 7px ), radial-gradient( circle at 89% 55%, rgba(255,255,255,.75) 0 1.5px, transparent 5px ) !important; opacity:1 !important; pointer-events:none !important; z-index:2 !important; } /* ========================================================= DONJI MEKI LJUBIČASTO-PLAVI GLOW ========================================================= */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:4% !important; right:4% !important; bottom:-48px !important; width:auto !important; height:165px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(196,111,255,.34) 0%, rgba(143,112,255,.24) 32%, rgba(101,158,255,.13) 54%, transparent 76% ) !important; filter:blur(27px) !important; opacity:.95 !important; pointer-events:none !important; z-index:1 !important; } /* ========================================================= REFLEKSIJA PROZORA — KOCKICE KAO NA DRUGOJ SLICI ========================================================= */ .products-grid .product-card .glass-reflection{ display:none !important; } .products-grid .product-card .window-reflection{ position:absolute !important; top:-15px !important; left:-14px !important; width:175px !important; height:235px !important; display:grid !important; grid-template-columns: 61px 61px !important; grid-template-rows: 67px 67px 67px !important; gap: 8px 9px !important; margin:0 !important; padding:0 !important; overflow:visible !important; background:transparent !important; transform: rotate(17deg) skewX(-6deg) !important; transform-origin: top left !important; opacity:.75 !important; filter: blur(.35px) drop-shadow( 0 6px 13px rgba(255,255,255,.62) ) !important; pointer-events:none !important; z-index:3 !important; -webkit-mask-image: linear-gradient( 140deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 47%, rgba(0,0,0,.62) 71%, rgba(0,0,0,.16) 91%, transparent 100% ) !important; mask-image: linear-gradient( 140deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 47%, rgba(0,0,0,.62) 71%, rgba(0,0,0,.16) 91%, transparent 100% ) !important; } /* gase se sve stare linije refleksije */ .products-grid .product-card .window-reflection::before, .products-grid .product-card .window-reflection::after{ content:none !important; } /* pojedinačne bele kockice */ .products-grid .product-card .window-reflection span{ display:block !important; width:61px !important; height:67px !important; border-radius:2px !important; background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.91) 42%, rgba(223,234,255,.52) 100% ) !important; border: 1px solid rgba(255,255,255,.97) !important; box-shadow: inset 2px 2px 2px rgba(255,255,255,1), inset -2px -2px 4px rgba(181,201,243,.14), 0 3px 11px rgba(255,255,255,.54) !important; } /* ========================================================= POPUST OBAVEZNO GORE DESNO ========================================================= */ /* ========================================================= SADRŽAJ IZNAD SVIH EFEKATA ========================================================= */ .products-grid .product-card .product-logo, .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* ========================================================= KORAK 6 — MLEČNI MATIRANI GLASS IZGLED OVAJ BLOK MORA BITI POSLEDNJI U card.css ========================================================= */ /* GLAVNA MLEČNA POVRŠINA */ .products-grid .product-card{ background: /* jaka mlečna magla preko gornjeg dela */ radial-gradient( ellipse at 48% 7%, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 25%, rgba(246,249,255,.83) 48%, transparent 73% ), /* mlečni sloj u sredini kartice */ radial-gradient( ellipse at 50% 48%, rgba(255,255,255,.88) 0%, rgba(249,251,255,.70) 43%, rgba(240,246,255,.34) 68%, transparent 88% ), /* hladna svetloplava magla levo */ radial-gradient( ellipse at -10% 45%, rgba(193,229,255,.40) 0%, rgba(204,230,255,.21) 38%, transparent 65% ), /* mlečno-ljubičasta magla dole desno */ radial-gradient( ellipse at 108% 93%, rgba(244,207,255,.52) 0%, rgba(220,188,255,.33) 33%, rgba(176,192,255,.17) 58%, transparent 79% ), /* osnovni neprovidni mlečni sloj */ linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.94) 42%, rgba(241,246,255,.90) 72%, rgba(248,243,255,.91) 100% ) !important; backdrop-filter: blur(38px) saturate(125%) brightness(1.05) !important; -webkit-backdrop-filter: blur(38px) saturate(125%) brightness(1.05) !important; border: 1px solid rgba(190,202,233,.78) !important; outline: 2px solid rgba(255,255,255,.92) !important; outline-offset: -5px !important; box-shadow: /* spoljašnja senka */ 0 30px 70px rgba(46,58,96,.10), /* mlečni beli halo */ 0 0 36px rgba(255,255,255,.82), /* plavi halo */ 0 0 25px rgba(145,188,255,.15), /* ljubičasti halo ispod */ 0 23px 45px rgba(145,96,255,.13), /* debela bela gornja ivica */ inset 0 7px 8px rgba(255,255,255,1), /* debela bela leva ivica */ inset 7px 0 8px rgba(255,255,255,1), /* mlečna desna ivica */ inset -6px 0 8px rgba(220,209,255,.45), /* plavo-ljubičasta donja ivica */ inset 0 -7px 9px rgba(141,158,255,.28), /* unutrašnja dupla bela ivica */ inset 0 0 0 3px rgba(255,255,255,.50), /* jaka mlečna magla unutar kartice */ inset 0 0 75px rgba(255,255,255,.68), /* bela spoljna linija */ 0 0 0 1px rgba(255,255,255,.95) !important; } /* MLEČNI FILM PREKO CELE KARTICE */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: /* beli film preko cele površine */ linear-gradient( 145deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.22) 42%, rgba(255,255,255,.08) 72%, rgba(255,255,255,.20) 100% ), /* velika svetla refleksija gore levo */ radial-gradient( ellipse at 18% 12%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.38) 35%, transparent 63% ), /* svetla magla iza logoa */ radial-gradient( ellipse at 50% 26%, rgba(255,255,255,.73) 0%, rgba(255,255,255,.21) 43%, transparent 70% ), /* beli presjaj desno */ radial-gradient( ellipse at 90% 39%, rgba(255,255,255,.60) 0%, rgba(255,255,255,.17) 31%, transparent 54% ), /* sitne svetlosne tačke */ radial-gradient( circle at 86% 46%, rgba(255,255,255,1) 0 2px, rgba(255,255,255,.35) 3px, transparent 7px ), radial-gradient( circle at 89% 57%, rgba(255,255,255,.90) 0 1.5px, transparent 5px ) !important; opacity:1 !important; pointer-events:none !important; z-index:2 !important; } /* MEKŠI MLEČNO-LJUBIČASTI GLOW DOLE */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:-3% !important; right:-3% !important; bottom:-68px !important; width:auto !important; height:220px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(255,255,255,.60) 0%, rgba(240,205,255,.42) 24%, rgba(188,142,255,.28) 45%, rgba(112,160,255,.14) 62%, transparent 80% ) !important; filter:blur(34px) !important; opacity:1 !important; pointer-events:none !important; z-index:1 !important; } /* ========================================================= MLEČNE KOCKICE U GORNJEM LEVOM UGLU ========================================================= */ .products-grid .product-card .window-reflection{ top:-13px !important; left:-9px !important; opacity:.64 !important; filter: blur(.7px) drop-shadow( 0 7px 18px rgba(255,255,255,.88) ) !important; } .window-reflection span{ background:#ffffff !important; border:none !important; box-shadow: 0 0 24px rgba(255,255,255,.95), 0 10px 26px rgba(255,255,255,.55); opacity:.95; } /* ========================================================= MLEČNA LOGO KOCKA ========================================================= */ .products-grid .product-logo{ background: radial-gradient( circle at 31% 18%, rgba(255,255,255,1) 0%, rgba(255,255,255,.80) 35%, transparent 68% ), linear-gradient( 145deg, rgba(255,255,255,.98), rgba(241,245,253,.85) ) !important; border: 1px solid rgba(255,255,255,.96) !important; box-shadow: 0 24px 46px rgba(61,73,118,.13), 0 0 28px rgba(255,255,255,.85), inset 0 4px 4px rgba(255,255,255,1), inset 4px 0 4px rgba(255,255,255,.95), inset -3px 0 4px rgba(205,194,255,.25), inset 0 -4px 5px rgba(154,171,222,.14), inset 0 0 25px rgba(255,255,255,.61) !important; } /* SADRŽAJ OSTAJE IZNAD MLEČNOG FILMA */ .products-grid .product-card .discount, .products-grid .product-card .product-logo, .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* ========================================================= KORAK 7 — SAMO SJAJ KAO NA REFERENTNOJ SLICI OVAJ BLOK MORA BITI POSLEDNJI U card.css ========================================================= */ /* ========================================================= 1. JASAN STAKLENI RUB OKO CELE KARTICE ========================================================= */ .products-grid .product-card{ border: 1px solid rgba(164,183,225,.68) !important; outline: 1px solid rgba(255,255,255,1) !important; outline-offset: -4px !important; box-shadow: /* tamnija senka da bi beli sjaj bio vidljiv */ 0 24px 55px rgba(57,70,113,.13), /* hladni plavi halo oko kartice */ 0 0 22px rgba(121,169,255,.18), /* svetli ljubičasti halo pri dnu */ 0 19px 38px rgba(146,91,255,.17), /* veoma jaka gornja staklena ivica */ inset 0 5px 3px rgba(255,255,255,1), /* veoma jaka leva staklena ivica */ inset 5px 0 3px rgba(255,255,255,1), /* hladna plava desna ivica */ inset -4px 0 5px rgba(168,191,255,.34), /* ljubičasto-plava donja ivica */ inset 0 -5px 7px rgba(140,121,255,.31), /* unutrašnja tanka svetla linija */ inset 0 0 0 2px rgba(255,255,255,.70), /* mlečna unutrašnja magla */ inset 0 0 52px rgba(255,255,255,.52), /* dodatni beli rub spolja */ 0 0 0 1px rgba(255,255,255,.96) !important; } /* ========================================================= 2. SJAJ PREKO CELE POVRŠINE KARTICE ========================================================= */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: /* svetla linija duž samog vrha */ linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.62) 1.5%, rgba(255,255,255,.13) 5%, transparent 12% ), /* svetla linija duž leve ivice */ linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.50) 1.5%, rgba(255,255,255,.10) 5%, transparent 12% ), /* širok mlečni presjaj gore levo */ radial-gradient( ellipse at 18% 12%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.57) 25%, rgba(235,243,255,.20) 49%, transparent 70% ), /* svetla magla iza logoa */ radial-gradient( ellipse at 50% 25%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.24) 37%, transparent 66% ), /* velika bela refleksija desno */ radial-gradient( ellipse at 102% 37%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.29) 27%, transparent 52% ), /* veća svetlosna tačka */ radial-gradient( circle at 88% 28%, rgba(255,255,255,1) 0 3px, rgba(255,255,255,.72) 4px, rgba(255,255,255,.18) 8px, transparent 13px ), /* mala svetlosna tačka */ radial-gradient( circle at 86% 47%, rgba(255,255,255,1) 0 2px, rgba(255,255,255,.42) 3px, transparent 8px ), /* najmanja svetlosna tačka */ radial-gradient( circle at 90% 57%, rgba(255,255,255,.95) 0 1.5px, rgba(255,255,255,.26) 3px, transparent 6px ) !important; opacity:1 !important; pointer-events:none !important; z-index:3 !important; } /* ========================================================= 3. LJUBIČASTO-PLAVI SJAJ PRI DNU KARTICE ========================================================= */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:-8% !important; right:-8% !important; bottom:-82px !important; width:auto !important; height:250px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(255,255,255,.67) 0%, rgba(239,207,255,.50) 20%, rgba(194,137,255,.38) 40%, rgba(107,151,255,.22) 58%, transparent 79% ) !important; filter: blur(35px) !important; opacity:1 !important; pointer-events:none !important; z-index:2 !important; } /* ========================================================= 4. JAČI SJAJ NA DONJOJ IVICI ========================================================= */ .products-grid .product-card{ background: /* jaka mlečna bela svetlost gore */ radial-gradient( ellipse at 50% -12%, rgba(255,255,255,1) 0%, rgba(255,255,255,.95) 22%, rgba(242,248,255,.59) 43%, transparent 66% ), /* plava magla levo */ radial-gradient( ellipse at -10% 49%, rgba(176,220,255,.39) 0%, rgba(188,221,255,.18) 37%, transparent 63% ), /* bela magla preko centra */ radial-gradient( ellipse at 50% 43%, rgba(255,255,255,.83) 0%, rgba(255,255,255,.34) 43%, transparent 75% ), /* ljubičasta magla dole */ radial-gradient( ellipse at 55% 111%, rgba(222,175,255,.48) 0%, rgba(174,146,255,.29) 37%, rgba(116,164,255,.15) 60%, transparent 79% ), /* blagi ljubičasti sjaj desno */ radial-gradient( ellipse at 107% 67%, rgba(235,194,255,.38) 0%, rgba(205,174,255,.19) 40%, transparent 67% ), /* osnovno mlečno staklo */ linear-gradient( 145deg, rgba(255,255,255,.985) 0%, rgba(248,251,255,.94) 43%, rgba(241,246,255,.89) 71%, rgba(249,244,255,.91) 100% ) !important; } /* ========================================================= 5. PROZORSKE KOCKICE — JAČI SJAJ I BLUR ========================================================= */ .products-grid .product-card .window-reflection{ opacity:.83 !important; filter: blur(.35px) drop-shadow( 0 5px 12px rgba(255,255,255,.93) ) drop-shadow( 0 0 16px rgba(218,232,255,.53) ) !important; } .products-grid .product-card .window-reflection span{ background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.94) 36%, rgba(230,239,255,.67) 68%, rgba(204,223,255,.32) 100% ) !important; border: 1px solid rgba(255,255,255,1) !important; box-shadow: inset 3px 3px 5px rgba(255,255,255,1), inset -3px -3px 6px rgba(168,196,246,.19), 0 5px 15px rgba(255,255,255,.75), 0 0 19px rgba(215,231,255,.52) !important; } /* ========================================================= 6. POJAČAN SJAJ NA LOGO KOCKI ========================================================= */ .products-grid .product-logo{ border: 1px solid rgba(255,255,255,1) !important; box-shadow: /* senka ispod logo kocke */ 0 22px 43px rgba(46,59,103,.14), /* beli halo oko logo kocke */ 0 0 25px rgba(255,255,255,.95), /* gornja staklena ivica */ inset 0 4px 3px rgba(255,255,255,1), /* leva staklena ivica */ inset 4px 0 3px rgba(255,255,255,1), /* desna hladna ivica */ inset -3px 0 4px rgba(180,200,244,.27), /* donja hladna ivica */ inset 0 -4px 5px rgba(158,175,225,.18), /* unutrašnji mlečni sloj */ inset 0 0 27px rgba(255,255,255,.73) !important; } /* ========================================================= 7. SJAJ NA DUGMETU ========================================================= */ .products-grid .buy-btn{ box-shadow: 0 18px 38px rgba(105,72,255,.31), 0 8px 22px rgba(75,140,255,.18), 0 0 18px rgba(131,104,255,.17), inset 0 2px 2px rgba(255,255,255,.53), inset 0 -2px 3px rgba(91,45,222,.20) !important; } /* SADRŽAJ OSTAJE IZNAD SJAJA */ .products-grid .product-card .discount, .products-grid .product-card .product-logo, .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* ========================================================= KORAK 8 — SJAJ RASUT PO CELOJ KARTICI MINIMALAN LJUBIČASTI GLOW OVAJ BLOK MORA BITI POSLEDNJI ========================================================= */ /* GLAVNA POVRŠINA — BELA, MLEČNA, HLADNA */ .products-grid .product-card{ background: /* mlečni sjaj gore levo */ radial-gradient( ellipse at 14% 10%, rgba(255,255,255,1) 0%, rgba(255,255,255,.88) 20%, rgba(239,246,255,.43) 45%, transparent 68% ), /* beli odsjaj iza logoa */ radial-gradient( ellipse at 50% 26%, rgba(255,255,255,.93) 0%, rgba(255,255,255,.47) 31%, rgba(240,245,255,.18) 56%, transparent 73% ), /* hladni plavi haze levo */ radial-gradient( ellipse at -8% 54%, rgba(189,226,255,.26) 0%, rgba(204,230,255,.12) 36%, transparent 62% ), /* mlečni sjaj desno */ radial-gradient( ellipse at 105% 39%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.30) 27%, transparent 54% ), /* veoma blag ljubičasti ton dole */ radial-gradient( ellipse at 78% 105%, rgba(233,211,255,.25) 0%, rgba(202,190,255,.12) 37%, transparent 66% ), /* osnovna mlečna površina */ linear-gradient( 145deg, rgba(255,255,255,.985) 0%, rgba(248,251,255,.95) 42%, rgba(242,247,255,.91) 73%, rgba(249,247,255,.93) 100% ) !important; border: 1px solid rgba(181,197,232,.68) !important; outline: 1px solid rgba(255,255,255,1) !important; outline-offset: -4px !important; box-shadow: /* meka dubina */ 0 26px 58px rgba(48,61,103,.10), /* veoma blag hladni halo */ 0 0 25px rgba(145,187,255,.12), /* minimalan ljubičasti halo */ 0 16px 31px rgba(142,105,255,.07), /* jaka gornja svetla ivica */ inset 0 5px 4px rgba(255,255,255,1), /* jaka leva svetla ivica */ inset 5px 0 4px rgba(255,255,255,1), /* hladna desna ivica */ inset -4px 0 5px rgba(187,204,248,.30), /* blago plava donja ivica */ inset 0 -5px 6px rgba(149,169,230,.20), /* unutrašnja staklena linija */ inset 0 0 0 2px rgba(255,255,255,.58), /* mlečna unutrašnja magla */ inset 0 0 66px rgba(255,255,255,.63), /* spoljni beli rub */ 0 0 0 1px rgba(255,255,255,.94) !important; } /* ========================================================= BELI PRESJAJ RASUT PO CELOJ KARTICI ========================================================= */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: /* jaka bela linija gore */ linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 2%, rgba(255,255,255,.10) 7%, transparent 14% ), /* jaka bela linija levo */ linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.50) 2%, rgba(255,255,255,.08) 7%, transparent 14% ), /* široka dijagonalna refleksija */ linear-gradient( 128deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.29) 16%, rgba(255,255,255,.07) 32%, transparent 47% ), /* beli haze po sredini */ radial-gradient( ellipse at 52% 46%, rgba(255,255,255,.38) 0%, rgba(255,255,255,.13) 48%, transparent 74% ), /* odsjaj desno gore */ radial-gradient( ellipse at 93% 25%, rgba(255,255,255,.79) 0%, rgba(255,255,255,.18) 29%, transparent 51% ), /* svetle tačke */ radial-gradient( circle at 87% 31%, rgba(255,255,255,1) 0 3px, rgba(255,255,255,.40) 4px, transparent 10px ), radial-gradient( circle at 86% 48%, rgba(255,255,255,.95) 0 2px, rgba(255,255,255,.23) 3px, transparent 7px ), radial-gradient( circle at 91% 58%, rgba(255,255,255,.86) 0 1.5px, transparent 5px ) !important; opacity:.96 !important; pointer-events:none !important; z-index:3 !important; } /* ========================================================= UKLANJA JAK LJUBIČASTI GLOW PRI DNU ========================================================= */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:10% !important; right:10% !important; bottom:-38px !important; width:auto !important; height:105px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(255,255,255,.40) 0%, rgba(219,210,255,.20) 28%, rgba(164,177,255,.10) 50%, transparent 76% ) !important; filter:blur(24px) !important; opacity:.72 !important; pointer-events:none !important; z-index:1 !important; } /* ========================================================= PROZORSKE KOCKICE — BELJE, MEKŠE I MANJE PLAVE ========================================================= */ .products-grid .product-card .window-reflection{ opacity:.67 !important; filter: blur(.6px) drop-shadow( 0 5px 13px rgba(255,255,255,.84) ) !important; } .products-grid .product-card .window-reflection span{ background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 40%, rgba(235,241,255,.55) 72%, rgba(217,228,250,.24) 100% ) !important; border: 1px solid rgba(255,255,255,1) !important; box-shadow: inset 3px 3px 4px rgba(255,255,255,1), inset -3px -3px 5px rgba(191,208,244,.12), 0 4px 13px rgba(255,255,255,.65) !important; } /* ========================================================= LOGO KOCKA — MLEČNI SJAJ KAO NA REFERENCI ========================================================= */ .products-grid .product-logo{ background: radial-gradient( ellipse at 32% 18%, rgba(255,255,255,1) 0%, rgba(255,255,255,.83) 32%, transparent 65% ), linear-gradient( 145deg, rgba(255,255,255,.98), rgba(244,247,253,.88) ) !important; border: 1px solid rgba(255,255,255,.98) !important; box-shadow: 0 21px 43px rgba(59,72,114,.12), 0 0 22px rgba(255,255,255,.88), inset 0 4px 4px rgba(255,255,255,1), inset 4px 0 4px rgba(255,255,255,.96), inset -3px 0 4px rgba(190,205,240,.22), inset 0 -4px 5px rgba(164,181,223,.13), inset 0 0 28px rgba(255,255,255,.69) !important; } /* SADRŽAJ OSTAJE IZNAD SJAJA */ .products-grid .product-card .discount, .products-grid .product-card .product-logo, .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* ========================================================= KORAK 9 — SIVKASTA POZADINA + VIDLJIVI ODSJAJI OVAJ BLOK MORA BITI POSLEDNJI ========================================================= */ /* POZADINA SEKCIJE */ .products{ background: radial-gradient( circle at 12% 20%, rgba(255,255,255,.98), transparent 30% ), radial-gradient( circle at 85% 75%, rgba(224,229,242,.55), transparent 38% ), linear-gradient( 180deg, #eef1f7 0%, #f3f5f9 48%, #e9edf4 100% ) !important; } /* KARTICA — PROVIDNIJE MLEČNO STAKLO */ .products-grid .product-card{ background: radial-gradient( ellipse at 50% -10%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.66) 31%, transparent 62% ), radial-gradient( ellipse at -10% 48%, rgba(190,225,255,.30) 0%, rgba(190,225,255,.10) 40%, transparent 65% ), radial-gradient( ellipse at 105% 82%, rgba(224,206,255,.28) 0%, rgba(202,187,255,.12) 42%, transparent 70% ), linear-gradient( 145deg, rgba(255,255,255,.78) 0%, rgba(247,250,255,.64) 48%, rgba(240,244,252,.57) 100% ) !important; border: 1px solid rgba(171,187,221,.72) !important; outline: 1px solid rgba(255,255,255,.98) !important; outline-offset: -4px !important; backdrop-filter: blur(36px) saturate(145%) !important; -webkit-backdrop-filter: blur(36px) saturate(145%) !important; box-shadow: 0 26px 58px rgba(65,76,111,.13), 0 0 0 1px rgba(255,255,255,.88), 0 0 30px rgba(162,192,255,.18), inset 0 6px 5px rgba(255,255,255,1), inset 6px 0 5px rgba(255,255,255,.96), inset -5px 0 6px rgba(173,189,235,.32), inset 0 -6px 7px rgba(147,161,215,.24), inset 0 0 0 2px rgba(255,255,255,.45), inset 0 0 54px rgba(255,255,255,.48) !important; } /* ODSJAJ PREKO CELE KARTICE */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: linear-gradient( 180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.44) 2%, rgba(255,255,255,.08) 8%, transparent 15% ), linear-gradient( 90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.38) 2%, rgba(255,255,255,.06) 8%, transparent 15% ), linear-gradient( 125deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.31) 17%, transparent 40% ), radial-gradient( ellipse at 88% 30%, rgba(255,255,255,.76) 0%, rgba(255,255,255,.16) 31%, transparent 55% ), radial-gradient( circle at 86% 40%, rgba(255,255,255,1) 0 3px, rgba(255,255,255,.30) 5px, transparent 11px ), radial-gradient( circle at 91% 53%, rgba(255,255,255,.95) 0 2px, transparent 7px ) !important; opacity:1 !important; pointer-events:none !important; z-index:3 !important; } /* MINIMALAN GLOW DOLE */ .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:13% !important; right:13% !important; bottom:-35px !important; height:95px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(221,210,255,.25) 0%, rgba(162,174,235,.12) 46%, transparent 75% ) !important; filter:blur(22px) !important; opacity:.72 !important; pointer-events:none !important; z-index:1 !important; } /* ========================================================= KOCKICE KAO PRAVI ODSJAJ PROZORA ========================================================= */ .products-grid .product-card .window-reflection{ position:absolute !important; top:-28px !important; left:-22px !important; width:185px !important; height:250px !important; display:grid !important; grid-template-columns: 62px 62px !important; grid-template-rows: 78px 78px 78px !important; gap: 10px 11px !important; transform: rotate(16deg) skewX(-8deg) !important; transform-origin: top left !important; opacity:.86 !important; filter: blur(.55px) drop-shadow( 0 5px 14px rgba(255,255,255,.80) ) !important; pointer-events:none !important; z-index:4 !important; background:transparent !important; -webkit-mask-image: linear-gradient( 135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 49%, rgba(0,0,0,.48) 76%, transparent 100% ) !important; mask-image: linear-gradient( 135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 49%, rgba(0,0,0,.48) 76%, transparent 100% ) !important; } .products-grid .product-card .window-reflection span{ display:block !important; width:62px !important; height:78px !important; border-radius:2px !important; background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.84) 38%, rgba(220,230,250,.45) 100% ) !important; border: 1px solid rgba(255,255,255,.92) !important; box-shadow: inset 3px 3px 4px rgba(255,255,255,1), inset -3px -3px 5px rgba(171,190,230,.16), 0 4px 14px rgba(255,255,255,.62) !important; } /* GASI SVE STARE LINIJE REFLEKSIJE */ .products-grid .product-card .window-reflection::before, .products-grid .product-card .window-reflection::after{ content:none !important; } /* SADRŽAJ IZNAD SVEGA */ .products-grid .product-card .discount, .products-grid .product-card .product-logo, .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* ========================================================= FINALNI ODSJAJ — PROZOR + SJAJNE IVICE MORA BITI POSLEDNJI BLOK U card.css ========================================================= */ /* SIVKASTA POZADINA DA SE BELO STAKLO VIDI */ .products{ background: radial-gradient( circle at 12% 20%, rgba(255,255,255,.94), transparent 32% ), radial-gradient( circle at 88% 72%, rgba(218,225,240,.58), transparent 38% ), linear-gradient( 180deg, #e9edf4 0%, #f2f4f8 48%, #e6eaf2 100% ) !important; } /* ========================================================= KARTICA — ČISTO MLEČNO STAKLO ========================================================= */ .products-grid .product-card{ position:relative !important; isolation:isolate !important; overflow:hidden !important; border: 1px solid rgba(164,183,223,.76) !important; outline: 1px solid rgba(255,255,255,1) !important; outline-offset: -4px !important; background: radial-gradient( ellipse at 50% -10%, rgba(255,255,255,1) 0%, rgba(255,255,255,.82) 31%, transparent 63% ), radial-gradient( ellipse at -9% 48%, rgba(182,220,255,.27) 0%, rgba(190,221,255,.10) 41%, transparent 66% ), radial-gradient( ellipse at 105% 86%, rgba(220,203,255,.20) 0%, transparent 66% ), linear-gradient( 145deg, rgba(255,255,255,.84) 0%, rgba(248,250,255,.73) 48%, rgba(239,244,252,.67) 100% ) !important; backdrop-filter: blur(34px) saturate(135%) !important; -webkit-backdrop-filter: blur(34px) saturate(135%) !important; box-shadow: 0 27px 62px rgba(50,63,105,.14), 0 0 0 1px rgba(255,255,255,.90), 0 0 30px rgba(146,184,255,.16), inset 0 7px 5px rgba(255,255,255,1), inset 7px 0 5px rgba(255,255,255,1), inset -5px 0 6px rgba(165,185,235,.34), inset 0 -6px 7px rgba(142,157,215,.25), inset 0 0 0 2px rgba(255,255,255,.55), inset 0 0 55px rgba(255,255,255,.50) !important; } /* ========================================================= GASI STARE PSEUDO-EFEKTE KOJI PRAVE FLEKE ========================================================= */ .products-grid .product-card::before{ content:none !important; } .products-grid .product-card::after{ content:"" !important; position:absolute !important; left:10% !important; right:10% !important; bottom:-34px !important; width:auto !important; height:90px !important; border-radius:50% !important; background: radial-gradient( ellipse at center, rgba(218,208,255,.22), rgba(157,174,229,.09) 47%, transparent 76% ) !important; filter:blur(23px) !important; opacity:.65 !important; pointer-events:none !important; z-index:1 !important; } /* ========================================================= PRAVI PRESJAJ PREKO CELE KARTICE ========================================================= */ .products-grid .product-card .glass-reflection{ display:block !important; position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; border-radius:inherit !important; opacity:1 !important; transform:none !important; filter:none !important; background: /* svetla gornja ivica */ linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.60) 1.8%, rgba(255,255,255,.10) 6%, transparent 13% ), /* svetla leva ivica */ linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.52) 1.8%, rgba(255,255,255,.08) 6%, transparent 13% ), /* veliki dijagonalni presjaj */ linear-gradient( 126deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.28) 17%, rgba(255,255,255,.07) 31%, transparent 46% ), /* beli odsjaj sa desne strane */ radial-gradient( ellipse at 101% 36%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.19) 31%, transparent 55% ), /* svetle tačkice */ radial-gradient( circle at 87% 34%, rgba(255,255,255,1) 0 3px, rgba(255,255,255,.35) 4px, transparent 10px ), radial-gradient( circle at 88% 49%, rgba(255,255,255,.96) 0 2px, transparent 7px ), radial-gradient( circle at 92% 57%, rgba(255,255,255,.84) 0 1.5px, transparent 5px ) !important; pointer-events:none !important; z-index:4 !important; } .products-grid .product-card .glass-reflection::before, .products-grid .product-card .glass-reflection::after{ content:none !important; } /* ========================================================= PRAVE KOCKICE 2 × 3 — KAO PROZOR NA REFERENCI ========================================================= */ .products-grid .product-card .window-reflection{ position:absolute !important; top:9px !important; left:13px !important; width:102px !important; height:170px !important; display:grid !important; grid-template-columns: 44px 44px !important; grid-template-rows: 49px 49px 49px !important; gap: 7px 8px !important; margin:0 !important; padding:0 !important; overflow:visible !important; border-radius:0 !important; background:transparent !important; transform: perspective(520px) rotateY(7deg) rotateZ(13deg) skewX(-5deg) !important; transform-origin: top left !important; opacity:.69 !important; filter: blur(.35px) drop-shadow( 0 5px 13px rgba(255,255,255,.82) ) !important; pointer-events:none !important; z-index:5 !important; mask-image: linear-gradient( 140deg, #000 0%, rgba(0,0,0,.98) 52%, rgba(0,0,0,.60) 78%, transparent 100% ) !important; -webkit-mask-image: linear-gradient( 140deg, #000 0%, rgba(0,0,0,.98) 52%, rgba(0,0,0,.60) 78%, transparent 100% ) !important; } .products-grid .product-card .window-reflection::before, .products-grid .product-card .window-reflection::after{ content:none !important; } .products-grid .product-card .window-reflection span{ display:block !important; width:44px !important; height:49px !important; margin:0 !important; padding:0 !important; border-radius:2px !important; background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 38%, rgba(225,235,255,.54) 74%, rgba(199,218,250,.25) 100% ) !important; border: 1px solid rgba(255,255,255,.98) !important; box-shadow: inset 2px 2px 3px rgba(255,255,255,1), inset -2px -2px 4px rgba(172,196,240,.15), 0 4px 12px rgba(255,255,255,.58) !important; } /* ========================================================= POPUST MORA OSTATI GORE DESNO ========================================================= */ /* ========================================================= SADRŽAJ IZNAD ODSJAJA ========================================================= */ .products-grid .product-card .product-logo, .products-grid .product-card .product-title, .products-grid .product-card .product-description, .products-grid .product-card .product-tags, .products-grid .product-card .product-divider, .products-grid .product-card .price, .products-grid .product-card .buy-btn{ position:relative !important; z-index:10 !important; } /* PROZORSKI ODSJAJ — POTPUNO BELI */ .products-grid .product-card .window-reflection{ opacity:.82 !important; filter: blur(.35px) drop-shadow(0 5px 14px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(255,255,255,.65)) !important; } .products-grid .product-card .window-reflection span{ background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 45%, rgba(255,255,255,.88) 100% ) !important; border: 1px solid rgba(255,255,255,1) !important; box-shadow: inset 3px 3px 4px rgba(255,255,255,1), inset -2px -2px 4px rgba(255,255,255,.72), 0 5px 15px rgba(255,255,255,.86), 0 0 20px rgba(255,255,255,.66) !important; } /* ========================================================= SIVKASTO-PLAVA POZADINA KARTICA DA SE BELI ODSJAJI VIDE ========================================================= */ .products-grid .product-card{ background: /* belo svetlo gore */ radial-gradient( ellipse at 50% -8%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 28%, transparent 58% ), /* plavi ton levo */ radial-gradient( ellipse at -8% 48%, rgba(173,214,255,.34) 0%, rgba(173,214,255,.16) 38%, transparent 66% ), /* hladna sivkasta magla u sredini */ radial-gradient( ellipse at 48% 48%, rgba(234,240,250,.72) 0%, rgba(220,229,243,.38) 46%, transparent 75% ), /* veoma blag ljubičasti ton dole desno */ radial-gradient( ellipse at 108% 91%, rgba(213,197,255,.25) 0%, rgba(194,185,247,.12) 41%, transparent 70% ), /* osnovna sivkasto-plava površina */ linear-gradient( 145deg, #eef3fb 0%, #e7edf7 46%, #dfe7f3 74%, #e9e8f5 100% ) !important; border: 1px solid rgba(151,173,216,.78) !important; outline: 1px solid rgba(255,255,255,.96) !important; outline-offset: -4px !important; box-shadow: 0 27px 62px rgba(49,65,108,.16), 0 0 28px rgba(133,178,255,.17), inset 0 6px 5px rgba(255,255,255,1), inset 6px 0 5px rgba(255,255,255,.98), inset -5px 0 6px rgba(147,169,220,.38), inset 0 -6px 7px rgba(137,151,203,.28), inset 0 0 0 2px rgba(255,255,255,.48), inset 0 0 54px rgba(255,255,255,.38), 0 0 0 1px rgba(255,255,255,.82) !important; } /* BELI PROZORČIĆI — VIDLJIVI NA PLAVOJ POZADINI */ .products-grid .product-card .window-reflection{ opacity:.90 !important; filter: blur(.25px) drop-shadow(0 5px 12px rgba(255,255,255,.95)) drop-shadow(0 0 15px rgba(255,255,255,.70)) !important; } .products-grid .product-card .window-reflection span{ background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 58%, rgba(246,249,255,.94) 100% ) !important; border: 1px solid rgba(255,255,255,1) !important; box-shadow: inset 2px 2px 3px rgba(255,255,255,1), inset -2px -2px 4px rgba(220,230,250,.42), 0 4px 12px rgba(255,255,255,.82), 0 0 17px rgba(255,255,255,.58) !important; } /* ================================================== SJAJ OKO LOGO KOCKE — FINAL OVERRIDE NALEPI NA SAM KRAJ card.css ================================================== */ .products-grid .product-card .product-logo{ position:relative !important; border: 1px solid rgba(255,255,255,.98) !important; box-shadow: 0 22px 42px rgba(55,69,112,.14), 0 0 24px rgba(255,255,255,.88), inset 0 4px 4px rgba(255,255,255,1), inset 4px 0 4px rgba(255,255,255,.98), inset -3px 0 4px rgba(178,197,238,.26), inset 0 -4px 5px rgba(154,174,218,.16), inset 0 0 28px rgba(255,255,255,.68) !important; } /* presjaj preko same logo kocke */ .products-grid .product-logo::before{ content:"" !important; position:absolute !important; inset:7px !important; border-radius:inherit !important; background: radial-gradient( circle at 25% 18%, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 14%, rgba(255,255,255,.92) 28%, rgba(255,255,255,.58) 45%, rgba(255,255,255,.18) 62%, transparent 78% ), linear-gradient( 145deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.22) 35%, transparent 58% ) !important; opacity:1 !important; pointer-events:none !important; } /* zadržava senku ispod kocke */ .products-grid .product-logo::after{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; border:2px solid rgba(255,255,255,.96) !important; box-shadow: inset 0 3px 3px rgba(255,255,255,1), inset 3px 0 3px rgba(255,255,255,1), inset -3px 0 5px rgba(215,225,255,.72), inset 0 -3px 6px rgba(205,215,255,.62), inset 0 0 26px rgba(255,255,255,.48), 0 0 12px rgba(255,255,255,1), 0 0 24px rgba(255,255,255,.74) !important; background:transparent !important; pointer-events:none !important; } /* logo ostaje iznad presjaja */ .products-grid .product-card .product-logo img{ position:relative !important; z-index:5 !important; } /* ================================================== FINALNO SREĐIVANJE PROZORSKIH KVADRATIĆA NE MENJA POZADINU KARTICE ================================================== */ .products-grid .product-card .window-reflection{ position:absolute !important; top:8px !important; left:8px !important; width:128px !important; height:190px !important; display:grid !important; grid-template-columns:48px 48px !important; grid-template-rows:54px 54px 54px !important; gap:8px !important; margin:0 !important; padding:0 !important; overflow:visible !important; background:transparent !important; transform: rotate(15deg) skewX(-7deg) !important; transform-origin:top left !important; opacity:.88 !important; filter: blur(.3px) drop-shadow(0 5px 12px rgba(255,255,255,.78)) !important; pointer-events:none !important; z-index:4 !important; -webkit-mask-image: linear-gradient( 135deg, #000 0%, rgba(0,0,0,.96) 52%, rgba(0,0,0,.55) 78%, transparent 100% ) !important; mask-image: linear-gradient( 135deg, #000 0%, rgba(0,0,0,.96) 52%, rgba(0,0,0,.55) 78%, transparent 100% ) !important; } /* uklanja stare linije i pseudo-refleksije */ .products-grid .product-card .window-reflection::before, .products-grid .product-card .window-reflection::after{ content:none !important; } /* sami kvadratići */ .products-grid .product-card .window-reflection span{ display:block !important; width:48px !important; height:54px !important; margin:0 !important; padding:0 !important; border:none !important; outline:none !important; border-radius:2px !important; background: linear-gradient( 145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 52%, rgba(245,248,255,.88) 100% ) !important; box-shadow: inset 2px 2px 3px rgba(255,255,255,1), inset -2px -2px 3px rgba(220,230,248,.18), 0 4px 11px rgba(255,255,255,.65), 0 0 14px rgba(255,255,255,.42) !important; } /* ================================================== ISPRAVKA — 6 ODVOJENIH BELIH PROZORČIĆA NE MENJA POZADINU KARTICE ================================================== */ .products-grid .product-card .window-reflection{ opacity:.78 !important; filter: blur(.25px) drop-shadow(0 2px 4px rgba(255,255,255,.35)) !important; } /* svaki prozorčić ostaje odvojen */ .products-grid .product-card .window-reflection span{ display:block !important; width:48px !important; height:54px !important; background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.90) 58%, rgba(238,244,255,.62) 100% ) !important; border:none !important; outline:none !important; border-radius:2px !important; box-shadow: inset 2px 2px 3px rgba(255,255,255,1), inset -2px -2px 3px rgba(206,220,247,.16), 0 2px 5px rgba(255,255,255,.30) !important; opacity:.92 !important; } /* ================================================== BELI SJAJ OKO IVICA KARTICE NE MENJA POZADINU ================================================== */ .products-grid .product-card{ border: 1px solid rgba(255,255,255,.92) !important; outline: 1px solid rgba(255,255,255,.98) !important; outline-offset: -3px !important; box-shadow: /* osnovna dubina */ 0 26px 58px rgba(53,66,108,.12), /* beli glow oko cele kartice */ 0 0 18px rgba(255,255,255,.92), 0 0 34px rgba(255,255,255,.52), /* hladni vrlo blag halo */ 0 0 42px rgba(202,220,255,.22), /* jaka gornja bela ivica */ inset 0 6px 5px rgba(255,255,255,1), /* jaka leva bela ivica */ inset 6px 0 5px rgba(255,255,255,1), /* bela desna ivica */ inset -5px 0 6px rgba(255,255,255,.86), /* bela donja ivica */ inset 0 -5px 7px rgba(255,255,255,.82), /* unutrašnji svetli prsten */ inset 0 0 0 2px rgba(255,255,255,.68), /* mlečni sjaj unutar ivica */ inset 0 0 38px rgba(255,255,255,.34), /* dodatna spoljna bela linija */ 0 0 0 1px rgba(255,255,255,.95) !important; } /* dodatni sjaj samo uz rubove */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.45) 2%, transparent 9% ), linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.42) 2%, transparent 9% ), linear-gradient( 270deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.20) 2%, transparent 8% ), linear-gradient( 0deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.18) 2%, transparent 8% ) !important; pointer-events:none !important; z-index:3 !important; } /* sadržaj ostaje iznad sjaja */ .products-grid .product-card > *{ position:relative !important; z-index:5 !important; } /* ================================================== BELI SJAJ OKO LOGO KOCKE NE MENJA POZADINU NI VELIČINU ================================================== */ .products-grid .product-card .product-logo{ position:relative !important; border: 1px solid rgba(255,255,255,.96) !important; outline: 1px solid rgba(255,255,255,.92) !important; outline-offset: -3px !important; box-shadow: /* osnovna dubina */ 0 20px 42px rgba(54,67,108,.13), /* beli glow oko cele logo kocke */ 0 0 16px rgba(255,255,255,.95), 0 0 28px rgba(255,255,255,.58), /* jaka gornja bela ivica */ inset 0 5px 4px rgba(255,255,255,1), /* jaka leva bela ivica */ inset 5px 0 4px rgba(255,255,255,1), /* bela desna ivica */ inset -4px 0 5px rgba(255,255,255,.82), /* bela donja ivica */ inset 0 -4px 6px rgba(255,255,255,.78), /* unutrašnji svetli prsten */ inset 0 0 0 2px rgba(255,255,255,.62), /* mlečni sjaj unutar kocke */ inset 0 0 26px rgba(255,255,255,.42), /* dodatna spoljna linija */ 0 0 0 1px rgba(255,255,255,.92) !important; } /* sjaj samo uz rubove logo kocke */ .products-grid .product-card .product-logo::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.44) 4%, transparent 17% ), linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.40) 4%, transparent 17% ), linear-gradient( 270deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.16) 4%, transparent 15% ), linear-gradient( 0deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.15) 4%, transparent 15% ) !important; pointer-events:none !important; z-index:3 !important; } /* prava ikonica ostaje iznad sjaja */ .products-grid .product-card .product-logo img{ position:relative !important; z-index:5 !important; } /* OŠTRIJI SJAJ KOCKICA — BEZ BELE MRLJE */ .products-grid .product-card .window-reflection{ opacity: .88 !important; filter: none !important; } .products-grid .product-card .window-reflection span{ background: linear-gradient( 145deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 48%, rgba(240,246,255,.58) 100% ) !important; border: 1px solid rgba(255,255,255,.92) !important; box-shadow: inset 1px 1px 2px rgba(255,255,255,1), inset -1px -1px 2px rgba(210,225,250,.18), 0 1px 2px rgba(255,255,255,.75), 0 0 3px rgba(255,255,255,.55) !important; } /* SKLANJA BELE TAČKICE SA DESNE STRANE KARTICE */ .products-grid .product-card .sparkle, .products-grid .product-card .sparkles, .products-grid .product-card .light-dot, .products-grid .product-card .glow-dot, .products-grid .product-card .particle{ display: none !important; } .products-grid .product-card::after{ content: none !important; display: none !important; } /* SKLANJA SAMO TRI BELE TAČKICE DESNO */ .products-grid .product-card .glass-reflection{ background: linear-gradient( 180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.60) 1.8%, rgba(255,255,255,.10) 6%, transparent 13% ), linear-gradient( 90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.52) 1.8%, rgba(255,255,255,.08) 6%, transparent 13% ), linear-gradient( 126deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.28) 17%, rgba(255,255,255,.07) 31%, transparent 46% ), radial-gradient( ellipse at 101% 36%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.19) 31%, transparent 55% ) !important; } /* ========================================== LOGO KOCKA - GLASS BUBBLE EFEKAT ========================================== */ .products-grid .product-logo{ overflow: hidden !important; box-shadow: 0 24px 50px rgba(60,72,120,.12), 0 0 18px rgba(255,255,255,.95), inset 0 5px 5px rgba(255,255,255,1), inset 5px 0 5px rgba(255,255,255,.96), inset -5px 0 6px rgba(218,226,255,.65), inset 0 -5px 7px rgba(205,215,255,.55), inset 0 0 34px rgba(255,255,255,.50) !important; } /* veliki beli odsjaj kao balon */ .products-grid .product-logo::before{ content:"" !important; position:absolute !important; inset:10px !important; border-radius:inherit !important; background: radial-gradient( circle at 28% 20%, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 16%, rgba(255,255,255,.78) 32%, rgba(255,255,255,.30) 52%, transparent 76% ) !important; opacity:1 !important; pointer-events:none !important; } .products-grid .product-logo::after{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; border:1px solid rgba(255,255,255,.92) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 0 20px rgba(255,255,255,.35), 0 0 14px rgba(255,255,255,.40) !important; background:transparent !important; pointer-events:none !important; } /* JOŠ JAČI BUBBLE SJAJ OKO LOGO KOCKE */ .products-grid .product-logo{ box-shadow: 0 24px 50px rgba(60,72,120,.12), 0 0 14px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,.90), 0 0 55px rgba(255,255,255,.62), inset 0 6px 6px rgba(255,255,255,1), inset 6px 0 6px rgba(255,255,255,1), inset -6px 0 8px rgba(220,228,255,.78), inset 0 -6px 9px rgba(210,220,255,.68), inset 0 0 42px rgba(255,255,255,.66) !important; } /* POPUST - GORNJI DESNI UGAO */ /* FINALNO — POPUST SKROZ GORE DESNO */ /* POPUST SKROZ U DESNI GORNJI UGAO */ /* KARTICA MORA BITI OSNOVA ZA POZICIONIRANJE */ .products-grid .product-card{ position:relative !important; } /* POPUST SKROZ U DESNOM GORNJEM UGLU */ .products-grid .product-card .discount, .products-grid .product-card .discount-badge, .products-grid .product-card .product-discount, .products-grid .product-card .sale-badge{ position:absolute !important; top:0 !important; right:0 !important; left:auto !important; bottom:auto !important; margin:0 !important; transform:none !important; z-index:9999 !important; } /* PRONAĐI KARTICU KOJA SADRŽI POPUST */ .products-grid :has(> [class*="discount"]){ position: relative !important; } /* POPUST SKROZ GORE DESNO */ .products-grid [class*="discount"]{ position: absolute !important; top: 18px !important; right: 18px !important; left: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; translate: none !important; z-index: 9999 !important; } .products-grid .product-card > .discount{ position:absolute !important; top:22px !important; right:22px !important; left:auto !important; bottom:auto !important; margin:0 !important; transform:none !important; translate:none !important; z-index:99999 !important; } .products-grid .product-card .price{ width:100% !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; align-self:stretch !important; margin:0 0 20px 0 !important; padding:0 6px !important; text-align:left !important; gap:6px !important; } .products-grid .product-card .price span, .products-grid .product-card .price strong{ align-self:flex-start !important; margin-left:0 !important; margin-right:auto !important; text-align:left !important; } /* Poravnanje opisa, tagova i cena na svim karticama */ .products-grid .product-tags{ min-height:44px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; } .products-grid .price{ margin-top:22px !important; } .products-grid .product-card:first-child .product-title{ white-space:nowrap !important; font-size:29px !important; letter-spacing:-1.2px !important; } .products-grid .product-card .buy-btn{ display:flex !important; align-items:center !important; justify-content:center !important; align-self:center !important; margin-left:auto !important; margin-right:auto !important; transform:translateY(-23px); } /* ================================================== HOVER REFLEKSIJA PREKO KARTICE ================================================== */ .products-grid .product-card{ position:relative !important; overflow:hidden !important; } /* svetlosna linija */ .products-grid .product-card::before{ content:"" !important; position:absolute !important; top:-35% !important; left:-55% !important; width:32% !important; height:180% !important; border-radius:50% !important; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.06) 20%, rgba(255,255,255,.30) 38%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.35) 62%, rgba(255,255,255,.06) 80%, transparent 100% ) !important; filter:blur(7px) !important; opacity:0 !important; transform:rotate(14deg) !important; pointer-events:none !important; z-index:25 !important; } /* pokretanje refleksije */ .products-grid .product-card:hover::before{ animation: licensoCardReflection 1.05s cubic-bezier(.22,.61,.36,1) both !important; } @keyframes licensoCardReflection{ 0%{ left:-55%; opacity:0; } 15%{ opacity:.35; } 50%{ opacity:.9; } 85%{ opacity:.35; } 100%{ left:130%; opacity:0; } } /* FINALNA HOVER REFLEKSIJA */ .products-grid .product-card{ position:relative !important; overflow:hidden !important; } .products-grid .product-card::before{ content:"" !important; position:absolute !important; top:-45% !important; left:-85% !important; width:42% !important; height:190% !important; border-radius:50% !important; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.05) 20%, rgba(255,255,255,.28) 42%, rgba(255,255,255,.82) 52%, rgba(255,255,255,.26) 62%, rgba(255,255,255,.04) 80%, transparent 100% ) !important; filter:blur(7px) !important; opacity:0 !important; transform:rotate(14deg) !important; pointer-events:none !important; z-index:50 !important; } .products-grid .product-card:hover::before{ animation: offerCardReflection 1.15s cubic-bezier(.22,.61,.36,1) forwards !important; } @keyframes offerCardReflection{ 0%{ left:-85%; opacity:0; } 15%{ opacity:.45; } 50%{ opacity:.82; } 88%{ opacity:.18; } 100%{ left:145%; opacity:0; } } /* ================================================== HOVER REFLEKSIJA — ISPRAVNO ================================================== */ .products-grid .product-card{ position:relative !important; overflow:hidden !important; } .products-grid .product-card > .card-hover-shine{ position:absolute !important; top:-40% !important; left:-70%; width:38% !important; height:190% !important; display:block !important; flex:none !important; margin:0 !important; padding:0 !important; border-radius:50% !important; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,.04) 18%, rgba(255,255,255,.28) 36%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.40) 62%, rgba(255,255,255,.05) 82%, transparent 100% ) !important; filter:blur(6px) !important; opacity:0; transform:rotate(15deg); pointer-events:none !important; z-index:999 !important; } .products-grid .product-card:hover > .card-hover-shine{ animation: licensoHoverShine 1.15s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes licensoHoverShine{ 0%{ left:-70%; opacity:0; } 12%{ opacity:.45; } 48%{ opacity:1; } 82%{ opacity:.35; } 100%{ left:145%; opacity:0; } } /* ================================================== HERO — TRI KARTICE, MENJANJE U MESTU ================================================== */ .hero-right{ position:relative !important; width:100% !important; height:700px !important; min-height:700px !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; overflow:visible !important; } .hero-slider{ position:relative !important; width:470px !important; height:700px !important; min-width:470px !important; min-height:700px !important; overflow:hidden !important; border-radius:40px !important; } /* SAMA KARTICA */ .hero-slider .hero-product-card{ position:absolute !important; inset:0 !important; width:470px !important; height:700px !important; min-height:700px !important; padding:34px 28px 27px !important; display:flex !important; flex-direction:column !important; align-items:center !important; overflow:hidden !important; border-radius:40px !important; text-align:center !important; background: radial-gradient( ellipse at -7% 46%, rgba(111,193,255,.16), transparent 52% ), radial-gradient( ellipse at 50% -8%, rgba(255,255,255,.96), transparent 55% ), radial-gradient( ellipse at 108% 84%, rgba(235,154,255,.23), transparent 73% ), linear-gradient( 145deg, rgba(255,255,255,.985), rgba(250,251,255,.91) ) !important; border:1px solid rgba(194,203,232,.62) !important; box-shadow: 0 32px 76px rgba(40,49,90,.10), inset 0 3px 2px rgba(255,255,255,1), inset -2px 0 3px rgba(213,196,255,.33), inset 0 -3px 4px rgba(126,142,255,.14) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:none !important; transition: opacity .65s ease, visibility .65s ease !important; z-index:1 !important; } .hero-slider .hero-product-card.active{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:none !important; z-index:3 !important; } .hero-slider .hero-product-card.enter, .hero-slider .hero-product-card.leave, .hero-slider .hero-product-card.exit{ transform:none !important; } /* POPUST */ .hero-slider .hero-product-card > .discount{ position:absolute !important; top:22px !important; right:22px !important; min-width:94px !important; height:48px !important; padding:0 19px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; color:#fff !important; font-size:17px !important; font-weight:700 !important; background:linear-gradient( 135deg, #654cff, #9233ed ) !important; box-shadow: 0 14px 29px rgba(104,59,242,.31), inset 0 1px 1px rgba(255,255,255,.42) !important; z-index:30 !important; } /* LOGO KOCKA */ .hero-slider .hero-product-card .product-logo{ position:relative !important; width:158px !important; height:158px !important; min-width:158px !important; min-height:158px !important; margin:42px auto 31px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; border-radius:46px !important; background:linear-gradient( 145deg, rgba(255,255,255,.99), rgba(248,249,253,.89) ) !important; border:1px solid rgba(213,219,238,.62) !important; box-shadow: 0 25px 54px rgba(44,54,102,.13), inset 0 2px 2px rgba(255,255,255,1) !important; z-index:10 !important; } .hero-slider .hero-product-card .product-logo img{ display:block !important; width:94px !important; height:94px !important; max-width:94px !important; max-height:94px !important; object-fit:contain !important; } /* NASLOV */ .hero-slider .hero-product-card .product-title{ width:100% !important; max-width:410px !important; margin:0 auto !important; color:#08101f !important; font-size:32px !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:-1.7px !important; text-align:center !important; } .hero-slider .hero-product-card:first-child .product-title{ font-size:29px !important; white-space:nowrap !important; } /* OPIS */ .hero-slider .hero-product-card .product-description{ width:100% !important; max-width:355px !important; min-height:68px !important; margin:17px auto 0 !important; color:#667187 !important; font-size:14.5px !important; line-height:1.58 !important; text-align:center !important; } /* TAGOVI */ .hero-slider .hero-product-card .product-tags{ width:100% !important; margin-top:19px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; } .hero-slider .hero-product-card .product-tag{ min-height:42px !important; padding:9px 11px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; border-radius:14px !important; background:rgba(255,255,255,.82) !important; color:#273149 !important; font-size:10.5px !important; font-weight:650 !important; white-space:nowrap !important; } /* LINIJA */ .hero-slider .hero-product-card .product-divider{ width:100% !important; height:1px !important; margin:22px 0 17px !important; background:rgba(122,133,166,.14) !important; } /* CENA */ .hero-slider .hero-product-card .price{ width:100% !important; margin:0 0 20px !important; padding:0 6px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:6px !important; text-align:left !important; } .hero-slider .hero-product-card .price span{ order:1 !important; color:#9299aa !important; font-size:17px !important; font-weight:600 !important; text-decoration:line-through !important; } .hero-slider .hero-product-card .price strong{ order:2 !important; color:#071020 !important; font-size:52px !important; line-height:.95 !important; font-weight:850 !important; letter-spacing:-2.9px !important; } /* DUGME */ .hero-slider .hero-product-card .buy-btn{ width:100% !important; height:64px !important; min-height:64px !important; margin-top:auto !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; border:none !important; border-radius:22px !important; color:#fff !important; font-size:19px !important; font-weight:800 !important; background:linear-gradient( 108deg, #5086ff, #982eff ) !important; box-shadow: 0 20px 43px rgba(99,72,255,.30) !important; transform:none !important; } /* KARTICA I DUGME OSTAJU MIRNI */ .products-grid .product-card, .products-grid .product-card:hover{ transform:none !important; } .products-grid .product-card .buy-btn, .products-grid .product-card:hover .buy-btn, .products-grid .product-card .buy-btn:hover, .products-grid .product-card .buy-btn:focus, .products-grid .product-card .buy-btn:active{ transform:translateY(-22px) !important; animation:none !important; } /* ================================================== HERO KARTICA — WOW SJAJ I SENKE ================================================== */ .hero-slider .hero-product-card{ isolation:isolate !important; border: 1px solid rgba(188,198,235,.78) !important; outline: 1px solid rgba(255,255,255,.92) !important; outline-offset:-4px !important; box-shadow: /* duboka senka ispod */ 0 42px 95px rgba(37,45,87,.16), /* ljubičasti halo */ 24px 28px 70px rgba(137,72,255,.17), /* plavi halo levo */ -25px 20px 65px rgba(71,155,255,.13), /* svetla spoljna ivica */ 0 0 0 1px rgba(255,255,255,.76), /* tanki glow oko cele kartice */ 0 0 38px rgba(116,128,255,.16), /* gornji sjaj */ inset 0 4px 3px rgba(255,255,255,1), /* levi sjaj */ inset 4px 0 4px rgba(255,255,255,.96), /* desni ljubičasti sjaj */ inset -4px 0 6px rgba(209,180,255,.38), /* donji plavi sjaj */ inset 0 -4px 7px rgba(104,137,255,.20), /* unutrašnji haze */ inset 0 0 58px rgba(255,255,255,.45) !important; } /* PLAVI GLOW LEVO */ .hero-slider .hero-product-card::before{ content:"" !important; position:absolute !important; left:-145px !important; top:110px !important; width:280px !important; height:440px !important; border-radius:50% !important; background: radial-gradient( ellipse, rgba(77,168,255,.26) 0%, rgba(96,147,255,.13) 38%, transparent 72% ) !important; filter:blur(28px) !important; opacity:.85 !important; pointer-events:none !important; z-index:0 !important; } /* LJUBIČASTO-ROZE SVETLO DOLE DESNO */ .hero-slider .hero-product-card::after{ content:"" !important; position:absolute !important; right:-170px !important; bottom:-145px !important; width:480px !important; height:430px !important; border-radius:50% !important; background: radial-gradient( ellipse at 35% 32%, rgba(255,255,255,.74) 0%, rgba(248,215,255,.36) 23%, rgba(226,151,255,.24) 43%, rgba(150,112,255,.14) 58%, rgba(92,147,255,.07) 70%, transparent 82% ) !important; filter:blur(18px) !important; opacity:.92 !important; pointer-events:none !important; z-index:0 !important; } /* SADRŽAJ OSTAJE IZNAD SJAJA */ .hero-slider .hero-product-card > *{ position:relative !important; z-index:5 !important; } /* POPUST MORA OSTATI U UGLU */ .hero-slider .hero-product-card > .discount{ position:absolute !important; z-index:20 !important; } /* DODATNI SJAJ OKO LOGO KOCKE */ .hero-slider .hero-product-card .product-logo{ box-shadow: 0 28px 58px rgba(42,52,105,.17), 0 12px 30px rgba(113,82,255,.10), 0 0 35px rgba(116,142,255,.11), inset 0 3px 3px rgba(255,255,255,1), inset 0 -3px 5px rgba(130,145,195,.07) !important; } /* SJAJ ISPOD DUGMETA */ .hero-slider .hero-product-card .buy-btn{ box-shadow: 0 26px 58px rgba(103,73,255,.38), 0 12px 30px rgba(75,139,255,.18), 0 0 30px rgba(132,70,255,.17), inset 0 1px 1px rgba(255,255,255,.48) !important; } /* ================================================== HERO KARTICE — EXTRA WOW SJAJ I SENKE ================================================== */ .hero-slider .hero-product-card{ isolation:isolate !important; border:1px solid rgba(190,198,235,.86) !important; outline:1px solid rgba(255,255,255,.94) !important; outline-offset:-4px !important; box-shadow: /* duboka glavna senka */ 0 46px 110px rgba(36,44,92,.18), /* ljubičasti halo desno */ 34px 30px 85px rgba(145,76,255,.20), /* plavi halo levo */ -30px 28px 80px rgba(73,155,255,.16), /* svetla spoljna kontura */ 0 0 0 1px rgba(255,255,255,.82), /* meki glow oko cele kartice */ 0 0 48px rgba(116,128,255,.19), /* gornja staklena ivica */ inset 0 4px 4px rgba(255,255,255,1), /* leva svetla ivica */ inset 4px 0 5px rgba(255,255,255,.98), /* desni ljubičasti sjaj */ inset -5px 0 8px rgba(211,178,255,.42), /* donji plavi sjaj */ inset 0 -5px 8px rgba(102,137,255,.23), /* unutrašnji haze */ inset 0 0 68px rgba(255,255,255,.48) !important; } /* PLAVI SJAJ SA LEVE STRANE */ .hero-slider .hero-product-card::before{ content:"" !important; position:absolute !important; left:-175px !important; top:80px !important; width:340px !important; height:500px !important; border-radius:50% !important; background: radial-gradient( ellipse, rgba(71,175,255,.30) 0%, rgba(92,150,255,.16) 36%, rgba(92,150,255,.06) 58%, transparent 76% ) !important; filter:blur(32px) !important; opacity:.95 !important; pointer-events:none !important; z-index:0 !important; } /* ROZE-LJUBIČASTI SJAJ DOLE DESNO */ .hero-slider .hero-product-card::after{ content:"" !important; position:absolute !important; right:-190px !important; bottom:-165px !important; width:540px !important; height:470px !important; border-radius:50% !important; background: radial-gradient( ellipse at 35% 30%, rgba(255,255,255,.78) 0%, rgba(249,217,255,.40) 22%, rgba(226,150,255,.27) 42%, rgba(163,106,255,.17) 57%, rgba(89,148,255,.08) 70%, transparent 83% ) !important; filter:blur(20px) !important; opacity:.96 !important; pointer-events:none !important; z-index:0 !important; } /* SADRŽAJ IZNAD SJAJA */ .hero-slider .hero-product-card > *{ position:relative !important; z-index:6 !important; } /* POPUST OSTAJE U GORNJEM DESNOM UGLU */ .hero-slider .hero-product-card > .discount{ position:absolute !important; z-index:30 !important; box-shadow: 0 18px 40px rgba(111,57,244,.40), 0 0 28px rgba(137,60,255,.28), inset 0 1px 1px rgba(255,255,255,.48) !important; } /* JAČI SJAJ OKO LOGO KOCKE */ .hero-slider .hero-product-card .product-logo{ box-shadow: 0 30px 68px rgba(42,52,105,.19), 0 14px 34px rgba(113,82,255,.12), 0 0 42px rgba(116,142,255,.14), inset 0 3px 3px rgba(255,255,255,1), inset 0 -3px 6px rgba(130,145,195,.08) !important; } /* BLAGI SJAJ OKO TAGOVA */ .hero-slider .hero-product-card .product-tag{ box-shadow: 0 12px 28px rgba(42,51,89,.09), 0 0 18px rgba(121,88,255,.07), inset 0 1px 0 rgba(255,255,255,1) !important; } /* JAČI WOW EFEKAT ISPOD DUGMETA */ .hero-slider .hero-product-card .buy-btn{ box-shadow: 0 30px 68px rgba(103,73,255,.42), 0 14px 34px rgba(75,139,255,.21), 0 0 38px rgba(132,70,255,.22), inset 0 1px 1px rgba(255,255,255,.50) !important; transform:none !important; } /* ================================================== HERO KARTICA — POMERENA ULEVO + EXTRA WOW ================================================== */ /* Pomeranje cele kartice ulevo */ .hero-right{ justify-content:flex-end !important; } .hero-slider{ transform:translateX(-55px) !important; } /* Još jača dubina i glow oko cele kartice */ .hero-slider .hero-product-card{ border:1px solid rgba(185,195,235,.92) !important; outline:1px solid rgba(255,255,255,.96) !important; outline-offset:-4px !important; box-shadow: 0 52px 120px rgba(35,43,91,.20), 34px 34px 95px rgba(146,73,255,.24), -34px 30px 90px rgba(69,157,255,.20), 0 0 0 1px rgba(255,255,255,.86), 0 0 58px rgba(116,128,255,.22), inset 0 5px 5px rgba(255,255,255,1), inset 5px 0 6px rgba(255,255,255,1), inset -6px 0 10px rgba(211,177,255,.48), inset 0 -6px 10px rgba(99,137,255,.28), inset 0 0 84px rgba(255,255,255,.54) !important; } /* Jači hladni plavi sjaj levo */ .hero-slider .hero-product-card::before{ left:-205px !important; top:55px !important; width:390px !important; height:540px !important; background: radial-gradient( ellipse, rgba(67,176,255,.36) 0%, rgba(88,151,255,.20) 34%, rgba(111,116,255,.08) 58%, transparent 78% ) !important; filter:blur(36px) !important; opacity:1 !important; } /* Jači ljubičasto-roze glow dole desno */ .hero-slider .hero-product-card::after{ right:-215px !important; bottom:-185px !important; width:590px !important; height:520px !important; background: radial-gradient( ellipse at 34% 28%, rgba(255,255,255,.84) 0%, rgba(251,220,255,.48) 20%, rgba(230,151,255,.32) 40%, rgba(163,102,255,.21) 57%, rgba(86,147,255,.10) 72%, transparent 84% ) !important; filter:blur(23px) !important; opacity:1 !important; } /* Logo kocka — jači premium sjaj */ .hero-slider .hero-product-card .product-logo{ border:1px solid rgba(210,217,241,.82) !important; outline:1px solid rgba(255,255,255,.82) !important; outline-offset:-3px !important; background: radial-gradient( circle at 32% 20%, rgba(255,255,255,1), rgba(255,255,255,.76) 36%, rgba(244,246,255,.82) 72% ) !important; box-shadow: 0 34px 78px rgba(40,50,105,.22), 0 16px 38px rgba(112,79,255,.15), -12px 14px 38px rgba(70,158,255,.12), 12px 14px 38px rgba(211,104,255,.12), 0 0 48px rgba(118,139,255,.18), inset 0 4px 4px rgba(255,255,255,1), inset 4px 0 5px rgba(255,255,255,.95), inset -4px 0 7px rgba(205,187,255,.24), inset 0 -4px 7px rgba(126,145,209,.10) !important; } /* Blagi glow iza samog logotipa */ .hero-slider .hero-product-card .product-logo::after{ content:"" !important; position:absolute !important; left:50% !important; top:50% !important; width:125px !important; height:125px !important; transform:translate(-50%,-50%) !important; border-radius:50% !important; background: radial-gradient( circle, rgba(123,116,255,.18), rgba(84,168,255,.10) 42%, transparent 72% ) !important; filter:blur(18px) !important; z-index:0 !important; pointer-events:none !important; } .hero-slider .hero-product-card .product-logo img{ position:relative !important; z-index:2 !important; filter: drop-shadow(0 14px 22px rgba(45,54,106,.18)) drop-shadow(0 0 14px rgba(117,102,255,.12)) !important; } /* Jači glow na dugmetu */ .hero-slider .hero-product-card .buy-btn{ box-shadow: 0 34px 78px rgba(103,73,255,.46), 0 16px 40px rgba(75,139,255,.25), 0 0 46px rgba(132,70,255,.26), inset 0 2px 2px rgba(255,255,255,.56) !important; } /* ================================================== HERO KARTICA — BOJE KAO U PONUDI ================================================== */ .hero-slider .hero-product-card{ background: radial-gradient( ellipse at -6% 44%, rgba(133,202,255,.17), transparent 52% ), radial-gradient( ellipse at 50% -10%, rgba(255,255,255,1), rgba(255,255,255,.35) 30%, transparent 58% ), radial-gradient( ellipse at 106% 93%, rgba(225,164,255,.13), rgba(144,157,255,.06) 48%, transparent 72% ), linear-gradient( 145deg, rgba(255,255,255,.985), rgba(250,251,255,.91) ) !important; box-shadow: 0 34px 82px rgba(40,49,91,.12), 0 15px 36px rgba(113,82,255,.06), inset 0 3px 3px rgba(255,255,255,1), inset 3px 0 3px rgba(255,255,255,.98), inset -3px 0 4px rgba(207,190,255,.22), inset 0 -3px 5px rgba(126,145,255,.12), inset 0 0 46px rgba(255,255,255,.46), 0 0 0 1px rgba(255,255,255,.72), 0 0 28px rgba(117,140,255,.10) !important; } /* Blaži plavi glow levo */ .hero-slider .hero-product-card::before{ left:-170px !important; top:80px !important; width:330px !important; height:480px !important; background: radial-gradient( ellipse, rgba(71,176,255,.20) 0%, rgba(88,151,255,.10) 38%, transparent 74% ) !important; filter:blur(32px) !important; opacity:.78 !important; } /* Mnogo blaži roze-ljubičasti glow */ .hero-slider .hero-product-card::after{ right:-180px !important; bottom:-165px !important; width:520px !important; height:450px !important; background: radial-gradient( ellipse at 34% 28%, rgba(255,255,255,.65) 0%, rgba(248,219,255,.20) 28%, rgba(220,151,255,.11) 46%, rgba(118,145,255,.05) 65%, transparent 79% ) !important; filter:blur(18px) !important; opacity:.72 !important; } /* Logo kocka isto nežnija kao u ponudi */ .hero-slider .hero-product-card .product-logo{ background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(247,248,253,.89) ) !important; box-shadow: 0 24px 54px rgba(44,54,102,.14), 0 8px 20px rgba(56,66,112,.06), 0 0 28px rgba(116,142,255,.08), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(127,139,187,.06) !important; } /* Gasi dodatni ljubičasti krug iza logotipa */ .hero-slider .hero-product-card .product-logo::after{ display:none !important; } /* ========================================= PONUDA — BLAGI PREMIUM TILT NA HOVER ========================================= */ .products-grid .product-card{ transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(0) !important; transform-origin:center bottom !important; transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s ease !important; } .products-grid .product-card:hover{ transform: perspective(1400px) rotateX(2.2deg) rotateY(-1deg) translateY(-8px) scale(1.004) !important; box-shadow: 0 42px 95px rgba(40,49,90,.14), 0 18px 42px rgba(113,82,255,.10), inset 0 3px 3px rgba(255,255,255,1), inset 3px 0 3px rgba(255,255,255,.98), inset -3px 0 4px rgba(207,190,255,.34), inset 0 -3px 5px rgba(126,145,255,.16) !important; } /* Dugme ostaje na istom mestu */ .products-grid .product-card .buy-btn, .products-grid .product-card:hover .buy-btn, .products-grid .product-card .buy-btn:hover{ transform:translateY(-22px) !important; } /* ========================================= HERO KARTICE — KVADRATIĆI GORE LEVO ========================================= */ /* VRATI HERO POPUST U GORNJI DESNI UGAO */ .hero-slider .hero-product-card > .discount{ position:absolute !important; top:22px !important; right:22px !important; left:auto !important; bottom:auto !important; min-width:94px !important; width:auto !important; height:48px !important; margin:0 !important; padding:0 19px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:999px !important; transform:none !important; z-index:30 !important; } /* ================================================== HERO KARTICA — IDENTIČAN IZGLED KAO KARTICE U PONUDI ================================================== */ .hero-slider .hero-product-card{ isolation:isolate !important; overflow:hidden !important; background: radial-gradient( ellipse at 0% 24%, rgba(255,255,255,.70) 0%, rgba(244,249,255,.23) 27%, transparent 48% ), radial-gradient( ellipse at 108% 84%, rgba(235,154,255,.16) 0%, rgba(200,117,255,.08) 30%, transparent 72% ), linear-gradient( 145deg, rgba(255,255,255,.985) 0%, rgba(250,251,255,.92) 73%, rgba(253,249,255,.88) 100% ) !important; border: 1px solid rgba(194,203,232,.62) !important; outline: 1px solid rgba(255,255,255,.90) !important; outline-offset:-3px !important; box-shadow: 0 24px 55px rgba(40,49,90,.09), inset 0 3px 2px rgba(255,255,255,1), inset 3px 0 2px rgba(255,255,255,.98), inset -2px 0 3px rgba(213,196,255,.30), inset 0 -3px 4px rgba(126,142,255,.12), 0 0 0 1px rgba(255,255,255,.65), 0 0 28px rgba(107,126,255,.08) !important; } /* ================================================== BELI SJAJ PO IVICAMA KAO U PONUDI ================================================== */ .hero-slider .hero-product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: linear-gradient( 90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.18) 3%, transparent 11%, transparent 89%, rgba(255,255,255,.18) 97%, rgba(255,255,255,.70) 100% ), linear-gradient( 180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.16) 3%, transparent 12%, transparent 88%, rgba(255,255,255,.18) 97%, rgba(255,255,255,.78) 100% ) !important; filter:none !important; opacity:1 !important; pointer-events:none !important; z-index:1 !important; } /* Blagi ljubičasti glow dole desno — kao u Ponudi */ .hero-slider .hero-product-card::after{ content:"" !important; position:absolute !important; right:-190px !important; bottom:-165px !important; width:520px !important; height:450px !important; border-radius:50% !important; background: radial-gradient( ellipse at 34% 28%, rgba(255,255,255,.62) 0%, rgba(248,219,255,.18) 27%, rgba(220,151,255,.09) 45%, rgba(118,145,255,.04) 64%, transparent 79% ) !important; filter:blur(18px) !important; opacity:.68 !important; pointer-events:none !important; z-index:0 !important; } /* ================================================== KVADRATIĆI — IDENTIČNI KAO U PONUDI ================================================== */ /* ================================================== SADRŽAJ OSTAJE IZNAD REFLEKSIJE ================================================== */ .hero-slider .hero-product-card > *{ position:relative !important; z-index:5 !important; } /* Popust ostaje apsolutno u uglu */ .hero-slider .hero-product-card > .discount{ position:absolute !important; top:22px !important; right:22px !important; left:auto !important; bottom:auto !important; z-index:30 !important; } /* Logo kocka kao u karticama Ponude */ .hero-slider .hero-product-card .product-logo{ background: linear-gradient( 145deg, rgba(255,255,255,.99), rgba(248,249,253,.89) ) !important; border: 1px solid rgba(213,219,238,.62) !important; box-shadow: 0 25px 54px rgba(44,54,102,.13), 0 8px 20px rgba(56,66,112,.05), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(127,139,187,.06) !important; } /* Gasi stare dodatne glow krugove oko logo ikonice */ .hero-slider .hero-product-card .product-logo::after{ content:none !important; display:none !important; } /* ================================================== HERO KARTICA — IVICE NA KRAJEVIMA + VIDLJIVI KVADRATIĆI ================================================== */ .hero-slider .hero-product-card{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.95); box-shadow: /* unutrašnji beli rub */ inset 0 40px 70px rgba(255,255,255,.95), inset 0 -40px 70px rgba(255,255,255,.95), inset 40px 0 70px rgba(255,255,255,.95), inset -40px 0 70px rgba(255,255,255,.95), /* spoljašnji glow */ 0 0 20px rgba(255,255,255,.7), 0 0 50px rgba(255,255,255,.45); } /* BELI HALO OKO HERO KARTICE */ .hero-slider .hero-product-card::after{ content:""; position:absolute; inset:-18px; border-radius:48px; pointer-events:none; z-index:-1; background: radial-gradient( circle at center, rgba(255,255,255,1) 0%, rgba(255,255,255,.92) 26%, rgba(255,255,255,.65) 52%, rgba(255,255,255,.28) 72%, transparent 88% ); filter:blur(30px); opacity:1; } /* UKLONI STARI OKVIR PREKO SREDINE */ .hero-slider .hero-product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: linear-gradient( 180deg, rgba(255,255,255,.96) 0, rgba(255,255,255,.22) 2px, transparent 12px ), linear-gradient( 90deg, rgba(255,255,255,.94) 0, rgba(255,255,255,.18) 2px, transparent 12px ), linear-gradient( 270deg, rgba(255,255,255,.56) 0, rgba(255,255,255,.10) 2px, transparent 10px ), linear-gradient( 0deg, rgba(255,255,255,.72) 0, rgba(255,255,255,.13) 2px, transparent 12px ) !important; opacity:1 !important; filter:none !important; pointer-events:none !important; z-index:3 !important; } /* KVADRATIĆI — VIŠE UNUTRA, DA SE LEPO VIDE */ /* SADRŽAJ IZNAD KVADRATIĆA */ .hero-slider .hero-product-card > *{ position:relative !important; z-index:5 !important; } .hero-slider .hero-product-card > .discount{ position:absolute !important; top:22px !important; right:22px !important; z-index:30 !important; } /* ================================================== HITAN FIX — VRATI MENJANJE HERO KARTICA U MESTU ================================================== */ .hero-slider{ position:relative !important; overflow:hidden !important; } /* Sve kartice su na potpuno istom mestu */ .hero-slider .hero-product-card{ position:absolute !important; inset:0 !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:none !important; transition: opacity .55s ease !important; z-index:1 !important; } /* Aktivna kartica */ .hero-slider .hero-product-card.active{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:none !important; z-index:5 !important; } /* Sledeća kartica mora odmah postati vidljiva */ .hero-slider .hero-product-card.enter{ opacity:1 !important; visibility:visible !important; pointer-events:none !important; transform:none !important; z-index:4 !important; } /* Prethodna kartica samo nestaje */ .hero-slider .hero-product-card.leave{ opacity:0 !important; visibility:visible !important; pointer-events:none !important; transform:none !important; z-index:6 !important; } /* Gasi sva stara pomeranja slidera */ .hero-slider .hero-product-card.is-main, .hero-slider .hero-product-card.is-next, .hero-slider .hero-product-card.is-hidden, .hero-slider .hero-product-card.is-leaving{ transform:none !important; } /* ================================================== HERO KARTICA — JAČI BELI SJAJ PO IVICAMA ================================================== */ .hero-slider .hero-product-card{ border:1px solid rgba(210,218,242,.72) !important; box-shadow: /* spoljašnja dubina */ 0 30px 72px rgba(40,49,90,.11), /* beli sjaj gore */ inset 0 5px 4px rgba(255,255,255,1), /* beli sjaj levo */ inset 5px 0 4px rgba(255,255,255,1), /* beli sjaj desno */ inset -5px 0 5px rgba(255,255,255,.92), /* beli sjaj dole */ inset 0 -5px 5px rgba(255,255,255,.94), /* tanak beli okvir spolja */ 0 0 0 2px rgba(255,255,255,.76), /* mekani beli halo oko cele kartice */ 0 0 34px rgba(255,255,255,.82), /* blagi plavo-ljubičasti glow ispod belog */ 0 0 54px rgba(112,130,255,.12) !important; } /* Precizan beli sjaj direktno uz ivice */ .hero-slider .hero-product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; background: /* gornja ivica */ linear-gradient( 180deg, rgba(255,255,255,1) 0px, rgba(255,255,255,.82) 2px, rgba(255,255,255,.26) 6px, transparent 18px ), /* leva ivica */ linear-gradient( 90deg, rgba(255,255,255,1) 0px, rgba(255,255,255,.78) 2px, rgba(255,255,255,.22) 7px, transparent 19px ), /* desna ivica */ linear-gradient( 270deg, rgba(255,255,255,.94) 0px, rgba(255,255,255,.68) 2px, rgba(255,255,255,.18) 7px, transparent 18px ), /* donja ivica */ linear-gradient( 0deg, rgba(255,255,255,.96) 0px, rgba(255,255,255,.70) 2px, rgba(255,255,255,.18) 7px, transparent 19px ) !important; opacity:1 !important; filter:none !important; pointer-events:none !important; z-index:3 !important; } /* Sadržaj mora ostati iznad sjaja */ .hero-slider .hero-product-card > *{ position:relative !important; z-index:5 !important; } .hero-slider .hero-product-card > .discount{ position:absolute !important; z-index:30 !important; } /* ================================================== HERO KARTICA — ULTRA BELI SJAJ PO IVICAMA ================================================== */ .hero-slider .hero-product-card{ box-shadow: 0 34px 78px rgba(40,49,90,.12), inset 0 8px 7px rgba(255,255,255,1), inset 8px 0 7px rgba(255,255,255,1), inset -8px 0 8px rgba(255,255,255,.98), inset 0 -8px 8px rgba(255,255,255,.98), 0 0 0 2px rgba(255,255,255,.94), 0 0 22px rgba(255,255,255,1), 0 0 48px rgba(255,255,255,.92), 0 0 72px rgba(115,132,255,.14) !important; } .hero-slider .hero-product-card::before{ background: linear-gradient( 180deg, rgba(255,255,255,1) 0, rgba(255,255,255,1) 3px, rgba(255,255,255,.72) 7px, rgba(255,255,255,.26) 14px, transparent 28px ), linear-gradient( 90deg, rgba(255,255,255,1) 0, rgba(255,255,255,1) 3px, rgba(255,255,255,.72) 7px, rgba(255,255,255,.24) 14px, transparent 28px ), linear-gradient( 270deg, rgba(255,255,255,1) 0, rgba(255,255,255,.96) 3px, rgba(255,255,255,.66) 7px, rgba(255,255,255,.22) 14px, transparent 28px ), linear-gradient( 0deg, rgba(255,255,255,1) 0, rgba(255,255,255,.96) 3px, rgba(255,255,255,.68) 7px, rgba(255,255,255,.23) 14px, transparent 28px ) !important; opacity:1 !important; } /* ================================================== FINAL HERO IZGLED — SIVKASTO PLAVA, BEZ SJAJA U SREDINI ================================================== */ .hero-slider .hero-product-card{ /* sivkasto-plava površina kao kartice u Ponudi */ background: radial-gradient( circle at 8% 48%, rgba(154,211,255,.16) 0%, rgba(154,211,255,.07) 35%, transparent 58% ), radial-gradient( circle at 92% 88%, rgba(150,162,255,.08) 0%, transparent 55% ), linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.96) 48%, rgba(238,244,253,.94) 100% ) !important; outline:none !important; border:1px solid rgba(190,202,230,.72) !important; /* sjaj samo uz stvarne ivice kartice */ box-shadow: 0 28px 70px rgba(45,58,95,.12), inset 0 4px 3px rgba(255,255,255,1), inset 4px 0 3px rgba(255,255,255,.98), inset -4px 0 4px rgba(222,231,247,.74), inset 0 -4px 5px rgba(204,219,244,.70), 0 0 0 1px rgba(255,255,255,.72), 0 0 24px rgba(173,198,235,.16) !important; } /* GASI SLOJ KOJI PRAVI BELI OKVIR/SJAJ U SREDINI */ .hero-slider .hero-product-card::before{ content:none !important; display:none !important; } /* GASI ROZE-LJUBIČASTI GLOW */ .hero-slider .hero-product-card::after{ content:none !important; display:none !important; } /* Logo ostaje čist, bez roze aure */ .hero-slider .hero-product-card .product-logo{ background: linear-gradient( 145deg, rgba(255,255,255,1), rgba(244,248,254,.96) ) !important; border:1px solid rgba(211,220,239,.76) !important; box-shadow: 0 24px 55px rgba(45,58,95,.13), 0 0 24px rgba(164,194,235,.10), inset 0 3px 3px rgba(255,255,255,1), inset 0 -3px 5px rgba(195,211,237,.18) !important; } .hero-slider .hero-product-card .product-logo::before, .hero-slider .hero-product-card .product-logo::after{ content:none !important; display:none !important; } /* ================================================== HERO KARTICA — BELI SJAJ SAMO PO IVICAMA ================================================== */ .hero-slider .hero-product-card{ box-shadow: 0 28px 70px rgba(45,58,95,.12), /* unutrašnji sjaj uz ivice */ inset 0 5px 5px rgba(255,255,255,1), inset 5px 0 5px rgba(255,255,255,1), inset -5px 0 5px rgba(255,255,255,.92), inset 0 -5px 6px rgba(255,255,255,.96), /* spoljašnji beli rub */ 0 0 0 1px rgba(255,255,255,.95), 0 0 18px rgba(255,255,255,.85), /* blaga dubina */ 0 0 34px rgba(170,195,230,.14) !important; } /* dodatni tanki beli rub tik uz samu ivicu */ .hero-slider .hero-product-card{ border:1px solid rgba(225,232,247,.92) !important; outline:1px solid rgba(255,255,255,.88) !important; outline-offset:-2px !important; } /* ================================================== HERO REFLEKSIJA — IDENTIČNA KAO U PONUDI MENJA SAMO HERO SLIDER ================================================== */ .hero-slider .hero-product-card .window-reflection{ position:absolute !important; top:0 !important; left:0 !important; width:155px !important; height:340px !important; display:block !important; overflow:hidden !important; margin:0 !important; padding:0 !important; border-radius:40px 0 0 0 !important; background:transparent !important; opacity:1 !important; visibility:visible !important; transform:none !important; filter:none !important; pointer-events:none !important; z-index:2 !important; mask-image:none !important; -webkit-mask-image:none !important; } /* GASI STARE SPAN KOCKICE — PONUDA IH NE KORISTI */ .hero-slider .hero-product-card .window-reflection span{ display:none !important; } /* USPRAVNI DEO REFLEKSIJE */ .hero-slider .hero-product-card .window-reflection::before{ content:"" !important; position:absolute !important; top:-25px !important; left:37px !important; width:20px !important; height:370px !important; display:block !important; border-radius:999px !important; background: rgba(224,231,252,.55) !important; box-shadow: inset 5px 0 8px rgba(255,255,255,.65), 5px 0 14px rgba(187,204,242,.18) !important; opacity:.72 !important; pointer-events:none !important; } /* KOSE PREČKE KOJE FORMIRAJU POLJA */ .hero-slider .hero-product-card .window-reflection::after{ content:"" !important; position:absolute !important; top:71px !important; left:-65px !important; width:205px !important; height:18px !important; display:block !important; border-radius:999px !important; background: rgba(224,231,252,.52) !important; transform:rotate(33deg) !important; transform-origin:center !important; box-shadow: 0 116px 0 rgba(224,231,252,.39) !important; opacity:.72 !important; pointer-events:none !important; } /* SADRŽAJ HERO KARTICE OSTAJE IZNAD REFLEKSIJE */ .hero-slider .hero-product-card .product-logo, .hero-slider .hero-product-card .product-title, .hero-slider .hero-product-card .product-description, .hero-slider .hero-product-card .product-tags, .hero-slider .hero-product-card .product-divider, .hero-slider .hero-product-card .price, .hero-slider .hero-product-card .buy-btn{ position:relative !important; z-index:10 !important; } .hero-slider .hero-product-card > .discount{ position:absolute !important; z-index:30 !important; } /* ================================================== HERO — ISTE KOCKICE KAO U PONUDI MENJA SAMO HERO SLIDER ================================================== */ .hero-slider .hero-product-card .window-reflection{ position:absolute !important; top:8px !important; left:8px !important; width:185px !important; height:250px !important; display:grid !important; grid-template-columns:62px 62px !important; grid-template-rows:78px 78px 78px !important; gap:10px 11px !important; margin:0 !important; padding:0 !important; overflow:visible !important; transform: rotate(16deg) skewX(-8deg) !important; transform-origin:top left !important; opacity:.86 !important; filter: blur(.55px) drop-shadow(0 5px 14px rgba(255,255,255,.80)) !important; background:transparent !important; pointer-events:none !important; z-index:4 !important; -webkit-mask-image: linear-gradient( 135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 49%, rgba(0,0,0,.48) 76%, transparent 100% ) !important; mask-image: linear-gradient( 135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 49%, rgba(0,0,0,.48) 76%, transparent 100% ) !important; } .hero-slider .hero-product-card .window-reflection span{ display:block !important; visibility:visible !important; opacity:1 !important; width:62px !important; height:78px !important; margin:0 !important; padding:0 !important; border-radius:2px !important; background: linear-gradient( 145deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.84) 38%, rgba(220,230,250,.45) 100% ) !important; border:1px solid rgba(255,255,255,.92) !important; box-shadow: inset 3px 3px 4px rgba(255,255,255,1), inset -3px -3px 5px rgba(171,190,230,.16), 0 4px 14px rgba(255,255,255,.62) !important; } .hero-slider .hero-product-card .window-reflection::before, .hero-slider .hero-product-card .window-reflection::after{ content:none !important; display:none !important; } /* SAMO BELI SJAJ OKO HERO KARTICE */ .hero-slider{ filter: drop-shadow(0 0 12px rgba(255,255,255,1)) drop-shadow(0 0 28px rgba(255,255,255,.92)) drop-shadow(0 0 52px rgba(255,255,255,.72)) !important; } /* ================================================== HERO — ISTI JAK BELI SJAJ KAO NA KARTICAMA U PONUDI Ne dira kockice, sadržaj ni slider ================================================== */ .hero-slider .hero-product-card::before{ content:"" !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; pointer-events:none !important; z-index:2 !important; background: /* jak beli sjaj gore */ radial-gradient( ellipse at 50% -8%, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 14%, rgba(255,255,255,.70) 28%, rgba(255,255,255,.30) 43%, transparent 62% ), /* jak beli sjaj dole */ radial-gradient( ellipse at 50% 108%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.76) 16%, rgba(255,255,255,.38) 31%, transparent 55% ), /* jak beli sjaj uz levu ivicu */ radial-gradient( ellipse at -8% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,.88) 16%, rgba(255,255,255,.48) 31%, transparent 55% ), /* jak beli sjaj uz desnu ivicu */ radial-gradient( ellipse at 108% 50%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.80) 16%, rgba(255,255,255,.42) 31%, transparent 55% ) !important; box-shadow: /* bela traka tik uz ivicu */ inset 0 0 0 2px rgba(255,255,255,1), /* širok unutrašnji beli haze */ inset 0 0 18px rgba(255,255,255,.98), inset 0 0 40px rgba(255,255,255,.72), inset 0 0 75px rgba(255,255,255,.42) !important; opacity:1 !important; } .hero-slider .hero-product-card .window-reflection{ z-index:4 !important; } .hero-slider .hero-product-card .product-logo, .hero-slider .hero-product-card .product-title, .hero-slider .hero-product-card .product-description, .hero-slider .hero-product-card .product-tags, .hero-slider .hero-product-card .product-divider, .hero-slider .hero-product-card .price, .hero-slider .hero-product-card .buy-btn{ position:relative !important; z-index:10 !important; } .hero-slider .hero-product-card > .discount{ z-index:30 !important; } /* ================================================== FINAL EDGE GLOW ================================================== */ .products-grid .product-card{ position:relative !important; overflow:hidden !important; } .products-grid .product-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; background: radial-gradient(circle at 50% -8%, rgba(255,255,255,.95) 0%, transparent 35%), radial-gradient(circle at 50% 108%, rgba(255,255,255,.65) 0%, transparent 20%), radial-gradient(circle at -8% 50%, rgba(255,255,255,.9) 0%, transparent 18%), radial-gradient(circle at 108% 50%, rgba(255,255,255,.75) 0%, transparent 18%); } .products-grid .product-card > *{ position:relative; z-index:5; } /* ================================================== HERO — DEBEO BELI SJAJ KAO NA KARTICAMA U PONUDI ================================================== */ .hero-slider .hero-product-card .hero-edge-glow{ position:absolute !important; inset:0 !important; display:block !important; overflow:hidden !important; border-radius:inherit !important; pointer-events:none !important; z-index:3 !important; background: /* GORE — veoma debeo beli sloj */ linear-gradient( to bottom, rgba(255,255,255,1) 0px, rgba(255,255,255,1) 16px, rgba(255,255,255,.98) 32px, rgba(255,255,255,.88) 52px, rgba(255,255,255,.68) 76px, rgba(255,255,255,.38) 98px, transparent 125px ), /* DOLE */ linear-gradient( to top, rgba(255,255,255,1) 0px, rgba(255,255,255,1) 16px, rgba(255,255,255,.98) 32px, rgba(255,255,255,.88) 52px, rgba(255,255,255,.68) 76px, rgba(255,255,255,.38) 98px, transparent 125px ), /* LEVO */ linear-gradient( to right, rgba(255,255,255,1) 0px, rgba(255,255,255,1) 16px, rgba(255,255,255,.98) 32px, rgba(255,255,255,.88) 52px, rgba(255,255,255,.68) 76px, rgba(255,255,255,.38) 98px, transparent 125px ), /* DESNO */ linear-gradient( to left, rgba(255,255,255,1) 0px, rgba(255,255,255,1) 16px, rgba(255,255,255,.98) 32px, rgba(255,255,255,.88) 52px, rgba(255,255,255,.68) 76px, rgba(255,255,255,.38) 98px, transparent 125px ) !important; border:4px solid rgba(255,255,255,1) !important; box-shadow: inset 0 0 0 6px rgba(255,255,255,1), inset 0 0 30px rgba(255,255,255,1), inset 0 0 70px rgba(255,255,255,.95), inset 0 0 120px rgba(255,255,255,.72), 0 0 0 4px rgba(255,255,255,1), 0 0 24px rgba(255,255,255,1), 0 0 55px rgba(255,255,255,.86) !important; mix-blend-mode:screen !important; } .hero-slider{ filter: drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 20px rgba(255,255,255,.82)) drop-shadow(0 0 34px rgba(190,210,255,.20)) !important; } /* Kvadratići i sadržaj ostaju iznad belog sjaja */ .hero-slider .hero-product-card .window-reflection{ z-index:5 !important; } .hero-slider .hero-product-card .product-logo, .hero-slider .hero-product-card .product-title, .hero-slider .hero-product-card .product-description, .hero-slider .hero-product-card .product-tags, .hero-slider .hero-product-card .product-divider, .hero-slider .hero-product-card .price, .hero-slider .hero-product-card .buy-btn{ position:relative !important; z-index:10 !important; } .hero-slider .hero-product-card > .discount{ z-index:30 !important; } /* ================================================== HERO — ISTI DEBELI BELI RUB KAO U PONUDI ================================================== */ .hero-slider .hero-product-card .hero-edge-glow{ position:absolute !important; inset:0 !important; display:block !important; overflow:hidden !important; border-radius:inherit !important; pointer-events:none !important; z-index:3 !important; /* ŠIROKI BELI SLOJ UZ SVE ČETIRI IVICE */ background: linear-gradient( to bottom, rgba(255,255,255,1) 0, rgba(255,255,255,.98) 10px, rgba(255,255,255,.90) 24px, rgba(255,255,255,.62) 44px, rgba(255,255,255,.30) 68px, transparent 100px ), linear-gradient( to top, rgba(255,255,255,1) 0, rgba(255,255,255,.98) 10px, rgba(255,255,255,.90) 24px, rgba(255,255,255,.62) 44px, rgba(255,255,255,.30) 68px, transparent 100px ), linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,.98) 10px, rgba(255,255,255,.90) 24px, rgba(255,255,255,.62) 44px, rgba(255,255,255,.30) 68px, transparent 100px ), linear-gradient( to left, rgba(255,255,255,1) 0, rgba(255,255,255,.98) 10px, rgba(255,255,255,.90) 24px, rgba(255,255,255,.62) 44px, rgba(255,255,255,.30) 68px, transparent 100px ) !important; /* ISTA KOMBINACIJA IVICA IZ PONUDE */ border:1px solid rgba(194,203,232,.62) !important; outline:2px solid rgba(255,255,255,.92) !important; outline-offset:-5px !important; box-shadow: /* bela gornja ivica */ inset 0 8px 12px rgba(255,255,255,1), /* bela leva ivica */ inset 8px 0 12px rgba(255,255,255,1), /* bela desna ivica */ inset -8px 0 12px rgba(255,255,255,.98), /* bela donja ivica */ inset 0 -8px 14px rgba(255,255,255,.98), /* široki beli haze kao u Ponudi */ inset 0 0 42px rgba(255,255,255,.92), inset 0 0 75px rgba(255,255,255,.62), /* beli rub spolja */ 0 0 0 2px rgba(255,255,255,.88), 0 0 28px rgba(255,255,255,.72) !important; } .hero-slider .hero-product-card .window-reflection{ z-index:5 !important; } .hero-slider .hero-product-card .product-logo, .hero-slider .hero-product-card .product-title, .hero-slider .hero-product-card .product-description, .hero-slider .hero-product-card .product-tags, .hero-slider .hero-product-card .product-divider, .hero-slider .hero-product-card .price, .hero-slider .hero-product-card .buy-btn{ position:relative !important; z-index:10 !important; } .hero-slider .hero-product-card > .discount{ z-index:30 !important; } .hero-product-card{ position:relative; overflow:hidden; isolation:isolate; } .hero-product-card::before{ content:""; position:absolute; inset:-20px; border-radius:58px; pointer-events:none; background: radial-gradient(circle at top, rgba(255,255,255,.98) 0%, rgba(255,255,255,.75) 18%, transparent 45%), radial-gradient(circle at bottom, rgba(255,255,255,.98) 0%, rgba(255,255,255,.70) 18%, transparent 45%), radial-gradient(circle at left, rgba(255,255,255,.98) 0%, rgba(255,255,255,.75) 18%, transparent 45%), radial-gradient(circle at right, rgba(255,255,255,.98) 0%, rgba(255,255,255,.75) 18%, transparent 45%); filter:blur(26px); opacity:1; z-index:1; } .hero-product-card > *{ position:relative; z-index:5; } /* ================================================== HERO — DEBELI BELI GLASS RUB KAO U PONUDI ================================================== */ .hero-slider .hero-product-card{ position:absolute !important; isolation:isolate !important; overflow:hidden !important; } .hero-slider .hero-product-card .hero-edge-glow{ position:absolute !important; inset:0 !important; display:block !important; border-radius:inherit !important; pointer-events:none !important; z-index:3 !important; background: linear-gradient( to bottom, rgba(255,255,255,1) 0, rgba(255,255,255,.98) 22px, rgba(255,255,255,.82) 48px, rgba(255,255,255,.46) 82px, transparent 135px ), linear-gradient( to top, rgba(255,255,255,1) 0, rgba(255,255,255,.98) 22px, rgba(255,255,255,.82) 48px, rgba(255,255,255,.46) 82px, transparent 135px ), linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,.98) 22px, rgba(255,255,255,.82) 48px, rgba(255,255,255,.46) 82px, transparent 135px ), linear-gradient( to left, rgba(255,255,255,1) 0, rgba(255,255,255,.98) 22px, rgba(255,255,255,.82) 48px, rgba(255,255,255,.46) 82px, transparent 135px ) !important; border:2px solid rgba(255,255,255,1) !important; box-shadow: inset 0 0 0 4px rgba(255,255,255,1), inset 0 0 30px rgba(255,255,255,.98), inset 0 0 72px rgba(255,255,255,.76), inset 0 0 125px rgba(255,255,255,.48) !important; } /* Kockice ostaju iznad belog sloja */ .hero-slider .hero-product-card .window-reflection{ z-index:5 !important; } /* Sav sadržaj ostaje iznad belog sloja */ .hero-slider .hero-product-card .product-logo, .hero-slider .hero-product-card .product-title, .hero-slider .hero-product-card .product-description, .hero-slider .hero-product-card .product-tags, .hero-slider .hero-product-card .product-divider, .hero-slider .hero-product-card .price, .hero-slider .hero-product-card .buy-btn{ position:relative !important; z-index:10 !important; } .hero-slider .hero-product-card > .discount{ position:absolute !important; z-index:30 !important; } /* ================================================== HERO SLIDER — CLEAN PROMENA BEZ ZAMUĆENJA ================================================== */ .hero-slider .hero-product-card{ filter:none !important; transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity 0s linear !important; backface-visibility:hidden !important; -webkit-backface-visibility:hidden !important; transform-style:flat !important; -webkit-font-smoothing:antialiased !important; } .hero-slider .hero-product-card.active, .hero-slider .hero-product-card.is-main, .hero-slider .hero-product-card.is-next, .hero-slider .hero-product-card.leave, .hero-slider .hero-product-card.is-leaving, .hero-slider .hero-product-card.is-hidden, .hero-slider .hero-product-card.is-preparing{ filter:none !important; } /* HERO TAG IKONICE - ISTA BOJA KAO U PONUDI */ .hero-slider .product-tag i{ color:#7C4DFF !important; opacity:1 !important; } /* ================================================== CANVA — KVADRATNA IKONICA BEZ BELOG OKVIRA ================================================== */ /* Samo Canva logo-kocka u Ponudi */ .products-grid .product-card:nth-child(2) .product-logo{ padding:0 !important; overflow:hidden !important; background:transparent !important; border:none !important; box-shadow:none !important; } /* Samo Canva logo-kocka u hero slideru */ .hero-slider .hero-product-card[data-product="canva"] .product-logo{ padding:0 !important; overflow:hidden !important; background:transparent !important; border:none !important; box-shadow:none !important; } /* Sama Canva slika */ .canva-square-logo{ display:block !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; border-radius:inherit !important; filter:none !important; transform:none !important; image-rendering:auto !important; } /* ================================================== CANVA — IKONICA POPUNJAVA CELU LOGO KOCKU Bez belog okvira ================================================== */ /* Canva kartica u Ponudi */ .products-grid .product-card:nth-child(2) .product-logo{ padding:0 !important; overflow:hidden !important; background:none !important; border:none !important; outline:none !important; box-shadow:none !important; } /* Gasi beli unutrašnji sloj samo na Canva logo-kocki */ .products-grid .product-card:nth-child(2) .product-logo::before, .products-grid .product-card:nth-child(2) .product-logo::after{ content:none !important; display:none !important; } /* Canva PNG popunjava celu površinu */ .products-grid .product-card:nth-child(2) .product-logo .canva-square-logo{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center !important; border-radius:inherit !important; margin:0 !important; padding:0 !important; filter:none !important; transform:none !important; } /* CANVA FULL SIZE */ .products-grid .product-card:nth-child(2) .product-logo{ overflow:hidden !important; } .products-grid .product-card:nth-child(2) .product-logo::before{ display:none !important; } .products-grid .product-card:nth-child(2) .product-logo img.canva-full{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; border-radius:42px !important; filter:none !important; } /* ADOBE FULL SIZE */ .products-grid .product-card:nth-child(1) .product-logo{ overflow:hidden !important; } .products-grid .product-card:nth-child(1) .product-logo::before{ display:none !important; } .products-grid .product-card:nth-child(1) .product-logo img.adobe-full{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; border-radius:42px !important; filter:none !important; } /* ADOBE — ISTA VELIČINA I OBLIK KAO CANVA */ .products-grid .product-card:nth-child(1) .product-logo{ overflow:hidden !important; background:transparent !important; border:none !important; outline:none !important; box-shadow:none !important; padding:0 !important; } /* uklanja beli unutrašnji sloj i senku ispod */ .products-grid .product-card:nth-child(1) .product-logo::before, .products-grid .product-card:nth-child(1) .product-logo::after{ content:none !important; display:none !important; } /* Adobe ikonica popunjava celu kocku */ .products-grid .product-card:nth-child(1) .product-logo img.adobe-full{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center !important; border-radius:42px !important; margin:0 !important; padding:0 !important; filter:none !important; transform:none !important; } /* ================================================== FINALNO — SVIH 12 LOGO IKONICA IDENTIČNE VELIČINA, OBLIK I ZAOBLJENOST KAO ADOBE ================================================== */ .products-grid .product-card .product-logo{ position:relative !important; width:145px !important; height:145px !important; min-width:145px !important; min-height:145px !important; flex:0 0 145px !important; margin:43px auto 24px !important; padding:0 !important; display:block !important; overflow:hidden !important; border-radius:36px !important; background:transparent !important; border:none !important; outline:none !important; box-shadow:none !important; transform:none !important; } /* Uklanja staru belu kutiju i senku sa svih 12 logotipa */ .products-grid .product-card .product-logo::before, .products-grid .product-card .product-logo::after{ content:none !important; display:none !important; } /* Svaka slika mora da popuni potpuno isti okvir */ .products-grid .product-card .product-logo > img{ position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; border-radius:36px !important; transform:none !important; translate:none !important; scale:none !important; filter:none !important; box-shadow:none !important; opacity:1 !important; } /* Svi nazivi proizvoda centrirani */ .products-grid .product-card .product-title, .products-grid .product-card:first-child .product-title{ width:100% !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; align-self:center !important; } /* ================================================== SAMO CANVA — ISTE IVICE KAO ADOBE ================================================== */ body .products-grid .product-card:nth-child(2) .product-logo{ position:relative !important; width:132px !important; height:132px !important; min-width:132px !important; min-height:132px !important; max-width:132px !important; max-height:132px !important; flex:0 0 132px !important; margin:48px auto 22px !important; padding:0 !important; overflow:hidden !important; border-radius:42px !important; clip-path:inset(0 round 42px) !important; -webkit-clip-path:inset(0 round 42px) !important; transform:none !important; } body .products-grid .product-card:nth-child(2) .product-logo img{ position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; border-radius:42px !important; clip-path:inset(0 round 42px) !important; -webkit-clip-path:inset(0 round 42px) !important; transform:none !important; filter:none !important; } /* ================================================== SAMO CANVA — IVICE IDENTIČNE KAO ADOBE ================================================== */ .products-grid .product-card:nth-child(2) .product-logo{ position:relative !important; width:132px !important; height:132px !important; min-width:132px !important; min-height:132px !important; max-width:132px !important; max-height:132px !important; flex:0 0 132px !important; margin:48px auto 22px !important; padding:0 !important; overflow:hidden !important; /* ista vidljiva zaobljenost kao Adobe */ border-radius:27px !important; clip-path:inset(0 round 27px) !important; -webkit-clip-path:inset(0 round 27px) !important; transform:none !important; } /* Canva se uvećava da njeni originalni zaobljeni uglovi nestanu */ .products-grid .product-card:nth-child(2) .product-logo > img{ position:absolute !important; top:50% !important; left:50% !important; width:122% !important; height:122% !important; min-width:122% !important; min-height:122% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; border-radius:0 !important; clip-path:none !important; -webkit-clip-path:none !important; transform:translate(-50%, -50%) !important; filter:none !important; box-shadow:none !important; } /* ================================================== SAMO ADOBE — NE MENJA VELIČINU KUTIJE Samo uvećava sliku da bude kao Canva ================================================== */ .products-grid .product-card:nth-child(1) .product-logo{ overflow:hidden !important; border-radius:42px !important; } /* Adobe slika malo veća unutar postojeće kutije */ .products-grid .product-card:nth-child(1) .product-logo > img{ position:absolute !important; top:50% !important; left:50% !important; width:108% !important; height:108% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center !important; border-radius:0 !important; transform:translate(-50%, -50%) !important; filter:none !important; } /* GEMINI LOGO */ .products-grid .product-card:nth-child(3) .product-logo img{ width: 90px !important; height: 90px !important; object-fit: contain !important; object-position: center !important; transform: none !important; } /* ================================================== SAMO GEMINI — MANJI I TAČNO CENTRIRAN U BELOJ KOCKI ================================================== */ .products-grid .product-card:nth-child(3) .product-logo{ display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; } /* samo Gemini slika */ .products-grid .product-card:nth-child(3) .product-logo img.gemini-logo-small{ position:static !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; inset:auto !important; display:block !important; width:55% !important; height:55% !important; min-width:0 !important; min-height:0 !important; max-width:55% !important; max-height:55% !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center !important; transform:none !important; translate:none !important; scale:none !important; border-radius:0 !important; filter:none !important; } /* ================================================== FIGMA + MICROSOFT — MANJI I CENTRIRANI U KOCKICI ================================================== */ /* Figma je 4. kartica */ .products-grid .product-card:nth-child(4) .product-logo, /* Microsoft je 5. kartica */ .products-grid .product-card:nth-child(5) .product-logo{ display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; } /* Figma slika */ .products-grid .product-card:nth-child(4) .product-logo img.figma-logo-small{ position:static !important; width:60% !important; height:60% !important; min-width:0 !important; min-height:0 !important; max-width:60% !important; max-height:60% !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center !important; transform:none !important; translate:none !important; scale:none !important; filter:none !important; } /* Microsoft slika */ .products-grid .product-card:nth-child(5) .product-logo img.microsoft-logo-small{ position:static !important; width:65% !important; height:65% !important; min-width:0 !important; min-height:0 !important; max-width:65% !important; max-height:65% !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center !important; transform:none !important; translate:none !important; scale:none !important; filter:none !important; } /* ================================================== SAMO NORDVPN — PLAVA IKONICA PREKO CELE KOCKE ================================================== */ .products-grid .product-card:nth-child(6) .product-logo{ padding:0 !important; overflow:hidden !important; background:transparent !important; border:none !important; outline:none !important; box-shadow:none !important; } /* uklanja beli unutrašnji sloj i senku */ .products-grid .product-card:nth-child(6) .product-logo::before, .products-grid .product-card:nth-child(6) .product-logo::after{ content:none !important; display:none !important; } /* plava NordVPN slika popunjava celu kocku */ .products-grid .product-card:nth-child(6) .product-logo img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; border-radius:inherit !important; transform:none !important; filter:none !important; } /* ================================================== NORDVPN — ZAOBLJENA KOCKICA KAO OSTALE IKONICE ================================================== */ .products-grid .product-card:nth-child(6) .product-logo{ position:relative !important; width:132px !important; height:132px !important; overflow:hidden !important; border-radius:37px !important; background:#4385f5 !important; border:none !important; outline:none !important; box-shadow:none !important; } .products-grid .product-card:nth-child(6) .product-logo::before, .products-grid .product-card:nth-child(6) .product-logo::after{ content:none !important; display:none !important; } .products-grid .product-card:nth-child(6) .product-logo img{ position:absolute !important; top:50% !important; left:50% !important; width:135% !important; height:135% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center !important; border-radius:0 !important; transform:translate(-50%, -50%) !important; filter:none !important; } /* ========================================= JEDNAKA VELIČINA SVIH LOGO IKONA ========================================= */ .product-logo, .product-icon, .logo-box, .hero-product-logo { width: 156px; height: 156px; min-width: 156px; min-height: 156px; display: flex; align-items: center; justify-content: center; border-radius: 42px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); overflow: hidden; } /* Sve slike unutar logo kutije */ .product-logo img, .product-icon img, .logo-box img, .hero-product-logo img { width: 104px !important; height: 104px !important; max-width: 104px !important; max-height: 104px !important; object-fit: contain !important; display: block; } /* Uklanja različite dimenzije sa pojedinačnih logotipa */ .product-logo img.adobe, .product-logo img.canva, .product-logo img.gemini, .product-logo img.figma, .product-logo img.microsoft, .product-logo img.nordvpn, .product-logo img.perplexity, .product-logo img.windows, .product-logo img.framer, .product-logo img.autodesk, .product-logo img.envato, .product-logo img.capcut { width: 104px !important; height: 104px !important; object-fit: contain !important; } /* ================================================== FINALNO — SVI LOGOTIPI IDENTIČNI OVAJ BLOK MORA BITI POSLEDNJI U card.css ================================================== */ body .products-grid .product-card .product-logo, body .products-grid .product-card:nth-child(1) .product-logo, body .products-grid .product-card:nth-child(2) .product-logo, body .products-grid .product-card:nth-child(3) .product-logo, body .products-grid .product-card:nth-child(4) .product-logo, body .products-grid .product-card:nth-child(5) .product-logo, body .products-grid .product-card:nth-child(6) .product-logo, body .products-grid .product-card:nth-child(7) .product-logo, body .products-grid .product-card:nth-child(8) .product-logo, body .products-grid .product-card:nth-child(9) .product-logo, body .products-grid .product-card:nth-child(10) .product-logo, body .products-grid .product-card:nth-child(11) .product-logo, body .products-grid .product-card:nth-child(12) .product-logo { position: relative !important; width: 132px !important; height: 132px !important; min-width: 132px !important; min-height: 132px !important; max-width: 132px !important; max-height: 132px !important; flex: 0 0 132px !important; margin: 48px auto 22px !important; padding: 0 !important; display: block !important; overflow: hidden !important; border-radius: 37px !important; clip-path: inset(0 round 37px) !important; -webkit-clip-path: inset(0 round 37px) !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; transform: none !important; } /* Uklanja različite bele kutije i senke */ body .products-grid .product-card .product-logo::before, body .products-grid .product-card .product-logo::after { content: none !important; display: none !important; } /* Sve slike popunjavaju potpuno isti kvadrat */ body .products-grid .product-card .product-logo > img, body .products-grid .product-card:nth-child(1) .product-logo > img, body .products-grid .product-card:nth-child(1) .product-logo > img.adobe-full, body .products-grid .product-card:nth-child(2) .product-logo > img, body .products-grid .product-card:nth-child(3) .product-logo > img, body .products-grid .product-card:nth-child(4) .product-logo > img, body .products-grid .product-card:nth-child(5) .product-logo > img, body .products-grid .product-card:nth-child(6) .product-logo > img, body .products-grid .product-card:nth-child(7) .product-logo > img, body .products-grid .product-card:nth-child(8) .product-logo > img, body .products-grid .product-card:nth-child(9) .product-logo > img, body .products-grid .product-card:nth-child(10) .product-logo > img, body .products-grid .product-card:nth-child(11) .product-logo > img, body .products-grid .product-card:nth-child(12) .product-logo > img { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: block !important; object-fit: cover !important; object-position: center !important; border-radius: 37px !important; clip-path: inset(0 round 37px) !important; -webkit-clip-path: inset(0 round 37px) !important; transform: none !important; translate: none !important; scale: none !important; filter: none !important; box-shadow: none !important; } /* Telefon — takođe sve identično */ @media (max-width: 760px) { body .products-grid .product-card .product-logo { width: 120px !important; height: 120px !important; min-width: 120px !important; min-height: 120px !important; max-width: 120px !important; max-height: 120px !important; flex-basis: 120px !important; border-radius: 34px !important; clip-path: inset(0 round 34px) !important; -webkit-clip-path: inset(0 round 34px) !important; } body .products-grid .product-card .product-logo > img { border-radius: 34px !important; clip-path: inset(0 round 34px) !important; -webkit-clip-path: inset(0 round 34px) !important; } } /* ================================================== BORDER SAMO ZA: GEMINI, FIGMA, MICROSOFT, NORDVPN I WINDOWS ================================================== */ /* Gemini 3, Figma 4, Microsoft 5, NordVPN 6, Windows 8 */ body .products-grid .product-card:nth-child(3) .product-logo, body .products-grid .product-card:nth-child(4) .product-logo, body .products-grid .product-card:nth-child(5) .product-logo, body .products-grid .product-card:nth-child(6) .product-logo, body .products-grid .product-card:nth-child(8) .product-logo { width:132px !important; height:132px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; border-radius:37px !important; background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(246,248,255,.88) ) !important; border:1px solid rgba(210,218,239,.78) !important; outline:1px solid rgba(255,255,255,.85) !important; outline-offset:-3px !important; box-shadow: 0 20px 42px rgba(44,54,102,.11), 0 7px 18px rgba(56,66,112,.05), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(127,139,187,.07) !important; clip-path:none !important; -webkit-clip-path:none !important; } /* Unutrašnji glass sjaj samo za tih 5 */ body .products-grid .product-card:nth-child(3) .product-logo::before, body .products-grid .product-card:nth-child(4) .product-logo::before, body .products-grid .product-card:nth-child(5) .product-logo::before, body .products-grid .product-card:nth-child(6) .product-logo::before, body .products-grid .product-card:nth-child(8) .product-logo::before { content:"" !important; display:block !important; position:absolute !important; inset:7px !important; border-radius:31px !important; background: radial-gradient( circle at 30% 20%, rgba(255,255,255,.92), rgba(255,255,255,.10) 54%, transparent 74% ) !important; pointer-events:none !important; } /* Ikonice unutar tih kocki */ body .products-grid .product-card:nth-child(3) .product-logo > img, body .products-grid .product-card:nth-child(4) .product-logo > img, body .products-grid .product-card:nth-child(5) .product-logo > img, body .products-grid .product-card:nth-child(6) .product-logo > img, body .products-grid .product-card:nth-child(8) .product-logo > img { position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:72px !important; height:72px !important; min-width:72px !important; min-height:72px !important; max-width:72px !important; max-height:72px !important; margin:0 !important; object-fit:contain !important; border-radius:0 !important; clip-path:none !important; -webkit-clip-path:none !important; filter: drop-shadow(0 8px 14px rgba(39,47,91,.13)) !important; } /* ================================================== ADOBE I CANVA — ISTA VELIČINA KAO GEMINI BORDER ================================================== */ body .products-grid .product-card:nth-child(1) .product-logo, body .products-grid .product-card:nth-child(2) .product-logo { width:132px !important; height:132px !important; min-width:132px !important; min-height:132px !important; max-width:132px !important; max-height:132px !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:48px auto 22px !important; padding:0 !important; overflow:hidden !important; border-radius:37px !important; background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(246,248,255,.88) ) !important; border:1px solid rgba(210,218,239,.78) !important; outline:1px solid rgba(255,255,255,.85) !important; outline-offset:-3px !important; box-shadow: 0 20px 42px rgba(44,54,102,.11), 0 7px 18px rgba(56,66,112,.05), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(127,139,187,.07) !important; clip-path:none !important; -webkit-clip-path:none !important; } /* Unutrašnji glass sjaj isti kao kod Gemini */ body .products-grid .product-card:nth-child(1) .product-logo::before, body .products-grid .product-card:nth-child(2) .product-logo::before { content:"" !important; display:block !important; position:absolute !important; inset:7px !important; border-radius:31px !important; background: radial-gradient( circle at 30% 20%, rgba(255,255,255,.92), rgba(255,255,255,.10) 54%, transparent 74% ) !important; pointer-events:none !important; z-index:2 !important; } /* Adobe i Canva slike malo manje unutar istog bordera */ body .products-grid .product-card:nth-child(1) .product-logo > img, body .products-grid .product-card:nth-child(2) .product-logo > img { position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; inset:auto !important; width:104px !important; height:104px !important; min-width:104px !important; min-height:104px !important; max-width:104px !important; max-height:104px !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; border-radius:29px !important; clip-path:none !important; -webkit-clip-path:none !important; transform:none !important; filter:none !important; z-index:3 !important; } body .products-grid .product-card:nth-child(1) .product-logo > img { width:96px !important; height:96px !important; min-width:96px !important; min-height:96px !important; max-width:96px !important; max-height:96px !important; } /* CANVA — VRATI NORMALNO I UKLONI BELU IVICU */ html body .products-grid .product-card:nth-child(2) .product-logo { width:132px !important; height:132px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; border-radius:37px !important; background:transparent !important; } html body .products-grid .product-card:nth-child(2) .product-logo > img, html body .products-grid .product-card:nth-child(2) .product-logo > img.canva-full { position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; inset:auto !important; width:108px !important; height:108px !important; min-width:108px !important; min-height:108px !important; max-width:108px !important; max-height:108px !important; margin:0 !important; display:block !important; object-fit:cover !important; object-position:center !important; border-radius:30px !important; transform:none !important; filter:none !important; } /* CANVA — POPUNI CELU LOGO KUTIJU */ html body .products-grid .product-card:nth-child(2) .product-logo { width:132px !important; height:132px !important; padding:0 !important; overflow:hidden !important; border-radius:37px !important; } html body .products-grid .product-card:nth-child(2) .product-logo > img, html body .products-grid .product-card:nth-child(2) .product-logo > img.canva-full { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; display:block !important; object-fit:cover !important; object-position:center !important; border-radius:37px !important; transform:scale(1.03) !important; transform-origin:center !important; clip-path:none !important; -webkit-clip-path:none !important; filter:none !important; } /* NORDVPN — povećaj samo ikonicu, border ostaje isti */ html body .products-grid .product-card:nth-child(6) .product-logo > img { width:70px !important; height:70px !important; min-width:70px !important; min-height:70px !important; max-width:70px !important; max-height:70px !important; object-fit:contain !important; transform:none !important; } /* NORDVPN - povećaj samo ikonu */ html body .products-grid .product-card:nth-child(6) .product-logo img { transform: scale(1.18) !important; transform-origin: center !important; } /* ================================================== NORDVPN — VEĆA IKONICA KAO NA PRVOJ SLICI Border i bela kutija ostaju nepromenjeni ================================================== */ html body .products-grid .product-card:nth-child(6) .product-logo { width:132px !important; height:132px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(246,248,255,.88) ) !important; border:1px solid rgba(210,218,239,.78) !important; border-radius:37px !important; outline:1px solid rgba(255,255,255,.85) !important; outline-offset:-3px !important; box-shadow: 0 20px 42px rgba(44,54,102,.11), 0 7px 18px rgba(56,66,112,.05), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(127,139,187,.07) !important; } /* Povećava se samo plava NordVPN ikonica */ html body .products-grid .product-card:nth-child(6) .product-logo > img { position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; inset:auto !important; width:104px !important; height:104px !important; min-width:104px !important; min-height:104px !important; max-width:104px !important; max-height:104px !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center !important; border-radius:27px !important; transform:none !important; mix-blend-mode:normal !important; filter: drop-shadow(0 8px 14px rgba(39,47,91,.12)) !important; } /* ================================================== NORDVPN — PUNA IKONICA, BEZ BORDERA ================================================== */ html body .products-grid .product-card:nth-child(6) .product-logo { width:132px !important; height:132px !important; padding:0 !important; margin:48px auto 22px !important; overflow:hidden !important; border:none !important; outline:none !important; box-shadow:none !important; background:transparent !important; border-radius:37px !important; } /* Gasi beli glass sloj */ html body .products-grid .product-card:nth-child(6) .product-logo::before, html body .products-grid .product-card:nth-child(6) .product-logo::after { display:none !important; content:none !important; } /* NordVPN slika zauzima celu kutiju */ html body .products-grid .product-card:nth-child(6) .product-logo > img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; display:block !important; object-fit:cover !important; object-position:center !important; border-radius:37px !important; transform:none !important; filter:none !important; mix-blend-mode:normal !important; } /* ================================================== NORDVPN — ISTI KVADRATNI OBLIK KAO OSTALE IKONE ================================================== */ html body .products-grid .product-card:nth-child(6) .product-logo { width:132px !important; height:132px !important; min-width:132px !important; min-height:132px !important; max-width:132px !important; max-height:132px !important; padding:0 !important; overflow:hidden !important; border-radius:37px !important; background:#4a86f7 !important; border:none !important; outline:none !important; box-shadow:none !important; } /* Gasi bele glass slojeve */ html body .products-grid .product-card:nth-child(6) .product-logo::before, html body .products-grid .product-card:nth-child(6) .product-logo::after { display:none !important; content:none !important; } /* Raširi postojeću NordVPN sliku preko cele zaobljene kocke */ html body .products-grid .product-card:nth-child(6) .product-logo > img { position:absolute !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important; width:148px !important; height:148px !important; min-width:148px !important; min-height:148px !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; border-radius:0 !important; transform:translate(-50%, -50%) scale(1.12) !important; transform-origin:center !important; filter:none !important; mix-blend-mode:normal !important; } /* WINDOWS */ html body .products-grid .product-card:nth-child(8) .product-logo > img { width:90px !important; height:90px !important; min-width:90px !important; min-height:90px !important; max-width:90px !important; max-height:90px !important; object-fit:contain !important; transform:none !important; } /* Figma */ html body .products-grid .product-card:nth-child(4) .product-logo > img { width:105px !important; height:105px !important; min-width:105px !important; min-height:105px !important; max-width:105px !important; max-height:105px !important; object-fit:contain !important; transform:none !important; } /* Microsoft */ html body .products-grid .product-card:nth-child(5) .product-logo > img { width:95px !important; height:95px !important; min-width:95px !important; min-height:95px !important; max-width:95px !important; max-height:95px !important; object-fit:contain !important; transform:none !important; } /* FIGMA */ html body .products-grid .product-card:nth-child(4) .product-logo img.figma-logo-small { position: static !important; width: 72% !important; height: 72% !important; min-width: 72% !important; min-height: 72% !important; max-width: 72% !important; max-height: 72% !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; transform: none !important; translate: none !important; scale: none !important; } /* MICROSOFT */ html body .products-grid .product-card:nth-child(5) .product-logo img.microsoft-logo-small { position: static !important; width: 76% !important; height: 76% !important; min-width: 76% !important; min-height: 76% !important; max-width: 76% !important; max-height: 76% !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; transform: none !important; translate: none !important; scale: none !important; } /* GEMINI */ html body .products-grid .product-card:nth-child(3) .product-logo img { position: static !important; width: 76% !important; height: 76% !important; min-width: 76% !important; min-height: 76% !important; max-width: 76% !important; max-height: 76% !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; transform: none !important; translate: none !important; scale: none !important; } /* ================================================== HERO — ADOBE I CANVA ISTI KAO DOLE, BEZ BORDERA ================================================== */ /* Adobe i Canva hero logo kutije */ html body .hero-slider .hero-product-card:nth-child(1) .product-logo, html body .hero-slider .hero-product-card:nth-child(2) .product-logo { width:132px !important; height:132px !important; min-width:132px !important; min-height:132px !important; max-width:132px !important; max-height:132px !important; padding:0 !important; overflow:hidden !important; border:none !important; outline:none !important; box-shadow:none !important; background:transparent !important; border-radius:37px !important; } /* Gasi dodatni beli glass sloj */ html body .hero-slider .hero-product-card:nth-child(1) .product-logo::before, html body .hero-slider .hero-product-card:nth-child(1) .product-logo::after, html body .hero-slider .hero-product-card:nth-child(2) .product-logo::before, html body .hero-slider .hero-product-card:nth-child(2) .product-logo::after { content:none !important; display:none !important; } /* Adobe i Canva slike popunjavaju celu kutiju */ html body .hero-slider .hero-product-card:nth-child(1) .product-logo > img, html body .hero-slider .hero-product-card:nth-child(2) .product-logo > img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; display:block !important; object-fit:cover !important; object-position:center !important; border-radius:37px !important; transform:none !important; filter:none !important; } /* ================================================== HERO GEMINI — ISTI KAO GEMINI DOLE ================================================== */ html body .hero-slider .hero-product-card:nth-child(3) .product-logo { width:132px !important; height:132px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; border-radius:37px !important; background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(246,248,255,.88) ) !important; border:1px solid rgba(210,218,239,.78) !important; outline:1px solid rgba(255,255,255,.85) !important; outline-offset:-3px !important; box-shadow: 0 20px 42px rgba(44,54,102,.11), 0 7px 18px rgba(56,66,112,.05), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(127,139,187,.07) !important; } html body .hero-slider .hero-product-card:nth-child(3) .product-logo > img { position:static !important; width:76% !important; height:76% !important; min-width:76% !important; min-height:76% !important; max-width:76% !important; max-height:76% !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center !important; border-radius:0 !important; transform:none !important; filter:none !important; } /* HERO GEMINI — smanji i border i ikonicu */ html body .hero-slider .hero-product-card:nth-child(3) .product-logo { width:118px !important; height:118px !important; min-width:118px !important; min-height:118px !important; max-width:118px !important; max-height:118px !important; border-radius:33px !important; } /* unutrašnja Gemini ikonica */ html body .hero-slider .hero-product-card:nth-child(3) .product-logo > img { width:72% !important; height:72% !important; min-width:72% !important; min-height:72% !important; max-width:72% !important; max-height:72% !important; object-fit:contain !important; transform:none !important; } /* HERO GEMINI */ html body .hero-slider .hero-product-card:nth-child(3) .product-logo{ width:126px !important; height:126px !important; min-width:126px !important; min-height:126px !important; max-width:126px !important; max-height:126px !important; border-radius:36px !important; } html body .hero-slider .hero-product-card:nth-child(3) .product-logo img{ width:68% !important; height:68% !important; object-fit:contain !important; } /* HERO GEMINI — border isti kao ostali, samo ikonica manja */ html body .hero-slider .hero-product-card:nth-child(3) .product-logo { width:132px !important; height:132px !important; min-width:132px !important; min-height:132px !important; max-width:132px !important; max-height:132px !important; border-radius:37px !important; } html body .hero-slider .hero-product-card:nth-child(3) .product-logo > img { width:66% !important; height:66% !important; min-width:66% !important; min-height:66% !important; max-width:66% !important; max-height:66% !important; object-fit:contain !important; transform:none !important; } /* ================================================== HERO LOGOTIPI — ISTA POZICIJA I ISTA VELIČINA Adobe, Canva i Gemini ================================================== */ /* Sve tri hero logo kutije identične */ html body .hero-slider .hero-product-card:nth-child(1) .product-logo, html body .hero-slider .hero-product-card:nth-child(2) .product-logo, html body .hero-slider .hero-product-card:nth-child(3) .product-logo { position:relative !important; width:132px !important; height:132px !important; min-width:132px !important; min-height:132px !important; max-width:132px !important; max-height:132px !important; flex:0 0 132px !important; margin:46px auto 28px !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; border-radius:37px !important; transform:none !important; translate:none !important; scale:none !important; } /* Adobe i Canva — puna slika, bez dodatnog bordera */ html body .hero-slider .hero-product-card:nth-child(1) .product-logo, html body .hero-slider .hero-product-card:nth-child(2) .product-logo { background:transparent !important; border:none !important; outline:none !important; box-shadow:none !important; } /* Gemini — ista kutija, ali sa belim glass borderom */ html body .hero-slider .hero-product-card:nth-child(3) .product-logo { background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(246,248,255,.88) ) !important; border:1px solid rgba(210,218,239,.78) !important; outline:1px solid rgba(255,255,255,.85) !important; outline-offset:-3px !important; box-shadow: 0 20px 42px rgba(44,54,102,.11), 0 7px 18px rgba(56,66,112,.05), inset 0 2px 2px rgba(255,255,255,1), inset 0 -2px 4px rgba(127,139,187,.07) !important; } /* Gasi stare različite pseudo-elemente */ html body .hero-slider .hero-product-card:nth-child(1) .product-logo::before, html body .hero-slider .hero-product-card:nth-child(1) .product-logo::after, html body .hero-slider .hero-product-card:nth-child(2) .product-logo::before, html body .hero-slider .hero-product-card:nth-child(2) .product-logo::after { content:none !important; display:none !important; } /* Adobe i Canva pune ceo prostor */ html body .hero-slider .hero-product-card:nth-child(1) .product-logo > img, html body .hero-slider .hero-product-card:nth-child(2) .product-logo > img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; display:block !important; object-fit:cover !important; object-position:center !important; border-radius:37px !important; transform:none !important; filter:none !important; } /* Gemini znak unutar iste kutije */ html body .hero-slider .hero-product-card:nth-child(3) .product-logo > img { position:static !important; width:70% !important; height:70% !important; min-width:70% !important; min-height:70% !important; max-width:70% !important; max-height:70% !important; margin:0 !important; padding:0 !important; object-fit:contain !important; object-position:center !important; border-radius:0 !important; transform:none !important; filter:none !important; } /* Naslovi počinju sa istog mesta */ html body .hero-slider .hero-product-card .product-title { min-height:42px !important; margin-top:0 !important; } /* Sprečava pomeranje pri promeni slajda */ html body .hero-slider .hero-product-card { align-items:center !important; } html body .hero-slider .hero-product-card .product-logo { align-self:center !important; } /* ========================================== FINAL LOGO GLASS GLOW ========================================== */ .products-grid .product-logo{ position:relative !important; overflow:visible !important; isolation:isolate !important; } .products-grid .product-logo::before{ content:"" !important; position:absolute !important; inset:-3px !important; border-radius:44px !important; z-index:-1 !important; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.15) 70%, transparent 100%) !important; filter:blur(10px) !important; opacity:1 !important; } .products-grid .product-logo::after{ display:none !important; }