/* * Velocity Admini + Vodstvo V34 * CSS-only polish over V33. * Scoped only to Admini/Vodstvo body classes. */ /* ========================================================= GLAVNI OWNER — uredniji featured layout ========================================================= */ body.vc-v33-staff .vc-main-owner-card { text-align: left !important; position: relative; overflow: hidden; isolation: isolate; border-color: rgba(67, 174, 244, .48) !important; background: radial-gradient(circle at 84% 18%, rgba(33,145,235,.16), transparent 34%), linear-gradient(145deg, rgba(8,31,48,.98), rgba(4,17,29,.98)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 48px rgba(0,0,0,.24), 0 0 34px rgba(23,139,230,.075) !important; } /* Owner name + crown: always clean left alignment */ body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap { width: fit-content !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; margin-left: 0 !important; margin-right: auto !important; text-align: left !important; } /* Remove the small underline animation from owner only; it was the part that can look awkward in centered layouts. */ body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap::after { display: none !important; } /* Keep title/name itself aligned with icon */ body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap h1, body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap h2, body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap h3, body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap h4, body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap strong, body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap b { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } /* Crown badge looks more intentional / featured */ body.vc-v33-staff .vc-main-owner-card .vc-v33-role-icon.is-crown { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; border-radius: 9px !important; color: #b8e3ff !important; border-color: rgba(88,194,255,.56) !important; background: radial-gradient(circle at 32% 24%, rgba(90,204,255,.30), transparent 52%), linear-gradient(150deg, rgba(14,64,98,.92), rgba(7,30,48,.96)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px rgba(35,157,243,.16) !important; } body.vc-v33-staff .vc-main-owner-card .vc-v33-role-icon.is-crown svg { width: 17px !important; height: 17px !important; } /* Decorative right-side glow, no layout impact */ body.vc-v33-staff .vc-main-owner-card::before { width: 260px !important; height: 260px !important; right: -110px !important; top: -125px !important; background: radial-gradient( circle, rgba(44,169,255,.22) 0%, rgba(23,111,192,.08) 40%, transparent 70% ) !important; opacity: .78 !important; } /* ========================================================= ADMINI + VODSTVO — poboljšani hover ========================================================= */ body.vc-v33-admins .staff-card, body.vc-v33-admins .panel.staff-card, body.vc-v33-staff .vc-main-owner-card, body.vc-v33-staff .vc-management-card { transform: translateZ(0); transition: transform .24s cubic-bezier(.2,.75,.2,1), border-color .24s ease, box-shadow .24s ease, filter .24s ease !important; } @media (hover:hover) and (pointer:fine) { body.vc-v33-admins .staff-card:hover, body.vc-v33-admins .panel.staff-card:hover, body.vc-v33-staff .vc-main-owner-card:hover, body.vc-v33-staff .vc-management-card:hover { transform: translateY(-7px) scale(1.012) !important; border-color: rgba(66,184,255,.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 26px 62px rgba(0,0,0,.30), 0 0 0 1px rgba(48,170,248,.055), 0 0 38px rgba(25,149,242,.15) !important; filter: saturate(1.055) brightness(1.018) !important; } /* stronger but still subtle blue bloom */ body.vc-v33-admins .staff-card:hover::before, body.vc-v33-admins .panel.staff-card:hover::before, body.vc-v33-staff .vc-main-owner-card:hover::before, body.vc-v33-staff .vc-management-card:hover::before { transform: translate(-24px, 18px) scale(1.20) !important; opacity: 1 !important; } /* avatars/photos lift slightly less than whole card */ body.vc-v33-admins .staff-card:hover img, body.vc-v33-admins .panel.staff-card:hover img, body.vc-v33-staff .vc-main-owner-card:hover img, body.vc-v33-staff .vc-management-card:hover img { transform: scale(1.045) !important; filter: brightness(1.05) saturate(1.09) contrast(1.02) !important; box-shadow: 0 0 0 1px rgba(77,191,255,.58), 0 13px 31px rgba(0,0,0,.31), 0 0 30px rgba(34,158,245,.15) !important; } /* role badges react with the card */ body.vc-v33-admins .staff-card:hover .vc-v33-role-icon, body.vc-v33-admins .panel.staff-card:hover .vc-v33-role-icon, body.vc-v33-staff .vc-main-owner-card:hover .vc-v33-role-icon, body.vc-v33-staff .vc-management-card:hover .vc-v33-role-icon { transform: translateY(-2px) rotate(-4deg) scale(1.05) !important; border-color: rgba(88,199,255,.70) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 24px rgba(38,165,247,.22) !important; } } /* Top highlight becomes clearer on hover */ body.vc-v33-admins .staff-card::after, body.vc-v33-admins .panel.staff-card::after, body.vc-v33-staff .vc-main-owner-card::after, body.vc-v33-staff .vc-management-card::after { opacity: .62 !important; transition: opacity .24s ease, left .24s ease, right .24s ease !important; } @media (hover:hover) and (pointer:fine) { body.vc-v33-admins .staff-card:hover::after, body.vc-v33-admins .panel.staff-card:hover::after, body.vc-v33-staff .vc-main-owner-card:hover::after, body.vc-v33-staff .vc-management-card:hover::after { opacity: 1 !important; left: 8px !important; right: 8px !important; } } /* Mobile: owner stays clean, no oversized effects */ @media (max-width:680px) { body.vc-v33-staff .vc-main-owner-card { text-align: left !important; } body.vc-v33-staff .vc-main-owner-card .vc-v33-name-wrap { gap: 8px !important; } body.vc-v33-staff .vc-main-owner-card .vc-v33-role-icon.is-crown { width: 26px !important; height: 26px !important; flex-basis: 26px !important; } body.vc-v33-staff .vc-main-owner-card .vc-v33-role-icon.is-crown svg { width: 15px !important; height: 15px !important; } } @media (prefers-reduced-motion: reduce) { body.vc-v33-admins .staff-card, body.vc-v33-admins .panel.staff-card, body.vc-v33-staff .vc-main-owner-card, body.vc-v33-staff .vc-management-card, body.vc-v33-admins .staff-card img, body.vc-v33-admins .panel.staff-card img, body.vc-v33-staff .vc-main-owner-card img, body.vc-v33-staff .vc-management-card img, .vc-v33-role-icon { transition: none !important; transform: none !important; } }